Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

test(Alert): style tpye for test and add test classNamestyle #3284

Open
wants to merge 3 commits into
base: develop
Choose a base branch
from
Open
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 29 additions & 11 deletions src/alert/__tests__/alert.test.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import React from 'react';
import { render, fireEvent, waitFor, mockTimeout, act, vi } from '@test/utils';
import { render, fireEvent, waitFor, mockTimeout, act, vi } from '../../../test/utils';
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

#3285 不用改了

import Alert from '../Alert';

describe('Alert 组件测试', () => {
Expand Down 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');
});
});
Loading