From 2664cb0b7fbc408d502d50e731501e21ed764d71 Mon Sep 17 00:00:00 2001
From: wuxh <wxh1220@gmail.com>
Date: Fri, 14 Apr 2023 18:08:49 +0800
Subject: [PATCH] test: update test

---
 tests/index.spec.tsx | 670 +++++++++++++++++++++++--------------------
 1 file changed, 365 insertions(+), 305 deletions(-)

diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index 533df08..cd2a509 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -1,8 +1,8 @@
 import type { RenderResult } from '@testing-library/react';
 import { fireEvent, render } from '@testing-library/react';
 import KeyCode from 'rc-util/lib/KeyCode';
-import React, { Fragment } from 'react';
-import Collapse, { Panel } from '../src/index';
+import React from 'react';
+import Collapse from '../src/index';
 import type { CollapseProps, ItemType } from '../src/interface';
 
 describe('collapse', () => {
@@ -24,6 +24,27 @@ describe('collapse', () => {
     }
   }
 
+  const items: ItemType[] = [
+    {
+      key: '1',
+      label: 'collapse 1',
+      collapsible: 'disabled',
+      children: 'first',
+    },
+    {
+      key: '2',
+      label: 'collapse 2',
+      extra: <span>ExtraSpan</span>,
+      children: 'second',
+    },
+    {
+      key: '3',
+      label: 'collapse 3',
+      className: 'important',
+      children: 'third',
+    },
+  ];
+
   function runNormalTest(element: any) {
     let collapse: RenderResult;
 
@@ -115,21 +136,7 @@ describe('collapse', () => {
   describe('collapse', () => {
     const expandIcon = () => <span>test{'>'}</span>;
 
-    const element = (
-      <Collapse onChange={onChange} expandIcon={expandIcon}>
-        <Panel header="collapse 1" key="1" collapsible="disabled">
-          first
-        </Panel>
-        <Panel header="collapse 2" key="2" extra={<span>ExtraSpan</span>}>
-          second
-        </Panel>
-        <Panel header="collapse 3" key="3" className="important">
-          third
-        </Panel>
-      </Collapse>
-    );
-
-    runNormalTest(element);
+    runNormalTest(<Collapse onChange={onChange} expandIcon={expandIcon} items={items} />);
 
     it('controlled', () => {
       const onChangeSpy = jest.fn();
@@ -143,17 +150,27 @@ describe('collapse', () => {
         };
 
         return (
-          <Collapse onChange={handleChange} activeKey={activeKey}>
-            <Panel header="collapse 1" key="1">
-              first
-            </Panel>
-            <Panel header="collapse 2" key="2">
-              second
-            </Panel>
-            <Panel header="collapse 3" key="3">
-              third
-            </Panel>
-          </Collapse>
+          <Collapse
+            onChange={handleChange}
+            activeKey={activeKey}
+            items={[
+              {
+                key: '1',
+                label: 'collapse 1',
+                children: 'first',
+              },
+              {
+                key: '2',
+                label: 'collapse 2',
+                children: 'second',
+              },
+              {
+                key: '3',
+                label: 'collapse 3',
+                children: 'third',
+              },
+            ]}
+          />
         );
       };
 
@@ -170,31 +187,32 @@ describe('collapse', () => {
   });
 
   describe('it should support number key', () => {
-    const expandIcon = () => <span>test{'>'}</span>;
-    const element = (
-      <Collapse onChange={onChange} expandIcon={expandIcon}>
-        <Panel header="collapse 1" key={1} collapsible="disabled">
-          first
-        </Panel>
-        <Panel header="collapse 2" key={2} extra={<span>ExtraSpan</span>}>
-          second
-        </Panel>
-        <Panel header="collapse 3" key={3} className="important">
-          third
-        </Panel>
-      </Collapse>
+    runNormalTest(
+      <Collapse
+        onChange={onChange}
+        expandIcon={() => <span>test{'>'}</span>}
+        items={items.map((item) => ({
+          ...item,
+          key: Number(item.key),
+        }))}
+      />,
     );
-
-    runNormalTest(element);
   });
 
   it('shoule support extra whit number 0', () => {
     const { container } = render(
-      <Collapse onChange={onChange} activeKey={0}>
-        <Panel header="collapse 0" key={0} extra={0}>
-          zero
-        </Panel>
-      </Collapse>,
+      <Collapse
+        onChange={onChange}
+        activeKey={0}
+        items={[
+          {
+            label: 'collapse 0',
+            key: 0,
+            extra: 0,
+            children: 'zero',
+          },
+        ]}
+      />,
     );
 
     const extraNodes = container.querySelectorAll('.rc-collapse-extra');
@@ -204,17 +222,14 @@ describe('collapse', () => {
 
   it('should support activeKey number 0', () => {
     const { container } = render(
-      <Collapse onChange={onChange} activeKey={0}>
-        <Panel header="collapse 0" key={0}>
-          zero
-        </Panel>
-        <Panel header="collapse 1" key={1}>
-          first
-        </Panel>
-        <Panel header="collapse 2" key={2}>
-          second
-        </Panel>
-      </Collapse>,
+      <Collapse
+        onChange={onChange}
+        activeKey={0}
+        items={items.map((item, index) => ({
+          ...item,
+          key: index,
+        }))}
+      />,
     );
 
     // activeKey number 0, should open one item
@@ -223,17 +238,7 @@ describe('collapse', () => {
 
   it('click should toggle panel state', () => {
     const { container } = render(
-      <Collapse onChange={onChange} destroyInactivePanel>
-        <Panel header="collapse 1" key="1">
-          first
-        </Panel>
-        <Panel header="collapse 2" key="2">
-          second
-        </Panel>
-        <Panel header="collapse 3" key="3" className="important">
-          third
-        </Panel>
-      </Collapse>,
+      <Collapse onChange={onChange} destroyInactivePanel items={items} />,
     );
 
     const header = container.querySelectorAll('.rc-collapse-header')?.[1];
@@ -313,59 +318,89 @@ describe('collapse', () => {
 
   describe('prop: accordion', () => {
     runAccordionTest(
-      <Collapse onChange={onChange} accordion>
-        <Panel header="collapse 1" key="1">
-          first
-        </Panel>
-        <Panel header="collapse 2" key="2">
-          second
-        </Panel>
-        <Panel header="collapse 3" key="3">
-          third
-        </Panel>
-      </Collapse>,
+      <Collapse
+        onChange={onChange}
+        accordion
+        items={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            children: 'first',
+          },
+          {
+            key: '2',
+            label: 'collapse 2',
+            children: 'second',
+          },
+          {
+            key: '3',
+            label: 'collapse 3',
+            children: 'third',
+          },
+        ]}
+      />,
     );
   });
 
   describe('forceRender', () => {
     it('when forceRender is not supplied it should lazy render the panel content', () => {
       const { container } = render(
-        <Collapse>
-          <Panel header="collapse 1" key="1" collapsible="disabled">
-            first
-          </Panel>
-          <Panel header="collapse 2" key="2">
-            second
-          </Panel>
-        </Collapse>,
+        <Collapse
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              collapsible: 'disabled',
+            },
+            {
+              key: '2',
+              label: 'collapse 2',
+              children: 'second',
+            },
+          ]}
+        />,
       );
       expect(container.querySelectorAll('.rc-collapse-content')).toHaveLength(0);
     });
 
     it('when forceRender is FALSE it should lazy render the panel content', () => {
       const { container } = render(
-        <Collapse>
-          <Panel header="collapse 1" key="1" forceRender={false} collapsible="disabled">
-            first
-          </Panel>
-          <Panel header="collapse 2" key="2">
-            second
-          </Panel>
-        </Collapse>,
+        <Collapse
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              forceRender: false,
+              collapsible: 'disabled',
+            },
+            {
+              key: '2',
+              label: 'collapse 2',
+              children: 'second',
+            },
+          ]}
+        />,
       );
       expect(container.querySelectorAll('.rc-collapse-content')).toHaveLength(0);
     });
 
     it('when forceRender is TRUE then it should render all the panel content to the DOM', () => {
       const { container } = render(
-        <Collapse>
-          <Panel header="collapse 1" key="1" forceRender collapsible="disabled">
-            first
-          </Panel>
-          <Panel header="collapse 2" key="2">
-            second
-          </Panel>
-        </Collapse>,
+        <Collapse
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              forceRender: true,
+              collapsible: 'disabled',
+            },
+            {
+              key: '2',
+              label: 'collapse 2',
+              children: 'second',
+            },
+          ]}
+        />,
       );
 
       jest.runAllTimers();
@@ -388,17 +423,26 @@ describe('collapse', () => {
     };
 
     const { container } = render(
-      <Collapse>
-        <Panel header="collapse 1" key="1">
-          first
-        </Panel>
-        <Panel header="collapse 2" key="2">
-          second
-        </Panel>
-        <Panel header="collapse 3" key="3" collapsible="disabled">
-          second
-        </Panel>
-      </Collapse>,
+      <Collapse
+        items={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            children: 'first',
+          },
+          {
+            key: '2',
+            label: 'collapse 2',
+            children: 'second',
+          },
+          {
+            key: '3',
+            label: 'collapse 3',
+            children: 'second',
+            collapsible: 'disabled',
+          },
+        ]}
+      />,
     );
 
     fireEvent.keyPress(container.querySelectorAll('.rc-collapse-header')?.[2], myKeyEvent);
@@ -423,46 +467,59 @@ describe('collapse', () => {
     );
   });
 
-  describe('wrapped in Fragment', () => {
-    const expandIcon = () => <span>test{'>'}</span>;
-    const element = (
-      <Collapse onChange={onChange} expandIcon={expandIcon}>
-        <Fragment>
-          <Panel header="collapse 1" key="1" collapsible="disabled">
-            first
-          </Panel>
-          <Panel header="collapse 2" key="2" extra={<span>ExtraSpan</span>}>
-            second
-          </Panel>
-          <Fragment>
-            <Panel header="collapse 3" key="3" className="important">
-              third
-            </Panel>
-          </Fragment>
-        </Fragment>
-      </Collapse>
-    );
-
-    runNormalTest(element);
-  });
+  // TODO: 移除 Panel 后需要在 Ant Design 里面测试，待 Ant Design 稳定后再移除 assignee: @wxh16144
+  // describe('wrapped in Fragment', () => {
+  //   const expandIcon = () => <span>test{'>'}</span>;
+  //   const element = (
+  //     <Collapse onChange={onChange} expandIcon={expandIcon}>
+  //       <Fragment>
+  //         <Panel header="collapse 1" key="1" collapsible="disabled">
+  //           first
+  //         </Panel>
+  //         <Panel header="collapse 2" key="2" extra={<span>ExtraSpan</span>}>
+  //           second
+  //         </Panel>
+  //         <Fragment>
+  //           <Panel header="collapse 3" key="3" className="important">
+  //             third
+  //           </Panel>
+  //         </Fragment>
+  //       </Fragment>
+  //     </Collapse>
+  //   );
+
+  //   runNormalTest(element);
+  // });
 
   it('should support return null icon', () => {
     const { container } = render(
-      <Collapse expandIcon={() => null}>
-        <Panel header="title" key="1">
-          first
-        </Panel>
-      </Collapse>,
+      <Collapse
+        expandIcon={() => null}
+        items={[
+          {
+            key: '1',
+            label: 'title',
+            children: 'first',
+          },
+        ]}
+      />,
     );
     expect(container.querySelector('.rc-collapse-header')?.childNodes).toHaveLength(1);
   });
 
-  it('should support custom child', () => {
+  // TODO: 需要在 Ant Design 里面测试，待 Ant Design 稳定后再移除 assignee: @wxh16144
+  // 按理说我们不允许用户这样用，但是为了兼容性，我们还是保留这个测试
+  it.skip('should support custom child', () => {
     const { container } = render(
-      <Collapse>
-        <Panel header="collapse 1" key="1">
-          first
-        </Panel>
+      <Collapse
+        items={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            children: 'first',
+          },
+        ]}
+      >
         <a className="custom-child">custom-child</a>
       </Collapse>,
     );
@@ -472,44 +529,49 @@ describe('collapse', () => {
   // https://github.com/ant-design/ant-design/issues/36327
   // https://github.com/ant-design/ant-design/issues/6179
   // https://github.com/react-component/collapse/issues/73#issuecomment-323626120
-  it('should support custom component', () => {
-    const PanelElement = (props) => (
-      <Panel header="collapse 1" {...props}>
-        <p>test</p>
-      </Panel>
-    );
-    const { container } = render(
-      <Collapse defaultActiveKey="1">
-        <PanelElement key="1" />
-        <Panel header="collapse 2" key="2">
-          second
-        </Panel>
-      </Collapse>,
-    );
-
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
-    expect(container.querySelector('.rc-collapse-content')).toHaveClass(
-      'rc-collapse-content-active',
-    );
-    expect(container.querySelector('.rc-collapse-header')?.textContent).toBe('collapse 1');
-    expect(container.querySelector('.rc-collapse-header')?.querySelectorAll('.arrow')).toHaveLength(
-      1,
-    );
-    fireEvent.click(container.querySelector('.rc-collapse-header')!);
-    expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
-    expect(container.querySelector('.rc-collapse-content')).toHaveClass(
-      'rc-collapse-content-inactive',
-    );
-  });
+  // TODO: 需要在 Ant Design 里面测试，待 Ant Design 稳定后再移除 assignee: @wxh16144
+  // it('should support custom component', () => {
+  //   const PanelElement = (props) => (
+  //     <Panel header="collapse 1" {...props}>
+  //       <p>test</p>
+  //     </Panel>
+  //   );
+  //   const { container } = render(
+  //     <Collapse defaultActiveKey="1">
+  //       <PanelElement key="1" />
+  //       <Panel header="collapse 2" key="2">
+  //         second
+  //       </Panel>
+  //     </Collapse>,
+  //   );
+
+  //   expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(1);
+  //   expect(container.querySelector('.rc-collapse-content')).toHaveClass(
+  //     'rc-collapse-content-active',
+  //   );
+  //   expect(container.querySelector('.rc-collapse-header')?.textContent).toBe('collapse 1');
+  //   expect(container.querySelector('.rc-collapse-header')?.querySelectorAll('.arrow')).toHaveLength(
+  //     1,
+  //   );
+  //   fireEvent.click(container.querySelector('.rc-collapse-header')!);
+  //   expect(container.querySelectorAll('.rc-collapse-content-active')).toHaveLength(0);
+  //   expect(container.querySelector('.rc-collapse-content')).toHaveClass(
+  //     'rc-collapse-content-inactive',
+  //   );
+  // });
 
   describe('prop: collapsible', () => {
     it('default', () => {
       const { container } = render(
-        <Collapse>
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
       expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
       fireEvent.click(container.querySelector('.rc-collapse-header')!);
@@ -517,11 +579,16 @@ describe('collapse', () => {
     });
     it('should work when value is header', () => {
       const { container } = render(
-        <Collapse collapsible="header">
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="header"
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
       expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
       fireEvent.click(container.querySelector('.rc-collapse-header')!);
@@ -531,11 +598,16 @@ describe('collapse', () => {
     });
     it('should work when value is icon', () => {
       const { container } = render(
-        <Collapse collapsible="icon">
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="icon"
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
       expect(container.querySelector('.rc-collapse-expand-icon')).toBeTruthy();
       fireEvent.click(container.querySelector('.rc-collapse-header')!);
@@ -546,11 +618,16 @@ describe('collapse', () => {
 
     it('should disabled when value is disabled', () => {
       const { container } = render(
-        <Collapse collapsible="disabled">
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="disabled"
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
       expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
       expect(container.querySelectorAll('.rc-collapse-item-disabled')).toHaveLength(1);
@@ -560,11 +637,17 @@ describe('collapse', () => {
 
     it('the value of panel should be read first', () => {
       const { container } = render(
-        <Collapse collapsible="header">
-          <Panel collapsible="disabled" header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="header"
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              children: 'first',
+              collapsible: 'disabled',
+            },
+          ]}
+        />,
       );
       expect(container.querySelector('.rc-collapse-header-text')).toBeTruthy();
 
@@ -576,11 +659,16 @@ describe('collapse', () => {
 
     it('icon trigger when collapsible equal header', () => {
       const { container } = render(
-        <Collapse collapsible="header">
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="header"
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
 
       fireEvent.click(container.querySelector('.rc-collapse-header .arrow')!);
@@ -589,11 +677,16 @@ describe('collapse', () => {
 
     it('header not trigger when collapsible equal icon', () => {
       const { container } = render(
-        <Collapse collapsible="icon">
-          <Panel header="collapse 1" key="1">
-            first
-          </Panel>
-        </Collapse>,
+        <Collapse
+          collapsible="icon"
+          items={[
+            {
+              key: '1',
+              label: 'collapse 1',
+              children: 'first',
+            },
+          ]}
+        />,
       );
 
       fireEvent.click(container.querySelector('.rc-collapse-header-text')!);
@@ -603,11 +696,16 @@ describe('collapse', () => {
 
   it('!showArrow', () => {
     const { container } = render(
-      <Collapse>
-        <Panel header="collapse 1" key="1" showArrow={false}>
-          first
-        </Panel>
-      </Collapse>,
+      <Collapse
+        items={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            children: 'first',
+            showArrow: false,
+          },
+        ]}
+      />,
     );
 
     expect(container.querySelectorAll('.rc-collapse-expand-icon')).toHaveLength(0);
@@ -616,46 +714,38 @@ describe('collapse', () => {
   it('Panel container dom can set event handler', () => {
     const clickHandler = jest.fn();
     const { container } = render(
-      <Collapse defaultActiveKey="1">
-        <Panel header="collapse 1" key="1" onClick={clickHandler}>
-          <div className="target">Click this</div>
-        </Panel>
-      </Collapse>,
+      <Collapse
+        defaultActiveKey="1"
+        items={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            onClick: clickHandler,
+            children: <div className="target">Click this</div>,
+          },
+        ]}
+      />,
     );
 
     fireEvent.click(container.querySelector('.target')!);
     expect(clickHandler).toHaveBeenCalled();
   });
 
-  it('falsy Panel', () => {
-    const { container } = render(
-      <Collapse>
-        {null}
-        <Panel header="collapse 1" key="1">
-          <p>Panel 1 content</p>
-        </Panel>
-        {0}
-        <Panel header="collapse 2" key="2">
-          <p>Panel 2 content</p>
-        </Panel>
-        {undefined}
-        {false}
-        {true}
-      </Collapse>,
-    );
-
-    expect(container.querySelectorAll('.rc-collapse-item')).toHaveLength(2);
-  });
-
   it('ref should work', () => {
     const ref = React.createRef<any>();
     const panelRef = React.createRef<any>();
     const { container } = render(
-      <Collapse ref={ref}>
-        <Panel header="collapse 1" key="1" ref={panelRef}>
-          first
-        </Panel>
-      </Collapse>,
+      <Collapse
+        ref={ref}
+        items={[
+          {
+            key: '1',
+            ref: panelRef,
+            label: 'collapse 1',
+            children: 'first',
+          },
+        ]}
+      />,
     );
     expect(ref.current).toBe(container.firstChild);
     expect(panelRef.current).toBe(container.querySelector('.rc-collapse-item'));
@@ -665,11 +755,16 @@ describe('collapse', () => {
   it('onItemClick should work', () => {
     const onItemClick = jest.fn();
     const { container } = render(
-      <Collapse>
-        <Panel header="collapse 1" key="1" onItemClick={onItemClick}>
-          first
-        </Panel>
-      </Collapse>,
+      <Collapse
+        items={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            onItemClick,
+            children: 'first',
+          },
+        ]}
+      />,
     );
     fireEvent.click(container.querySelector('.rc-collapse-header')!);
     expect(onItemClick).toHaveBeenCalled();
@@ -678,11 +773,17 @@ describe('collapse', () => {
   it('onItemClick should not work when collapsible is disabled', () => {
     const onItemClick = jest.fn();
     const { container } = render(
-      <Collapse collapsible="disabled">
-        <Panel header="collapse 1" key="1" onItemClick={onItemClick}>
-          first
-        </Panel>
-      </Collapse>,
+      <Collapse
+        collapsible="disabled"
+        items={[
+          {
+            key: '1',
+            label: 'collapse 1',
+            onItemClick,
+            children: 'first',
+          },
+        ]}
+      />,
     );
     fireEvent.click(container.querySelector('.rc-collapse-header')!);
     expect(onItemClick).not.toHaveBeenCalled();
@@ -690,65 +791,24 @@ describe('collapse', () => {
 
   it('panel style should work', () => {
     const { container } = render(
-      <Collapse>
-        <Panel header="collapse 1" key="1" style={{ color: 'red' }}>
-          first
-        </Panel>
-      </Collapse>,
-    );
-    expect(container.querySelector('.rc-collapse-item').style.color).toBe('red');
-  });
-
-  describe('props items', () => {
-    const items: ItemType[] = [
-      {
-        key: '1',
-        label: 'collapse 1',
-        children: 'first',
-        collapsible: 'disabled',
-      },
-      {
-        key: '2',
-        label: 'collapse 2',
-        children: 'second',
-        extra: <span>ExtraSpan</span>,
-      },
-      {
-        key: '3',
-        label: 'collapse 3',
-        className: 'important',
-        children: 'third',
-      },
-    ];
-
-    runNormalTest(
-      <Collapse onChange={onChange} expandIcon={() => <span>test{'>'}</span>} items={items} />,
-    );
-
-    runAccordionTest(
       <Collapse
-        onChange={onChange}
-        accordion
         items={[
           {
             key: '1',
             label: 'collapse 1',
+            style: { color: 'red' },
             children: 'first',
           },
-          {
-            key: '2',
-            label: 'collapse 2',
-            children: 'second',
-          },
-          {
-            key: '3',
-            label: 'collapse 3',
-            children: 'third',
-          },
         ]}
       />,
     );
+    expect(window.getComputedStyle(container.querySelector('.rc-collapse-item'))).toHaveProperty(
+      'color',
+      'red',
+    );
+  });
 
+  describe('props items', () => {
     it('should work with onItemClick', () => {
       const onItemClick = jest.fn();
       const { container } = render(