Skip to content

Commit 12478e0

Browse files
committed
Fix keyCode and add test case, react-component#84
1 parent 42c4fb3 commit 12478e0

File tree

2 files changed

+52
-1
lines changed

2 files changed

+52
-1
lines changed

src/Panel.jsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ class CollapsePanel extends Component {
1313

1414
handleKeyPress = (e) => {
1515
e.preventDefault();
16-
if (e.charCode === 13 || e.charCode === 32) {
16+
if (e.key === 'Enter' || e.keyCode === 13 || e.which === 13) {
1717
this.handleItemClick();
1818
}
1919
}

tests/index.spec.js

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ describe('collapse', () => {
4141
ReactDOM.unmountComponentAtNode(node);
4242
changeHook = null;
4343
});
44+
4445
it('add className', () => {
4546
const expectedClassName = 'rc-collapse-item important';
4647
expect(findDOMNode(collapse, 'rc-collapse-item')[2].className).to.be(expectedClassName);
@@ -278,4 +279,54 @@ describe('collapse', () => {
278279
expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(0);
279280
});
280281
});
282+
283+
describe.only('keyboard support', () => {
284+
let node;
285+
let collapse;
286+
287+
beforeEach(() => {
288+
node = document.createElement('div');
289+
document.body.appendChild(node);
290+
});
291+
292+
const renderCollapse = (element) => {
293+
ReactDOM.render(element, node, function init() {
294+
collapse = this;
295+
});
296+
};
297+
298+
afterEach(() => {
299+
ReactDOM.unmountComponentAtNode(node);
300+
changeHook = null;
301+
});
302+
303+
it('should toggle panel when press enter', (done) => {
304+
renderCollapse(
305+
<Collapse>
306+
<Panel header="collapse 1" key="1">first</Panel>
307+
<Panel header="collapse 2" key="2">second</Panel>
308+
<Panel header="collapse 3" key="3" disabled>second</Panel>
309+
</Collapse>
310+
);
311+
Simulate.keyPress(findDOMNode(collapse, 'rc-collapse-header')[2], {
312+
key: 'Enter', keyCode: 13, which: 13,
313+
});
314+
expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(0);
315+
Simulate.keyPress(findDOMNode(collapse, 'rc-collapse-header')[0], {
316+
key: 'Enter', keyCode: 13, which: 13,
317+
});
318+
expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(1);
319+
expect(findDOMNode(collapse, 'rc-collapse-content')[0].className)
320+
.to.contain('rc-collapse-content-active');
321+
Simulate.keyPress(findDOMNode(collapse, 'rc-collapse-header')[0], {
322+
key: 'Enter', keyCode: 13, which: 13,
323+
});
324+
setTimeout(() => {
325+
expect(findDOMNode(collapse, 'rc-collapse-content-active').length).to.be(0);
326+
expect(findDOMNode(collapse, 'rc-collapse-content')[0].className)
327+
.not.to.contain('rc-collapse-content-active');
328+
done();
329+
}, 500);
330+
});
331+
});
281332
});

0 commit comments

Comments
 (0)