diff options
Diffstat (limited to 'spec/frontend/pages/shared')
-rw-r--r-- | spec/frontend/pages/shared/nav/sidebar_tracking_spec.js | 36 | ||||
-rw-r--r-- | spec/frontend/pages/shared/wikis/components/wiki_form_spec.js | 211 |
2 files changed, 107 insertions, 140 deletions
diff --git a/spec/frontend/pages/shared/nav/sidebar_tracking_spec.js b/spec/frontend/pages/shared/nav/sidebar_tracking_spec.js index 2c8eb8e459f..04f53e048ed 100644 --- a/spec/frontend/pages/shared/nav/sidebar_tracking_spec.js +++ b/spec/frontend/pages/shared/nav/sidebar_tracking_spec.js @@ -57,9 +57,9 @@ describe('~/pages/shared/nav/sidebar_tracking.js', () => { menu.classList.add('is-over', 'is-showing-fly-out'); menuLink.click(); - expect(menu.dataset).toMatchObject({ - trackAction: 'click_menu', - trackExtra: JSON.stringify({ + expect(menu).toHaveTrackingAttributes({ + action: 'click_menu', + extra: JSON.stringify({ sidebar_display: 'Expanded', menu_display: 'Fly out', }), @@ -74,9 +74,9 @@ describe('~/pages/shared/nav/sidebar_tracking.js', () => { submenuList.classList.add('fly-out-list'); menuLink.click(); - expect(menu.dataset).toMatchObject({ - trackAction: 'click_menu_item', - trackExtra: JSON.stringify({ + expect(menu).toHaveTrackingAttributes({ + action: 'click_menu_item', + extra: JSON.stringify({ sidebar_display: 'Expanded', menu_display: 'Fly out', }), @@ -92,9 +92,9 @@ describe('~/pages/shared/nav/sidebar_tracking.js', () => { menu.classList.add('active'); menuLink.click(); - expect(menu.dataset).toMatchObject({ - trackAction: 'click_menu', - trackExtra: JSON.stringify({ + expect(menu).toHaveTrackingAttributes({ + action: 'click_menu', + extra: JSON.stringify({ sidebar_display: 'Expanded', menu_display: 'Expanded', }), @@ -108,9 +108,9 @@ describe('~/pages/shared/nav/sidebar_tracking.js', () => { menu.classList.add('active'); menuLink.click(); - expect(menu.dataset).toMatchObject({ - trackAction: 'click_menu_item', - trackExtra: JSON.stringify({ + expect(menu).toHaveTrackingAttributes({ + action: 'click_menu_item', + extra: JSON.stringify({ sidebar_display: 'Expanded', menu_display: 'Expanded', }), @@ -131,9 +131,9 @@ describe('~/pages/shared/nav/sidebar_tracking.js', () => { menu.classList.add('is-over', 'is-showing-fly-out'); menuLink.click(); - expect(menu.dataset).toMatchObject({ - trackAction: 'click_menu', - trackExtra: JSON.stringify({ + expect(menu).toHaveTrackingAttributes({ + action: 'click_menu', + extra: JSON.stringify({ sidebar_display: 'Collapsed', menu_display: 'Fly out', }), @@ -148,9 +148,9 @@ describe('~/pages/shared/nav/sidebar_tracking.js', () => { submenuList.classList.add('fly-out-list'); menuLink.click(); - expect(menu.dataset).toMatchObject({ - trackAction: 'click_menu_item', - trackExtra: JSON.stringify({ + expect(menu).toHaveTrackingAttributes({ + action: 'click_menu_item', + extra: JSON.stringify({ sidebar_display: 'Collapsed', menu_display: 'Fly out', }), diff --git a/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js index f4236146d33..fd581eebd1e 100644 --- a/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js +++ b/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js @@ -1,5 +1,5 @@ import { nextTick } from 'vue'; -import { GlLoadingIcon, GlModal } from '@gitlab/ui'; +import { GlLoadingIcon, GlModal, GlAlert, GlButton } from '@gitlab/ui'; import { mount, shallowMount } from '@vue/test-utils'; import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; @@ -31,25 +31,28 @@ describe('WikiForm', () => { const findContent = () => wrapper.find('#wiki_content'); const findMessage = () => wrapper.find('#wiki_message'); const findSubmitButton = () => wrapper.findByTestId('wiki-submit-button'); - const findCancelButton = () => wrapper.findByRole('link', { name: 'Cancel' }); - const findUseNewEditorButton = () => wrapper.findByRole('button', { name: 'Use the new editor' }); + const findCancelButton = () => wrapper.findByTestId('wiki-cancel-button'); + const findUseNewEditorButton = () => wrapper.findByText('Use the new editor'); const findToggleEditingModeButton = () => wrapper.findByTestId('toggle-editing-mode-button'); - const findDismissContentEditorAlertButton = () => - wrapper.findByRole('button', { name: 'Try this later' }); + const findDismissContentEditorAlertButton = () => wrapper.findByText('Try this later'); const findSwitchToOldEditorButton = () => wrapper.findByRole('button', { name: 'Switch me back to the classic editor.' }); - const findTitleHelpLink = () => wrapper.findByRole('link', { name: 'Learn more.' }); + const findTitleHelpLink = () => wrapper.findByText('Learn more.'); const findMarkdownHelpLink = () => wrapper.findByTestId('wiki-markdown-help-link'); const findContentEditor = () => wrapper.findComponent(ContentEditor); const findClassicEditor = () => wrapper.findComponent(MarkdownField); const setFormat = (value) => { const format = findFormat(); - format.find(`option[value=${value}]`).setSelected(); - format.element.dispatchEvent(new Event('change')); + + return format.find(`option[value=${value}]`).setSelected(); }; - const triggerFormSubmit = () => findForm().element.dispatchEvent(new Event('submit')); + const triggerFormSubmit = () => { + findForm().element.dispatchEvent(new Event('submit')); + + return nextTick(); + }; const dispatchBeforeUnload = () => { const e = new Event('beforeunload'); @@ -84,34 +87,14 @@ describe('WikiForm', () => { Org: 'org', }; - function createWrapper( - persisted = false, - { pageInfo, glFeatures = { wikiSwitchBetweenContentEditorRawMarkdown: false } } = {}, - ) { - wrapper = extendedWrapper( - mount( - WikiForm, - { - provide: { - formatOptions, - glFeatures, - pageInfo: { - ...(persisted ? pageInfoPersisted : pageInfoNew), - ...pageInfo, - }, - }, - }, - { attachToDocument: true }, - ), - ); - } - - const createShallowWrapper = ( + function createWrapper({ + mountFn = shallowMount, persisted = false, - { pageInfo, glFeatures = { wikiSwitchBetweenContentEditorRawMarkdown: false } } = {}, - ) => { + pageInfo, + glFeatures = { wikiSwitchBetweenContentEditorRawMarkdown: false }, + } = {}) { wrapper = extendedWrapper( - shallowMount(WikiForm, { + mountFn(WikiForm, { provide: { formatOptions, glFeatures, @@ -122,10 +105,12 @@ describe('WikiForm', () => { }, stubs: { MarkdownField, + GlAlert, + GlButton, }, }), ); - }; + } beforeEach(() => { trackingSpy = mockTracking(undefined, null, jest.spyOn); @@ -147,26 +132,24 @@ describe('WikiForm', () => { `( 'updates the commit message to $message when title is $title and persisted=$persisted', async ({ title, message, persisted }) => { - createWrapper(persisted); - - findTitle().setValue(title); + createWrapper({ persisted }); - await wrapper.vm.$nextTick(); + await findTitle().setValue(title); expect(findMessage().element.value).toBe(message); }, ); it('sets the commit message to "Update My page" when the page first loads when persisted', async () => { - createWrapper(true); + createWrapper({ persisted: true }); - await wrapper.vm.$nextTick(); + await nextTick(); expect(findMessage().element.value).toBe('Update My page'); }); it('does not trim page content by default', () => { - createWrapper(true); + createWrapper({ persisted: true }); expect(findContent().element.value).toBe(' My page content '); }); @@ -178,20 +161,16 @@ describe('WikiForm', () => { ${'asciidoc'} | ${'link:page-slug[Link title]'} ${'org'} | ${'[[page-slug]]'} `('updates the link help message when format=$value is selected', async ({ value, text }) => { - createWrapper(); + createWrapper({ mountFn: mount }); - setFormat(value); - - await wrapper.vm.$nextTick(); + await setFormat(value); expect(wrapper.text()).toContain(text); }); - it('starts with no unload warning', async () => { + it('starts with no unload warning', () => { createWrapper(); - await wrapper.vm.$nextTick(); - const e = dispatchBeforeUnload(); expect(typeof e.returnValue).not.toBe('string'); expect(e.preventDefault).not.toHaveBeenCalled(); @@ -203,20 +182,16 @@ describe('WikiForm', () => { ${false} | ${'You can specify the full path for the new file. We will automatically create any missing directories.'} | ${'/help/user/project/wiki/index#create-a-new-wiki-page'} `( 'shows appropriate title help text and help link for when persisted=$persisted', - async ({ persisted, titleHelpLink, titleHelpText }) => { - createWrapper(persisted); - - await wrapper.vm.$nextTick(); + ({ persisted, titleHelpLink, titleHelpText }) => { + createWrapper({ persisted }); expect(wrapper.text()).toContain(titleHelpText); expect(findTitleHelpLink().attributes().href).toBe(titleHelpLink); }, ); - it('shows correct link for wiki specific markdown docs', async () => { - createWrapper(); - - await wrapper.vm.$nextTick(); + it('shows correct link for wiki specific markdown docs', () => { + createWrapper({ mountFn: mount }); expect(findMarkdownHelpLink().attributes().href).toBe( '/help/user/markdown#wiki-specific-markdown', @@ -225,12 +200,11 @@ describe('WikiForm', () => { describe('when wiki content is updated', () => { beforeEach(async () => { - createWrapper(true); + createWrapper({ mountFn: mount, persisted: true }); const input = findContent(); - input.setValue(' Lorem ipsum dolar sit! '); - await input.trigger('input'); + await input.setValue(' Lorem ipsum dolar sit! '); }); it('sets before unload warning', () => { @@ -241,17 +215,15 @@ describe('WikiForm', () => { describe('form submit', () => { beforeEach(async () => { - triggerFormSubmit(); - - await wrapper.vm.$nextTick(); + await triggerFormSubmit(); }); - it('when form submitted, unsets before unload warning', async () => { + it('when form submitted, unsets before unload warning', () => { const e = dispatchBeforeUnload(); expect(e.preventDefault).not.toHaveBeenCalled(); }); - it('triggers wiki format tracking event', async () => { + it('triggers wiki format tracking event', () => { expect(trackingSpy).toHaveBeenCalledTimes(1); }); @@ -264,22 +236,20 @@ describe('WikiForm', () => { describe('submit button state', () => { it.each` title | content | buttonState | disabledAttr - ${'something'} | ${'something'} | ${'enabled'} | ${undefined} - ${''} | ${'something'} | ${'disabled'} | ${'disabled'} - ${'something'} | ${''} | ${'disabled'} | ${'disabled'} - ${''} | ${''} | ${'disabled'} | ${'disabled'} - ${' '} | ${' '} | ${'disabled'} | ${'disabled'} + ${'something'} | ${'something'} | ${'enabled'} | ${false} + ${''} | ${'something'} | ${'disabled'} | ${true} + ${'something'} | ${''} | ${'disabled'} | ${true} + ${''} | ${''} | ${'disabled'} | ${true} + ${' '} | ${' '} | ${'disabled'} | ${true} `( "when title='$title', content='$content', then the button is $buttonState'", async ({ title, content, disabledAttr }) => { createWrapper(); - findTitle().setValue(title); - findContent().setValue(content); + await findTitle().setValue(title); + await findContent().setValue(content); - await wrapper.vm.$nextTick(); - - expect(findSubmitButton().attributes().disabled).toBe(disabledAttr); + expect(findSubmitButton().props().disabled).toBe(disabledAttr); }, ); @@ -288,7 +258,7 @@ describe('WikiForm', () => { ${true} | ${'Save changes'} ${false} | ${'Create page'} `('when persisted=$persisted, label is set to $buttonLabel', ({ persisted, buttonLabel }) => { - createWrapper(persisted); + createWrapper({ persisted }); expect(findSubmitButton().text()).toBe(buttonLabel); }); @@ -302,7 +272,7 @@ describe('WikiForm', () => { `( 'when persisted=$persisted, redirects the user to appropriate path', ({ persisted, redirectLink }) => { - createWrapper(persisted); + createWrapper({ persisted }); expect(findCancelButton().attributes().href).toBe(redirectLink); }, @@ -311,7 +281,7 @@ describe('WikiForm', () => { describe('when wikiSwitchBetweenContentEditorRawMarkdown feature flag is not enabled', () => { beforeEach(() => { - createShallowWrapper(true, { + createWrapper({ glFeatures: { wikiSwitchBetweenContentEditorRawMarkdown: false }, }); }); @@ -323,7 +293,7 @@ describe('WikiForm', () => { describe('when wikiSwitchBetweenContentEditorRawMarkdown feature flag is enabled', () => { beforeEach(() => { - createShallowWrapper(true, { + createWrapper({ glFeatures: { wikiSwitchBetweenContentEditorRawMarkdown: true }, }); }); @@ -404,10 +374,6 @@ describe('WikiForm', () => { }); describe('wiki content editor', () => { - beforeEach(() => { - createWrapper(true); - }); - it.each` format | buttonExists ${'markdown'} | ${true} @@ -415,15 +381,17 @@ describe('WikiForm', () => { `( 'gl-alert containing "use new editor" button exists: $buttonExists if format is $format', async ({ format, buttonExists }) => { - setFormat(format); + createWrapper(); - await wrapper.vm.$nextTick(); + await setFormat(format); expect(findUseNewEditorButton().exists()).toBe(buttonExists); }, ); it('gl-alert containing "use new editor" button is dismissed on clicking dismiss button', async () => { + createWrapper(); + await findDismissContentEditorAlertButton().trigger('click'); expect(findUseNewEditorButton().exists()).toBe(false); @@ -442,22 +410,24 @@ describe('WikiForm', () => { ); }; - it('shows classic editor by default', assertOldEditorIsVisible); + it('shows classic editor by default', () => { + createWrapper({ persisted: true }); + + assertOldEditorIsVisible(); + }); describe('switch format to rdoc', () => { beforeEach(async () => { - setFormat('rdoc'); + createWrapper({ persisted: true }); - await wrapper.vm.$nextTick(); + await setFormat('rdoc'); }); it('continues to show the classic editor', assertOldEditorIsVisible); describe('switch format back to markdown', () => { beforeEach(async () => { - setFormat('rdoc'); - - await wrapper.vm.$nextTick(); + await setFormat('markdown'); }); it( @@ -469,6 +439,7 @@ describe('WikiForm', () => { describe('clicking "use new editor": editor fails to load', () => { beforeEach(async () => { + createWrapper({ mountFn: mount }); mock.onPost(/preview-markdown/).reply(400); await findUseNewEditorButton().trigger('click'); @@ -494,10 +465,12 @@ describe('WikiForm', () => { }); describe('clicking "use new editor": editor loads successfully', () => { - beforeEach(() => { + beforeEach(async () => { + createWrapper({ persisted: true, mountFn: mount }); + mock.onPost(/preview-markdown/).reply(200, { body: '<p>hello <strong>world</strong></p>' }); - findUseNewEditorButton().trigger('click'); + await findUseNewEditorButton().trigger('click'); }); it('shows a tip to send feedback', () => { @@ -542,46 +515,40 @@ describe('WikiForm', () => { }); it('unsets before unload warning on form submit', async () => { - triggerFormSubmit(); - - await nextTick(); + await triggerFormSubmit(); const e = dispatchBeforeUnload(); expect(e.preventDefault).not.toHaveBeenCalled(); }); - }); - it('triggers tracking events on form submit', async () => { - triggerFormSubmit(); + it('triggers tracking events on form submit', async () => { + await triggerFormSubmit(); - await wrapper.vm.$nextTick(); - - expect(trackingSpy).toHaveBeenCalledWith(undefined, SAVED_USING_CONTENT_EDITOR_ACTION, { - label: WIKI_CONTENT_EDITOR_TRACKING_LABEL, - }); + expect(trackingSpy).toHaveBeenCalledWith(undefined, SAVED_USING_CONTENT_EDITOR_ACTION, { + label: WIKI_CONTENT_EDITOR_TRACKING_LABEL, + }); - expect(trackingSpy).toHaveBeenCalledWith(undefined, WIKI_FORMAT_UPDATED_ACTION, { - label: WIKI_FORMAT_LABEL, - extra: { - value: findFormat().element.value, - old_format: pageInfoPersisted.format, - project_path: pageInfoPersisted.path, - }, + expect(trackingSpy).toHaveBeenCalledWith(undefined, WIKI_FORMAT_UPDATED_ACTION, { + label: WIKI_FORMAT_LABEL, + extra: { + value: findFormat().element.value, + old_format: pageInfoPersisted.format, + project_path: pageInfoPersisted.path, + }, + }); }); - }); - - it('updates content from content editor on form submit', async () => { - // old value - expect(findContent().element.value).toBe(' My page content '); - // wait for content editor to load - await waitForPromises(); + it('updates content from content editor on form submit', async () => { + // old value + expect(findContent().element.value).toBe(' My page content '); - triggerFormSubmit(); + // wait for content editor to load + await waitForPromises(); - await wrapper.vm.$nextTick(); + await triggerFormSubmit(); - expect(findContent().element.value).toBe('hello **world**'); + expect(findContent().element.value).toBe('hello **world**'); + }); }); describe('clicking "switch to classic editor"', () => { |