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