test(modal): add tests for focus management (#1449)

reactstrap · Apr 3, 2019 · 04be99f · 04be99f
1 parent 64f2641
commit 04be99f
Showing 1 changed file with 91 additions and 0 deletions.
diff --git a/src/__tests__/Modal.spec.js b/src/__tests__/Modal.spec.js
@@ -892,4 +892,95 @@ describe('Modal', () => {
 
     wrapper.unmount();
   });
+
+  it('should return the focus to the last focused element before the modal has opened', () => {
+    const MockComponent = ({ isOpen = false }) => (
+        <>
+          <button className={'focus'}>Focused</button>
+          <Modal isOpen={isOpen}>
+            <ModalBody>Whatever</ModalBody>
+          </Modal>
+        </>
+    );
+    const wrapper = mount(<MockComponent />);
+    const button = wrapper
+        .find('.focus')
+        .hostNodes()
+        .getDOMNode();
+    button.focus();
+    wrapper.setProps({ isOpen: true });
+    wrapper.setProps({ isOpen: false });
+    jest.runAllTimers();
+
+    expect(document.activeElement === button).toEqual(true);
+    wrapper.unmount();
+  })
+
+  it('should not return the focus to the last focused element before the modal has opened when "returnFocusAfterClose" is false', () => {
+    const MockComponent = ({ isOpen = false }) => (
+        <>
+          <button className={'focus'}>Focused</button>
+          <Modal isOpen={isOpen} returnFocusAfterClose={false} >
+            <ModalBody>Whatever</ModalBody>
+          </Modal>
+        </>
+    );
+    const wrapper = mount(<MockComponent />);
+    const button = wrapper
+        .find('.focus')
+        .hostNodes()
+        .getDOMNode();
+    button.focus();
+    wrapper.setProps({ isOpen: true });
+    wrapper.setProps({ isOpen: false });
+    jest.runAllTimers();
+
+    expect(document.activeElement === button).toEqual(false);
+    wrapper.unmount();
+  })
+
+  it('should return the focus to the last focused element before the modal has opened when "unmountOnClose" is false', () => {
+    const MockComponent = ({ isOpen = false }) => (
+        <>
+          <button className={'focus'}>Focused</button>
+          <Modal isOpen={isOpen} unmountOnClose={false}>
+            <ModalBody>Whatever</ModalBody>
+          </Modal>
+        </>
+    );
+    const wrapper = mount(<MockComponent />);
+    const button = wrapper
+        .find('.focus')
+        .hostNodes()
+        .getDOMNode();
+    button.focus();
+    wrapper.setProps({ isOpen: true });
+    wrapper.setProps({ isOpen: false });
+    jest.runAllTimers();
+
+    expect(document.activeElement === button).toEqual(true);
+    wrapper.unmount();
+  })
+
+  it('should not return the focus to the last focused element before the modal has opened when "returnFocusAfterClose" is false and "unmountOnClose" is false', () => {
+    const MockComponent = ({ isOpen = false }) => (
+        <>
+          <button className={'focus'}/>
+          <Modal isOpen={isOpen} returnFocusAfterClose={false} unmountOnClose={false}>
+            <ModalBody>Whatever</ModalBody>
+          </Modal>
+        </>
+    );
+    const wrapper = mount(<MockComponent />);
+    const button = wrapper
+        .find('.focus')
+        .hostNodes()
+        .getDOMNode();
+    button.focus();
+    wrapper.setProps({ isOpen: true });
+    wrapper.setProps({ isOpen: false });
+    jest.runAllTimers();
+
+    expect(document.activeElement === button).toEqual(false);
+  });
 });