diff --git a/react/Modal/index.spec.jsx b/react/Modal/index.spec.jsx new file mode 100644 index 0000000000..7991c6989b --- /dev/null +++ b/react/Modal/index.spec.jsx @@ -0,0 +1,73 @@ +import React from 'react' +import { act } from 'react-dom/test-utils' +import { useState } from 'react' +import { mount } from 'enzyme' +import Modal, { BODY_CLASS } from './index' + +describe('Modal', () => { + const Example = () => { + const [showModal, setShowModal] = useState(false) + const [showModal2, setShowModal2] = useState(false) + return ( +
+ {showModal ? 1 : null} + {showModal2 ? 2 : null} +
+ ) + } + + const clickNthButton = (root, n) => + root + .find('button') + .at(n) + .props() + .onClick() + + const mountFirstModal = root => clickNthButton(root, 0) + const mountSecondModal = root => clickNthButton(root, 1) + const unmountSecondModal = root => clickNthButton(root, 2) + const unmountFirstModal = root => clickNthButton(root, 3) + + const hasModalBodyClass = () => document.body.classList.contains(BODY_CLASS) + + afterEach(() => { + document.body.classList.remove(BODY_CLASS) + }) + + it('should apply a class to the body when mounted', () => { + const root = mount() + expect(hasModalBodyClass()).toBe(false) + act(() => { + mountFirstModal(root) + }) + expect(hasModalBodyClass()).toBe(true) + act(() => { + unmountFirstModal(root) + }) + expect(hasModalBodyClass()).toBe(false) + }) + + it('should not remove the class if two modals were mounted and the second one is removed', () => { + const root = mount() + expect(hasModalBodyClass()).toBe(false) + act(() => { + mountFirstModal(root) + }) + expect(hasModalBodyClass()).toBe(true) + act(() => { + mountSecondModal(root) + }) + act(() => { + unmountSecondModal(root) + }) + expect(hasModalBodyClass()).toBe(true) + act(() => { + unmountFirstModal(root) + }) + expect(hasModalBodyClass()).toBe(false) + }) +})