test(chat): add unit tests

mortalYoung · mortalYoung · commit 136043e58882 · 2025-01-13T17:11:14.000+08:00
diff --git a/package.json b/package.json
@@ -111,6 +111,7 @@
         "react-dom": "^18.0.0",
         "react-test-renderer": "^18.2.0",
         "standard-version": "^9.5.0",
+        "resize-observer-polyfill": "^1.5.1",
         "stylelint": "^14.9.1",
         "ts-jest": "^29.0.3",
         "typescript": "~4.5.2"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/chat/__tests__/__snapshots__/icon.test.tsx.snap b/src/chat/__tests__/__snapshots__/icon.test.tsx.snap
diff --git a/src/chat/__tests__/__snapshots__/input.test.tsx.snap b/src/chat/__tests__/__snapshots__/input.test.tsx.snap
@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Chat Input Match snapshot 1`] = `
+<DocumentFragment>
+  <textarea
+    class="ant-input aigc-textarea"
+  />
+</DocumentFragment>
+`;
diff --git a/src/chat/__tests__/__snapshots__/loading.test.tsx.snap b/src/chat/__tests__/__snapshots__/loading.test.tsx.snap
@@ -0,0 +1,152 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Test Chat Loading Match Snapshots: loading 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="dtc__aigc__loading"
+      >
+        <div />
+        <div />
+        <div />
+      </div>
+    </div>
+  </body>,
+  "container": <div>
+    <div
+      class="dtc__aigc__loading"
+    >
+      <div />
+      <div />
+      <div />
+    </div>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`Test Chat Loading Match Snapshots: not loading 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <div
+        class="dtc__aigc__loading"
+      >
+        <div />
+        <div />
+        <div />
+      </div>
+    </div>
+    <div>
+      test
+    </div>
+  </body>,
+  "container": <div>
+    test
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
diff --git a/src/chat/__tests__/content.test.tsx b/src/chat/__tests__/content.test.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
-import { act, cleanup, render } from '@testing-library/react';
+import { act, cleanup, fireEvent, render } from '@testing-library/react';
+import { produce } from 'immer';
 import '@testing-library/jest-dom/extend-expect';
 
-import Content from '../content';
+import Content, { type IContentRef } from '../content';
 import { Message, Prompt } from '../entity';
 
 class BasePrompt extends Prompt {}
@@ -51,7 +52,25 @@ function generatePrompt() {
     return prompt;
 }
 
-describe('Test Content', () => {
+function generatePromptWithGeneratingMessage() {
+    const prompt = new BasePrompt({
+        id: '1',
+        title: 'What is your name?',
+        messages: [],
+        createdAt: 1736479532239,
+    });
+    prompt.messages.push(
+        new BaseMessage({
+            id: '1',
+            content: 'My Name is dt-react-component',
+            createdAt: 1736479532239,
+            status: 1,
+        })
+    );
+    return prompt;
+}
+
+describe('Test Chat Content', () => {
     let originalRAF: typeof window.requestAnimationFrame;
     beforeEach(() => {
         jest.useFakeTimers();
@@ -123,5 +142,61 @@ describe('Test Content', () => {
         });
 
         expect(fn).toBeCalledTimes(1);
+        expect(fn).toBeCalledWith(100);
+    });
+
+    it('Should always scroll to bottom', () => {
+        let data = generatePromptWithGeneratingMessage();
+        const { container, rerender } = render(
+            <Content data={[data]} placeholder={<div>placeholder</div>} />
+        );
+
+        const ele = container.querySelector('.dtc__aigc__content__container')!;
+        jest.spyOn(ele, 'scrollHeight', 'get')
+            .mockReturnValueOnce(100)
+            .mockReturnValueOnce(400)
+            .mockReturnValue(200);
+        jest.spyOn(ele, 'clientHeight', 'get').mockReturnValue(200);
+
+        const fn = jest.spyOn(ele, 'scrollTop', 'set');
+        expect(fn).not.toBeCalled();
+
+        data = produce(data, (draft) => {
+            draft.messages[0].content += ', I am a developer';
+        });
+        rerender(<Content data={[data]} placeholder={<div>placeholder</div>} />);
+
+        expect(fn).toBeCalledTimes(1);
+        expect(fn).toBeCalledWith(100);
+
+        // Simulate user scroll to top and will not scroll to bottom
+        fireEvent(ele, new Event('scroll'));
+        expect(fn).toBeCalledTimes(1);
+
+        // Simulate user scroll to bottom and will keep sticky at bottom
+        fireEvent(ele, new Event('scroll'));
+        expect(fn).toBeCalledTimes(2);
+        expect(fn).lastCalledWith(200);
+    });
+
+    it('Should get ref', () => {
+        const ref = React.createRef<IContentRef>();
+        const { container } = render(
+            <Content ref={ref} data={[generatePrompt()]} placeholder={<div>placeholder</div>} />
+        );
+
+        const ele = container.querySelector('.dtc__aigc__content__container')!;
+        expect(ref.current?.nativeElement).toBe(ele);
+
+        jest.spyOn(ele, 'scrollHeight', 'get').mockReturnValue(200);
+        const fn = jest.fn();
+        ele.scrollTo = fn;
+
+        act(() => {
+            ref.current?.scrollToBottom();
+        });
+
+        expect(fn).toBeCalledTimes(1);
+        expect(fn).lastCalledWith({ top: 200, left: 0, behavior: 'instant' });
     });
 });
diff --git a/src/chat/__tests__/icon.test.tsx b/src/chat/__tests__/icon.test.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import { cleanup, render } from '@testing-library/react';
+
+import {
+    AssistantAvatarIcon,
+    CopyIcon,
+    GradientDotIcon,
+    PauseIcon,
+    ReloadIcon,
+    RobotIcon,
+    SendIcon,
+    ShiningIcon,
+} from '../icon';
+
+describe('Test Chat Icon', () => {
+    beforeEach(cleanup);
+
+    it('Match Snapshots', () => {
+        expect(render(<AssistantAvatarIcon />).asFragment()).toMatchSnapshot('AssistantAvatarIcon');
+        expect(render(<ReloadIcon />).asFragment()).toMatchSnapshot('ReloadIcon');
+        expect(render(<PauseIcon />).asFragment()).toMatchSnapshot('PauseIcon');
+        expect(render(<RobotIcon />).asFragment()).toMatchSnapshot('RobotIcon');
+        expect(render(<SendIcon />).asFragment()).toMatchSnapshot('SendIcon');
+        expect(render(<SendIcon gradient />).asFragment()).toMatchSnapshot(
+            'SendIcon with gradient'
+        );
+        expect(render(<CopyIcon />).asFragment()).toMatchSnapshot('CopyIcon');
+        expect(render(<GradientDotIcon />).asFragment()).toMatchSnapshot('GradientDotIcon');
+        expect(render(<ShiningIcon />).asFragment()).toMatchSnapshot('ShiningIcon');
+    });
+});
diff --git a/src/chat/__tests__/input.test.tsx b/src/chat/__tests__/input.test.tsx
@@ -0,0 +1,59 @@
+import React from 'react';
+import { act, cleanup, fireEvent, render } from '@testing-library/react';
+import { input } from 'ant-design-testing';
+
+import Input from '../input';
+
+describe('Test Chat Input', () => {
+    beforeAll(() => {
+        window.ResizeObserver = jest.fn().mockImplementation(() => ({
+            disconnect: jest.fn(),
+            observe: jest.fn(),
+            unobserve: jest.fn(),
+        }));
+    });
+
+    beforeEach(cleanup);
+    it('Match snapshot', () => {
+        expect(render(<Input />).asFragment()).toMatchSnapshot();
+    });
+
+    it('Should call onChange', () => {
+        const onChange = jest.fn();
+        const { container } = render(<Input onChange={onChange} />);
+        act(() => {
+            input.textarea.fireChange(container, 'test');
+        });
+        expect(onChange).toBeCalledWith('test');
+    });
+
+    it('Should call specify function', () => {
+        const onPressShiftEnter = jest.fn();
+        const onChange = jest.fn();
+        const onPressEnter = jest.fn();
+        const { container } = render(
+            <Input
+                value="test"
+                onPressShiftEnter={onPressShiftEnter}
+                onChange={onChange}
+                onPressEnter={onPressEnter}
+            />
+        );
+        // Simulate press shift + enter
+        // FIXME: ant-design-testing 不支持触发 shift 的 onPressEnter 事件
+        const ele = container.querySelector<HTMLTextAreaElement>('textarea')!;
+        fireEvent.keyDown(ele, { keyCode: 13, shiftKey: true });
+
+        expect(onPressShiftEnter).toBeCalled();
+        expect(onChange).lastCalledWith('test\n');
+        expect(onPressEnter).not.toBeCalled();
+
+        onChange.mockClear();
+        onPressShiftEnter.mockClear();
+        // Simulate press enter
+        input.textarea.firePressEnter(container);
+        expect(onPressShiftEnter).not.toBeCalled();
+        expect(onChange).not.toBeCalled();
+        expect(onPressEnter).toBeCalledTimes(1);
+    });
+});
diff --git a/src/chat/__tests__/loading.test.tsx b/src/chat/__tests__/loading.test.tsx
@@ -0,0 +1,11 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Loading from '../loading';
+
+describe('Test Chat Loading', () => {
+    it('Match Snapshots', () => {
+        expect(render(<Loading loading>test</Loading>)).toMatchSnapshot('loading');
+        expect(render(<Loading loading={false}>test</Loading>)).toMatchSnapshot('not loading');
+    });
+});
diff --git a/tests/setupTests.js b/tests/setupTests.js
@@ -1,4 +1,7 @@
 const { TextDecoder, TextEncoder } = require('node:util');
+const ResizeObserver = require('resize-observer-polyfill');
+
+global.ResizeObserver = ResizeObserver;
 
 Object.defineProperty(window, 'matchMedia', {
     writable: true,
