diff options
Diffstat (limited to 'spec/frontend/pages/shared/wikis')
-rw-r--r-- | spec/frontend/pages/shared/wikis/components/wiki_content_spec.js | 97 | ||||
-rw-r--r-- | spec/frontend/pages/shared/wikis/components/wiki_form_spec.js | 192 |
2 files changed, 125 insertions, 164 deletions
diff --git a/spec/frontend/pages/shared/wikis/components/wiki_content_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_content_spec.js new file mode 100644 index 00000000000..365bb878485 --- /dev/null +++ b/spec/frontend/pages/shared/wikis/components/wiki_content_spec.js @@ -0,0 +1,97 @@ +import { GlSkeletonLoader, GlAlert } from '@gitlab/ui'; +import { nextTick } from 'vue'; +import { shallowMount } from '@vue/test-utils'; +import MockAdapter from 'axios-mock-adapter'; +import WikiContent from '~/pages/shared/wikis/components/wiki_content.vue'; +import { renderGFM } from '~/pages/shared/wikis/render_gfm_facade'; +import axios from '~/lib/utils/axios_utils'; +import httpStatus from '~/lib/utils/http_status'; +import waitForPromises from 'helpers/wait_for_promises'; + +jest.mock('~/pages/shared/wikis/render_gfm_facade'); + +describe('pages/shared/wikis/components/wiki_content', () => { + const PATH = '/test'; + let wrapper; + let mock; + + function buildWrapper(propsData = {}) { + wrapper = shallowMount(WikiContent, { + propsData: { getWikiContentUrl: PATH, ...propsData }, + stubs: { + GlSkeletonLoader, + GlAlert, + }, + }); + } + + beforeEach(() => { + mock = new MockAdapter(axios); + }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const findGlAlert = () => wrapper.findComponent(GlAlert); + const findGlSkeletonLoader = () => wrapper.findComponent(GlSkeletonLoader); + const findContent = () => wrapper.find('[data-testid="wiki_page_content"]'); + + describe('when loading content', () => { + beforeEach(() => { + buildWrapper(); + }); + + it('renders skeleton loader', () => { + expect(findGlSkeletonLoader().exists()).toBe(true); + }); + + it('does not render content container or error alert', () => { + expect(findGlAlert().exists()).toBe(false); + expect(findContent().exists()).toBe(false); + }); + }); + + describe('when content loads successfully', () => { + const content = 'content'; + + beforeEach(() => { + mock.onGet(PATH, { params: { render_html: true } }).replyOnce(httpStatus.OK, { content }); + buildWrapper(); + return waitForPromises(); + }); + + it('renders content container', () => { + expect(findContent().text()).toBe(content); + }); + + it('does not render skeleton loader or error alert', () => { + expect(findGlAlert().exists()).toBe(false); + expect(findGlSkeletonLoader().exists()).toBe(false); + }); + + it('calls renderGFM after nextTick', async () => { + await nextTick(); + + expect(renderGFM).toHaveBeenCalledWith(wrapper.element); + }); + }); + + describe('when loading content fails', () => { + beforeEach(() => { + mock.onGet(PATH).replyOnce(httpStatus.INTERNAL_SERVER_ERROR, ''); + buildWrapper(); + return waitForPromises(); + }); + + it('renders error alert', () => { + expect(findGlAlert().exists()).toBe(true); + }); + + it('does not render skeleton loader or content container', () => { + expect(findContent().exists()).toBe(false); + expect(findGlSkeletonLoader().exists()).toBe(false); + }); + }); +}); 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 e118a35804f..d7f8dc3c98e 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, GlAlert, GlButton } from '@gitlab/ui'; +import { GlAlert, GlButton } from '@gitlab/ui'; import { mount, shallowMount } from '@vue/test-utils'; import axios from 'axios'; import MockAdapter from 'axios-mock-adapter'; @@ -32,11 +32,7 @@ describe('WikiForm', () => { const findMessage = () => wrapper.find('#wiki_message'); const findSubmitButton = () => wrapper.findByTestId('wiki-submit-button'); 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.findByText('Try this later'); - const findSwitchToOldEditorButton = () => - wrapper.findByRole('button', { name: 'Switch me back to the classic editor.' }); const findTitleHelpLink = () => wrapper.findByText('Learn more.'); const findMarkdownHelpLink = () => wrapper.findByTestId('wiki-markdown-help-link'); const findContentEditor = () => wrapper.findComponent(ContentEditor); @@ -293,27 +289,21 @@ describe('WikiForm', () => { ); }); - describe('when wikiSwitchBetweenContentEditorRawMarkdown feature flag is not enabled', () => { + describe('toggle editing mode control', () => { beforeEach(() => { - createWrapper({ - glFeatures: { wikiSwitchBetweenContentEditorRawMarkdown: false }, - }); - }); - - it('hides toggle editing mode button', () => { - expect(findToggleEditingModeButton().exists()).toBe(false); - }); - }); - - describe('when wikiSwitchBetweenContentEditorRawMarkdown feature flag is enabled', () => { - beforeEach(() => { - createWrapper({ - glFeatures: { wikiSwitchBetweenContentEditorRawMarkdown: true }, - }); + createWrapper(); }); - it('hides gl-alert containing "use new editor" button', () => { - expect(findUseNewEditorButton().exists()).toBe(false); + it.each` + format | enabled | action + ${'markdown'} | ${true} | ${'displays'} + ${'rdoc'} | ${false} | ${'hides'} + ${'asciidoc'} | ${false} | ${'hides'} + ${'org'} | ${false} | ${'hides'} + `('$action toggle editing mode button when format is $format', async ({ format, enabled }) => { + await setFormat(format); + + expect(findToggleEditingModeButton().exists()).toBe(enabled); }); it('displays toggle editing mode button', () => { @@ -326,8 +316,8 @@ describe('WikiForm', () => { }); describe('when clicking the toggle editing mode button', () => { - beforeEach(() => { - findToggleEditingModeButton().vm.$emit('click'); + beforeEach(async () => { + await findToggleEditingModeButton().trigger('click'); }); it('hides the classic editor', () => { @@ -343,17 +333,13 @@ describe('WikiForm', () => { describe('when content editor is active', () => { let mockContentEditor; - beforeEach(() => { + beforeEach(async () => { mockContentEditor = { getSerializedContent: jest.fn(), setSerializedContent: jest.fn(), }; - findToggleEditingModeButton().vm.$emit('click'); - }); - - it('hides switch to old editor button', () => { - expect(findSwitchToOldEditorButton().exists()).toBe(false); + await findToggleEditingModeButton().trigger('click'); }); it('displays "Edit source" label in the toggle editing mode button', () => { @@ -363,13 +349,13 @@ describe('WikiForm', () => { describe('when clicking the toggle editing mode button', () => { const contentEditorFakeSerializedContent = 'fake content'; - beforeEach(() => { + beforeEach(async () => { mockContentEditor.getSerializedContent.mockReturnValueOnce( contentEditorFakeSerializedContent, ); findContentEditor().vm.$emit('initialized', mockContentEditor); - findToggleEditingModeButton().vm.$emit('click'); + await findToggleEditingModeButton().trigger('click'); }); it('hides the content editor', () => { @@ -388,75 +374,12 @@ describe('WikiForm', () => { }); describe('wiki content editor', () => { - it.each` - format | buttonExists - ${'markdown'} | ${true} - ${'rdoc'} | ${false} - `( - 'gl-alert containing "use new editor" button exists: $buttonExists if format is $format', - async ({ format, buttonExists }) => { - createWrapper(); - - 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); - }); - - const assertOldEditorIsVisible = () => { - expect(findContentEditor().exists()).toBe(false); - expect(findClassicEditor().exists()).toBe(true); - expect(findSubmitButton().props('disabled')).toBe(false); - - expect(wrapper.text()).not.toContain( - "Switching will discard any changes you've made in the new editor.", - ); - expect(wrapper.text()).not.toContain( - "This editor is in beta and may not display the page's contents properly.", - ); - }; - - it('shows classic editor by default', () => { - createWrapper({ persisted: true }); - - assertOldEditorIsVisible(); - }); - - describe('switch format to rdoc', () => { - beforeEach(async () => { - createWrapper({ persisted: true }); - - await setFormat('rdoc'); - }); - - it('continues to show the classic editor', assertOldEditorIsVisible); - - describe('switch format back to markdown', () => { - beforeEach(async () => { - await setFormat('markdown'); - }); - - it( - 'still shows the classic editor and does not automatically switch to the content editor ', - assertOldEditorIsVisible, - ); - }); - }); - describe('clicking "use new editor": editor fails to load', () => { beforeEach(async () => { createWrapper({ mountFn: mount }); mock.onPost(/preview-markdown/).reply(400); - await findUseNewEditorButton().trigger('click'); + await findToggleEditingModeButton().trigger('click'); // try waiting for content editor to load (but it will never actually load) await waitForPromises(); @@ -466,14 +389,14 @@ describe('WikiForm', () => { expect(findSubmitButton().props('disabled')).toBe(true); }); - describe('clicking "switch to classic editor"', () => { + describe('toggling editing modes to the classic editor', () => { beforeEach(() => { - return findSwitchToOldEditorButton().trigger('click'); + return findToggleEditingModeButton().trigger('click'); }); - it('switches to classic editor directly without showing a modal', () => { - expect(wrapper.findComponent(ContentEditor).exists()).toBe(false); - expect(wrapper.findComponent(MarkdownField).exists()).toBe(true); + it('switches to classic editor', () => { + expect(findContentEditor().exists()).toBe(false); + expect(findClassicEditor().exists()).toBe(true); }); }); }); @@ -484,31 +407,15 @@ describe('WikiForm', () => { mock.onPost(/preview-markdown/).reply(200, { body: '<p>hello <strong>world</strong></p>' }); - await findUseNewEditorButton().trigger('click'); - }); - - it('shows a tip to send feedback', () => { - expect(wrapper.text()).toContain('Tell us your experiences with the new Markdown editor'); - }); - - it('shows warnings that the rich text editor is in beta and may not work properly', () => { - expect(wrapper.text()).toContain( - "This editor is in beta and may not display the page's contents properly.", - ); + await findToggleEditingModeButton().trigger('click'); + await waitForPromises(); }); it('shows the rich text editor when loading finishes', async () => { - // wait for content editor to load - await waitForPromises(); - - expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(false); - expect(wrapper.findComponent(ContentEditor).exists()).toBe(true); + expect(findContentEditor().exists()).toBe(true); }); it('sends tracking event when editor loads', async () => { - // wait for content editor to load - await waitForPromises(); - expect(trackingSpy).toHaveBeenCalledWith(undefined, CONTENT_EDITOR_LOADED_ACTION, { label: WIKI_CONTENT_EDITOR_TRACKING_LABEL, }); @@ -564,49 +471,6 @@ describe('WikiForm', () => { expect(findContent().element.value).toBe('hello **world**'); }); }); - - describe('clicking "switch to classic editor"', () => { - let modal; - - beforeEach(async () => { - modal = wrapper.findComponent(GlModal); - jest.spyOn(modal.vm, 'show'); - - findSwitchToOldEditorButton().trigger('click'); - }); - - it('shows a modal confirming the change', () => { - expect(modal.vm.show).toHaveBeenCalled(); - }); - - describe('confirming "switch to classic editor" in the modal', () => { - beforeEach(async () => { - wrapper.vm.contentEditor.tiptapEditor.commands.setContent( - '<p>hello __world__ from content editor</p>', - true, - ); - - wrapper.findComponent(GlModal).vm.$emit('primary'); - - await nextTick(); - }); - - it('switches to classic editor', () => { - expect(wrapper.findComponent(ContentEditor).exists()).toBe(false); - expect(wrapper.findComponent(MarkdownField).exists()).toBe(true); - }); - - it('does not show a warning about content editor', () => { - expect(wrapper.text()).not.toContain( - "This editor is in beta and may not display the page's contents properly.", - ); - }); - - it('the classic editor retains its old value and does not use the content from the content editor', () => { - expect(findContent().element.value).toBe(' My page content '); - }); - }); - }); }); }); }); |