diff options
Diffstat (limited to 'spec/frontend/design_management')
13 files changed, 260 insertions, 8 deletions
diff --git a/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_signed_out_spec.js.snap b/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_signed_out_spec.js.snap new file mode 100644 index 00000000000..ab37cb90bd3 --- /dev/null +++ b/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_signed_out_spec.js.snap @@ -0,0 +1,41 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`DesignNoteSignedOut renders message containing register and sign-in links while user wants to reply to a discussion 1`] = ` +<div + class="disabled-comment text-center" +> + Please + <gl-link-stub + href="/users/sign_up?redirect_to_referer=yes" + > + register + </gl-link-stub> + or + <gl-link-stub + href="/users/sign_in?redirect_to_referer=yes" + > + sign in + </gl-link-stub> + to reply. +</div> +`; + +exports[`DesignNoteSignedOut renders message containing register and sign-in links while user wants to start a new discussion 1`] = ` +<div + class="disabled-comment text-center" +> + Please + <gl-link-stub + href="/users/sign_up?redirect_to_referer=yes" + > + register + </gl-link-stub> + or + <gl-link-stub + href="/users/sign_in?redirect_to_referer=yes" + > + sign in + </gl-link-stub> + to start a new discussion. +</div> +`; 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 9335d800a16..e816a05ba53 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 @@ -1,7 +1,9 @@ import { GlLoadingIcon } from '@gitlab/ui'; import { mount } from '@vue/test-utils'; +import { ApolloMutation } from 'vue-apollo'; import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue'; import DesignNote from '~/design_management/components/design_notes/design_note.vue'; +import DesignNoteSignedOut from '~/design_management/components/design_notes/design_note_signed_out.vue'; import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue'; import ToggleRepliesWidget from '~/design_management/components/design_notes/toggle_replies_widget.vue'; import createNoteMutation from '~/design_management/graphql/mutations/create_note.mutation.graphql'; @@ -20,6 +22,7 @@ const defaultMockDiscussion = { const DEFAULT_TODO_COUNT = 2; describe('Design discussions component', () => { + const originalGon = window.gon; let wrapper; const findDesignNotes = () => wrapper.findAll(DesignNote); @@ -31,6 +34,7 @@ describe('Design discussions component', () => { const findResolvedMessage = () => wrapper.find('[data-testid="resolved-message"]'); const findResolveLoadingIcon = () => wrapper.find(GlLoadingIcon); const findResolveCheckbox = () => wrapper.find('[data-testid="resolve-checkbox"]'); + const findApolloMutation = () => wrapper.findComponent(ApolloMutation); const mutationVariables = { mutation: createNoteMutation, @@ -42,6 +46,8 @@ describe('Design discussions component', () => { }, }, }; + const registerPath = '/users/sign_up?redirect_to_referer=yes'; + const signInPath = '/users/sign_in?redirect_to_referer=yes'; const mutate = jest.fn().mockResolvedValue({ data: { createNote: { errors: [] } } }); const readQuery = jest.fn().mockReturnValue({ project: { @@ -62,6 +68,8 @@ describe('Design discussions component', () => { designId: 'design-id', discussionIndex: 1, discussionWithOpenForm: '', + registerPath, + signInPath, ...props, }, data() { @@ -88,8 +96,13 @@ describe('Design discussions component', () => { }); } + beforeEach(() => { + window.gon = { current_user_id: 1 }; + }); + afterEach(() => { wrapper.destroy(); + window.gon = originalGon; }); describe('when discussion is not resolvable', () => { @@ -349,4 +362,41 @@ describe('Design discussions component', () => { expect(wrapper.emitted('open-form')).toBeTruthy(); }); + + describe('when user is not logged in', () => { + const findDesignNoteSignedOut = () => wrapper.findComponent(DesignNoteSignedOut); + + beforeEach(() => { + window.gon = { current_user_id: null }; + createComponent( + { + discussion: { + ...defaultMockDiscussion, + }, + discussionWithOpenForm: defaultMockDiscussion.id, + }, + { discussionComment: 'test', isFormRendered: true }, + ); + }); + + it('does not render resolve discussion button', () => { + expect(findResolveButton().exists()).toBe(false); + }); + + it('does not render replace-placeholder component', () => { + expect(findReplyPlaceholder().exists()).toBe(false); + }); + + it('does not render apollo-mutation component', () => { + expect(findApolloMutation().exists()).toBe(false); + }); + + it('renders design-note-signed-out component', () => { + expect(findDesignNoteSignedOut().exists()).toBe(true); + expect(findDesignNoteSignedOut().props()).toMatchObject({ + registerPath, + signInPath, + }); + }); + }); }); diff --git a/spec/frontend/design_management/components/design_notes/design_note_signed_out_spec.js b/spec/frontend/design_management/components/design_notes/design_note_signed_out_spec.js new file mode 100644 index 00000000000..e71bb5ab520 --- /dev/null +++ b/spec/frontend/design_management/components/design_notes/design_note_signed_out_spec.js @@ -0,0 +1,36 @@ +import { GlSprintf } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import DesignNoteSignedOut from '~/design_management/components/design_notes/design_note_signed_out.vue'; + +function createComponent(isAddDiscussion = false) { + return shallowMount(DesignNoteSignedOut, { + propsData: { + registerPath: '/users/sign_up?redirect_to_referer=yes', + signInPath: '/users/sign_in?redirect_to_referer=yes', + isAddDiscussion, + }, + stubs: { + GlSprintf, + }, + }); +} + +describe('DesignNoteSignedOut', () => { + let wrapper; + + afterEach(() => { + wrapper.destroy(); + }); + + it('renders message containing register and sign-in links while user wants to reply to a discussion', () => { + wrapper = createComponent(); + + expect(wrapper.element).toMatchSnapshot(); + }); + + it('renders message containing register and sign-in links while user wants to start a new discussion', () => { + wrapper = createComponent(true); + + expect(wrapper.element).toMatchSnapshot(); + }); +}); diff --git a/spec/frontend/design_management/components/design_overlay_spec.js b/spec/frontend/design_management/components/design_overlay_spec.js index d3119be7159..4bda5054090 100644 --- a/spec/frontend/design_management/components/design_overlay_spec.js +++ b/spec/frontend/design_management/components/design_overlay_spec.js @@ -117,6 +117,8 @@ describe('Design overlay component', () => { it.each([notes[0].discussion.notes.nodes[1], notes[0].discussion.notes.nodes[0]])( 'should not apply inactive class to the pin for the active discussion', (note) => { + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ activeDiscussion: { id: note.id, @@ -131,6 +133,8 @@ describe('Design overlay component', () => { ); it('should apply inactive class to all pins besides the active one', () => { + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ activeDiscussion: { id: notes[0].id, @@ -212,6 +216,8 @@ describe('Design overlay component', () => { const { position } = note; const newCoordinates = { x: 20, y: 20 }; + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ movingNoteNewPosition: { ...position, @@ -345,6 +351,8 @@ describe('Design overlay component', () => { }); const newCoordinates = { x: 20, y: 20 }; + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ movingNoteStartPosition: { ...notes[0].position, @@ -368,6 +376,8 @@ describe('Design overlay component', () => { it('should calculate delta correctly from state', () => { createComponent(); + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ movingNoteStartPosition: { clientX: 10, diff --git a/spec/frontend/design_management/components/design_presentation_spec.js b/spec/frontend/design_management/components/design_presentation_spec.js index edf8b965153..adec9ef469d 100644 --- a/spec/frontend/design_management/components/design_presentation_spec.js +++ b/spec/frontend/design_management/components/design_presentation_spec.js @@ -15,6 +15,7 @@ const mockOverlayData = { }; describe('Design management design presentation component', () => { + const originalGon = window.gon; let wrapper; function createComponent( @@ -39,6 +40,8 @@ describe('Design management design presentation component', () => { stubs, }); + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData(data); wrapper.element.scrollTo = jest.fn(); } @@ -113,8 +116,13 @@ describe('Design management design presentation component', () => { }); } + beforeEach(() => { + window.gon = { current_user_id: 1 }; + }); + afterEach(() => { wrapper.destroy(); + window.gon = originalGon; }); it('renders image and overlay when image provided', () => { @@ -550,4 +558,23 @@ describe('Design management design presentation component', () => { }); }); }); + + describe('when user is not logged in', () => { + beforeEach(() => { + window.gon = { current_user_id: null }; + createComponent( + { + image: 'test.jpg', + imageName: 'test', + }, + mockOverlayData, + ); + }); + + it('disables commenting from design overlay', () => { + expect(wrapper.findComponent(DesignOverlay).props()).toMatchObject({ + disableCommenting: true, + }); + }); + }); }); diff --git a/spec/frontend/design_management/components/design_sidebar_spec.js b/spec/frontend/design_management/components/design_sidebar_spec.js index 8eb993ec7b5..4cd71bdb7f3 100644 --- a/spec/frontend/design_management/components/design_sidebar_spec.js +++ b/spec/frontend/design_management/components/design_sidebar_spec.js @@ -2,6 +2,7 @@ import { GlCollapse, GlPopover } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; import Cookies from 'js-cookie'; import DesignDiscussion from '~/design_management/components/design_notes/design_discussion.vue'; +import DesignNoteSignedOut from '~/design_management/components/design_notes/design_note_signed_out.vue'; import DesignSidebar from '~/design_management/components/design_sidebar.vue'; import DesignTodoButton from '~/design_management/components/design_todo_button.vue'; import updateActiveDiscussionMutation from '~/design_management/graphql/mutations/update_active_discussion.mutation.graphql'; @@ -30,6 +31,7 @@ const cookieKey = 'hide_design_resolved_comments_popover'; const mutate = jest.fn().mockResolvedValue(); describe('Design management design sidebar component', () => { + const originalGon = window.gon; let wrapper; const findDiscussions = () => wrapper.findAll(DesignDiscussion); @@ -58,11 +60,20 @@ describe('Design management design sidebar component', () => { }, }, stubs: { GlPopover }, + provide: { + registerPath: '/users/sign_up?redirect_to_referer=yes', + signInPath: '/users/sign_in?redirect_to_referer=yes', + }, }); } + beforeEach(() => { + window.gon = { current_user_id: 1 }; + }); + afterEach(() => { wrapper.destroy(); + window.gon = originalGon; }); it('renders participants', () => { @@ -248,4 +259,44 @@ describe('Design management design sidebar component', () => { expect(Cookies.set).toHaveBeenCalledWith(cookieKey, 'true', { expires: 365 * 10 }); }); }); + + describe('when user is not logged in', () => { + const findDesignNoteSignedOut = () => wrapper.findComponent(DesignNoteSignedOut); + + beforeEach(() => { + window.gon = { current_user_id: null }; + }); + + describe('design has no discussions', () => { + beforeEach(() => { + createComponent({ + design: { + ...design, + discussions: { + nodes: [], + }, + }, + }); + }); + + it('does not render a message about possibility to create a new discussion', () => { + expect(findNewDiscussionDisclaimer().exists()).toBe(false); + }); + + it('renders design-note-signed-out component', () => { + expect(findDesignNoteSignedOut().exists()).toBe(true); + }); + }); + + describe('design has discussions', () => { + beforeEach(() => { + Cookies.set(cookieKey, true); + createComponent(); + }); + + it('renders design-note-signed-out component', () => { + expect(findDesignNoteSignedOut().exists()).toBe(true); + }); + }); + }); }); diff --git a/spec/frontend/design_management/components/image_spec.js b/spec/frontend/design_management/components/image_spec.js index 765d902f9a6..ac3afc73c86 100644 --- a/spec/frontend/design_management/components/image_spec.js +++ b/spec/frontend/design_management/components/image_spec.js @@ -9,6 +9,8 @@ describe('Design management large image component', () => { wrapper = shallowMount(DesignImage, { propsData, }); + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData(data); } diff --git a/spec/frontend/design_management/components/toolbar/design_navigation_spec.js b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js index 1d9b9c002f9..6e0592984a2 100644 --- a/spec/frontend/design_management/components/toolbar/design_navigation_spec.js +++ b/spec/frontend/design_management/components/toolbar/design_navigation_spec.js @@ -42,6 +42,8 @@ describe('Design management pagination component', () => { }); it('renders navigation buttons', () => { + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ designCollection: { designs: [{ id: '1' }, { id: '2' }] }, }); @@ -53,6 +55,8 @@ describe('Design management pagination component', () => { describe('keyboard buttons navigation', () => { beforeEach(() => { + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ designCollection: { designs: [{ filename: '1' }, { filename: '2' }, { filename: '3' }] }, }); diff --git a/spec/frontend/design_management/components/toolbar/index_spec.js b/spec/frontend/design_management/components/toolbar/index_spec.js index 009ffe57744..cf872046f53 100644 --- a/spec/frontend/design_management/components/toolbar/index_spec.js +++ b/spec/frontend/design_management/components/toolbar/index_spec.js @@ -48,6 +48,8 @@ describe('Design management toolbar component', () => { }, }); + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ permissions: { createDesign, diff --git a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js index ebfe27eaa71..a4fb671ae13 100644 --- a/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js +++ b/spec/frontend/design_management/components/upload/design_version_dropdown_spec.js @@ -34,6 +34,8 @@ describe('Design management design version dropdown component', () => { stubs: { GlSprintf }, }); + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ allVersions: maxVersions > -1 ? mockAllVersions.slice(0, maxVersions) : mockAllVersions, }); diff --git a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap index 3d04840b1f8..31b3117cb6c 100644 --- a/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap +++ b/spec/frontend/design_management/pages/design/__snapshots__/index_spec.js.snap @@ -70,6 +70,13 @@ exports[`Design management design index page renders design index 1`] = ` <!----> + <design-note-signed-out-stub + class="gl-mb-4" + isadddiscussion="true" + registerpath="" + signinpath="" + /> + <design-discussion-stub data-testid="unresolved-discussion" designid="gid::/gitlab/Design/1" @@ -77,6 +84,8 @@ exports[`Design management design index page renders design index 1`] = ` discussionwithopenform="" markdownpreviewpath="/project-path/preview_markdown?target_type=Issue" noteableid="gid::/gitlab/Design/1" + registerpath="" + signinpath="" /> <gl-button-stub @@ -126,6 +135,8 @@ exports[`Design management design index page renders design index 1`] = ` discussionwithopenform="" markdownpreviewpath="/project-path/preview_markdown?target_type=Issue" noteableid="gid::/gitlab/Design/1" + registerpath="" + signinpath="" /> </gl-collapse-stub> @@ -231,14 +242,14 @@ exports[`Design management design index page with error GlAlert is rendered in c participants="[object Object]" /> - <h2 - class="new-discussion-disclaimer gl-font-base gl-m-0 gl-mb-4" - data-testid="new-discussion-disclaimer" - > - - Click the image where you'd like to start a new discussion - - </h2> + <!----> + + <design-note-signed-out-stub + class="gl-mb-4" + isadddiscussion="true" + registerpath="" + signinpath="" + /> <!----> diff --git a/spec/frontend/design_management/pages/design/index_spec.js b/spec/frontend/design_management/pages/design/index_spec.js index 6ce384b4869..98e2313e9f2 100644 --- a/spec/frontend/design_management/pages/design/index_spec.js +++ b/spec/frontend/design_management/pages/design/index_spec.js @@ -317,6 +317,8 @@ describe('Design management design index page', () => { describe('when no design exists for given version', () => { it('redirects to /designs', () => { createComponent({ loading: true }); + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ allVersions: mockAllVersions, }); diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js index 427161a391b..dd0f7972553 100644 --- a/spec/frontend/design_management/pages/index_spec.js +++ b/spec/frontend/design_management/pages/index_spec.js @@ -91,6 +91,8 @@ const designToMove = { }; describe('Design management index page', () => { + const registerPath = '/users/sign_up?redirect_to_referer=yes'; + const signInPath = '/users/sign_in?redirect_to_referer=yes'; let mutate; let wrapper; let fakeApollo; @@ -164,6 +166,8 @@ describe('Design management index page', () => { provide: { projectPath: 'project-path', issueIid: '1', + registerPath, + signInPath, }, }); } @@ -186,6 +190,10 @@ describe('Design management index page', () => { apolloProvider: fakeApollo, router, stubs: { VueDraggable }, + provide: { + registerPath, + signInPath, + }, }); } @@ -204,6 +212,8 @@ describe('Design management index page', () => { it('renders error', async () => { createComponent(); + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ error: true }); await nextTick(); @@ -381,6 +391,8 @@ describe('Design management index page', () => { it('updates state appropriately after upload complete', async () => { createComponent({ stubs: { GlEmptyState } }); + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ filesToBeSaved: [{ name: 'test' }] }); wrapper.vm.onUploadDesignDone(designUploadMutationCreatedResponse); @@ -393,6 +405,8 @@ describe('Design management index page', () => { it('updates state appropriately after upload error', async () => { createComponent({ stubs: { GlEmptyState } }); + // setData usage is discouraged. See https://gitlab.com/groups/gitlab-org/-/epics/7330 for details + // eslint-disable-next-line no-restricted-syntax wrapper.setData({ filesToBeSaved: [{ name: 'test' }] }); wrapper.vm.onUploadDesignError(); |