summaryrefslogtreecommitdiff
path: root/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js
diff options
context:
space:
mode:
Diffstat (limited to 'spec/frontend/pages/shared/wikis/components/wiki_form_spec.js')
-rw-r--r--spec/frontend/pages/shared/wikis/components/wiki_form_spec.js192
1 files changed, 28 insertions, 164 deletions
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 ');
- });
- });
- });
});
});
});
View Lorry Controller Status