Skip to content

Commit

Permalink
test(Alert): add unit tests for className and style (#3284)
Browse files Browse the repository at this point in the history
* test(Alert): type optimization for test and  add test `className`、`style`

* chore:  恢复之前的 `@test/utils` 引用
  • Loading branch information
RSS1102 authored Dec 18, 2024
1 parent efb5b0e commit 05533e4
Showing 1 changed file with 28 additions and 10 deletions.
38 changes: 28 additions & 10 deletions src/alert/__tests__/alert.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -30,9 +30,13 @@ describe('Alert 组件测试', () => {
expect(container.querySelector('.t-alert--error')).not.toBeNull();
expect(container.querySelector('.t-alert--error')).toBeInTheDocument();

act(() => {
fireEvent.click(queryByTestId(testId));
});
const element = queryByTestId(testId);
if (element) {
// 在 react 18.3.1之后 可以在 react 中导出 act,且在18.3.1 之后应该在react中使用 act
act(() => fireEvent.click(element));
} else {
throw new Error(`Element with testId ${testId} not found`);
}
expect(container.querySelector('.t-alert--closing')).toBeInTheDocument();
expect(onClose).toHaveBeenCalledTimes(1);

Expand Down Expand Up @@ -116,21 +120,35 @@ describe('Alert 组件测试', () => {
expect(element).toBeNull();

const btn = await waitFor(() => queryByText('展开更多'));
act(() => {
fireEvent.click(btn);
});
if (btn) {
act(() => fireEvent.click(btn));
} else {
throw new Error(`Button with text '展开更多' not found`);
}

expect(queryByText('收起')).not.toBeNull();
expect(queryByText('收起')).toBeInTheDocument();
const element1 = await waitFor(() => queryByTestId(testId));
expect(element1).not.toBeNull();

const btn1 = await waitFor(() => queryByText('收起'));
act(() => {
fireEvent.click(btn1);
});

if (btn1) {
act(() => fireEvent.click(btn1));
} else {
throw new Error(`Button with text '收起' not found`);
}
const element3 = await waitFor(() => queryByTestId(testId));
expect(element3).toBeNull();
});

test('className', () => {
const { container } = render(<Alert theme="success" message="这是一条成功的消息提示" className="custom-class" />);
expect(container.querySelector('.custom-class')).not.toBeNull();
});

test('style', () => {
const { container } = render(<Alert theme="success" message="这是一条成功的消息提示" style={{ color: 'red' }} />);
const element = container.querySelector('.t-alert') as HTMLElement;
expect(element?.style.color).toBe('red');
});
});

0 comments on commit 05533e4

Please sign in to comment.