diff options
Diffstat (limited to 'spec/frontend/design_management')
4 files changed, 47 insertions, 27 deletions
diff --git a/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap b/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap index 4ecf82a4714..402e55347af 100644 --- a/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap +++ b/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap @@ -5,16 +5,19 @@ exports[`Design note component should match the snapshot 1`] = ` class="design-note note-form" id="note_123" > - <user-avatar-link-stub - imgalt="foo-bar" - imgcssclasses="" - imgsize="40" - imgsrc="" - linkhref="" - tooltipplacement="top" - tooltiptext="" - username="" - /> + <gl-avatar-link-stub + class="gl-float-left gl-mr-3" + href="https://gitlab.com/user" + > + <gl-avatar-stub + alt="avatar" + entityid="0" + entityname="foo-bar" + shape="circle" + size="32" + src="https://gitlab.com/avatar" + /> + </gl-avatar-link-stub> <div class="gl-display-flex gl-justify-content-space-between" @@ -22,8 +25,10 @@ exports[`Design note component should match the snapshot 1`] = ` <div> <gl-link-stub class="js-user-link" + data-testid="user-link" data-user-id="1" data-username="foo-bar" + href="https://gitlab.com/user" > <span class="note-header-author-name gl-font-weight-bold" @@ -69,8 +74,9 @@ exports[`Design note component should match the snapshot 1`] = ` </div> <div - class="note-text js-note-text md" + class="note-text md" data-qa-selector="note_content" + data-testid="note-text" /> </timeline-entry-item-stub> diff --git a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js index bbf2190ad47..77935fbde11 100644 --- a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js +++ b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js @@ -31,7 +31,6 @@ describe('Design discussions component', () => { const findReplyForm = () => wrapper.find(DesignReplyForm); const findRepliesWidget = () => wrapper.find(ToggleRepliesWidget); const findResolveButton = () => wrapper.find('[data-testid="resolve-button"]'); - const findResolveIcon = () => wrapper.find('[data-testid="resolve-icon"]'); const findResolvedMessage = () => wrapper.find('[data-testid="resolved-message"]'); const findResolveLoadingIcon = () => wrapper.find(GlLoadingIcon); const findResolveCheckbox = () => wrapper.find('[data-testid="resolve-checkbox"]'); @@ -117,7 +116,7 @@ describe('Design discussions component', () => { }); it('does not render an icon to resolve a thread', () => { - expect(findResolveIcon().exists()).toBe(false); + expect(findResolveButton().exists()).toBe(false); }); it('does not render a checkbox in reply form', async () => { @@ -147,7 +146,7 @@ describe('Design discussions component', () => { }); it('renders a correct icon to resolve a thread', () => { - expect(findResolveIcon().props('name')).toBe('check-circle'); + expect(findResolveButton().props('icon')).toBe('check-circle'); }); it('renders a checkbox with Resolve thread text in reply form', async () => { @@ -203,7 +202,7 @@ describe('Design discussions component', () => { }); it('renders a correct icon to resolve a thread', () => { - expect(findResolveIcon().props('name')).toBe('check-circle-filled'); + expect(findResolveButton().props('icon')).toBe('check-circle-filled'); }); it('emit todo:toggle when discussion is resolved', async () => { diff --git a/spec/frontend/design_management/components/design_notes/design_note_spec.js b/spec/frontend/design_management/components/design_notes/design_note_spec.js index 35fd1273270..1f84fde9f7f 100644 --- a/spec/frontend/design_management/components/design_notes/design_note_spec.js +++ b/spec/frontend/design_management/components/design_notes/design_note_spec.js @@ -1,10 +1,10 @@ -import { shallowMount } from '@vue/test-utils'; import { ApolloMutation } from 'vue-apollo'; import { nextTick } from 'vue'; +import { GlAvatar, GlAvatarLink } from '@gitlab/ui'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import DesignNote from '~/design_management/components/design_notes/design_note.vue'; import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue'; import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; -import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; const scrollIntoViewMock = jest.fn(); const note = { @@ -12,6 +12,8 @@ const note = { author: { id: 'gid://gitlab/User/1', username: 'foo-bar', + avatarUrl: 'https://gitlab.com/avatar', + webUrl: 'https://gitlab.com/user', }, body: 'test', userPermissions: { @@ -30,14 +32,15 @@ const mutate = jest.fn().mockResolvedValue({ data: { updateNote: {} } }); describe('Design note component', () => { let wrapper; - const findUserAvatar = () => wrapper.find(UserAvatarLink); - const findUserLink = () => wrapper.find('.js-user-link'); - const findReplyForm = () => wrapper.find(DesignReplyForm); - const findEditButton = () => wrapper.find('.js-note-edit'); - const findNoteContent = () => wrapper.find('.js-note-text'); + const findUserAvatar = () => wrapper.findComponent(GlAvatar); + const findUserAvatarLink = () => wrapper.findComponent(GlAvatarLink); + const findUserLink = () => wrapper.findByTestId('user-link'); + const findReplyForm = () => wrapper.findComponent(DesignReplyForm); + const findEditButton = () => wrapper.findByTestId('note-edit'); + const findNoteContent = () => wrapper.findByTestId('note-text'); function createComponent(props = {}, data = { isEditing: false }) { - wrapper = shallowMount(DesignNote, { + wrapper = shallowMountExtended(DesignNote, { propsData: { note: {}, ...props, @@ -71,12 +74,24 @@ describe('Design note component', () => { expect(wrapper.element).toMatchSnapshot(); }); - it('should render an author', () => { + it('should render avatar with correct props', () => { + createComponent({ + note, + }); + + expect(findUserAvatar().props()).toMatchObject({ + src: note.author.avatarUrl, + entityName: note.author.username, + }); + + expect(findUserAvatarLink().attributes('href')).toBe(note.author.webUrl); + }); + + it('should render author details', () => { createComponent({ note, }); - expect(findUserAvatar().exists()).toBe(true); expect(findUserLink().exists()).toBe(true); }); @@ -107,7 +122,7 @@ describe('Design note component', () => { }, }); - findEditButton().trigger('click'); + findEditButton().vm.$emit('click'); await nextTick(); expect(findReplyForm().exists()).toBe(true); diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js index a240a41959f..87531e8b645 100644 --- a/spec/frontend/design_management/pages/index_spec.js +++ b/spec/frontend/design_management/pages/index_spec.js @@ -183,7 +183,7 @@ describe('Design management index page', () => { [moveDesignMutation, moveDesignHandler], ]; - fakeApollo = createMockApollo(requestHandlers); + fakeApollo = createMockApollo(requestHandlers, {}, { addTypename: true }); wrapper = shallowMount(Index, { apolloProvider: fakeApollo, router, |