Fix keyCode and add test case, #84

react-component · Apr 2, 2018 · 12478e0 · 12478e0
1 parent 42c4fb3
commit 12478e0
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/src/Panel.jsx b/src/Panel.jsx
@@ -13,7 +13,7 @@ class CollapsePanel extends Component {
 
   handleKeyPress = (e) => {
     e.preventDefault();
-    if (e.charCode === 13 || e.charCode === 32) {
+    if (e.key === 'Enter' || e.keyCode === 13 || e.which === 13) {
       this.handleItemClick();
     }
   }

diff --git a/tests/index.spec.js b/tests/index.spec.js
@@ -41,6 +41,7 @@ describe('collapse', () => {
       ReactDOM.unmountComponentAtNode(node);
       changeHook = null;
     });
+
     it('add className', () => {
       const expectedClassName = 'rc-collapse-item important';
       expect(findDOMNode(collapse, 'rc-collapse-item')[2].className).to.be(expectedClassName);
@@ -278,4 +279,54 @@ describe('collapse', () => {
       expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(0);
     });
   });
+
+  describe.only('keyboard support', () => {
+    let node;
+    let collapse;
+
+    beforeEach(() => {
+      node = document.createElement('div');
+      document.body.appendChild(node);
+    });
+
+    const renderCollapse = (element) => {
+      ReactDOM.render(element, node, function init() {
+        collapse = this;
+      });
+    };
+
+    afterEach(() => {
+      ReactDOM.unmountComponentAtNode(node);
+      changeHook = null;
+    });
+
+    it('should toggle panel when press enter', (done) => {
+      renderCollapse(
+        <Collapse>
+          <Panel header="collapse 1" key="1">first</Panel>
+          <Panel header="collapse 2" key="2">second</Panel>
+          <Panel header="collapse 3" key="3" disabled>second</Panel>
+        </Collapse>
+      );
+      Simulate.keyPress(findDOMNode(collapse, 'rc-collapse-header')[2], {
+        key: 'Enter', keyCode: 13, which: 13,
+      });
+      expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(0);
+      Simulate.keyPress(findDOMNode(collapse, 'rc-collapse-header')[0], {
+        key: 'Enter', keyCode: 13, which: 13,
+      });
+      expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(1);
+      expect(findDOMNode(collapse, 'rc-collapse-content')[0].className)
+        .to.contain('rc-collapse-content-active');
+      Simulate.keyPress(findDOMNode(collapse, 'rc-collapse-header')[0], {
+        key: 'Enter', keyCode: 13, which: 13,
+      });
+      setTimeout(() => {
+        expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(0);
+        expect(findDOMNode(collapse, 'rc-collapse-content')[0].className)
+          .not.to.contain('rc-collapse-content-active');
+        done();
+      }, 500);
+    });
+  });
 });