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.

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

fix(Modal): fix typo in className #2004

Merged
merged 4 commits into from
Sep 1, 2017
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion src/modules/Modal/Modal.js
Original file line number Diff line number Diff line change
Expand Up @@ -227,7 +227,7 @@ class Modal extends Component {
mountNode.classList.remove('blurring')
mountNode.classList.remove('dimmable')
mountNode.classList.remove('dimmed')
mountNode.classList.remove('scrollable')
mountNode.classList.remove('scrolling')

cancelAnimationFrame(this.animationRequestId)

Expand Down
50 changes: 42 additions & 8 deletions test/specs/modules/Modal/Modal-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -240,9 +240,14 @@ describe('Modal', () => {
})

describe('true', () => {
it('adds classes "dimmable dimmed" to the body', () => {
it('adds/removes body classes "dimmable dimmed" on mount/unmount', () => {
assertBodyClasses('dimmable', 'dimmed', false)

wrapperMount(<Modal open dimmer />)
assertBodyClasses('dimmable', 'dimmed')

wrapper.unmount()
assertBodyClasses('dimmable', 'dimmed', false)
})

it('adds a dimmer to the body', () => {
Expand All @@ -264,9 +269,14 @@ describe('Modal', () => {
})

describe('blurring', () => {
it('adds class "dimmable dimmed blurring" to the body', () => {
it('adds/removes body classes "dimmable dimmed blurring" on mount/unmount', () => {
assertBodyClasses('dimmable', 'dimmed', 'blurring', false)

wrapperMount(<Modal open dimmer='blurring' />)
assertBodyClasses('dimmable', 'dimmed', 'blurring')

wrapper.unmount()
assertBodyClasses('dimmable', 'dimmed', 'blurring', false)
})

it('adds a dimmer to the body', () => {
Expand All @@ -276,10 +286,14 @@ describe('Modal', () => {
})

describe('inverted', () => {
it('adds class "dimmable dimmed" to the body', () => {
wrapperMount(<Modal open dimmer='inverted' />)
it('adds/removes body classes "dimmable dimmed" on mount/unmount', () => {
assertBodyClasses('dimmable', 'dimmed', false)

wrapperMount(<Modal open dimmer />)
assertBodyClasses('dimmable', 'dimmed')
assertBodyClasses('inverted', false)

wrapper.unmount()
assertBodyClasses('dimmable', 'dimmed', false)
})

it('adds an inverted dimmer to the body', () => {
Expand Down Expand Up @@ -460,27 +474,32 @@ describe('Modal', () => {
})

describe('scrolling', () => {
const innerHeight = window.innerHeight

afterEach(() => {
document.body.classList.remove('scrolling')
})

after(() => {
window.innerHeight = innerHeight
})

it('does not add the scrolling class to the body by default', () => {
wrapperMount(<Modal open />)
assertBodyClasses('scrolling', false)
})

it('adds the scrolling class to the body when taller than the window', (done) => {
wrapperMount(<Modal open>foo</Modal>)

window.innerHeight = 10
wrapperMount(<Modal open>foo</Modal>)

requestAnimationFrame(() => {
assertBodyClasses('scrolling')
done()
})
})

it('removes the scrolling class from the body when the window grows taller', (done) => {
it('adds/removes the scrolling class to the body when the window grows/shrinks', (done) => {
assertBodyClasses('scrolling', false)

wrapperMount(<Modal open>foo</Modal>)
Expand All @@ -496,5 +515,20 @@ describe('Modal', () => {
})
})
})

it('removes the scrolling class from the body on unmount', (done) => {
assertBodyClasses('scrolling', false)

window.innerHeight = 10
wrapperMount(<Modal open>foo</Modal>)

requestAnimationFrame(() => {
assertBodyClasses('scrolling')
wrapper.unmount()

assertBodyClasses('scrolling', false)
done()
})
})
})
})