fix(Modal): fix typo in className (#2004)

* fix(Modal): fix typo in className

* test(Modal): add missing body class coverage

* test(Modal): restore window.innerHeight after tests

Author: layershifter

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)
 

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(<Modal open dimmer />)
         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(<Modal open dimmer='blurring' />)
         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(<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', () => {
@@ -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>)
@@ -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()
+      })
+    })
   })
 })