优化一些组件bug和一些组件样式问题，单元测试报告在终端输出

jest.config.js

@@ -16,9 +16,9 @@ module.exports = {
       },
     ],
   },
+  collectCoverage: true,
   coveragePathIgnorePatterns: ['<rootDir>/scripts/', 'tests/'],
   coverageDirectory: './.ci/',
-  coverageReporters: ['json', 'html'],
   moduleNameMapper: {
     '^@bifrostui/(styles.*)$': '<rootDir>/tests/mocks/styleMock.js',
     '^@bifrostui/react$': '<rootDir>/packages/bui-core/src',

packages/bui-core/src/Collapse/__tests__/Collapse.snapshot.test.tsx

@@ -0,0 +1,5 @@
+import { snapshotTest } from 'testing';
+
+describe('Collapse snapshot', () => {
+  snapshotTest('Collapse');
+});

packages/bui-core/src/Collapse/__tests__/__snapshots__/Collapse.snapshot.test.tsx.snap

@@ -0,0 +1,148 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Collapse snapshot Collapse demo snapshot 0 1`] = `
+<div
+  className="bui-stack"
+  style={
+    Object {
+      "--align-items": "center",
+      "--flex-direction": "column",
+      "--flex-wrap": "wrap",
+      "--justify-content": "center",
+      "--spacing": "8px",
+    }
+  }
+>
+  <div
+    className="bui-switch bui-switch-medium bui-switch-primary"
+  >
+    <input
+      checked={false}
+      className="bui-switch-input"
+      disabled={false}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+  <div
+    className="bui-collapse undefined"
+    style={
+      Object {
+        "WebKitWidth": "0px",
+        "WebkitTransition": "width 1500ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+        "transition": "width 1500ms cubic-bezier(0.4, 0, 0.6, 1) 0ms",
+        "width": "0px",
+      }
+    }
+  >
+    <div
+      className="bui-card"
+      style={
+        Object {
+          "background": "#CCCCCC",
+          "height": "100px",
+          "width": "100px",
+        }
+      }
+    />
+  </div>
+</div>
+`;
+
+exports[`Collapse snapshot Collapse demo snapshot 0 2`] = `
+<div
+  className="bui-stack"
+  style={
+    Object {
+      "--align-items": "center",
+      "--flex-direction": "column",
+      "--flex-wrap": "wrap",
+      "--justify-content": "center",
+      "--spacing": "8px",
+    }
+  }
+>
+  <div
+    className="bui-switch bui-switch-medium bui-switch-primary bui-switch-checked"
+  >
+    <input
+      checked={true}
+      className="bui-switch-input"
+      disabled={false}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+  <div
+    className="bui-collapse undefined"
+    style={
+      Object {
+        "WebKitHeight": "fit-content",
+        "WebkitTransition": "height 1500ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
+        "height": "fit-content",
+        "transition": "height 1500ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
+      }
+    }
+  >
+    <div
+      className="bui-card"
+      style={
+        Object {
+          "background": "#CCCCCC",
+          "height": "100px",
+          "width": "100px",
+        }
+      }
+    />
+  </div>
+</div>
+`;
+
+exports[`Collapse snapshot Collapse demo snapshot 0 3`] = `
+<div
+  className="bui-stack"
+  style={
+    Object {
+      "--align-items": "center",
+      "--flex-direction": "column",
+      "--flex-wrap": "wrap",
+      "--justify-content": "center",
+      "--spacing": "8px",
+    }
+  }
+>
+  <div
+    className="bui-switch bui-switch-medium bui-switch-primary bui-switch-checked"
+  >
+    <input
+      checked={true}
+      className="bui-switch-input"
+      disabled={false}
+      onChange={[Function]}
+      type="checkbox"
+    />
+  </div>
+  <div
+    className="bui-collapse undefined"
+    style={
+      Object {
+        "WebKitHeight": "fit-content",
+        "WebkitTransition": "height 1500ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
+        "height": "fit-content",
+        "transition": "height 1500ms cubic-bezier(0.0, 0, 0.2, 1) 0ms",
+      }
+    }
+  >
+    <div
+      className="bui-card"
+      style={
+        Object {
+          "background": "#CCCCCC",
+          "height": "100px",
+          "width": "100px",
+        }
+      }
+    />
+  </div>
+</div>
+`;

packages/bui-core/src/CollapsePanel/__tests__/CollapsePanel.test.tsx

@@ -1,5 +1,5 @@
 import React, { ReactElement, useState } from 'react';
-import { render, isConformant, userEvent, screen } from 'testing';
+import { render, isConformant, userEvent, screen, waitFor } from 'testing';
 import CollapsePanel, { CollapsePanelItem, CollapsePanelProps } from '../index';
 
 const setup = (props: CollapsePanelProps, children?: ReactElement) => {
@@ -86,7 +86,7 @@ describe('CollapsePanel', () => {
     expect(firstPanel).toHaveClass('bui-collapse-panel-item-active');
     expect(secondPanel).not.toHaveClass('bui-collapse-panel-item-active');
   });
-  it('should only open one panel when use accordion', () => {
+  it('should only open one panel when use accordion', async () => {
     const { container } = setup({
       defaultActiveKeys: ['1'],
       accordion: true,
@@ -100,8 +100,10 @@ describe('CollapsePanel', () => {
     )[1];
 
     userEvent.click(screen.getByText('这是面板标题2'));
-    expect(firstPanel).not.toHaveClass('bui-collapse-panel-item-active');
-    expect(secondPanel).toHaveClass('bui-collapse-panel-item-active');
+    await waitFor(() => {
+      expect(firstPanel).not.toHaveClass('bui-collapse-panel-item-active');
+      expect(secondPanel).toHaveClass('bui-collapse-panel-item-active');
+    });
   });
   it('should use custom icon', () => {
     const customIcon = <div>custom icon</div>;
@@ -119,7 +121,7 @@ describe('CollapsePanel', () => {
     const icon = screen.getByText('custom icon');
     expect(icon).toBeVisible();
   });
-  it('should use custom icon by function', () => {
+  it('should use custom icon by function', async () => {
     setup({
       arrowIcon: (active) => {
         if (active) {
@@ -138,10 +140,12 @@ describe('CollapsePanel', () => {
     const unactivedIcon = screen.getByText('unactived icon');
     expect(unactivedIcon).toBeVisible();
     userEvent.click(screen.getByText('这是面板标题1'));
-    const activeIcon = screen.getByText('active icon');
-    expect(activeIcon).toBeVisible();
+    await waitFor(() => {
+      const activeIcon = screen.getByText('active icon');
+      expect(activeIcon).toBeVisible();
+    });
   });
-  it('should call onChange', () => {
+  it('should call onChange', async () => {
     const fakeChange = jest.fn();
     const Component = () => {
       const [activeKeys, setActiveKeys] = useState(['1']);
@@ -167,10 +171,12 @@ describe('CollapsePanel', () => {
     )[1];
 
     userEvent.click(screen.getByText('这是面板标题2'));
-    expect(fakeChange).toBeCalled();
-    expect(fakeChange).toBeCalledWith(['2', '1']);
-    expect(firstPanel).toHaveClass('bui-collapse-panel-item-active');
-    expect(secondPanel).toHaveClass('bui-collapse-panel-item-active');
+    await waitFor(() => {
+      expect(fakeChange).toBeCalled();
+      expect(fakeChange).toBeCalledWith(['2', '1']);
+      expect(firstPanel).toHaveClass('bui-collapse-panel-item-active');
+      expect(secondPanel).toHaveClass('bui-collapse-panel-item-active');
+    });
   });
   it('should return null', () => {
     const { container } = setup({});
@@ -206,7 +212,7 @@ describe('CollapsePanel', () => {
       expect(firstPanel).toHaveClass('bui-collapse-panel-item-active');
       expect(secondPanel).not.toHaveClass('bui-collapse-panel-item-active');
     });
-    it('should only open one panel when use accordion', () => {
+    it('should only open one panel when use accordion', async () => {
       const { container } = setupByElement({
         defaultActiveKeys: ['1'],
         accordion: true,
@@ -219,8 +225,10 @@ describe('CollapsePanel', () => {
       )[1];
 
       userEvent.click(screen.getByText('这是面板标题2'));
-      expect(firstPanel).not.toHaveClass('bui-collapse-panel-item-active');
-      expect(secondPanel).toHaveClass('bui-collapse-panel-item-active');
+      await waitFor(() => {
+        expect(firstPanel).not.toHaveClass('bui-collapse-panel-item-active');
+        expect(secondPanel).toHaveClass('bui-collapse-panel-item-active');
+      });
     });
     it('should use custom icon', () => {
       const customIcon = <div>custom icon</div>;
@@ -236,7 +244,7 @@ describe('CollapsePanel', () => {
       const icon = screen.getByText('custom icon');
       expect(icon).toBeVisible();
     });
-    it('should use custom icon by function', () => {
+    it('should use custom icon by function', async () => {
       setupByElement(
         {
           arrowIcon: (active) => {
@@ -251,10 +259,12 @@ describe('CollapsePanel', () => {
       const unactivedIcon = screen.getByText('unactived icon');
       expect(unactivedIcon).toBeVisible();
       userEvent.click(screen.getByText('这是面板标题1'));
-      const activeIcon = screen.getByText('active icon');
-      expect(activeIcon).toBeVisible();
+      await waitFor(() => {
+        const activeIcon = screen.getByText('active icon');
+        expect(activeIcon).toBeVisible();
+      });
     });
-    it('should call onChange', () => {
+    it('should call onChange', async () => {
       const fakeChange = jest.fn();
       const Component = () => {
         const [activeKeys, setActiveKeys] = useState(['1']);
@@ -283,10 +293,12 @@ describe('CollapsePanel', () => {
       )[1];
 
       userEvent.click(screen.getByText('这是面板标题2'));
-      expect(fakeChange).toBeCalled();
-      expect(fakeChange).toBeCalledWith(['2', '1']);
-      expect(firstPanel).toHaveClass('bui-collapse-panel-item-active');
-      expect(secondPanel).toHaveClass('bui-collapse-panel-item-active');
+      await waitFor(() => {
+        expect(fakeChange).toBeCalled();
+        expect(fakeChange).toBeCalledWith(['2', '1']);
+        expect(firstPanel).toHaveClass('bui-collapse-panel-item-active');
+        expect(secondPanel).toHaveClass('bui-collapse-panel-item-active');
+      });
     });
     it('should return null', () => {
       const { container } = setupByElement({}, 0);

packages/bui-core/src/Dialog/FunctionalDialog.tsx

@@ -119,7 +119,7 @@ const useDialog = () => {
   const wrapAPI: DialogFunction = (
     props: DialogOptions | string,
   ): DialogPromise => {
-    const options = { theme: holderRef.current.theme, ...formatProps(props) };
+    const options = { theme: holderRef.current?.theme, ...formatProps(props) };
     const { onConfirm, onCancel, ...rest } = options;
     return new Promise((resolve) => {
       DialogGenerator({
@@ -141,13 +141,13 @@ const useDialog = () => {
     Dialog({
       type: 'confirm',
       ...formatProps(options),
-      theme: holderRef.current.theme,
+      theme: holderRef.current?.theme,
     });
   wrapAPI.prompt = (options: PromptOptions) =>
     Dialog({
       type: 'prompt',
       ...formatProps(options),
-      theme: holderRef.current.theme,
+      theme: holderRef.current?.theme,
     });
   return [wrapAPI, <Popup key="dialog-holder" ref={holderRef} />] as [
     DialogFunction,

packages/bui-core/src/Dialog/__tests__/Dialog.test.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
-import { fireEvent, waitFor } from '@testing-library/react';
+import { fireEvent, renderHook, waitFor } from '@testing-library/react';
 import { Button } from '@bifrostui/react';
 import { render, screen, act } from 'testing';
 import Dialog from '../FunctionalDialog';
 import '@testing-library/jest-dom/extend-expect';
 
 describe('Dialog Functional Calls', () => {
   const rootClass = 'bui-dialog';
+  let dialogHook;
+
   beforeEach(() => {
     document.body.innerHTML = '';
     jest.useFakeTimers();
+    renderHook(() => {
+      dialogHook = Dialog.useDialog();
+    });
   });
 
   afterEach(() => {
@@ -142,4 +147,22 @@ describe('Dialog Functional Calls', () => {
     fireEvent.click(screen.getByText('Delete'));
     await waitFor(() => expect(promptPromise).resolves.toBe(false));
   });
+
+  it.each(['confirm', 'prompt'])(
+    'should support basic api with useDialog',
+    async (type) => {
+      const dialog = dialogHook?.[0];
+      render(
+        <Button
+          onClick={() => {
+            dialog[type](`${type} message`);
+          }}
+        >
+          dialog button
+        </Button>,
+      );
+      fireEvent.click(screen.getByText('dialog button'));
+      expect(screen.getByText(`${type} message`)).toBeInTheDocument();
+    },
+  );
 });

packages/bui-core/src/Input/Input.less

@@ -50,6 +50,7 @@
     outline: none;
     background-color: var(--background-color);
     font-size: var(--bui-text-size-2);
+    .ellipsis();
 
     &::placeholder {
       color: var(--bui-color-fg-subtle);