Skip to content

G
gitlab-ce
Commit ef64328d authored by Enrique Alcantara's avatar Enrique Alcantara
Browse files
Options

Refactor wiki_form_spec.js file 

Refactor test suite for the wiki_form.vue component
with the following goals:

Prevent timeouts in local and remote environments
Use a single createWrapper function
Follow vue-test-utils best practices
parent 4aa57280
Hide whitespace changes
Inline Side-by-side
Showing with 92 additions and 123 deletions
app/assets/javascripts/pages/shared/wikis/components/wiki_form.vue
View file @ ef64328d
......@@ -596,7 +596,9 @@ export default {
:disabled="disableSubmitButton"
>{{ submitButtonText }}</gl-button
>
<gl-button :href="cancelFormPath" class="float-right">{{ $options.i18n.cancel }}</gl-button>
<gl-button data-testid="wiki-cancel-button" :href="cancelFormPath" class="float-right">{{
$options.i18n.cancel
}}</gl-button>
</div>
</gl-form>
</template>
spec/frontend/pages/shared/wikis/components/wiki_form_spec.js
View file @ ef64328d
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"', () => {
......
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
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7