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()