konnosDashboard
Button.test.tsx86 lines · main
1import { fireEvent, render, screen } from '@testing-library/react'
2import React from 'react'
3import { describe, expect, it } from 'vitest'
4
5import { Button } from './Button'
6
7const SIZES = ['tiny', 'small', 'medium', 'large', 'xlarge'] as const
8const TYPES = [
9 'primary',
10 'default',
11 'secondary',
12 'alternative',
13 'outline',
14 'dashed',
15 'link',
16 'text',
17 'danger',
18 'warning',
19] as const
20
21describe('#Button', () => {
22 it('should render button correctly', () => {
23 const wrapper = render(<Button>Button</Button>)
24
25 expect(wrapper.getByText('Button')).toBeInTheDocument()
26 expect(() => wrapper.unmount()).not.toThrow()
27 })
28
29 it('should render different text', () => {
30 const wrapper = render(<Button>Button</Button>)
31
32 expect(screen.getByText('Button')).toBeInTheDocument()
33
34 wrapper.rerender(<Button>按钮</Button>)
35
36 expect(screen.getByText('按钮')).toBeInTheDocument()
37 })
38
39 it('should ignore events when disabled', () => {
40 const WrapperButton = () => {
41 const [state, setState] = React.useState('state1')
42 return (
43 <Button disabled onClick={() => setState('state2')}>
44 {state}
45 </Button>
46 )
47 }
48
49 render(<WrapperButton />)
50 expect(screen.getByText('state1')).toBeInTheDocument()
51
52 fireEvent.click(screen.getByText('state1'))
53
54 expect(screen.getByText('state1')).toBeInTheDocument()
55 expect(screen.queryByText('state2')).not.toBeInTheDocument()
56 })
57
58 it('should ignore events when loading', () => {
59 const WrapperButton = () => {
60 const [state, setState] = React.useState('state1')
61 return (
62 <Button loading onClick={() => setState('state2')}>
63 {state}
64 </Button>
65 )
66 }
67 render(<WrapperButton />)
68 fireEvent.click(screen.getByText('state1'))
69 expect(screen.queryByText('state2')).not.toBeInTheDocument()
70 })
71
72 it('should have "w-full" class when block is true', async () => {
73 render(<Button block>Button Block</Button>)
74 expect(screen.queryByRole('button')).toHaveClass('w-full')
75 })
76
77 it('should forward ref', () => {
78 const ref: React.MutableRefObject<HTMLButtonElement | null> = {
79 current: null,
80 }
81
82 render(<Button ref={ref}>Button</Button>)
83
84 expect(ref.current).toBeInstanceOf(HTMLButtonElement)
85 })
86})