From 3bd9ad5574f2ee81888dc13bc29e1d66dafaedba Mon Sep 17 00:00:00 2001 From: GitLab Bot Date: Thu, 25 Mar 2021 03:09:35 +0000 Subject: Add latest changes from gitlab-org/gitlab@master --- .../shared/wikis/components/wiki_alert_spec.js | 40 ++++ .../shared/wikis/components/wiki_form_spec.js | 222 +++++++++++++++++++++ .../frontend/pages/shared/wikis/wiki_alert_spec.js | 40 ---- .../snippet_description_edit_spec.js.snap | 1 + spec/frontend/wikis_spec.js | 153 -------------- 5 files changed, 263 insertions(+), 193 deletions(-) create mode 100644 spec/frontend/pages/shared/wikis/components/wiki_alert_spec.js create mode 100644 spec/frontend/pages/shared/wikis/components/wiki_form_spec.js delete mode 100644 spec/frontend/pages/shared/wikis/wiki_alert_spec.js (limited to 'spec/frontend') diff --git a/spec/frontend/pages/shared/wikis/components/wiki_alert_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_alert_spec.js new file mode 100644 index 00000000000..6a18473b1a7 --- /dev/null +++ b/spec/frontend/pages/shared/wikis/components/wiki_alert_spec.js @@ -0,0 +1,40 @@ +import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui'; +import { shallowMount } from '@vue/test-utils'; +import WikiAlert from '~/pages/shared/wikis/components/wiki_alert.vue'; + +describe('WikiAlert', () => { + let wrapper; + const ERROR = 'There is already a page with the same title in that path.'; + const ERROR_WITH_LINK = 'Before text %{wikiLinkStart}the page%{wikiLinkEnd} after text.'; + const PATH = '/test'; + + function createWrapper(propsData = {}, stubs = {}) { + wrapper = shallowMount(WikiAlert, { + propsData: { wikiPagePath: PATH, ...propsData }, + stubs, + }); + } + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const findGlAlert = () => wrapper.findComponent(GlAlert); + const findGlLink = () => wrapper.findComponent(GlLink); + const findGlSprintf = () => wrapper.findComponent(GlSprintf); + + describe('Wiki Alert', () => { + it('shows an alert when there is an error', () => { + createWrapper({ error: ERROR }); + expect(findGlAlert().exists()).toBe(true); + expect(findGlSprintf().exists()).toBe(true); + expect(findGlSprintf().attributes('message')).toBe(ERROR); + }); + + it('shows a the link to the help path', () => { + createWrapper({ error: ERROR_WITH_LINK }, { GlAlert, GlSprintf }); + expect(findGlLink().attributes('href')).toBe(PATH); + }); + }); +}); diff --git a/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js b/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js new file mode 100644 index 00000000000..b18bad1ad9b --- /dev/null +++ b/spec/frontend/pages/shared/wikis/components/wiki_form_spec.js @@ -0,0 +1,222 @@ +import { mount } from '@vue/test-utils'; +import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +import WikiForm from '~/pages/shared/wikis/components/wiki_form.vue'; + +describe('WikiForm', () => { + let wrapper; + + const findForm = () => wrapper.find('form'); + const findTitle = () => wrapper.find('#wiki_title'); + const findFormat = () => wrapper.find('#wiki_format'); + const findContent = () => wrapper.find('#wiki_content'); + const findMessage = () => wrapper.find('#wiki_message'); + const findSubmitButton = () => wrapper.findByTestId('wiki-submit-button'); + const findCancelButton = () => wrapper.findByTestId('wiki-cancel-button'); + const findTitleHelpLink = () => wrapper.findByTestId('wiki-title-help-link'); + const findMarkdownHelpLink = () => wrapper.findByTestId('wiki-markdown-help-link'); + + const pageInfoNew = { + persisted: false, + uploadsPath: '/project/path/-/wikis/attachments', + wikiPath: '/project/path/-/wikis', + helpPath: '/help/user/project/wiki/index', + markdownHelpPath: '/help/user/markdown', + markdownPreviewPath: '/project/path/-/wikis/.md/preview-markdown', + createPath: '/project/path/-/wikis/new', + }; + + const pageInfoPersisted = { + ...pageInfoNew, + persisted: true, + + title: 'My page', + content: 'My page content', + format: 'markdown', + path: '/project/path/-/wikis/home', + }; + + function createWrapper(persisted = false, pageInfo = {}) { + wrapper = extendedWrapper( + mount( + WikiForm, + { + provide: { + formatOptions: { + Markdown: 'markdown', + RDoc: 'rdoc', + AsciiDoc: 'asciidoc', + Org: 'org', + }, + pageInfo: { + ...(persisted ? pageInfoPersisted : pageInfoNew), + ...pageInfo, + }, + }, + }, + { attachToDocument: true }, + ), + ); + + jest.spyOn(wrapper.vm, 'onBeforeUnload'); + } + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + it.each` + title | persisted | message + ${'my page'} | ${false} | ${'Create my page'} + ${'my-page'} | ${false} | ${'Create my page'} + ${'somedir/my-page'} | ${false} | ${'Create somedir/my page'} + ${'my-page'} | ${true} | ${'Update my page'} + `( + 'updates the commit message to $message when title is $title and persisted=$persisted', + async ({ title, message, persisted }) => { + createWrapper(persisted); + + findTitle().setValue(title); + + await wrapper.vm.$nextTick(); + + 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); + + await wrapper.vm.$nextTick(); + + expect(findMessage().element.value).toBe('Update My page'); + }); + + it.each` + value | text + ${'markdown'} | ${'[Link Title](page-slug)'} + ${'rdoc'} | ${'{Link title}[link:page-slug]'} + ${'asciidoc'} | ${'link:page-slug[Link title]'} + ${'org'} | ${'[[page-slug]]'} + `('updates the link help message when format=$value is selected', async ({ value, text }) => { + createWrapper(); + + findFormat().find(`option[value=${value}]`).setSelected(); + + await wrapper.vm.$nextTick(); + + expect(wrapper.text()).toContain(text); + }); + + it('starts with no unload warning', async () => { + createWrapper(); + + await wrapper.vm.$nextTick(); + + window.dispatchEvent(new Event('beforeunload')); + + expect(wrapper.vm.onBeforeUnload).not.toHaveBeenCalled(); + }); + + it.each` + persisted | titleHelpText | titleHelpLink + ${true} | ${'You can move this page by adding the path to the beginning of the title.'} | ${'/help/user/project/wiki/index#moving-a-wiki-page'} + ${false} | ${'You can specify the full path for the new file. We will automatically create any missing directories.'} | ${'/help/user/project/wiki/index#creating-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(); + + expect(wrapper.text()).toContain(titleHelpText); + expect(findTitleHelpLink().attributes().href).toEqual(titleHelpLink); + }, + ); + + it('shows correct link for wiki specific markdown docs', async () => { + createWrapper(); + + await wrapper.vm.$nextTick(); + + expect(findMarkdownHelpLink().attributes().href).toEqual( + '/help/user/markdown#wiki-specific-markdown', + ); + }); + + describe('when wiki content is updated', () => { + beforeEach(() => { + createWrapper(); + + const input = findContent(); + input.setValue('Lorem ipsum dolar sit!'); + input.element.dispatchEvent(new Event('input')); + + return wrapper.vm.$nextTick(); + }); + + it('sets before unload warning', () => { + window.dispatchEvent(new Event('beforeunload')); + + expect(wrapper.vm.onBeforeUnload).toHaveBeenCalled(); + }); + + it('when form submitted, unsets before unload warning', async () => { + findForm().element.dispatchEvent(new Event('submit')); + + await wrapper.vm.$nextTick(); + + window.dispatchEvent(new Event('beforeunload')); + + expect(wrapper.vm.onBeforeUnload).not.toHaveBeenCalled(); + }); + }); + + describe('submit button state', () => { + it.each` + title | content | buttonState | disabledAttr + ${'something'} | ${'something'} | ${'enabled'} | ${undefined} + ${''} | ${'something'} | ${'disabled'} | ${'disabled'} + ${'something'} | ${''} | ${'disabled'} | ${'disabled'} + ${''} | ${''} | ${'disabled'} | ${'disabled'} + ${' '} | ${' '} | ${'disabled'} | ${'disabled'} + `( + "when title='$title', content='$content', then the button is $buttonState'", + async ({ title, content, disabledAttr }) => { + createWrapper(); + + findTitle().setValue(title); + findContent().setValue(content); + + await wrapper.vm.$nextTick(); + + expect(findSubmitButton().attributes().disabled).toBe(disabledAttr); + }, + ); + + it.each` + persisted | buttonLabel + ${true} | ${'Save changes'} + ${false} | ${'Create page'} + `('when persisted=$persisted, label is set to $buttonLabel', ({ persisted, buttonLabel }) => { + createWrapper(persisted); + + expect(findSubmitButton().text()).toBe(buttonLabel); + }); + }); + + describe('cancel button state', () => { + it.each` + persisted | redirectLink + ${false} | ${'/project/path/-/wikis'} + ${true} | ${'/project/path/-/wikis/home'} + `( + 'when persisted=$persisted, redirects the user to appropriate path', + ({ persisted, redirectLink }) => { + createWrapper(persisted); + + expect(findCancelButton().attributes().href).toEqual(redirectLink); + }, + ); + }); +}); diff --git a/spec/frontend/pages/shared/wikis/wiki_alert_spec.js b/spec/frontend/pages/shared/wikis/wiki_alert_spec.js deleted file mode 100644 index 6a18473b1a7..00000000000 --- a/spec/frontend/pages/shared/wikis/wiki_alert_spec.js +++ /dev/null @@ -1,40 +0,0 @@ -import { GlAlert, GlLink, GlSprintf } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; -import WikiAlert from '~/pages/shared/wikis/components/wiki_alert.vue'; - -describe('WikiAlert', () => { - let wrapper; - const ERROR = 'There is already a page with the same title in that path.'; - const ERROR_WITH_LINK = 'Before text %{wikiLinkStart}the page%{wikiLinkEnd} after text.'; - const PATH = '/test'; - - function createWrapper(propsData = {}, stubs = {}) { - wrapper = shallowMount(WikiAlert, { - propsData: { wikiPagePath: PATH, ...propsData }, - stubs, - }); - } - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - const findGlAlert = () => wrapper.findComponent(GlAlert); - const findGlLink = () => wrapper.findComponent(GlLink); - const findGlSprintf = () => wrapper.findComponent(GlSprintf); - - describe('Wiki Alert', () => { - it('shows an alert when there is an error', () => { - createWrapper({ error: ERROR }); - expect(findGlAlert().exists()).toBe(true); - expect(findGlSprintf().exists()).toBe(true); - expect(findGlSprintf().attributes('message')).toBe(ERROR); - }); - - it('shows a the link to the help path', () => { - createWrapper({ error: ERROR_WITH_LINK }, { GlAlert, GlSprintf }); - expect(findGlLink().attributes('href')).toBe(PATH); - }); - }); -}); diff --git a/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap b/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap index cef5f8cc528..885f42cc065 100644 --- a/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap +++ b/spec/frontend/snippets/components/__snapshots__/snippet_description_edit_spec.js.snap @@ -25,6 +25,7 @@ exports[`Snippet Description Edit component rendering matches the snapshot 1`] =
{ - const editFormHtmlFixture = (args) => `
- - - - - {Link title}[link:page-slug] - - -
- `; - - let wikis; - let titleInput; - let contentInput; - let messageInput; - let changeFormatSelect; - let linkExample; - - const findBeforeUnloadWarning = () => window.onbeforeunload?.(); - const findForm = () => document.querySelector('.wiki-form'); - const findSubmitButton = () => document.querySelector('.js-wiki-btn-submit'); - - describe('when the wiki page is being created', () => { - const formHtmlFixture = editFormHtmlFixture({ newPage: true }); - - beforeEach(() => { - setHTMLFixture(formHtmlFixture); - - titleInput = document.getElementById('wiki_title'); - messageInput = document.getElementById('wiki_message'); - changeFormatSelect = document.querySelector('#wiki_format'); - linkExample = document.querySelector('.js-markup-link-example'); - wikis = new Wikis(); - }); - - it('binds an event listener to the title input', () => { - wikis.handleWikiTitleChange = jest.fn(); - - titleInput.dispatchEvent(new Event('keyup')); - - expect(wikis.handleWikiTitleChange).toHaveBeenCalled(); - }); - - it('sets the commit message when title changes', () => { - titleInput.value = 'My title'; - messageInput.value = ''; - - titleInput.dispatchEvent(new Event('keyup')); - - expect(messageInput.value).toEqual('Create My title'); - }); - - it('replaces hyphens with spaces', () => { - titleInput.value = 'my-hyphenated-title'; - titleInput.dispatchEvent(new Event('keyup')); - - expect(messageInput.value).toEqual('Create my hyphenated title'); - }); - }); - - describe('when the wiki page is being updated', () => { - const formHtmlFixture = editFormHtmlFixture({ newPage: false }); - - beforeEach(() => { - setHTMLFixture(formHtmlFixture); - - titleInput = document.getElementById('wiki_title'); - messageInput = document.getElementById('wiki_message'); - wikis = new Wikis(); - }); - - it('sets the commit message when title changes, prefixing with "Update"', () => { - titleInput.value = 'My title'; - messageInput.value = ''; - - titleInput.dispatchEvent(new Event('keyup')); - - expect(messageInput.value).toEqual('Update My title'); - }); - - it.each` - value | text - ${'markdown'} | ${'[Link Title](page-slug)'} - ${'rdoc'} | ${'{Link title}[link:page-slug]'} - ${'asciidoc'} | ${'link:page-slug[Link title]'} - ${'org'} | ${'[[page-slug]]'} - `('updates a message when value=$value is selected', ({ value, text }) => { - changeFormatSelect.value = value; - changeFormatSelect.dispatchEvent(new Event('change')); - - expect(linkExample.innerHTML).toBe(text); - }); - - it('starts with no unload warning', () => { - expect(findBeforeUnloadWarning()).toBeUndefined(); - }); - - describe('when wiki content is updated', () => { - beforeEach(() => { - contentInput = document.getElementById('wiki_content'); - contentInput.value = 'Lorem ipsum dolar sit!'; - contentInput.dispatchEvent(new Event('input')); - }); - - it('sets before unload warning', () => { - expect(findBeforeUnloadWarning()).toBe(''); - }); - - it('when form submitted, unsets before unload warning', () => { - findForm().dispatchEvent(new Event('submit')); - expect(findBeforeUnloadWarning()).toBeUndefined(); - }); - }); - }); - - describe('submit button state', () => { - beforeEach(() => { - setHTMLFixture(editFormHtmlFixture({ newPage: true })); - - titleInput = document.getElementById('wiki_title'); - contentInput = document.getElementById('wiki_content'); - - wikis = new Wikis(); - }); - - it.each` - title | text | buttonState | disabledAttr - ${'something'} | ${'something'} | ${'enabled'} | ${null} - ${''} | ${'something'} | ${'disabled'} | ${'true'} - ${'something'} | ${''} | ${'disabled'} | ${'true'} - ${''} | ${''} | ${'disabled'} | ${'true'} - ${' '} | ${' '} | ${'disabled'} | ${'true'} - `( - "when title='$title', content='$content', then, buttonState='$buttonState'", - ({ title, text, disabledAttr }) => { - titleInput.value = title; - titleInput.dispatchEvent(new Event('keyup')); - - contentInput.value = text; - contentInput.dispatchEvent(new Event('input')); - - expect(findSubmitButton().getAttribute('disabled')).toBe(disabledAttr); - }, - ); - }); - describe('trackPageView', () => { const trackingPage = 'projects:wikis:show'; const trackingContext = { foo: 'bar' }; -- cgit v1.2.1