import { fireEvent, render } from '@testing-library/react';
import { describe, expect, it } from 'vitest';
import Alert, { AlertType } from '.';

describe('test Alert component', function () {
  it('renders without crashing', function () {
    const wrapper = render(<Alert title='这是标题'></Alert>);
    const element = wrapper.getByTestId('alert-default');
    expect(element).toBeInTheDocument();
    expect(element).toHaveTextContent('这是标题');
  })

  it('renders default alert', function () {
    const wrapper = render(<Alert></Alert>);
    const element = wrapper.getByTestId(`alert-${AlertType.Default}`);
    expect(element).toHaveClass('alert alert-default');
  })

  it('renders success alert', function () {
    const wrapper = render(<Alert alertType={AlertType.Success}></Alert>);
    const element = wrapper.getByTestId(`alert-${AlertType.Success}`);
    expect(element).toHaveClass('alert alert-success');
  })

  it('renders warning alert', function () {
    const wrapper = render(<Alert alertType={AlertType.Warning}></Alert>);
    const element = wrapper.getByTestId(`alert-${AlertType.Warning}`);
    expect(element).toHaveClass('alert alert-warning');
  })

  it('renders danger alert', function () {
    const wrapper = render(<Alert alertType={AlertType.Danger}></Alert>);
    const element = wrapper.getByTestId(`alert-${AlertType.Danger}`);
    expect(element).toHaveClass('alert alert-danger');
    // 测试一下关闭按钮
    const closeEl = wrapper.queryByText('关闭') as HTMLElement;
    expect(closeEl).toBeInTheDocument();
    fireEvent.click(closeEl);
    expect(element).not.toBeInTheDocument();
  })
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41