Commit c98500ea authored by Himanshu Kapoor's avatar Himanshu Kapoor Committed by Enrique Alcántara

Compatibility message and error handling in content editor

parent c17f8a2f
...@@ -36742,6 +36742,12 @@ msgstr "" ...@@ -36742,6 +36742,12 @@ msgstr ""
msgid "WikiPageConflictMessage|Someone edited the page the same time you did. Please check out %{wikiLinkStart}the page%{wikiLinkEnd} and make sure your changes will not unintentionally remove theirs." msgid "WikiPageConflictMessage|Someone edited the page the same time you did. Please check out %{wikiLinkStart}the page%{wikiLinkEnd} and make sure your changes will not unintentionally remove theirs."
msgstr "" msgstr ""
msgid "WikiPage|An error occured while trying to render the content editor. Please try again later."
msgstr ""
msgid "WikiPage|Are you sure you want to switch to the old editor?"
msgstr ""
msgid "WikiPage|Cancel" msgid "WikiPage|Cancel"
msgstr "" msgstr ""
...@@ -36760,12 +36766,18 @@ msgstr "" ...@@ -36760,12 +36766,18 @@ msgstr ""
msgid "WikiPage|Format" msgid "WikiPage|Format"
msgstr "" msgstr ""
msgid "WikiPage|Keep editing"
msgstr ""
msgid "WikiPage|More Information." msgid "WikiPage|More Information."
msgstr "" msgstr ""
msgid "WikiPage|Page title" msgid "WikiPage|Page title"
msgstr "" msgstr ""
msgid "WikiPage|Retry"
msgstr ""
msgid "WikiPage|Save changes" msgid "WikiPage|Save changes"
msgstr "" msgstr ""
...@@ -36775,6 +36787,12 @@ msgstr "" ...@@ -36775,6 +36787,12 @@ msgstr ""
msgid "WikiPage|Switching to the old editor will discard any changes you've made in the new editor." msgid "WikiPage|Switching to the old editor will discard any changes you've made in the new editor."
msgstr "" msgstr ""
msgid "WikiPage|Switching will discard any changes you've made in the new editor."
msgstr ""
msgid "WikiPage|This editor is in beta and may not display the page's contents properly."
msgstr ""
msgid "WikiPage|Tip: You can move this page by adding the path to the beginning of the title." msgid "WikiPage|Tip: You can move this page by adding the path to the beginning of the title."
msgstr "" msgstr ""
...@@ -36796,9 +36814,6 @@ msgstr "" ...@@ -36796,9 +36814,6 @@ msgstr ""
msgid "WikiPage|Write your content or drag files here…" msgid "WikiPage|Write your content or drag files here…"
msgstr "" msgstr ""
msgid "WikiPage|You are editing this page with Content Editor. This editor is in beta and may not display the page's contents properly."
msgstr ""
msgid "Wikis" msgid "Wikis"
msgstr "" msgstr ""
......
import { GlAlert, GlButton, GlLoadingIcon } from '@gitlab/ui'; import { GlLoadingIcon, GlModal } from '@gitlab/ui';
import { mount } from '@vue/test-utils'; import { mount } from '@vue/test-utils';
import axios from 'axios'; import axios from 'axios';
import MockAdapter from 'axios-mock-adapter'; import MockAdapter from 'axios-mock-adapter';
...@@ -10,6 +10,7 @@ import MarkdownField from '~/vue_shared/components/markdown/field.vue'; ...@@ -10,6 +10,7 @@ import MarkdownField from '~/vue_shared/components/markdown/field.vue';
describe('WikiForm', () => { describe('WikiForm', () => {
let wrapper; let wrapper;
let mock;
const findForm = () => wrapper.find('form'); const findForm = () => wrapper.find('form');
const findTitle = () => wrapper.find('#wiki_title'); const findTitle = () => wrapper.find('#wiki_title');
...@@ -19,6 +20,8 @@ describe('WikiForm', () => { ...@@ -19,6 +20,8 @@ describe('WikiForm', () => {
const findSubmitButton = () => wrapper.findByTestId('wiki-submit-button'); const findSubmitButton = () => wrapper.findByTestId('wiki-submit-button');
const findCancelButton = () => wrapper.findByRole('link', { name: 'Cancel' }); const findCancelButton = () => wrapper.findByRole('link', { name: 'Cancel' });
const findUseNewEditorButton = () => wrapper.findByRole('button', { name: 'Use new editor' }); const findUseNewEditorButton = () => wrapper.findByRole('button', { name: 'Use new editor' });
const findSwitchToOldEditorButton = () =>
wrapper.findByRole('button', { name: 'Switch to old editor' });
const findTitleHelpLink = () => wrapper.findByRole('link', { name: 'More Information.' }); const findTitleHelpLink = () => wrapper.findByRole('link', { name: 'More Information.' });
const findMarkdownHelpLink = () => wrapper.findByTestId('wiki-markdown-help-link'); const findMarkdownHelpLink = () => wrapper.findByTestId('wiki-markdown-help-link');
...@@ -84,7 +87,12 @@ describe('WikiForm', () => { ...@@ -84,7 +87,12 @@ describe('WikiForm', () => {
); );
} }
beforeEach(() => {
mock = new MockAdapter(axios);
});
afterEach(() => { afterEach(() => {
mock.restore();
wrapper.destroy(); wrapper.destroy();
wrapper = null; wrapper = null;
}); });
...@@ -266,7 +274,14 @@ describe('WikiForm', () => { ...@@ -266,7 +274,14 @@ describe('WikiForm', () => {
const assertOldEditorIsVisible = () => { const assertOldEditorIsVisible = () => {
expect(wrapper.findComponent(ContentEditor).exists()).toBe(false); expect(wrapper.findComponent(ContentEditor).exists()).toBe(false);
expect(wrapper.findComponent(MarkdownField).exists()).toBe(true); expect(wrapper.findComponent(MarkdownField).exists()).toBe(true);
expect(wrapper.findComponent(GlAlert).exists()).toBe(false); 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 old editor by default', assertOldEditorIsVisible); it('shows old editor by default', assertOldEditorIsVisible);
...@@ -294,29 +309,54 @@ describe('WikiForm', () => { ...@@ -294,29 +309,54 @@ describe('WikiForm', () => {
}); });
}); });
describe('clicking "use new editor"', () => { describe('clicking "use new editor": editor fails to load', () => {
let mock;
beforeEach(async () => { beforeEach(async () => {
mock = new MockAdapter(axios); mock.onPost(/preview-markdown/).reply(400);
mock.onPost(/preview-markdown/).reply(200, { body: '<p>hello <strong>world</strong></p>' });
findUseNewEditorButton().trigger('click'); await findUseNewEditorButton().trigger('click');
await wrapper.vm.$nextTick(); // try waiting for content editor to load (but it will never actually load)
await waitForPromises();
}); });
afterEach(() => { it('editor is shown in a perpetual loading state', () => {
mock.restore(); expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
expect(wrapper.findComponent(ContentEditor).exists()).toBe(false);
});
it('disables the submit button', () => {
expect(findSubmitButton().props('disabled')).toBe(true);
});
describe('clicking "switch to old editor"', () => {
beforeEach(() => {
return findSwitchToOldEditorButton().trigger('click');
});
it('switches to old editor directly without showing a modal', () => {
expect(wrapper.findComponent(ContentEditor).exists()).toBe(false);
expect(wrapper.findComponent(MarkdownField).exists()).toBe(true);
});
});
});
describe('clicking "use new editor": editor loads successfully', () => {
beforeEach(() => {
mock.onPost(/preview-markdown/).reply(200, { body: '<p>hello <strong>world</strong></p>' });
findUseNewEditorButton().trigger('click');
}); });
it('shows a loading indicator for the rich text editor', () => { it('shows a loading indicator for the rich text editor', () => {
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true); expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
}); });
it('shows a warning alert that the rich text editor is in beta', () => { it('shows warnings that the rich text editor is in beta and may not work properly', () => {
expect(wrapper.findComponent(GlAlert).text()).toContain( expect(wrapper.text()).toContain(
"You are editing this page with Content Editor. This editor is in beta and may not display the page's contents properly.", "Switching will discard any changes you've made in the new editor.",
);
expect(wrapper.text()).toContain(
"This editor is in beta and may not display the page's contents properly.",
); );
}); });
...@@ -342,8 +382,6 @@ describe('WikiForm', () => { ...@@ -342,8 +382,6 @@ describe('WikiForm', () => {
true, true,
); );
await waitForPromises();
return wrapper.vm.$nextTick(); return wrapper.vm.$nextTick();
}); });
...@@ -377,15 +415,27 @@ describe('WikiForm', () => { ...@@ -377,15 +415,27 @@ describe('WikiForm', () => {
}); });
describe('clicking "switch to old editor"', () => { describe('clicking "switch to old editor"', () => {
let modal;
beforeEach(async () => { beforeEach(async () => {
// wait for content editor to load modal = wrapper.findComponent(GlModal);
await waitForPromises(); jest.spyOn(modal.vm, 'show');
findSwitchToOldEditorButton().trigger('click');
});
it('shows a modal confirming the change', () => {
expect(modal.vm.show).toHaveBeenCalled();
});
describe('confirming "switch to old editor" in the modal', () => {
beforeEach(async () => {
wrapper.vm.contentEditor.tiptapEditor.commands.setContent( wrapper.vm.contentEditor.tiptapEditor.commands.setContent(
'<p>hello __world__ from content editor</p>', '<p>hello __world__ from content editor</p>',
true, true,
); );
wrapper.findComponent(GlAlert).findComponent(GlButton).trigger('click');
wrapper.findComponent(GlModal).vm.$emit('primary');
await wrapper.vm.$nextTick(); await wrapper.vm.$nextTick();
}); });
...@@ -395,8 +445,10 @@ describe('WikiForm', () => { ...@@ -395,8 +445,10 @@ describe('WikiForm', () => {
expect(wrapper.findComponent(MarkdownField).exists()).toBe(true); expect(wrapper.findComponent(MarkdownField).exists()).toBe(true);
}); });
it('does not show a warning alert about content editor', () => { it('does not show a warning about content editor', () => {
expect(wrapper.findComponent(GlAlert).exists()).toBe(false); expect(wrapper.text()).not.toContain(
"This editor is in beta and may not display the page's contents properly.",
);
}); });
it('the old editor retains its old value and does not use the content from the content editor', () => { it('the old editor retains its old value and does not use the content from the content editor', () => {
...@@ -405,4 +457,5 @@ describe('WikiForm', () => { ...@@ -405,4 +457,5 @@ describe('WikiForm', () => {
}); });
}); });
}); });
});
}); });
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment