Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: refactor Modal tests #4339

Merged
merged 1 commit into from
Feb 18, 2022
Merged

chore: refactor Modal tests #4339

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
146 changes: 32 additions & 114 deletions test/specs/modules/Modal/Modal-test.js
View file
Open in desktop
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
Open in desktop
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