Skip to content

Commit

Permalink
chore: refactor Modal tests (#4339)
Browse files Browse the repository at this point in the history
  • Loading branch information
@layershifter
layershifter committed Feb 18, 2022
1 parent 95d9ae8 commit 6bfbf1b
Show file tree
Hide file tree
Showing 2 changed files with 45 additions and 116 deletions.
146 changes: 32 additions & 114 deletions test/specs/modules/Modal/Modal-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ import Portal from 'src/addons/Portal/Portal'

import {
assertNodeContains,
assertBodyClasses,
assertBodyContains,
assertWithTimeout,
domEvent,
Expand All @@ -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) {
Expand Down Expand Up @@ -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!
Expand Down Expand Up @@ -246,67 +239,24 @@ describe('Modal', () => {
})

describe('dimmer', () => {
it('adds a "dimmer" className to the body', (done) => {
it('renders ModalDimmer by default', () => {
wrapperMount(<Modal open />)

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(<Modal open dimmer />)
assertBodyClasses('dimmable dimmed')

wrapper.setProps({ open: false })
assertBodyClasses('dimmable dimmed', false)

waitForClassesCleanup(done)
})
it('renders ModalDimmer when is "true"', () => {
wrapperMount(<Modal open dimmer />)
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(<Modal open dimmer='blurring' />)
assertBodyClasses('dimmable dimmed blurring')

wrapper.setProps({ open: false })
assertBodyClasses('dimmable dimmed blurring', false)

waitForClassesCleanup(done)
})

it('adds a dimmer to the body', (done) => {
wrapperMount(<Modal open dimmer='blurring' />)

assertBodyContains('.ui.page.modals.dimmer.transition.visible.active')
waitForClassesCleanup(done)
})
it('passes "blurring" to ModalDimmer', () => {
wrapperMount(<Modal open dimmer='blurring' />)
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(<Modal open dimmer />)
assertBodyClasses('dimmable dimmed')

wrapper.setProps({ open: false })
assertBodyClasses('dimmable dimmed', false)

waitForClassesCleanup(done)
})

it('adds an inverted dimmer to the body', (done) => {
wrapperMount(<Modal open dimmer='inverted' />)

assertBodyContains('.ui.inverted.page.modals.dimmer.transition.visible.active')
waitForClassesCleanup(done)
})
it('passes "inverted" to ModalDimmer', () => {
wrapperMount(<Modal open dimmer='inverted' />)
wrapper.find('ModalDimmer').should.have.prop('inverted', true)
})

describe('object', () => {
Expand Down Expand Up @@ -550,41 +500,42 @@ 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(<Modal open />)

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(
<Modal open style={{ height }}>
foo
</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(<Modal open>foo</Modal>)

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(
<Modal open>
<span />
Expand All @@ -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(<Modal defaultOpen>foo</Modal>)

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(<Modal open>foo</Modal>)

waitForClassesCleanup(done, () => {
assertBodyClasses('scrolling', false)
})
})
})

describe('server-side', () => {
Expand Down
15 changes: 13 additions & 2 deletions test/specs/modules/Modal/ModalDimmer-test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,19 @@ describe('ModalDimmer', () => {

common.propKeyOnlyToClassName(ModalDimmer, 'inverted')

it('has required classes', () => {
const wrapper = mount(<ModalDimmer mountNode={null} />)

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(<ModalDimmer mountNode={element} />)

Expand All @@ -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(<ModalDimmer mountNode={element} />)

Expand Down

0 comments on commit 6bfbf1b

Please sign in to comment.