From 991ba8a027984b4547cd631eddd73494689b2034 Mon Sep 17 00:00:00 2001
From: Justin Kahn <justindavidkahn@gmail.com>
Date: Mon, 15 Jul 2019 11:26:21 +0800
Subject: [PATCH 1/2] fix(Collapse): number defaultExpandKeys: fix #878

---
 src/collapse/collapse.jsx   |   5 +-
 test/collapse/index-spec.js | 132 ++++++++++++++++++++++++++++++++++++
 2 files changed, 135 insertions(+), 2 deletions(-)

diff --git a/src/collapse/collapse.jsx b/src/collapse/collapse.jsx
index 8bcdae9dc8..b98460018f 100644
--- a/src/collapse/collapse.jsx
+++ b/src/collapse/collapse.jsx
@@ -89,10 +89,11 @@ class Collapse extends React.Component {
     onItemClick(key) {
         let expandedKeys = this.state.expandedKeys;
         if (this.props.accordion) {
-            expandedKeys = expandedKeys[0] === key ? [] : [key];
+            expandedKeys = String(expandedKeys[0]) === String(key) ? [] : [key];
         } else {
             expandedKeys = [...expandedKeys];
-            const index = expandedKeys.indexOf(key);
+            const stringKey = String(key);
+            const index = expandedKeys.findIndex(k => String(k) === stringKey);
             const isExpanded = index > -1;
             if (isExpanded) {
                 expandedKeys.splice(index, 1);
diff --git a/test/collapse/index-spec.js b/test/collapse/index-spec.js
index 72ec5937f6..a6b64c9bc3 100644
--- a/test/collapse/index-spec.js
+++ b/test/collapse/index-spec.js
@@ -9,6 +9,9 @@ Enzyme.configure({ adapter: new Adapter() });
 
 const Panel = Collapse.Panel;
 
+/* global describe, it */
+/* eslint-disable react/jsx-filename-extension */
+
 describe('Collapse', () => {
     describe('render', () => {
         it('[normal] Should render from children', () => {
@@ -39,8 +42,137 @@ describe('Collapse', () => {
             const wrapper = mount(<Collapse dataSource={list} />);
             assert(wrapper.find(Panel).length === 2);
         });
+
+        it('should default expand keys passed in `defaultExpandedKeys`', () => {
+            const wrapper = mount(
+                <Collapse defaultExpandedKeys={[]}>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    <div>others</div>
+                </Collapse>
+            );
+            assert(wrapper.find(Collapse).length === 1);
+            assert(wrapper.find(Panel).length === 2);
+        });
     });
 
+    describe('defaultExpandedKeys', () => {
+        it('should expand panel with string key', () => {
+            const wrapper = mount(
+                <Collapse defaultExpandedKeys={["2"]}>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    
+                    <div>others</div>
+                </Collapse>
+            );
+            const el = wrapper
+                .find('.next-collapse-panel')
+                .at(2);
+            assert(el.hasClass('next-collapse-panel-expanded'));
+        });
+
+        it('should expand panel with number key', () => {
+            const wrapper = mount(
+                <Collapse defaultExpandedKeys={[2]}>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    
+                    <div>others</div>
+                </Collapse>
+            );
+            const el = wrapper
+                .find('.next-collapse-panel')
+                .at(2);
+            assert(el.hasClass('next-collapse-panel-expanded'));
+        });
+
+        it('should close default expanded string keys', () => {
+            const wrapper = mount(
+                <Collapse defaultExpandedKeys={["2"]}>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    
+                    <div>others</div>
+                </Collapse>
+            );
+            wrapper
+                .find('.next-collapse-panel-title')
+                .at(2)
+                .simulate('click');
+            assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
+        });
+
+        it('should close default expanded number keys', () => {
+            const wrapper = mount(
+                <Collapse defaultExpandedKeys={[2]}>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    <Panel title="Pannel Title">Pannel Content</Panel>
+                    
+                    <div>others</div>
+                </Collapse>
+            );
+            wrapper
+                .find('.next-collapse-panel-title')
+                .at(2)
+                .simulate('click');
+            assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
+        });
+
+        it('should open default expanded datasource using number keys', () => {
+            const list = [
+                {
+                    title: 'Well, hello there',
+                    key: 0,
+                    content:
+                        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+                },
+                {
+                    title: 'Well, hello there',
+                    key: 1,
+                    content:
+                        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+                },
+            ];
+            const wrapper = mount(<Collapse dataSource={list} defaultExpandedKeys={[1]} />);
+            const el = wrapper
+                .find('.next-collapse-panel')
+                .at(1);
+            assert(el.hasClass('next-collapse-panel-expanded'));
+        });
+
+        it('should close default expanded datasource using number keys on click', () => {
+            const list = [
+                {
+                    title: 'Well, hello there',
+                    key: 0,
+                    content:
+                        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+                },
+                {
+                    title: 'Well, hello there',
+                    key: 1,
+                    content:
+                        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+                },
+            ];
+            const wrapper = mount(<Collapse dataSource={list} defaultExpandedKeys={[1]} />);
+            wrapper
+                .find('.next-collapse-panel-title')
+                .at(1)
+                .simulate('click');
+            assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
+        });
+    })
+
     describe('event', () => {
         it('Should expanded by click', () => {
             const collapse = (

From 56b031a68a798f2ab9fa98b85e6af9173ba6bbd8 Mon Sep 17 00:00:00 2001
From: Justin Kahn <justindavidkahn@gmail.com>
Date: Mon, 15 Jul 2019 17:48:14 +0800
Subject: [PATCH 2/2] fix(Collapse): accordian mode

---
 src/collapse/collapse.jsx   |   2 +-
 test/collapse/index-spec.js | 345 ++++++++++++++++++++++++------------
 2 files changed, 233 insertions(+), 114 deletions(-)

diff --git a/src/collapse/collapse.jsx b/src/collapse/collapse.jsx
index b98460018f..e62682744c 100644
--- a/src/collapse/collapse.jsx
+++ b/src/collapse/collapse.jsx
@@ -128,7 +128,7 @@ class Collapse extends React.Component {
         let isExpanded = false;
 
         if (this.props.accordion) {
-            isExpanded = expandedKeys[0] === key;
+            isExpanded = String(expandedKeys[0]) === String(key);
         } else {
             isExpanded = expandedKeys.some(expandedKey => {
                 if (
diff --git a/test/collapse/index-spec.js b/test/collapse/index-spec.js
index a6b64c9bc3..13a30b56b3 100644
--- a/test/collapse/index-spec.js
+++ b/test/collapse/index-spec.js
@@ -57,120 +57,239 @@ describe('Collapse', () => {
     });
 
     describe('defaultExpandedKeys', () => {
-        it('should expand panel with string key', () => {
-            const wrapper = mount(
-                <Collapse defaultExpandedKeys={["2"]}>
-                    <Panel title="Pannel Title">Pannel Content</Panel>
-                    <Panel title="Pannel Title">Pannel Content</Panel>
-                    <Panel title="Pannel Title">Pannel Content</Panel>
-                    <Panel title="Pannel Title">Pannel Content</Panel>
-                    
-                    <div>others</div>
-                </Collapse>
-            );
-            const el = wrapper
-                .find('.next-collapse-panel')
-                .at(2);
-            assert(el.hasClass('next-collapse-panel-expanded'));
-        });
-
-        it('should expand panel with number key', () => {
-            const wrapper = mount(
-                <Collapse defaultExpandedKeys={[2]}>
-                    <Panel title="Pannel Title">Pannel Content</Panel>
-                    <Panel title="Pannel Title">Pannel Content</Panel>
-                    <Panel title="Pannel Title">Pannel Content</Panel>
-                    <Panel title="Pannel Title">Pannel Content</Panel>
-                    
-                    <div>others</div>
-                </Collapse>
-            );
-            const el = wrapper
-                .find('.next-collapse-panel')
-                .at(2);
-            assert(el.hasClass('next-collapse-panel-expanded'));
-        });
-
-        it('should close default expanded string keys', () => {
-            const wrapper = mount(
-                <Collapse defaultExpandedKeys={["2"]}>
-                    <Panel title="Pannel Title">Pannel Content</Panel>
-                    <Panel title="Pannel Title">Pannel Content</Panel>
-                    <Panel title="Pannel Title">Pannel Content</Panel>
-                    <Panel title="Pannel Title">Pannel Content</Panel>
-                    
-                    <div>others</div>
-                </Collapse>
-            );
-            wrapper
-                .find('.next-collapse-panel-title')
-                .at(2)
-                .simulate('click');
-            assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
-        });
+        describe('default mode', () => {
+            it('should expand panel with string key', () => {
+                const wrapper = mount(
+                    <Collapse defaultExpandedKeys={["2"]}>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        
+                        <div>others</div>
+                    </Collapse>
+                );
+                const el = wrapper
+                    .find('.next-collapse-panel')
+                    .at(2);
+                assert(el.hasClass('next-collapse-panel-expanded'));
+            });
+    
+            it('should expand panel with number key', () => {
+                const wrapper = mount(
+                    <Collapse defaultExpandedKeys={[2]}>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        
+                        <div>others</div>
+                    </Collapse>
+                );
+                const el = wrapper
+                    .find('.next-collapse-panel')
+                    .at(2);
+                assert(el.hasClass('next-collapse-panel-expanded'));
+            });
+    
+            it('should close default expanded string keys', () => {
+                const wrapper = mount(
+                    <Collapse defaultExpandedKeys={["2"]}>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        
+                        <div>others</div>
+                    </Collapse>
+                );
+                wrapper
+                    .find('.next-collapse-panel-title')
+                    .at(2)
+                    .simulate('click');
+                assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
+            });
+    
+            it('should close default expanded number keys', () => {
+                const wrapper = mount(
+                    <Collapse defaultExpandedKeys={[2]}>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        
+                        <div>others</div>
+                    </Collapse>
+                );
+                wrapper
+                    .find('.next-collapse-panel-title')
+                    .at(2)
+                    .simulate('click');
+                assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
+            });
+    
+            it('should open default expanded datasource using number keys', () => {
+                const list = [
+                    {
+                        title: 'Well, hello there',
+                        key: 0,
+                        content:
+                            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+                    },
+                    {
+                        title: 'Well, hello there',
+                        key: 1,
+                        content:
+                            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+                    },
+                ];
+                const wrapper = mount(<Collapse dataSource={list} defaultExpandedKeys={[1]} />);
+                const el = wrapper
+                    .find('.next-collapse-panel')
+                    .at(1);
+                assert(el.hasClass('next-collapse-panel-expanded'));
+            });
+    
+            it('should close default expanded datasource using number keys on click', () => {
+                const list = [
+                    {
+                        title: 'Well, hello there',
+                        key: 0,
+                        content:
+                            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+                    },
+                    {
+                        title: 'Well, hello there',
+                        key: 1,
+                        content:
+                            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+                    },
+                ];
+                const wrapper = mount(<Collapse dataSource={list} defaultExpandedKeys={[1]} />);
+                wrapper
+                    .find('.next-collapse-panel-title')
+                    .at(1)
+                    .simulate('click');
+                assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
+            });
+        })
 
-        it('should close default expanded number keys', () => {
-            const wrapper = mount(
-                <Collapse defaultExpandedKeys={[2]}>
-                    <Panel title="Pannel Title">Pannel Content</Panel>
-                    <Panel title="Pannel Title">Pannel Content</Panel>
-                    <Panel title="Pannel Title">Pannel Content</Panel>
-                    <Panel title="Pannel Title">Pannel Content</Panel>
-                    
-                    <div>others</div>
-                </Collapse>
-            );
-            wrapper
-                .find('.next-collapse-panel-title')
-                .at(2)
-                .simulate('click');
-            assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
-        });
-
-        it('should open default expanded datasource using number keys', () => {
-            const list = [
-                {
-                    title: 'Well, hello there',
-                    key: 0,
-                    content:
-                        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
-                },
-                {
-                    title: 'Well, hello there',
-                    key: 1,
-                    content:
-                        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
-                },
-            ];
-            const wrapper = mount(<Collapse dataSource={list} defaultExpandedKeys={[1]} />);
-            const el = wrapper
-                .find('.next-collapse-panel')
-                .at(1);
-            assert(el.hasClass('next-collapse-panel-expanded'));
-        });
-
-        it('should close default expanded datasource using number keys on click', () => {
-            const list = [
-                {
-                    title: 'Well, hello there',
-                    key: 0,
-                    content:
-                        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
-                },
-                {
-                    title: 'Well, hello there',
-                    key: 1,
-                    content:
-                        'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
-                },
-            ];
-            const wrapper = mount(<Collapse dataSource={list} defaultExpandedKeys={[1]} />);
-            wrapper
-                .find('.next-collapse-panel-title')
-                .at(1)
-                .simulate('click');
-            assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
-        });
+        describe('accordian mode', () => {
+            it('should expand panel with string key', () => {
+                const wrapper = mount(
+                    <Collapse defaultExpandedKeys={["2"]} accordion>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        
+                        <div>others</div>
+                    </Collapse>
+                );
+                const el = wrapper
+                    .find('.next-collapse-panel')
+                    .at(2);
+                assert(el.hasClass('next-collapse-panel-expanded'));
+            });
+    
+            it('should expand panel with number key', () => {
+                const wrapper = mount(
+                    <Collapse defaultExpandedKeys={[2]} accordion>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        
+                        <div>others</div>
+                    </Collapse>
+                );
+                const el = wrapper
+                    .find('.next-collapse-panel')
+                    .at(2);
+                assert(el.hasClass('next-collapse-panel-expanded'));
+            });
+    
+            it('should close default expanded string keys', () => {
+                const wrapper = mount(
+                    <Collapse defaultExpandedKeys={["2"]} accordion>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        
+                        <div>others</div>
+                    </Collapse>
+                );
+                wrapper
+                    .find('.next-collapse-panel-title')
+                    .at(2)
+                    .simulate('click');
+                assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
+            });
+    
+            it('should close default expanded number keys', () => {
+                const wrapper = mount(
+                    <Collapse defaultExpandedKeys={[2]} accordion>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        <Panel title="Pannel Title">Pannel Content</Panel>
+                        
+                        <div>others</div>
+                    </Collapse>
+                );
+                wrapper
+                    .find('.next-collapse-panel-title')
+                    .at(2)
+                    .simulate('click');
+                assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
+            });
+    
+            it('should open default expanded datasource using number keys', () => {
+                const list = [
+                    {
+                        title: 'Well, hello there',
+                        key: 0,
+                        content:
+                            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+                    },
+                    {
+                        title: 'Well, hello there',
+                        key: 1,
+                        content:
+                            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+                    },
+                ];
+                const wrapper = mount(<Collapse dataSource={list} defaultExpandedKeys={[1]}  accordion/>);
+                const el = wrapper
+                    .find('.next-collapse-panel')
+                    .at(1);
+                assert(el.hasClass('next-collapse-panel-expanded'));
+            });
+    
+            it('should close default expanded datasource using number keys on click', () => {
+                const list = [
+                    {
+                        title: 'Well, hello there',
+                        key: 0,
+                        content:
+                            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+                    },
+                    {
+                        title: 'Well, hello there',
+                        key: 1,
+                        content:
+                            'Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.',
+                    },
+                ];
+                const wrapper = mount(<Collapse dataSource={list} defaultExpandedKeys={[1]}  accordion/>);
+                wrapper
+                    .find('.next-collapse-panel-title')
+                    .at(1)
+                    .simulate('click');
+                assert(wrapper.find('.next-collapse-panel-expanded').length === 0);
+            });
+        })
     })
 
     describe('event', () => {