diff --git a/src/modules/Modal/Modal.js b/src/modules/Modal/Modal.js index 19745eabed..d8cf253360 100644 --- a/src/modules/Modal/Modal.js +++ b/src/modules/Modal/Modal.js @@ -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) diff --git a/test/specs/modules/Modal/Modal-test.js b/test/specs/modules/Modal/Modal-test.js index f16db4fa1c..7304b33653 100644 --- a/test/specs/modules/Modal/Modal-test.js +++ b/test/specs/modules/Modal/Modal-test.js @@ -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() assertBodyClasses('dimmable', 'dimmed') + + wrapper.unmount() + assertBodyClasses('dimmable', 'dimmed', false) }) it('adds a dimmer to the body', () => { @@ -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() assertBodyClasses('dimmable', 'dimmed', 'blurring') + + wrapper.unmount() + assertBodyClasses('dimmable', 'dimmed', 'blurring', false) }) it('adds a dimmer to the body', () => { @@ -276,10 +286,14 @@ describe('Modal', () => { }) describe('inverted', () => { - it('adds class "dimmable dimmed" to the body', () => { - wrapperMount() + it('adds/removes body classes "dimmable dimmed" on mount/unmount', () => { + assertBodyClasses('dimmable', 'dimmed', false) + + wrapperMount() assertBodyClasses('dimmable', 'dimmed') - assertBodyClasses('inverted', false) + + wrapper.unmount() + assertBodyClasses('dimmable', 'dimmed', false) }) it('adds an inverted dimmer to the body', () => { @@ -460,19 +474,24 @@ 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() assertBodyClasses('scrolling', false) }) it('adds the scrolling class to the body when taller than the window', (done) => { - wrapperMount(foo) - window.innerHeight = 10 + wrapperMount(foo) requestAnimationFrame(() => { assertBodyClasses('scrolling') @@ -480,7 +499,7 @@ describe('Modal', () => { }) }) - 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(foo) @@ -496,5 +515,20 @@ describe('Modal', () => { }) }) }) + + it('removes the scrolling class from the body on unmount', (done) => { + assertBodyClasses('scrolling', false) + + window.innerHeight = 10 + wrapperMount(foo) + + requestAnimationFrame(() => { + assertBodyClasses('scrolling') + wrapper.unmount() + + assertBodyClasses('scrolling', false) + done() + }) + }) }) })