diff options
Diffstat (limited to 'spec/frontend/wikis_spec.js')
| -rw-r--r-- | spec/frontend/wikis_spec.js | 222 |
1 files changed, 127 insertions, 95 deletions
diff --git a/spec/frontend/wikis_spec.js b/spec/frontend/wikis_spec.js index cf1ea972697..c4a2bf1a69a 100644 --- a/spec/frontend/wikis_spec.js +++ b/spec/frontend/wikis_spec.js @@ -1,128 +1,160 @@ import { escape } from 'lodash'; +import { setHTMLFixture } from 'helpers/fixtures'; import Wikis from '~/pages/shared/wikis/wikis'; import Tracking from '~/tracking'; -import { setHTMLFixture } from './helpers/fixtures'; describe('Wikis', () => { - describe('setting the commit message when the title changes', () => { - const editFormHtmlFixture = args => `<form class="wiki-form ${ - args.newPage ? 'js-new-wiki-page' : '' - }"> - <input type="text" id="wiki_title" value="My title" /> - <input type="text" id="wiki_message" /> - <select class="form-control select-control" name="wiki[format]" id="wiki_format"> - <option value="markdown">Markdown</option> - <option selected="selected" value="rdoc">RDoc</option> - <option value="asciidoc">AsciiDoc</option> - <option value="org">Org</option> - </select> - <textarea id="wiki_content"></textarea> - <code class="js-markup-link-example">{Link title}[link:page-slug]</code> - </form> - `; - - let wikis; - let titleInput; - let messageInput; - let changeFormatSelect; - let linkExample; - - const findBeforeUnloadWarning = () => window.onbeforeunload?.(); - const findContent = () => document.getElementById('wiki_content'); - const findForm = () => document.querySelector('.wiki-form'); - - describe('when the wiki page is being created', () => { - const formHtmlFixture = editFormHtmlFixture({ newPage: true }); + const editFormHtmlFixture = (args) => `<form class="wiki-form ${ + args.newPage ? 'js-new-wiki-page' : '' + }"> + <input type="text" id="wiki_title" value="My title" /> + <input type="text" id="wiki_message" /> + <select class="form-control select-control" name="wiki[format]" id="wiki_format"> + <option value="markdown">Markdown</option> + <option selected="selected" value="rdoc">RDoc</option> + <option value="asciidoc">AsciiDoc</option> + <option value="org">Org</option> + </select> + <textarea id="wiki_content"></textarea> + <code class="js-markup-link-example">{Link title}[link:page-slug]</code> + <input type="submit" class="js-wiki-btn-submit"> + </input> + </form> + `; + + 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); + 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(); - }); + 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(); + it('binds an event listener to the title input', () => { + wikis.handleWikiTitleChange = jest.fn(); - titleInput.dispatchEvent(new Event('keyup')); + titleInput.dispatchEvent(new Event('keyup')); - expect(wikis.handleWikiTitleChange).toHaveBeenCalled(); - }); + expect(wikis.handleWikiTitleChange).toHaveBeenCalled(); + }); - it('sets the commit message when title changes', () => { - titleInput.value = 'My title'; - messageInput.value = ''; + it('sets the commit message when title changes', () => { + titleInput.value = 'My title'; + messageInput.value = ''; - titleInput.dispatchEvent(new Event('keyup')); + titleInput.dispatchEvent(new Event('keyup')); - expect(messageInput.value).toEqual('Create My title'); - }); + expect(messageInput.value).toEqual('Create My title'); + }); - it('replaces hyphens with spaces', () => { - titleInput.value = 'my-hyphenated-title'; - titleInput.dispatchEvent(new Event('keyup')); + it('replaces hyphens with spaces', () => { + titleInput.value = 'my-hyphenated-title'; + titleInput.dispatchEvent(new Event('keyup')); - expect(messageInput.value).toEqual('Create my hyphenated title'); - }); + expect(messageInput.value).toEqual('Create my hyphenated title'); }); + }); - describe('when the wiki page is being updated', () => { - const formHtmlFixture = editFormHtmlFixture({ newPage: false }); + describe('when the wiki page is being updated', () => { + const formHtmlFixture = editFormHtmlFixture({ newPage: false }); - beforeEach(() => { - setHTMLFixture(formHtmlFixture); + beforeEach(() => { + setHTMLFixture(formHtmlFixture); - titleInput = document.getElementById('wiki_title'); - messageInput = document.getElementById('wiki_message'); - wikis = new Wikis(); - }); + 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 = ''; + it('sets the commit message when title changes, prefixing with "Update"', () => { + titleInput.value = 'My title'; + messageInput.value = ''; - titleInput.dispatchEvent(new Event('keyup')); + titleInput.dispatchEvent(new Event('keyup')); - expect(messageInput.value).toEqual('Update My title'); + 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.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('sets before unload warning', () => { + expect(findBeforeUnloadWarning()).toBe(''); }); - it('starts with no unload warning', () => { + it('when form submitted, unsets before unload warning', () => { + findForm().dispatchEvent(new Event('submit')); expect(findBeforeUnloadWarning()).toBeUndefined(); }); + }); + }); - describe('when wiki content is updated', () => { - beforeEach(() => { - const content = findContent(); - content.value = 'Lorem ipsum dolar sit!'; - content.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', () => { |