updated note
', + }); + + wrapper.setProps({ isEditing: false }); + await nextTick(); + + expect(await wrapper.findByTestId('wiki-note-content').text()).toBe('updated note'); + }); + }); +}); diff --git a/spec/frontend/pages/shared/wikis/notes/components/note_header_spec.js b/spec/frontend/pages/shared/wikis/notes/components/note_header_spec.js new file mode 100644 index 0000000000000000000000000000000000000000..7cbb3d29f672ac1fca1358fc9668ba71eb87c57b --- /dev/null +++ b/spec/frontend/pages/shared/wikis/notes/components/note_header_spec.js @@ -0,0 +1,212 @@ +import { GlLoadingIcon, GlBadge } from '@gitlab/ui'; +import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue'; +import NoteHeader from '~/pages/shared/wikis/wiki_notes/components/note_header.vue'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; + +describe('NoteHeader', () => { + let wrapper; + + const author = { + id: 1, + name: 'John Doe', + username: 'johndoe', + path: '/johndoe', + webUrl: 'https://example.com/johndoe', + }; + + const createWrapper = (propsData = {}) => + shallowMountExtended(NoteHeader, { + propsData, + }); + + describe('renders correctly', () => { + const shouldNotDisplayExternalParticipantText = () => { + expect(wrapper.findByText('(external participant)').exists()).toBe(false); + }; + + describe('when author prop is not passed', () => { + beforeEach(() => { + wrapper = createWrapper(); + }); + + it('should display "A deleted user" text', () => { + expect(wrapper.findByText('A deleted user').exists()).toBe(true); + }); + + it('should not display author name', () => { + expect(wrapper.findByTestId('wiki-note-author-name').exists()).toBe(false); + }); + + it('should not display author username', () => { + expect(wrapper.findByTestId('wiki-note-author-name').exists()).toBe(false); + }); + + it('should not display external participant text', () => { + shouldNotDisplayExternalParticipantText(); + }); + }); + + describe('when author is author prop is passed', () => { + beforeEach(() => { + wrapper = createWrapper({ author }); + }); + + it('should not display "A deleted user"', () => { + expect(wrapper.findByText('A deleted user').exists()).toBe(false); + }); + + describe('email participant is set', () => { + beforeEach(() => { + wrapper = createWrapper({ author, emailParticipant: 'john@example.com' }); + }); + + it('should not render author name link', () => { + expect(wrapper.find('a[data-testid="wiki-note-author-name-link"]').exists()).toBe(false); + }); + + it('should render author name correclty', async () => { + const authorName = await wrapper.findByTestId('wiki-note-author-name').text(); + expect(authorName).toBe('John Doe'); + }); + + it('should not render author username', () => { + expect(wrapper.findByTestId('wiki-note-username').exists()).toBe(false); + }); + + it('should display external participant text', () => { + expect(wrapper.findByText('(external participant)').exists()).toBe(true); + }); + }); + + describe('email participant is not set', () => { + it('should render author name in link', async () => { + const authorNameLink = wrapper.find('a[data-testid="wiki-note-author-name-link"]'); + const authorName = authorNameLink.find('[data-testid="wiki-note-author-name"]'); + + expect(await authorName.text()).toBe('John Doe'); + }); + + it('should render author name link with href to author path when author path is set', () => { + const authorNameLink = wrapper.find('a[data-testid="wiki-note-author-name-link"]'); + expect(authorNameLink.attributes('href')).toBe('/johndoe'); + }); + + it('should default to author webUrl for author name link author path is not set', () => { + wrapper = createWrapper({ author: { ...author, path: null } }); + const authorNameLink = wrapper.find('a[data-testid="wiki-note-author-name-link"]'); + expect(authorNameLink.attributes('href')).toBe('https://example.com/johndoe'); + }); + + it('should render author username correctly', async () => { + const authorUsernameLink = wrapper.find( + 'a[data-testid="wiki-note-author-username-link"]', + ); + const authorUsername = await authorUsernameLink + .find('[data-testid="wiki-note-username"]') + .text(); + expect(authorUsername).toBe('@johndoe'); + }); + + it('should render author username link with href to author path when it is set', () => { + const authorUsernameLink = wrapper.find( + 'a[data-testid="wiki-note-author-username-link"]', + ); + expect(authorUsernameLink.attributes('href')).toBe('/johndoe'); + }); + + it('should default to author webUrl for author username link author path is not set', () => { + wrapper = createWrapper({ author: { ...author, path: null } }); + const authorUsernameLink = wrapper.find( + 'a[data-testid="wiki-note-author-username-link"]', + ); + expect(authorUsernameLink.attributes('href')).toBe('https://example.com/johndoe'); + }); + + it('should note display external participant text', () => { + shouldNotDisplayExternalParticipantText(); + }); + }); + }); + describe('created at', () => { + beforeEach(() => { + wrapper = createWrapper(); + }); + + it('should not render time ago tooltip when createdAt prop is not passed', () => { + expect(wrapper.findComponent(TimeAgoTooltip).exists()).toBe(false); + }); + + it('should render time ago tooltip when createdAt prop is passed', () => { + wrapper = createWrapper({ createdAt: '2021-01-01T00:00:00.000Z' }); + const toolTip = wrapper.findComponent(TimeAgoTooltip); + + expect(toolTip.exists()).toBe(true); + }); + }); + + describe('internal note', () => { + beforeEach(() => { + wrapper = createWrapper(); + }); + + it('should not render internal note badge when isInternalNote prop is not passed', () => { + expect(wrapper.findComponent(GlBadge).exists()).toBe(false); + }); + + it('should render internal note badge correctly when isInternalNote prop is true', async () => { + wrapper = createWrapper({ isInternalNote: true }); + const glBadge = wrapper.findComponent(GlBadge); + + expect(glBadge.element.getAttribute('title')).toBe( + 'This internal note will always remain confidential', + ); + expect(await glBadge.text()).toBe('Internal note'); + }); + }); + + describe('showSpinner', () => { + beforeEach(() => { + wrapper = createWrapper(); + }); + + it('should not render loading icon when showSpinner prop is not passed', () => { + expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false); + }); + + it('should render loading icon when showSpinner prop is true', () => { + wrapper = createWrapper({ showSpinner: true }); + const loadingIconLabel = wrapper.findComponent(GlLoadingIcon); + expect(loadingIconLabel.exists()).toBe(true); + }); + }); + }); + + describe('when author username link is hovered', () => { + const hoverUserNameLink = async () => { + await wrapper.findByTestId('wiki-note-author-username-link').trigger('mouseenter'); + }; + + const leaveUserNameLink = async () => { + await wrapper.findByTestId('wiki-note-author-username-link').trigger('mouseleave'); + }; + + beforeEach(() => { + wrapper = createWrapper({ author }); + }); + + it('should underline author Name link', async () => { + await hoverUserNameLink(); + const { classList } = wrapper.findByTestId('wiki-note-author-name-link').element; + + expect(classList.contains('text-underline')).toBe(true); + }); + + it('should remove underline from author name link when the cursor leaves the username link', async () => { + await hoverUserNameLink(); + await leaveUserNameLink(); + + const { classList } = wrapper.findByTestId('wiki-note-author-name-link').element; + expect(classList.contains('text-underline')).toBe(false); + }); + }); +}); diff --git a/spec/frontend/pages/shared/wikis/notes/components/ordered_layout_spec.js b/spec/frontend/pages/shared/wikis/notes/components/ordered_layout_spec.js new file mode 100644 index 0000000000000000000000000000000000000000..8bd17806a5492a7db511fdf16a098b3a53673c6b --- /dev/null +++ b/spec/frontend/pages/shared/wikis/notes/components/ordered_layout_spec.js @@ -0,0 +1,51 @@ +import { mount } from '@vue/test-utils'; +import OrderedLayout from '~/pages/shared/wikis/wiki_notes/components/ordered_layout.vue'; + +const children = ` + +another example note
', + }, + ], + }, + }); + }); + + it("should set 'replyNote' prop to true when rendering replies", () => { + expect(noteFooter().findComponent(WikiNote).props('replyNote')).toBe(true); + }); + + it('should render reply in note footer when there is at least 1 reply', () => { + expect(noteFooter().findComponent(WikiNote).props('note')).toMatchObject({ + ...note, + body: 'another example note', + bodyHtml: 'another example note
', + }); + }); + + it('should render placeholder correctly note when "placeholderNote" is set', async () => { + wrapper.vm.setPlaceHolderNote({ + body: 'another example note', + }); + await nextTick(); + + const placeholderNote = noteFooter().findComponent(PlaceholderNote); + expect(placeholderNote.props('note')).toStrictEqual({ + body: 'another example note', + }); + }); + }); + }); + + describe('when user is not signed in', () => { + beforeEach(() => { + wrapper = createWrapper({ + props: { discussion: [note, note] }, + provideData: { currentUserData: null }, + }); + }); + + it('should render wiki discussion signed out component', () => { + expect(noteFooter().findComponent(WikiDiscussionsSignedOut).exists()).toBe(true); + }); + + it('should not render reply form placeholder', () => { + expect(noteFooter().findComponent(DiscussionReplyPlaceholder).exists()).toBe(false); + }); + + it('should not render reply form', () => { + expect(noteFooter().findComponent(WikiCommentForm).exists()).toBe(false); + }); + }); + + describe('component functions properly when user is signed in', () => { + beforeEach(() => { + wrapper = createWrapper({ props: { discussion: [note, note] } }); + }); + + it('should call clearDraft whenever toggle reply is called with a value of false', () => { + const clearDraftSpy = jest.spyOn(autosave, 'clearDraft'); + + wrapper.vm.toggleReplying(false); + + expect(clearDraftSpy).toHaveBeenCalledTimes(1); + }); + + it('should not render wiki discussion signed out component', () => { + expect(noteFooter().findComponent(WikiDiscussionsSignedOut).exists()).toBe(false); + }); + + it('should render reply form placeholder when isReplying is false', () => { + // isReplying is set to false by default + expect(noteFooter().findComponent(DiscussionReplyPlaceholder).exists()).toBe(true); + }); + + it('should render reply form when isReplying is true', async () => { + wrapper.vm.toggleReplying(true); + await nextTick(); + expect(Boolean(wrapper.vm.$refs.commentForm)).toBe(true); + }); + + it("should render replyForm when 'reply' event is fired from wiki note", async () => { + const wikiNote = wrapper.findComponent(WikiNote); + wikiNote.vm.$emit('reply'); + await nextTick(); + + expect(Boolean(wrapper.vm.$refs.commentForm)).toBe(true); + }); + + it('should render reply form when focus event is fired from discussion reply placeholder', async () => { + const replyPlaceholder = wrapper.findComponent(DiscussionReplyPlaceholder); + replyPlaceholder.vm.$emit('focus'); + + await nextTick(); + expect(Boolean(wrapper.vm.$refs.commentForm)).toBe(true); + }); + }); + + describe('reply form', () => { + let replyForm; + beforeEach(async () => { + wrapper.vm.toggleReplying(true); + await nextTick(); + replyForm = wrapper.vm.$refs.commentForm; + }); + + it('should unrender relpyForm when cancel event is fired', async () => { + replyForm.$emit('cancel'); + await nextTick(); + + expect(Boolean(wrapper.vm.$refs.commentForm)).toBe(false); + }); + + it('should set placeholder correctly when creating-note:start event is fired', async () => { + replyForm.$emit('creating-note:start', { + body: 'another example note', + bodyHtml: 'another example note
', + }); + + await nextTick(); + const placeholderNote = wrapper.findComponent(PlaceholderNote).props('note'); + expect(placeholderNote).toMatchObject({ + body: 'another example note', + bodyHtml: 'another example note
', + }); + }); + + it('should remove placeholder note when creating-note:done event is fired', async () => { + replyForm.$emit('creating-note:done'); + + await nextTick(); + const placeholderNote = wrapper.findComponent(PlaceholderNote); + expect(placeholderNote.exists()).toBe(false); + }); + + it('should remove placeholer and add new reply to replies list when creating-note:success event is fired', async () => { + const newReply = { + ...note, + id: 'gid://gitlab/DiscussionNote/1525', + }; + + replyForm.$emit('creating-note:success', { notes: { nodes: [newReply] } }); + await nextTick(); + + const reply = noteFooter().findComponent(WikiNote); + const placeholderNote = noteFooter().findComponent(PlaceholderNote); + + expect(placeholderNote.exists()).toBe(false); + expect(reply.exists()).toBe(true); + }); + }); +}); diff --git a/spec/frontend/pages/shared/wikis/notes/components/wiki_note_spec.js b/spec/frontend/pages/shared/wikis/notes/components/wiki_note_spec.js new file mode 100644 index 0000000000000000000000000000000000000000..b3325caead830cf2001814da448a6c359f3222e2 --- /dev/null +++ b/spec/frontend/pages/shared/wikis/notes/components/wiki_note_spec.js @@ -0,0 +1,378 @@ +import { GlAvatarLink, GlAvatar } from '@gitlab/ui'; +import { nextTick } from 'vue'; +import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import WikiNote from '~/pages/shared/wikis/wiki_notes/components/wiki_note.vue'; +import NoteHeader from '~/pages/shared/wikis/wiki_notes/components/note_header.vue'; +import NoteActions from '~/pages/shared/wikis/wiki_notes/components/note_actions.vue'; +import NoteBody from '~/pages/shared/wikis/wiki_notes/components/note_body.vue'; +import DeleteNoteMutation from '~/wikis/graphql/notes/delete_wiki_page_note.mutation.graphql'; +import TimelineEntryItem from '~/vue_shared/components/notes/timeline_entry_item.vue'; +import * as autosave from '~/lib/utils/autosave'; +import * as confirmViaGLModal from '~/lib/utils/confirm_via_gl_modal/confirm_action'; +import * as alert from '~/alert'; +import { noteableType, currentUserData, note, noteableId } from '../mock_data'; + +describe('WikiNote', () => { + let wrapper; + + const $apollo = { + mutate: jest.fn(), + }; + + const createWrapper = (props) => { + return shallowMountExtended(WikiNote, { + propsData: { + note, + noteableId, + ...props, + }, + mocks: { + $apollo, + }, + provide: { + noteableType, + currentUserData, + }, + stubs: { + GlAvatarLink: { + template: 'an example note
', + createdAt: '2024-11-10T14:19:58Z', + lastEditedAt: '2024-11-10T14:19:58Z', + url: 'http://127.0.0.1:3000/flightjs/Flight/-/wikis/home#note_1524', + userPermissions: { + __typename: 'NotePermissions', + adminNote: false, + awardEmoji: true, + readNote: true, + createNote: true, + resolveNote: false, + repositionNote: false, + }, + discussion: { + __typename: 'Discussion', + id: 'gid://gitlab/Discussion/d3146d41c7bec5bdad8ecc9f41c5f9121cd19f56', + resolved: false, + resolvable: true, + resolvedBy: null, + }, +}; + +export const noteableId = '7'; + +export const wikiCommentFormProvideData = { + pageInfo, + registerPath, + signInPath, + currentUserData, + markdownPreviewPath, + noteableType, + markdownDocsPath, + isContainerArchived, +}; diff --git a/spec/frontend/pages/shared/wikis/notes/utils_spec.js b/spec/frontend/pages/shared/wikis/notes/utils_spec.js new file mode 100644 index 0000000000000000000000000000000000000000..436507e34bda7d922d94a42c3fdbd4323a01018b --- /dev/null +++ b/spec/frontend/pages/shared/wikis/notes/utils_spec.js @@ -0,0 +1,71 @@ +import { + createNoteErrorMessages, + getIdFromGid, + getAutosaveKey, +} from '~/pages/shared/wikis/wiki_notes/utils'; +import { COMMENT_FORM } from '~/notes/i18n'; +import { sprintf } from '~/locale'; +import * as utils from '~/graphql_shared/utils'; + +describe('createNoteErrorMessages', () => { + it('should return the correct error message by default', () => { + const actualMessage = createNoteErrorMessages()[0]; + + const expectedMessage = COMMENT_FORM.GENERIC_UNSUBMITTABLE_NETWORK; + + expect(actualMessage).toBe(expectedMessage); + }); + + it('should return the correct error message when the err is a graphql error', () => { + const err = { + graphQLErrors: [{ message: 'GraphQL error' }], + }; + const actualMessage = createNoteErrorMessages(err)[0]; + + const expectedMessage = sprintf( + COMMENT_FORM.error, + { reason: 'An unexpected error occurred trying to submit your comment. Please try again.' }, + false, + ); + + expect(actualMessage).toBe(expectedMessage); + }); +}); + +describe('getIdFromGid', () => { + afterEach(() => { + jest.resetAllMocks(); + }); + + it.each` + gid | expectedId + ${'gid://gitlab/User/7'} | ${'7'} + ${'gid://gitlab/Project/9'} | ${'9'} + ${'gid://gitlab/Group/3'} | ${'3'} + `('should return the id when the input is a gid', ({ gid, expectedId }) => { + jest.spyOn(utils, 'isGid').mockReturnValue(true); + jest.spyOn(utils, 'parseGid').mockReturnValue({ id: expectedId }); + + expect(getIdFromGid(gid)).toBe(expectedId); + }); + + it.each` + value + ${'7'} + ${'not id'} + ${'string'} + `('should return the input when it is not a gid', ({ value }) => { + jest.spyOn(utils, 'isGid').mockReturnValue(false); + expect(getIdFromGid(value)).toBe(value); + }); +}); + +describe('getAutosaveKey', () => { + it.each` + noteableType | noteId | expectedKey + ${'Issue'} | ${'1'} | ${'Note/Issue/1'} + ${'MergeRequest'} | ${'2'} | ${'Note/MergeRequest/2'} + `('should return the correct key', ({ noteableType, noteId, expectedKey }) => { + expect(getAutosaveKey(noteableType, noteId)).toBe(expectedKey); + }); +});