diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-20 18:38:24 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-04-20 18:38:24 +0000 |
commit | 983a0bba5d2a042c4a3bbb22432ec192c7501d82 (patch) | |
tree | b153cd387c14ba23bd5a07514c7c01fddf6a78a0 /spec/frontend/vue_shared/components | |
parent | a2bddee2cdb38673df0e004d5b32d9f77797de64 (diff) | |
download | gitlab-ce-983a0bba5d2a042c4a3bbb22432ec192c7501d82.tar.gz |
Add latest changes from gitlab-org/gitlab@12-10-stable-ee
Diffstat (limited to 'spec/frontend/vue_shared/components')
5 files changed, 515 insertions, 70 deletions
diff --git a/spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap new file mode 100644 index 00000000000..df4b30f1cb8 --- /dev/null +++ b/spec/frontend/vue_shared/components/__snapshots__/awards_list_spec.js.snap @@ -0,0 +1,287 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`vue_shared/components/awards_list default matches snapshot 1`] = ` +<div + class="awards js-awards-block" +> + <button + class="btn award-control" + data-boundary="viewport" + data-original-title="Ada, Leonardo, and Marie" + data-testid="award-button" + title="" + type="button" + > + <span + data-testid="award-html" + > + + + <gl-emoji + data-fallback-src="/assets/emoji/thumbsup-59ec2457ab33e8897261d01a495f6cf5c668d0004807dc541c3b1be5294b1e61.png" + data-name="thumbsup" + data-unicode-version="6.0" + title="thumbs up sign" + > + + 👍 + + </gl-emoji> + + + </span> + + <span + class="award-control-text js-counter" + > + 3 + </span> + </button> + <button + class="btn award-control active" + data-boundary="viewport" + data-original-title="You, Ada, and Marie" + data-testid="award-button" + title="" + type="button" + > + <span + data-testid="award-html" + > + + + <gl-emoji + data-fallback-src="/assets/emoji/thumbsdown-5954334e2dae5357312b3d629f10a496c728029e02216f8c8b887f9b51561c61.png" + data-name="thumbsdown" + data-unicode-version="6.0" + title="thumbs down sign" + > + + 👎 + + </gl-emoji> + + + </span> + + <span + class="award-control-text js-counter" + > + 3 + </span> + </button> + <button + class="btn award-control" + data-boundary="viewport" + data-original-title="Ada and Jane" + data-testid="award-button" + title="" + type="button" + > + <span + data-testid="award-html" + > + + + <gl-emoji + data-fallback-src="/assets/emoji/smile-14905c372d5bf7719bd727c9efae31a03291acec79801652a23710c6848c5d14.png" + data-name="smile" + data-unicode-version="6.0" + title="smiling face with open mouth and smiling eyes" + > + + 😄 + + </gl-emoji> + + + </span> + + <span + class="award-control-text js-counter" + > + 2 + </span> + </button> + <button + class="btn award-control active" + data-boundary="viewport" + data-original-title="You, Ada, Jane, and Leonardo" + data-testid="award-button" + title="" + type="button" + > + <span + data-testid="award-html" + > + + + <gl-emoji + data-fallback-src="/assets/emoji/ok_hand-d63002dce3cc3655b67b8765b7c28d370edba0e3758b2329b60e0e61c4d8e78d.png" + data-name="ok_hand" + data-unicode-version="6.0" + title="ok hand sign" + > + + 👌 + + </gl-emoji> + + + </span> + + <span + class="award-control-text js-counter" + > + 4 + </span> + </button> + <button + class="btn award-control active" + data-boundary="viewport" + data-original-title="You" + data-testid="award-button" + title="" + type="button" + > + <span + data-testid="award-html" + > + + + <gl-emoji + data-fallback-src="/assets/emoji/cactus-2c5c4c35f26c7046fdc002b337e0d939729b33a26980e675950f9934c91e40fd.png" + data-name="cactus" + data-unicode-version="6.0" + title="cactus" + > + + 🌵 + + </gl-emoji> + + + </span> + + <span + class="award-control-text js-counter" + > + 1 + </span> + </button> + <button + class="btn award-control" + data-boundary="viewport" + data-original-title="Marie" + data-testid="award-button" + title="" + type="button" + > + <span + data-testid="award-html" + > + + + <gl-emoji + data-fallback-src="/assets/emoji/a-bddbb39e8a1d35d42b7c08e7d47f63988cb4d8614b79f74e70b9c67c221896cc.png" + data-name="a" + data-unicode-version="6.0" + title="negative squared latin capital letter a" + > + + 🅰 + + </gl-emoji> + + + </span> + + <span + class="award-control-text js-counter" + > + 1 + </span> + </button> + <button + class="btn award-control active" + data-boundary="viewport" + data-original-title="You" + data-testid="award-button" + title="" + type="button" + > + <span + data-testid="award-html" + > + + + <gl-emoji + data-fallback-src="/assets/emoji/b-722f9db9442e7c0fc0d0ac0f5291fbf47c6a0ac4d8abd42e97957da705fb82bf.png" + data-name="b" + data-unicode-version="6.0" + title="negative squared latin capital letter b" + > + + 🅱 + + </gl-emoji> + + + </span> + + <span + class="award-control-text js-counter" + > + 1 + </span> + </button> + + <div + class="award-menu-holder" + > + <button + aria-label="Add reaction" + class="award-control btn js-add-award js-test-add-button-class" + data-boundary="viewport" + data-original-title="Add reaction" + title="" + type="button" + > + <span + class="award-control-icon award-control-icon-neutral" + > + <gl-icon-stub + aria-hidden="true" + name="slight-smile" + size="16" + /> + </span> + + <span + class="award-control-icon award-control-icon-positive" + > + <gl-icon-stub + aria-hidden="true" + name="smiley" + size="16" + /> + </span> + + <span + class="award-control-icon award-control-icon-super-positive" + > + <gl-icon-stub + aria-hidden="true" + name="smiley" + size="16" + /> + </span> + + <i + aria-hidden="true" + class="fa fa-spinner fa-spin award-control-icon award-control-icon-loading" + /> + </button> + </div> +</div> +`; diff --git a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap index d837c793784..4cd03a690e9 100644 --- a/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap +++ b/spec/frontend/vue_shared/components/__snapshots__/clone_dropdown_spec.js.snap @@ -42,7 +42,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = ` <b-input-group-append-stub tag="div" > - <gl-new-button-stub + <gl-button-stub category="tertiary" data-clipboard-text="ssh://foo.bar" icon="" @@ -55,7 +55,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = ` size="16" title="Copy URL" /> - </gl-new-button-stub> + </gl-button-stub> </b-input-group-append-stub> </b-input-group-stub> </div> @@ -92,7 +92,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = ` <b-input-group-append-stub tag="div" > - <gl-new-button-stub + <gl-button-stub category="tertiary" data-clipboard-text="http://foo.bar" icon="" @@ -105,7 +105,7 @@ exports[`Clone Dropdown Button rendering matches the snapshot 1`] = ` size="16" title="Copy URL" /> - </gl-new-button-stub> + </gl-button-stub> </b-input-group-append-stub> </b-input-group-stub> </div> diff --git a/spec/frontend/vue_shared/components/awards_list_spec.js b/spec/frontend/vue_shared/components/awards_list_spec.js new file mode 100644 index 00000000000..bb3e60ab9e2 --- /dev/null +++ b/spec/frontend/vue_shared/components/awards_list_spec.js @@ -0,0 +1,213 @@ +import { shallowMount } from '@vue/test-utils'; +import AwardsList from '~/vue_shared/components/awards_list.vue'; + +const createUser = (id, name) => ({ id, name }); +const createAward = (name, user) => ({ name, user }); + +const USERS = { + root: createUser(1, 'Root'), + ada: createUser(2, 'Ada'), + marie: createUser(3, 'Marie'), + jane: createUser(4, 'Jane'), + leonardo: createUser(5, 'Leonardo'), +}; + +const EMOJI_SMILE = 'smile'; +const EMOJI_OK = 'ok_hand'; +const EMOJI_THUMBSUP = 'thumbsup'; +const EMOJI_THUMBSDOWN = 'thumbsdown'; +const EMOJI_A = 'a'; +const EMOJI_B = 'b'; +const EMOJI_CACTUS = 'cactus'; +const EMOJI_100 = '100'; + +const TEST_AWARDS = [ + createAward(EMOJI_SMILE, USERS.ada), + createAward(EMOJI_OK, USERS.ada), + createAward(EMOJI_THUMBSUP, USERS.ada), + createAward(EMOJI_THUMBSDOWN, USERS.ada), + createAward(EMOJI_SMILE, USERS.jane), + createAward(EMOJI_OK, USERS.jane), + createAward(EMOJI_OK, USERS.leonardo), + createAward(EMOJI_THUMBSUP, USERS.leonardo), + createAward(EMOJI_THUMBSUP, USERS.marie), + createAward(EMOJI_THUMBSDOWN, USERS.marie), + createAward(EMOJI_THUMBSDOWN, USERS.root), + createAward(EMOJI_OK, USERS.root), + // Test that emoji list preserves order of occurrence, not alphabetical order + createAward(EMOJI_CACTUS, USERS.root), + createAward(EMOJI_A, USERS.marie), + createAward(EMOJI_B, USERS.root), +]; +const TEST_ADD_BUTTON_CLASS = 'js-test-add-button-class'; + +describe('vue_shared/components/awards_list', () => { + let wrapper; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const createComponent = (props = {}) => { + if (wrapper) { + throw new Error('There should only be one wrapper created per test'); + } + + wrapper = shallowMount(AwardsList, { propsData: props }); + }; + const matchingEmojiTag = name => expect.stringMatching(`gl-emoji data-name="${name}"`); + const findAwardButtons = () => wrapper.findAll('[data-testid="award-button"'); + const findAwardsData = () => + findAwardButtons().wrappers.map(x => { + return { + classes: x.classes(), + title: x.attributes('data-original-title'), + html: x.find('[data-testid="award-html"]').element.innerHTML, + count: Number(x.find('.js-counter').text()), + }; + }); + const findAddAwardButton = () => wrapper.find('.js-add-award'); + + describe('default', () => { + beforeEach(() => { + createComponent({ + awards: TEST_AWARDS, + canAwardEmoji: true, + currentUserId: USERS.root.id, + addButtonClass: TEST_ADD_BUTTON_CLASS, + }); + }); + + it('matches snapshot', () => { + expect(wrapper.element).toMatchSnapshot(); + }); + + it('shows awards in correct order', () => { + expect(findAwardsData()).toEqual([ + { + classes: ['btn', 'award-control'], + count: 3, + html: matchingEmojiTag(EMOJI_THUMBSUP), + title: 'Ada, Leonardo, and Marie', + }, + { + classes: ['btn', 'award-control', 'active'], + count: 3, + html: matchingEmojiTag(EMOJI_THUMBSDOWN), + title: 'You, Ada, and Marie', + }, + { + classes: ['btn', 'award-control'], + count: 2, + html: matchingEmojiTag(EMOJI_SMILE), + title: 'Ada and Jane', + }, + { + classes: ['btn', 'award-control', 'active'], + count: 4, + html: matchingEmojiTag(EMOJI_OK), + title: 'You, Ada, Jane, and Leonardo', + }, + { + classes: ['btn', 'award-control', 'active'], + count: 1, + html: matchingEmojiTag(EMOJI_CACTUS), + title: 'You', + }, + { + classes: ['btn', 'award-control'], + count: 1, + html: matchingEmojiTag(EMOJI_A), + title: 'Marie', + }, + { + classes: ['btn', 'award-control', 'active'], + count: 1, + html: matchingEmojiTag(EMOJI_B), + title: 'You', + }, + ]); + }); + + it('with award clicked, it emits award', () => { + expect(wrapper.emitted().award).toBeUndefined(); + + findAwardButtons() + .at(2) + .trigger('click'); + + expect(wrapper.emitted().award).toEqual([[EMOJI_SMILE]]); + }); + + it('shows add award button', () => { + const btn = findAddAwardButton(); + + expect(btn.exists()).toBe(true); + expect(btn.classes(TEST_ADD_BUTTON_CLASS)).toBe(true); + }); + }); + + describe('with numeric award', () => { + beforeEach(() => { + createComponent({ + awards: [createAward(EMOJI_100, USERS.ada)], + canAwardEmoji: true, + currentUserId: USERS.root.id, + }); + }); + + it('when clicked, it emits award as number', () => { + expect(wrapper.emitted().award).toBeUndefined(); + + findAwardButtons() + .at(0) + .trigger('click'); + + expect(wrapper.emitted().award).toEqual([[Number(EMOJI_100)]]); + }); + }); + + describe('with no awards', () => { + beforeEach(() => { + createComponent({ + awards: [], + canAwardEmoji: true, + }); + }); + + it('has no award buttons', () => { + expect(findAwardButtons().length).toBe(0); + }); + }); + + describe('when cannot award emoji', () => { + beforeEach(() => { + createComponent({ + awards: [createAward(EMOJI_CACTUS, USERS.root.id)], + canAwardEmoji: false, + currentUserId: USERS.marie.id, + }); + }); + + it('does not have add button', () => { + expect(findAddAwardButton().exists()).toBe(false); + }); + }); + + describe('with no user', () => { + beforeEach(() => { + createComponent({ + awards: TEST_AWARDS, + canAwardEmoji: false, + }); + }); + + it('disables award buttons', () => { + const buttons = findAwardButtons(); + + expect(buttons.length).toBe(7); + expect(buttons.wrappers.every(x => x.classes('disabled'))).toBe(true); + }); + }); +}); diff --git a/spec/frontend/vue_shared/components/form/__snapshots__/title_spec.js.snap b/spec/frontend/vue_shared/components/form/__snapshots__/title_spec.js.snap index 980e9b517db..e5035614196 100644 --- a/spec/frontend/vue_shared/components/form/__snapshots__/title_spec.js.snap +++ b/spec/frontend/vue_shared/components/form/__snapshots__/title_spec.js.snap @@ -5,8 +5,6 @@ exports[`Title edit field matches the snapshot 1`] = ` label="Title" label-for="title-field-edit" > - <gl-form-input-stub - id="title-field-edit" - /> + <gl-form-input-stub /> </gl-form-group-stub> `; diff --git a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js index a2e2d2447d5..2c7fce714f0 100644 --- a/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js +++ b/spec/frontend/vue_shared/components/user_popover/user_popover_spec.js @@ -10,8 +10,7 @@ const DEFAULT_PROPS = { name: 'Administrator', location: 'Vienna', bio: null, - organization: null, - jobTitle: null, + workInformation: null, status: null, }, }; @@ -59,8 +58,7 @@ describe('User Popover Component', () => { username: null, location: null, bio: null, - organization: null, - jobTitle: null, + workInformation: null, status: null, }, }, @@ -93,7 +91,7 @@ describe('User Popover Component', () => { const findWorkInformation = () => wrapper.find({ ref: 'workInformation' }); const findBio = () => wrapper.find({ ref: 'bio' }); - it('should show only bio if organization and job title are not available', () => { + it('should show only bio if work information is not available', () => { const user = { ...DEFAULT_PROPS.user, bio: 'My super interesting bio' }; createWrapper({ user }); @@ -102,27 +100,10 @@ describe('User Popover Component', () => { expect(findWorkInformation().exists()).toBe(false); }); - it('should show only organization if job title is not available', () => { - const user = { ...DEFAULT_PROPS.user, organization: 'GitLab' }; - - createWrapper({ user }); - - expect(findWorkInformation().text()).toBe('GitLab'); - }); - - it('should show only job title if organization is not available', () => { - const user = { ...DEFAULT_PROPS.user, jobTitle: 'Frontend Engineer' }; - - createWrapper({ user }); - - expect(findWorkInformation().text()).toBe('Frontend Engineer'); - }); - - it('should show organization and job title if they are both available', () => { + it('should show work information when it is available', () => { const user = { ...DEFAULT_PROPS.user, - organization: 'GitLab', - jobTitle: 'Frontend Engineer', + workInformation: 'Frontend Engineer at GitLab', }; createWrapper({ user }); @@ -130,17 +111,17 @@ describe('User Popover Component', () => { expect(findWorkInformation().text()).toBe('Frontend Engineer at GitLab'); }); - it('should display bio and job info in separate lines', () => { + it('should display bio and work information in separate lines', () => { const user = { ...DEFAULT_PROPS.user, bio: 'My super interesting bio', - organization: 'GitLab', + workInformation: 'Frontend Engineer at GitLab', }; createWrapper({ user }); expect(findBio().text()).toBe('My super interesting bio'); - expect(findWorkInformation().text()).toBe('GitLab'); + expect(findWorkInformation().text()).toBe('Frontend Engineer at GitLab'); }); it('should not encode special characters in bio', () => { @@ -154,40 +135,6 @@ describe('User Popover Component', () => { expect(findBio().text()).toBe('I like <html> & CSS'); }); - it('should not encode special characters in organization', () => { - const user = { - ...DEFAULT_PROPS.user, - organization: 'Me & my <funky> Company', - }; - - createWrapper({ user }); - - expect(findWorkInformation().text()).toBe('Me & my <funky> Company'); - }); - - it('should not encode special characters in job title', () => { - const user = { - ...DEFAULT_PROPS.user, - jobTitle: 'Manager & Team Lead', - }; - - createWrapper({ user }); - - expect(findWorkInformation().text()).toBe('Manager & Team Lead'); - }); - - it('should not encode special characters when both job title and organization are set', () => { - const user = { - ...DEFAULT_PROPS.user, - jobTitle: 'Manager & Team Lead', - organization: 'Me & my <funky> Company', - }; - - createWrapper({ user }); - - expect(findWorkInformation().text()).toBe('Manager & Team Lead at Me & my <funky> Company'); - }); - it('shows icon for bio', () => { const user = { ...DEFAULT_PROPS.user, @@ -201,10 +148,10 @@ describe('User Popover Component', () => { ); }); - it('shows icon for organization', () => { + it('shows icon for work information', () => { const user = { ...DEFAULT_PROPS.user, - organization: 'GitLab', + workInformation: 'GitLab', }; createWrapper({ user }); |