diff options
author | GeoSot <geo.sotis@gmail.com> | 2021-04-14 23:28:50 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-04-14 23:28:50 +0300 |
commit | 80085a12f6936bef11aa72631392e3e9b2646f17 (patch) | |
tree | 204f124a4c55bed0c9aeae9cc63a8dde33095ede /js/tests/unit/util | |
parent | 0122e020d60f9556dd9961256633aa06e8ded643 (diff) |
Decouple BackDrop from modal (#32439)
* Create backdrop.js util
* revert breaking changes
remove PromiseTimout usage
revert class name
* one more test | change bundlewatch.config
* add config obj to backdrop helper | tests for rootElement | use transitionend helper
* Minor tweaks — Renaming
Co-authored-by: Rohit Sharma <rohit2sharma95@gmail.com>
Diffstat (limited to 'js/tests/unit/util')
-rw-r--r-- | js/tests/unit/util/backdrop.spec.js | 216 | ||||
-rw-r--r-- | js/tests/unit/util/index.spec.js | 8 |
2 files changed, 224 insertions, 0 deletions
diff --git a/js/tests/unit/util/backdrop.spec.js b/js/tests/unit/util/backdrop.spec.js new file mode 100644 index 0000000000..c8570f1861 --- /dev/null +++ b/js/tests/unit/util/backdrop.spec.js @@ -0,0 +1,216 @@ +import Backdrop from '../../../src/util/backdrop' +import { getTransitionDurationFromElement } from '../../../src/util/index' +import { clearFixture, getFixture } from '../../helpers/fixture' + +const CLASS_BACKDROP = '.modal-backdrop' +const CLASS_NAME_FADE = 'fade' +const CLASS_NAME_SHOW = 'show' + +describe('Backdrop', () => { + let fixtureEl + + beforeAll(() => { + fixtureEl = getFixture() + }) + + afterEach(() => { + clearFixture() + const list = document.querySelectorAll(CLASS_BACKDROP) + + list.forEach(el => { + document.body.removeChild(el) + }) + }) + + describe('show', () => { + it('if it is "shown", should append the backdrop html once, on show, and contain "show" class', done => { + const instance = new Backdrop({ + isVisible: true, + isAnimated: false + }) + const getElements = () => document.querySelectorAll(CLASS_BACKDROP) + + expect(getElements().length).toEqual(0) + + instance.show() + instance.show(() => { + expect(getElements().length).toEqual(1) + getElements().forEach(el => { + expect(el.classList.contains(CLASS_NAME_SHOW)).toEqual(true) + }) + done() + }) + }) + + it('if it is not "shown", should not append the backdrop html', done => { + const instance = new Backdrop({ + isVisible: false, + isAnimated: true + }) + const getElements = () => document.querySelectorAll(CLASS_BACKDROP) + + expect(getElements().length).toEqual(0) + instance.show(() => { + expect(getElements().length).toEqual(0) + done() + }) + }) + + it('if it is "shown" and "animated", should append the backdrop html once, and contain "fade" class', done => { + const instance = new Backdrop({ + isVisible: true, + isAnimated: true + }) + const getElements = () => document.querySelectorAll(CLASS_BACKDROP) + + expect(getElements().length).toEqual(0) + + instance.show(() => { + expect(getElements().length).toEqual(1) + getElements().forEach(el => { + expect(el.classList.contains(CLASS_NAME_FADE)).toEqual(true) + }) + done() + }) + }) + + it('Should be appended on "document.body" by default', done => { + const instance = new Backdrop({ + isVisible: true + }) + const getElement = () => document.querySelector(CLASS_BACKDROP) + instance.show(() => { + expect(getElement().parentElement).toEqual(document.body) + done() + }) + }) + + it('Should appended on any element given by the proper config', done => { + fixtureEl.innerHTML = [ + '<div id="wrapper">', + '</div>' + ].join('') + + const wrapper = fixtureEl.querySelector('#wrapper') + const instance = new Backdrop({ + isVisible: true, + rootElement: wrapper + }) + const getElement = () => document.querySelector(CLASS_BACKDROP) + instance.show(() => { + expect(getElement().parentElement).toEqual(wrapper) + done() + }) + }) + }) + + describe('hide', () => { + it('should remove the backdrop html', done => { + const instance = new Backdrop({ + isVisible: true, + isAnimated: true + }) + + const getElements = () => document.body.querySelectorAll(CLASS_BACKDROP) + + expect(getElements().length).toEqual(0) + instance.show(() => { + expect(getElements().length).toEqual(1) + instance.hide(() => { + expect(getElements().length).toEqual(0) + done() + }) + }) + }) + + it('should remove "show" class', done => { + const instance = new Backdrop({ + isVisible: true, + isAnimated: true + }) + const elem = instance._getElement() + + instance.show() + instance.hide(() => { + expect(elem.classList.contains(CLASS_NAME_SHOW)).toEqual(false) + done() + }) + }) + + it('if it is not "shown", should not try to remove Node on remove method', done => { + const instance = new Backdrop({ + isVisible: false, + isAnimated: true + }) + const getElements = () => document.querySelectorAll(CLASS_BACKDROP) + const spy = spyOn(instance, 'dispose').and.callThrough() + + expect(getElements().length).toEqual(0) + expect(instance._isAppended).toEqual(false) + instance.show(() => { + instance.hide(() => { + expect(getElements().length).toEqual(0) + expect(spy).not.toHaveBeenCalled() + expect(instance._isAppended).toEqual(false) + done() + }) + }) + }) + }) + + describe('animation callbacks', () => { + it('if it is animated, should show and hide backdrop after counting transition duration', done => { + const instance = new Backdrop({ + isVisible: true, + isAnimated: true + }) + const spy2 = jasmine.createSpy('spy2') + + const execDone = () => { + setTimeout(() => { + expect(spy2).toHaveBeenCalledTimes(2) + done() + }, 10) + } + + instance.show(spy2) + instance.hide(() => { + spy2() + execDone() + }) + expect(spy2).not.toHaveBeenCalled() + }) + + it('if it is not animated, should show and hide backdrop without delay', done => { + const spy = jasmine.createSpy('spy', getTransitionDurationFromElement) + const instance = new Backdrop({ + isVisible: true, + isAnimated: false + }) + const spy2 = jasmine.createSpy('spy2') + + instance.show(spy2) + instance.hide(spy2) + + setTimeout(() => { + expect(spy2).toHaveBeenCalled() + expect(spy).not.toHaveBeenCalled() + done() + }, 10) + }) + + it('if it is not "shown", should not call delay callbacks', done => { + const instance = new Backdrop({ + isVisible: false, + isAnimated: true + }) + const spy = jasmine.createSpy('spy', getTransitionDurationFromElement) + + instance.show() + instance.hide(() => { + expect(spy).not.toHaveBeenCalled() + done() + }) + }) + }) +}) diff --git a/js/tests/unit/util/index.spec.js b/js/tests/unit/util/index.spec.js index 5d144348e4..11b6f7fa49 100644 --- a/js/tests/unit/util/index.spec.js +++ b/js/tests/unit/util/index.spec.js @@ -568,4 +568,12 @@ describe('Util', () => { expect(typeof fakejQuery.fn.test.noConflict).toEqual('function') }) }) + + describe('execute', () => { + it('should execute if arg is function', () => { + const spy = jasmine.createSpy('spy') + Util.execute(spy) + expect(spy).toHaveBeenCalled() + }) + }) }) |