debian-mirror-gitlab/spec/frontend/projects/project_new_spec.js
2023-04-23 21:23:45 +05:30

314 lines
9.9 KiB
JavaScript

import { setHTMLFixture, resetHTMLFixture } from 'helpers/fixtures';
import { TEST_HOST } from 'helpers/test_constants';
import projectNew from '~/projects/project_new';
import { checkRules } from '~/projects/project_name_rules';
import { mockTracking, triggerEvent, unmockTracking } from 'helpers/tracking_helper';
describe('New Project', () => {
let $projectImportUrl;
let $projectPath;
let $projectName;
let $projectNameError;
let $projectNameDescription;
const mockKeyup = (el) => el.dispatchEvent(new KeyboardEvent('keyup'));
const mockChange = (el) => el.dispatchEvent(new Event('change'));
beforeEach(() => {
setHTMLFixture(`
<div class="tab-pane active">
<div class='toggle-import-form'>
<form id="new_project">
<div class='import-url-data'>
<div class="form-group">
<input id="project_import_url" />
</div>
<div id="import-url-auth-method">
<div class="form-group">
<input id="project-import-url-user" />
</div>
<div class="form-group">
<input id="project_import_url_password" />
</div>
</div>
<input id="project_name" />
<small id="js-project-name-description" />
<div class="gl-field-error gl-display-none" id="js-project-name-error" />
<input id="project_path" />
</div>
<div class="js-user-readme-repo"></div>
<button class="js-create-project-button"/>
</form>
</div>
</div>
`);
$projectImportUrl = document.querySelector('#project_import_url');
$projectPath = document.querySelector('#project_path');
$projectName = document.querySelector('#project_name');
$projectNameError = document.querySelector('#js-project-name-error');
$projectNameDescription = document.querySelector('#js-project-name-description');
});
afterEach(() => {
resetHTMLFixture();
});
const setValueAndTriggerEvent = (el, value, event) => {
event(el);
el.value = value;
};
describe('tracks manual path input', () => {
let trackingSpy;
beforeEach(() => {
trackingSpy = mockTracking('_category_', undefined, jest.spyOn);
projectNew.bindEvents();
$projectPath.oldInputValue = '_old_value_';
});
afterEach(() => {
unmockTracking();
});
it('tracks the event', () => {
$projectPath.value = '_new_value_';
triggerEvent($projectPath, 'blur');
expect(trackingSpy).toHaveBeenCalledWith(undefined, 'user_input_path_slug', {
label: 'new_project_form',
});
});
it('does not track the event when there has been no change', () => {
$projectPath.value = '_old_value_';
triggerEvent($projectPath, 'blur');
expect(trackingSpy).not.toHaveBeenCalled();
});
});
describe('tracks manual name input', () => {
beforeEach(() => {
projectNew.bindEvents();
});
afterEach(() => {
unmockTracking();
});
it('no error message by default', () => {
expect($projectNameError.classList.contains('gl-display-none')).toBe(true);
});
it('show error message if name is validate', () => {
$projectName.value = '.validate!Name';
triggerEvent($projectName, 'change');
expect($projectNameError.innerText).toBe(
'Name must start with a letter, digit, emoji, or underscore.',
);
expect($projectNameError.classList.contains('gl-display-none')).toBe(false);
expect($projectNameDescription.classList.contains('gl-display-none')).toBe(true);
});
});
describe('project name rule', () => {
describe("Name must start with a letter, digit, emoji, or '_'", () => {
const errormsg = 'Name must start with a letter, digit, emoji, or underscore.';
it("'.foo' should error", () => {
const text = '.foo';
expect(checkRules(text)).toBe(errormsg);
});
it('_foo should passed', () => {
const text = '_foo';
expect(checkRules(text)).toBe('');
});
});
describe("Name can contain only letters, digits, emojis, '_', '.', '+', dashes, or spaces", () => {
const errormsg =
'Name can contain only lowercase or uppercase letters, digits, emojis, spaces, dots, underscores, dashes, or pluses.';
it("'foo(#^.^#)foo' should error", () => {
const text = 'foo(#^.^#)foo';
expect(checkRules(text)).toBe(errormsg);
});
it("'foo123😊_.+- ' should passed", () => {
const text = 'foo123😊_.+- ';
expect(checkRules(text)).toBe('');
});
});
});
describe('deriveProjectPathFromUrl', () => {
const dummyImportUrl = `${TEST_HOST}/dummy/import/url.git`;
beforeEach(() => {
projectNew.bindEvents();
setValueAndTriggerEvent($projectPath, dummyImportUrl, mockKeyup);
});
it('does not change project path for disabled $projectImportUrl', () => {
$projectImportUrl.setAttribute('disabled', true);
projectNew.deriveProjectPathFromUrl($projectImportUrl);
expect($projectPath.value).toEqual(dummyImportUrl);
});
describe('for enabled $projectImportUrl', () => {
beforeEach(() => {
$projectImportUrl.setAttribute('disabled', false);
});
it('does not change project path if it is set by user', () => {
mockKeyup($projectPath);
projectNew.deriveProjectPathFromUrl($projectImportUrl);
expect($projectPath.value).toEqual(dummyImportUrl);
});
it('does not change project path for empty $projectImportUrl', () => {
$projectImportUrl.value = '';
projectNew.deriveProjectPathFromUrl($projectImportUrl);
expect($projectPath.value).toEqual(dummyImportUrl);
});
it('does not change project path for whitespace $projectImportUrl', () => {
$projectImportUrl.value = ' ';
projectNew.deriveProjectPathFromUrl($projectImportUrl);
expect($projectPath.value).toEqual(dummyImportUrl);
});
it('does not change project path for $projectImportUrl without slashes', () => {
$projectImportUrl.value = 'has-no-slash';
projectNew.deriveProjectPathFromUrl($projectImportUrl);
expect($projectPath.value).toEqual(dummyImportUrl);
});
it('changes project path to last $projectImportUrl component', () => {
$projectImportUrl.value = '/this/is/last';
projectNew.deriveProjectPathFromUrl($projectImportUrl);
expect($projectPath.value).toEqual('last');
});
it('ignores trailing slashes in $projectImportUrl', () => {
$projectImportUrl.value = '/has/trailing/slash/';
projectNew.deriveProjectPathFromUrl($projectImportUrl);
expect($projectPath.value).toEqual('slash');
});
it('ignores fragment identifier in $projectImportUrl', () => {
$projectImportUrl.value = '/this/has/a#fragment-identifier/';
projectNew.deriveProjectPathFromUrl($projectImportUrl);
expect($projectPath.value).toEqual('a');
});
it('ignores query string in $projectImportUrl', () => {
$projectImportUrl.value = '/url/with?query=string';
projectNew.deriveProjectPathFromUrl($projectImportUrl);
expect($projectPath.value).toEqual('with');
});
it('ignores trailing .git in $projectImportUrl', () => {
$projectImportUrl.value = '/repository.git';
projectNew.deriveProjectPathFromUrl($projectImportUrl);
expect($projectPath.value).toEqual('repository');
});
it('changes project path for HTTPS URL in $projectImportUrl', () => {
$projectImportUrl.value = 'https://gitlab.company.com/group/project.git';
projectNew.deriveProjectPathFromUrl($projectImportUrl);
expect($projectPath.value).toEqual('project');
});
it('changes project path for SSH URL in $projectImportUrl', () => {
$projectImportUrl.value = 'git@gitlab.com:gitlab-org/gitlab-ce.git';
projectNew.deriveProjectPathFromUrl($projectImportUrl);
expect($projectPath.value).toEqual('gitlab-ce');
});
});
});
describe('deriveSlugFromProjectName', () => {
beforeEach(() => {
projectNew.bindEvents();
setValueAndTriggerEvent($projectName, '', mockKeyup);
});
it('converts project name to lower case and dash-limited slug', () => {
const dummyProjectName = 'My Awesome Project';
$projectName.value = dummyProjectName;
projectNew.onProjectNameChange($projectName, $projectPath);
expect($projectPath.value).toEqual('my-awesome-project');
});
it('does not add additional dashes in the slug if the project name already contains dashes', () => {
const dummyProjectName = 'My-Dash-Delimited Awesome Project';
$projectName.value = dummyProjectName;
projectNew.onProjectNameChange($projectName, $projectPath);
expect($projectPath.value).toEqual('my-dash-delimited-awesome-project');
});
});
describe('derivesProjectNameFromSlug', () => {
const dummyProjectPath = 'my-awesome-project';
const dummyProjectName = 'Original Awesome Project';
beforeEach(() => {
projectNew.bindEvents();
setValueAndTriggerEvent($projectPath, '', mockChange);
});
it('converts slug to humanized project name', () => {
$projectPath.value = dummyProjectPath;
mockChange($projectPath);
projectNew.onProjectPathChange($projectName, $projectPath);
expect($projectName.value).toEqual('My Awesome Project');
});
it('does not convert slug to humanized project name if a project name already exists', () => {
$projectName.value = dummyProjectName;
$projectPath.value = dummyProjectPath;
projectNew.onProjectPathChange(
$projectName,
$projectPath,
$projectName.value.trim().length > 0,
);
expect($projectName.value).toEqual(dummyProjectName);
});
});
});