summaryrefslogtreecommitdiff
path: root/spec/frontend
diff options
context:
space:
mode:
authorGitLab Bot <gitlab-bot@gitlab.com>2020-04-01 09:07:45 +0000
committerGitLab Bot <gitlab-bot@gitlab.com>2020-04-01 09:07:45 +0000
commitb11f7057d067885619ee3e513751f180b2e8ad85 (patch)
treedfb3077ea8716ed217f5ce4324be4e25a450c599 /spec/frontend
parente50050a8756a20b6aa118edbad3369674e4c63ba (diff)
downloadgitlab-ce-b11f7057d067885619ee3e513751f180b2e8ad85.tar.gz
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
-rw-r--r--spec/frontend/helpers/user_mock_data_helper.js28
-rw-r--r--spec/frontend/sidebar/assignees_spec.js6
-rw-r--r--spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap14
-rw-r--r--spec/frontend/snippets/components/snippet_blob_edit_spec.js23
-rw-r--r--spec/frontend/snippets/components/snippet_description_edit_spec.js15
-rw-r--r--spec/frontend/snippets/components/snippet_visibility_edit_spec.js124
6 files changed, 137 insertions, 73 deletions
diff --git a/spec/frontend/helpers/user_mock_data_helper.js b/spec/frontend/helpers/user_mock_data_helper.js
index 6999fa1f8a1..a6adc9dc3a0 100644
--- a/spec/frontend/helpers/user_mock_data_helper.js
+++ b/spec/frontend/helpers/user_mock_data_helper.js
@@ -1,14 +1,34 @@
+let id = 1;
+
+// Code taken from: https://gist.github.com/6174/6062387
+const getRandomString = () =>
+ Math.random()
+ .toString(36)
+ .substring(2, 15) +
+ Math.random()
+ .toString(36)
+ .substring(2, 15);
+
+const getRandomUrl = () => `https://${getRandomString()}.com/${getRandomString()}`;
+
export default {
createNumberRandomUsers(numberUsers) {
const users = [];
for (let i = 0; i < numberUsers; i += 1) {
users.push({
- avatar: 'https://gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
- id: i + 1,
- name: `GitLab User ${i}`,
- username: `gitlab${i}`,
+ avatar_url: getRandomUrl(),
+ id: id + 1,
+ name: getRandomString(),
+ username: getRandomString(),
+ user_path: getRandomUrl(),
});
+
+ id += 1;
}
return users;
},
+
+ createRandomUser() {
+ return this.createNumberRandomUsers(1)[0];
+ },
};
diff --git a/spec/frontend/sidebar/assignees_spec.js b/spec/frontend/sidebar/assignees_spec.js
index 0cb182b2df4..3418680f8ea 100644
--- a/spec/frontend/sidebar/assignees_spec.js
+++ b/spec/frontend/sidebar/assignees_spec.js
@@ -101,14 +101,14 @@ describe('Assignee component', () => {
const first = collapsedChildren.at(0);
- expect(first.find('.avatar').attributes('src')).toBe(users[0].avatar);
+ expect(first.find('.avatar').attributes('src')).toBe(users[0].avatar_url);
expect(first.find('.avatar').attributes('alt')).toBe(`${users[0].name}'s avatar`);
expect(trimText(first.find('.author').text())).toBe(users[0].name);
const second = collapsedChildren.at(1);
- expect(second.find('.avatar').attributes('src')).toBe(users[1].avatar);
+ expect(second.find('.avatar').attributes('src')).toBe(users[1].avatar_url);
expect(second.find('.avatar').attributes('alt')).toBe(`${users[1].name}'s avatar`);
expect(trimText(second.find('.author').text())).toBe(users[1].name);
@@ -127,7 +127,7 @@ describe('Assignee component', () => {
const first = collapsedChildren.at(0);
- expect(first.find('.avatar').attributes('src')).toBe(users[0].avatar);
+ expect(first.find('.avatar').attributes('src')).toBe(users[0].avatar_url);
expect(first.find('.avatar').attributes('alt')).toBe(`${users[0].name}'s avatar`);
expect(trimText(first.find('.author').text())).toBe(users[0].name);
diff --git a/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap b/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap
index 4f1d46dffef..be75a5bfbdc 100644
--- a/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap
+++ b/spec/frontend/snippets/components/__snapshots__/snippet_visibility_edit_spec.js.snap
@@ -23,7 +23,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
id="visibility-level-setting"
>
<gl-form-radio-group-stub
- checked="0"
+ checked="private"
disabledfield="disabled"
htmlfield="html"
options=""
@@ -33,7 +33,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
>
<gl-form-radio-stub
class="mb-3"
- value="0"
+ value="private"
>
<div
class="d-flex align-items-center"
@@ -44,7 +44,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
/>
<span
- class="font-weight-bold ml-1"
+ class="font-weight-bold ml-1 js-visibility-option"
>
Private
</span>
@@ -52,7 +52,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
</gl-form-radio-stub>
<gl-form-radio-stub
class="mb-3"
- value="1"
+ value="internal"
>
<div
class="d-flex align-items-center"
@@ -63,7 +63,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
/>
<span
- class="font-weight-bold ml-1"
+ class="font-weight-bold ml-1 js-visibility-option"
>
Internal
</span>
@@ -71,7 +71,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
</gl-form-radio-stub>
<gl-form-radio-stub
class="mb-3"
- value="2"
+ value="public"
>
<div
class="d-flex align-items-center"
@@ -82,7 +82,7 @@ exports[`Snippet Visibility Edit component rendering matches the snapshot 1`] =
/>
<span
- class="font-weight-bold ml-1"
+ class="font-weight-bold ml-1 js-visibility-option"
>
Public
</span>
diff --git a/spec/frontend/snippets/components/snippet_blob_edit_spec.js b/spec/frontend/snippets/components/snippet_blob_edit_spec.js
index 42b49c50c75..334fe7196a4 100644
--- a/spec/frontend/snippets/components/snippet_blob_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_blob_edit_spec.js
@@ -2,18 +2,21 @@ import SnippetBlobEdit from '~/snippets/components/snippet_blob_edit.vue';
import BlobHeaderEdit from '~/blob/components/blob_edit_header.vue';
import BlobContentEdit from '~/blob/components/blob_edit_content.vue';
import { shallowMount } from '@vue/test-utils';
+import { nextTick } from 'vue';
jest.mock('~/blob/utils', () => jest.fn());
describe('Snippet Blob Edit component', () => {
let wrapper;
- const content = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
+ const value = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
const fileName = 'lorem.txt';
+ const findHeader = () => wrapper.find(BlobHeaderEdit);
+ const findContent = () => wrapper.find(BlobContentEdit);
function createComponent() {
wrapper = shallowMount(SnippetBlobEdit, {
propsData: {
- content,
+ value,
fileName,
},
});
@@ -33,8 +36,20 @@ describe('Snippet Blob Edit component', () => {
});
it('renders required components', () => {
- expect(wrapper.contains(BlobHeaderEdit)).toBe(true);
- expect(wrapper.contains(BlobContentEdit)).toBe(true);
+ expect(findHeader().exists()).toBe(true);
+ expect(findContent().exists()).toBe(true);
+ });
+ });
+
+ describe('functionality', () => {
+ it('emits "name-change" event when the file name gets changed', () => {
+ expect(wrapper.emitted('name-change')).toBeUndefined();
+ const newFilename = 'foo.bar';
+ findHeader().vm.$emit('input', newFilename);
+
+ return nextTick().then(() => {
+ expect(wrapper.emitted('name-change')[0]).toEqual([newFilename]);
+ });
});
});
});
diff --git a/spec/frontend/snippets/components/snippet_description_edit_spec.js b/spec/frontend/snippets/components/snippet_description_edit_spec.js
index 167489dc004..c5e667747c6 100644
--- a/spec/frontend/snippets/components/snippet_description_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_description_edit_spec.js
@@ -6,11 +6,12 @@ describe('Snippet Description Edit component', () => {
const defaultDescription = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
const markdownPreviewPath = 'foo/';
const markdownDocsPath = 'help/';
+ const findTextarea = () => wrapper.find('textarea');
- function createComponent(description = defaultDescription) {
+ function createComponent(value = defaultDescription) {
wrapper = shallowMount(SnippetDescriptionEdit, {
propsData: {
- description,
+ value,
markdownPreviewPath,
markdownDocsPath,
},
@@ -49,4 +50,14 @@ describe('Snippet Description Edit component', () => {
expect(isHidden('.js-expanded')).toBe(true);
});
});
+
+ describe('functionality', () => {
+ it('emits "input" event when description is changed', () => {
+ expect(wrapper.emitted('input')).toBeUndefined();
+ const newDescription = 'dummy';
+ findTextarea().setValue(newDescription);
+
+ expect(wrapper.emitted('input')[0]).toEqual([newDescription]);
+ });
+ });
});
diff --git a/spec/frontend/snippets/components/snippet_visibility_edit_spec.js b/spec/frontend/snippets/components/snippet_visibility_edit_spec.js
index 5104d742bb3..0bdef71bc08 100644
--- a/spec/frontend/snippets/components/snippet_visibility_edit_spec.js
+++ b/spec/frontend/snippets/components/snippet_visibility_edit_spec.js
@@ -1,37 +1,42 @@
import SnippetVisibilityEdit from '~/snippets/components/snippet_visibility_edit.vue';
-import { GlFormRadio } from '@gitlab/ui';
-import { SNIPPET_VISIBILITY } from '~/snippets/constants';
+import { GlFormRadio, GlIcon, GlFormRadioGroup, GlLink } from '@gitlab/ui';
+import {
+ SNIPPET_VISIBILITY,
+ SNIPPET_VISIBILITY_PRIVATE,
+ SNIPPET_VISIBILITY_INTERNAL,
+ SNIPPET_VISIBILITY_PUBLIC,
+} from '~/snippets/constants';
import { mount, shallowMount } from '@vue/test-utils';
describe('Snippet Visibility Edit component', () => {
let wrapper;
- let radios;
const defaultHelpLink = '/foo/bar';
- const defaultVisibilityLevel = '0';
+ const defaultVisibilityLevel = 'private';
- function findElements(sel) {
- return wrapper.findAll(sel);
- }
-
- function createComponent(
- {
- helpLink = defaultHelpLink,
- isProjectSnippet = false,
- visibilityLevel = defaultVisibilityLevel,
- } = {},
- deep = false,
- ) {
+ function createComponent(propsData = {}, deep = false) {
const method = deep ? mount : shallowMount;
wrapper = method.call(this, SnippetVisibilityEdit, {
propsData: {
- helpLink,
- isProjectSnippet,
- visibilityLevel,
+ helpLink: defaultHelpLink,
+ isProjectSnippet: false,
+ value: defaultVisibilityLevel,
+ ...propsData,
},
});
- radios = findElements(GlFormRadio);
}
+ const findLabel = () => wrapper.find('label');
+ const findRadios = () => wrapper.find(GlFormRadioGroup).findAll(GlFormRadio);
+ const findRadiosData = () =>
+ findRadios().wrappers.map(x => {
+ return {
+ value: x.find('input').attributes('value'),
+ icon: x.find(GlIcon).props('name'),
+ description: x.find('.help-text').text(),
+ text: x.find('.js-visibility-option').text(),
+ };
+ });
+
afterEach(() => {
wrapper.destroy();
});
@@ -42,53 +47,66 @@ describe('Snippet Visibility Edit component', () => {
expect(wrapper.element).toMatchSnapshot();
});
- it.each`
- label | value
- ${SNIPPET_VISIBILITY.private.label} | ${`0`}
- ${SNIPPET_VISIBILITY.internal.label} | ${`1`}
- ${SNIPPET_VISIBILITY.public.label} | ${`2`}
- `('should render correct $label label', ({ label, value }) => {
- createComponent();
- const radio = radios.at(parseInt(value, 10));
+ it('renders visibility options', () => {
+ createComponent({}, true);
- expect(radio.attributes('value')).toBe(value);
- expect(radio.text()).toContain(label);
+ expect(findRadiosData()).toEqual([
+ {
+ value: SNIPPET_VISIBILITY_PRIVATE,
+ icon: SNIPPET_VISIBILITY.private.icon,
+ text: SNIPPET_VISIBILITY.private.label,
+ description: SNIPPET_VISIBILITY.private.description,
+ },
+ {
+ value: SNIPPET_VISIBILITY_INTERNAL,
+ icon: SNIPPET_VISIBILITY.internal.icon,
+ text: SNIPPET_VISIBILITY.internal.label,
+ description: SNIPPET_VISIBILITY.internal.description,
+ },
+ {
+ value: SNIPPET_VISIBILITY_PUBLIC,
+ icon: SNIPPET_VISIBILITY.public.icon,
+ text: SNIPPET_VISIBILITY.public.label,
+ description: SNIPPET_VISIBILITY.public.description,
+ },
+ ]);
});
- describe('rendered help-text', () => {
- it.each`
- description | value | label
- ${SNIPPET_VISIBILITY.private.description} | ${`0`} | ${SNIPPET_VISIBILITY.private.label}
- ${SNIPPET_VISIBILITY.internal.description} | ${`1`} | ${SNIPPET_VISIBILITY.internal.label}
- ${SNIPPET_VISIBILITY.public.description} | ${`2`} | ${SNIPPET_VISIBILITY.public.label}
- `('should render correct $label description', ({ description, value }) => {
- createComponent({}, true);
-
- const help = findElements('.help-text').at(parseInt(value, 10));
+ it('when project snippet, renders special private description', () => {
+ createComponent({ isProjectSnippet: true }, true);
- expect(help.text()).toBe(description);
+ expect(findRadiosData()[0]).toEqual({
+ value: SNIPPET_VISIBILITY_PRIVATE,
+ icon: SNIPPET_VISIBILITY.private.icon,
+ text: SNIPPET_VISIBILITY.private.label,
+ description: SNIPPET_VISIBILITY.private.description_project,
});
+ });
+
+ it('renders label help link', () => {
+ createComponent();
- it('renders correct Private description for a project snippet', () => {
- createComponent({ isProjectSnippet: true }, true);
+ expect(
+ findLabel()
+ .find(GlLink)
+ .attributes('href'),
+ ).toBe(defaultHelpLink);
+ });
- const helpText = findElements('.help-text')
- .at(0)
- .text();
+ it('when helpLink is not defined, does not render label help link', () => {
+ createComponent({ helpLink: null });
- expect(helpText).not.toContain(SNIPPET_VISIBILITY.private.description);
- expect(helpText).toBe(SNIPPET_VISIBILITY.private.description_project);
- });
+ expect(findLabel().contains(GlLink)).toBe(false);
});
});
describe('functionality', () => {
it('pre-selects correct option in the list', () => {
- const pos = 1;
+ const value = SNIPPET_VISIBILITY_INTERNAL;
+
+ createComponent({ value });
- createComponent({ visibilityLevel: `${pos}` }, true);
- const radio = radios.at(pos);
- expect(radio.find('input[type="radio"]').element.checked).toBe(true);
+ expect(wrapper.find(GlFormRadioGroup).attributes('checked')).toBe(value);
});
});
});