diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-13 18:08:52 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-02-13 18:08:52 +0300 |
commit | 0ab47b994caa80c5587f33dc818626b66cfdafe2 (patch) | |
tree | 5ef3976d2f84e3368903a67ba2dbd87a74b9a43c /spec/frontend/snippet | |
parent | 1308dc5eb484ab0f8064989fc551ebdb4b1a7976 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/snippet')
-rw-r--r-- | spec/frontend/snippet/collapsible_input_spec.js | 104 |
1 files changed, 104 insertions, 0 deletions
diff --git a/spec/frontend/snippet/collapsible_input_spec.js b/spec/frontend/snippet/collapsible_input_spec.js new file mode 100644 index 00000000000..acd15164c95 --- /dev/null +++ b/spec/frontend/snippet/collapsible_input_spec.js @@ -0,0 +1,104 @@ +import setupCollapsibleInputs from '~/snippet/collapsible_input'; +import { setHTMLFixture } from 'helpers/fixtures'; + +describe('~/snippet/collapsible_input', () => { + let formEl; + let descriptionEl; + let titleEl; + let fooEl; + + beforeEach(() => { + setHTMLFixture(` + <form> + <div class="js-collapsible-input js-title"> + <div class="js-collapsed d-none"> + <input type="text" /> + </div> + <div class="js-expanded"> + <textarea>Hello World!</textarea> + </div> + </div> + <div class="js-collapsible-input js-description"> + <div class="js-collapsed"> + <input type="text" /> + </div> + <div class="js-expanded d-none"> + <textarea></textarea> + </div> + </div> + <input type="text" class="js-foo" /> + </form> + `); + + formEl = document.querySelector('form'); + titleEl = formEl.querySelector('.js-title'); + descriptionEl = formEl.querySelector('.js-description'); + fooEl = formEl.querySelector('.js-foo'); + + setupCollapsibleInputs(); + }); + + const findInput = el => el.querySelector('textarea,input'); + const findCollapsed = el => el.querySelector('.js-collapsed'); + const findExpanded = el => el.querySelector('.js-expanded'); + const findCollapsedInput = el => findInput(findCollapsed(el)); + const findExpandedInput = el => findInput(findExpanded(el)); + const focusIn = target => target.dispatchEvent(new Event('focusin', { bubbles: true })); + const expectIsCollapsed = (el, isCollapsed) => { + expect(findCollapsed(el).classList.contains('d-none')).toEqual(!isCollapsed); + expect(findExpanded(el).classList.contains('d-none')).toEqual(isCollapsed); + }; + + describe('when collapsed', () => { + it('is collapsed', () => { + expectIsCollapsed(descriptionEl, true); + }); + + describe('when focused', () => { + beforeEach(() => { + focusIn(findCollapsedInput(descriptionEl)); + }); + + it('is expanded', () => { + expectIsCollapsed(descriptionEl, false); + }); + + describe.each` + desc | value | isCollapsed + ${'is collapsed'} | ${''} | ${true} + ${'stays open if given value'} | ${'Hello world!'} | ${false} + `('when loses focus', ({ desc, value, isCollapsed }) => { + it(desc, () => { + findExpandedInput(descriptionEl).value = value; + focusIn(fooEl); + + expectIsCollapsed(descriptionEl, isCollapsed); + }); + }); + }); + }); + + describe('when expanded and has value', () => { + it('does not collapse, when focusing out', () => { + expectIsCollapsed(titleEl, false); + + focusIn(fooEl); + + expectIsCollapsed(titleEl, false); + }); + + describe('and loses value', () => { + beforeEach(() => { + findExpandedInput(titleEl).value = ''; + }); + + it('collapses, when focusing out', () => { + expectIsCollapsed(titleEl, false); + + focusIn(fooEl); + + expectIsCollapsed(titleEl, true); + }); + }); + }); +}); |