test: update unit test

Author: Wxh16144

tests/__snapshots__/index.spec.tsx.snap

@@ -1,33 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`collapse props items should work 1`] = `
+exports[`collapse props items should work with nested 1`] = `
 <div
   class="rc-collapse"
 >
-  <div
-    class="rc-collapse-item"
-  >
-    <div
-      aria-disabled="false"
-      aria-expanded="false"
-      class="rc-collapse-header"
-      role="button"
-      tabindex="0"
-    >
-      <div
-        class="rc-collapse-expand-icon"
-      >
-        <i
-          class="arrow"
-        />
-      </div>
-      <span
-        class="rc-collapse-header-text"
-      >
-        title
-      </span>
-    </div>
-  </div>
   <div
     class="rc-collapse-item rc-collapse-item-disabled"
   >
@@ -48,17 +24,10 @@ exports[`collapse props items should work 1`] = `
       <span
         class="rc-collapse-header-text"
       >
-        title 2
+        collapse 1
       </span>
     </div>
   </div>
-</div>
-`;
-
-exports[`collapse props items should work with nested 1`] = `
-<div
-  class="rc-collapse"
->
   <div
     class="rc-collapse-item"
   >
@@ -79,19 +48,26 @@ exports[`collapse props items should work with nested 1`] = `
       <span
         class="rc-collapse-header-text"
       >
-        title
+        collapse 2
       </span>
+      <div
+        class="rc-collapse-extra"
+      >
+        <span>
+          ExtraSpan
+        </span>
+      </div>
     </div>
   </div>
   <div
-    class="rc-collapse-item rc-collapse-item-disabled"
+    class="rc-collapse-item important"
   >
     <div
-      aria-disabled="true"
+      aria-disabled="false"
       aria-expanded="false"
       class="rc-collapse-header"
       role="button"
-      tabindex="-1"
+      tabindex="0"
     >
       <div
         class="rc-collapse-expand-icon"
@@ -103,7 +79,7 @@ exports[`collapse props items should work with nested 1`] = `
       <span
         class="rc-collapse-header-text"
       >
-        title 2
+        collapse 3
       </span>
     </div>
   </div>

tests/index.spec.tsx

@@ -691,40 +691,47 @@ describe('collapse', () => {
     expect(container.querySelector('.rc-collapse-item').style.color).toBe('red');
   });
 
-  describe('props items', () => {
+  describe.only('props items', () => {
     const items: ItemType[] = [
       {
-        header: 'title',
-        children: 'content',
+        key: '1',
+        header: 'collapse 1',
+        children: 'first',
+        collapsible: 'disabled',
       },
       {
-        header: 'title 2',
-        children: 'content 2',
-        collapsible: 'disabled',
+        key: '2',
+        header: 'collapse 2',
+        children: 'second',
+        extra: <span>ExtraSpan</span>,
+      },
+      {
+        key: '3',
+        header: 'collapse 3',
+        className: 'important',
+        children: 'third',
       },
     ];
 
-    it('should work', () => {
-      const { container } = render(<Collapse items={items} />);
-      expect(container.firstChild).toMatchSnapshot();
-    });
+    runNormalTest(
+      <Collapse onChange={onChange} expandIcon={() => <span>test{'>'}</span>} items={items} />,
+    );
 
     it('should work with onItemClick', () => {
       const onItemClick = jest.fn();
       const { container } = render(
         <Collapse
           items={[
-            ...items,
             {
               header: 'title 3',
               onItemClick,
             },
           ]}
         />,
       );
-      fireEvent.click(container.querySelectorAll('.rc-collapse-header')[2]);
+      fireEvent.click(container.querySelector('.rc-collapse-header'));
       expect(onItemClick).toHaveBeenCalled();
-      expect(onItemClick).lastCalledWith('2');
+      expect(onItemClick).lastCalledWith('0');
     });
 
     it('should work with collapsible', () => {
@@ -734,7 +741,7 @@ describe('collapse', () => {
         <Collapse
           onChange={onChangeFn}
           items={[
-            ...items,
+            ...items.slice(0, 1),
             {
               header: 'title 3',
               onItemClick,
@@ -744,15 +751,15 @@ describe('collapse', () => {
         />,
       );
 
-      fireEvent.click(container.querySelectorAll('.rc-collapse-header')[2]);
+      fireEvent.click(container.querySelector('.rc-collapse-header'));
       expect(onItemClick).not.toHaveBeenCalled();
 
       fireEvent.click(
-        container.querySelector('.rc-collapse-item:nth-child(3) .rc-collapse-expand-icon'),
+        container.querySelector('.rc-collapse-item:nth-child(2) .rc-collapse-expand-icon'),
       );
       expect(onItemClick).toHaveBeenCalled();
       expect(onChangeFn).toBeCalledTimes(1);
-      expect(onChangeFn).lastCalledWith(['2']);
+      expect(onChangeFn).lastCalledWith(['1']);
     });
 
     it('should work with custom icon', () => {