diff --git a/test/specs/modules/Modal/Modal-test.js b/test/specs/modules/Modal/Modal-test.js index d1daa5674d..fb42392a6d 100644 --- a/test/specs/modules/Modal/Modal-test.js +++ b/test/specs/modules/Modal/Modal-test.js @@ -11,7 +11,6 @@ import Portal from 'src/addons/Portal/Portal' import { assertNodeContains, - assertBodyClasses, assertBodyContains, assertWithTimeout, domEvent, @@ -30,16 +29,6 @@ let wrapper const wrapperMount = (...args) => (wrapper = mount(...args)) const wrapperShallow = (...args) => (wrapper = shallow(...args)) -// cleanup in `useEffect()` is executed async, so we need to perform a proper cleanup first to avoid -// collisions with other tests -function waitForClassesCleanup(done, customAssertions = () => {}) { - wrapper.unmount() - assertWithTimeout(() => { - assertBodyClasses('dimmed', false) - customAssertions() - }, done) -} - describe('Modal', () => { beforeEach(() => { if (wrapper && wrapper.unmount) { @@ -72,12 +61,16 @@ describe('Modal', () => { propKey: 'header', ShorthandComponent: ModalHeader, mapValueToProps: (content) => ({ content }), + rendersPortal: true, + requiredProps: { open: true }, }) common.implementsShorthandProp(Modal, { autoGenerateKey: false, propKey: 'content', ShorthandComponent: ModalContent, mapValueToProps: (content) => ({ content }), + rendersPortal: true, + requiredProps: { open: true }, }) // Heads up! @@ -246,67 +239,24 @@ describe('Modal', () => { }) describe('dimmer', () => { - it('adds a "dimmer" className to the body', (done) => { + it('renders ModalDimmer by default', () => { wrapperMount() - - assertBodyContains('.ui.page.modals.dimmer.transition.visible.active') - waitForClassesCleanup(done) + wrapper.should.have.descendants('ModalDimmer') }) - describe('can be "true"', () => { - it('adds/removes body classes "dimmable dimmed" on mount/unmount', (done) => { - assertBodyClasses('dimmable dimmed', false) - - wrapperMount() - assertBodyClasses('dimmable dimmed') - - wrapper.setProps({ open: false }) - assertBodyClasses('dimmable dimmed', false) - - waitForClassesCleanup(done) - }) + it('renders ModalDimmer when is "true"', () => { + wrapperMount() + wrapper.should.have.descendants('ModalDimmer') }) - describe('blurring', () => { - it('adds/removes body classes "dimmable dimmed blurring" on mount/unmount', (done) => { - assertBodyClasses('dimmable dimmed blurring', false) - - wrapperMount() - assertBodyClasses('dimmable dimmed blurring') - - wrapper.setProps({ open: false }) - assertBodyClasses('dimmable dimmed blurring', false) - - waitForClassesCleanup(done) - }) - - it('adds a dimmer to the body', (done) => { - wrapperMount() - - assertBodyContains('.ui.page.modals.dimmer.transition.visible.active') - waitForClassesCleanup(done) - }) + it('passes "blurring" to ModalDimmer', () => { + wrapperMount() + wrapper.find('ModalDimmer').should.have.prop('blurring', true) }) - describe('inverted', () => { - it('adds/removes body classes "dimmable dimmed" on mount/unmount', (done) => { - assertBodyClasses('dimmable dimmed', false) - - wrapperMount() - assertBodyClasses('dimmable dimmed') - - wrapper.setProps({ open: false }) - assertBodyClasses('dimmable dimmed', false) - - waitForClassesCleanup(done) - }) - - it('adds an inverted dimmer to the body', (done) => { - wrapperMount() - - assertBodyContains('.ui.inverted.page.modals.dimmer.transition.visible.active') - waitForClassesCleanup(done) - }) + it('passes "inverted" to ModalDimmer', () => { + wrapperMount() + wrapper.find('ModalDimmer').should.have.prop('inverted', true) }) describe('object', () => { @@ -550,16 +500,15 @@ describe('Modal', () => { window.innerHeight = innerHeight }) - it('does not add the scrolling class to the body by default', (done) => { + it('does not pass "scrolling" by default', () => { wrapperMount() - - assertBodyClasses('scrolling', false) - waitForClassesCleanup(done) + wrapper.find('ModalDimmer').should.have.prop('scrolling', false) }) - it('does not add the scrolling class to the body when equal to the window height', (done) => { + it('does not pass "scrolling" when equal to the window height', (done) => { /* 101 is `padding * 2 + 1, see Modal/utils */ const height = window.innerHeight - 101 + wrapperMount( foo @@ -567,24 +516,26 @@ describe('Modal', () => { ) requestAnimationFrame(() => { - assertBodyClasses('scrolling', false) + wrapper.update() + wrapper.find('ModalDimmer').should.have.prop('scrolling', false) + done() }) }) - it('adds the scrolling class to the body when taller than the window', (done) => { + it('passes "scrolling" when taller than the window', (done) => { window.innerHeight = 10 wrapperMount(foo) requestAnimationFrame(() => { - assertBodyClasses('scrolling') + wrapper.update() + wrapper.find('ModalDimmer').should.have.prop('scrolling', true) + done() }) }) - it('adds/removes the scrolling class to the body when the window grows/shrinks', (done) => { - assertBodyClasses('scrolling', false) - + it('passes "scrolling" when the window grows/shrinks', (done) => { wrapperMount( @@ -594,51 +545,18 @@ describe('Modal', () => { assertWithTimeout( () => { - assertBodyClasses('scrolling') + wrapper.update() + wrapper.find('ModalDimmer').should.have.prop('scrolling', true) + window.innerHeight = 10000 }, () => assertWithTimeout(() => { - assertBodyClasses('scrolling', false) + wrapper.update() + wrapper.find('ModalDimmer').should.have.prop('scrolling', false) }, done), ) }) - - it('adds the scrolling class to the body after re-open', (done) => { - assertBodyClasses('scrolling', false) - - window.innerHeight = 10 - wrapperMount(foo) - - assertWithTimeout( - () => { - assertBodyClasses('scrolling') - domEvent.click('.ui.dimmer') - }, - () => - assertWithTimeout( - () => { - assertBodyClasses('scrolling', false) - wrapper.setProps({ open: true }) - }, - () => - assertWithTimeout(() => { - assertBodyClasses('scrolling') - }, done), - ), - ) - }) - - it('removes the scrolling class from the body on unmount', (done) => { - assertBodyClasses('scrolling', false) - - window.innerHeight = 10 - wrapperMount(foo) - - waitForClassesCleanup(done, () => { - assertBodyClasses('scrolling', false) - }) - }) }) describe('server-side', () => { diff --git a/test/specs/modules/Modal/ModalDimmer-test.js b/test/specs/modules/Modal/ModalDimmer-test.js index b1a48200f8..bb8d68af72 100644 --- a/test/specs/modules/Modal/ModalDimmer-test.js +++ b/test/specs/modules/Modal/ModalDimmer-test.js @@ -11,8 +11,19 @@ describe('ModalDimmer', () => { common.propKeyOnlyToClassName(ModalDimmer, 'inverted') + it('has required classes', () => { + const wrapper = mount() + + expect(wrapper).to.have.className('page') + expect(wrapper).to.have.className('modals') + expect(wrapper).to.have.className('dimmer') + expect(wrapper).to.have.className('transition') + expect(wrapper).to.have.className('visible') + expect(wrapper).to.have.className('active') + }) + describe('children', () => { - it('adds classes to "MountNode"', () => { + it('adds classes to "mountNode"', () => { const element = document.createElement('div') mount() @@ -22,7 +33,7 @@ describe('ModalDimmer', () => { }) describe('blurring', () => { - it('adds nothing "MountNode" by default', () => { + it('adds nothing "mountNode" by default', () => { const element = document.createElement('div') mount()