-
Notifications
You must be signed in to change notification settings - Fork 4.1k
/
index.tsx
115 lines (91 loc) · 3.04 KB
/
index.tsx
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
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
/**
* External dependencies
*/
import { render, screen } from '@testing-library/react';
import userEvent from '@testing-library/user-event';
/**
* WordPress dependencies
*/
import { useState } from '@wordpress/element';
/**
* Internal dependencies
*/
import BaseCheckboxControl from '..';
import type { CheckboxControlProps } from '../types';
const noop = () => {};
const getInput = () => screen.getByRole( 'checkbox' ) as HTMLInputElement;
const CheckboxControl = ( props: Omit< CheckboxControlProps, 'onChange' > ) => {
return <BaseCheckboxControl onChange={ noop } { ...props } />;
};
const ControlledCheckboxControl = ( { onChange }: CheckboxControlProps ) => {
const [ isChecked, setChecked ] = useState( false );
return (
<BaseCheckboxControl
checked={ isChecked }
onChange={ ( value ) => {
setChecked( value );
onChange( value );
} }
/>
);
};
describe( 'CheckboxControl', () => {
describe( 'Basic rendering', () => {
it( 'should render', () => {
render( <CheckboxControl /> );
expect( getInput() ).not.toBeNull();
} );
it( 'should render an unchecked `checkbox` by default', () => {
render( <CheckboxControl /> );
expect( getInput() ).toHaveProperty( 'checked', false );
} );
it( 'should render an checked `checkbox` when `checked={ true }`', () => {
render( <CheckboxControl checked /> );
expect( getInput() ).toHaveProperty( 'checked', true );
} );
it( 'should render label', () => {
render( <CheckboxControl label="Hello" /> );
const label = screen.getByText( 'Hello' );
expect( label ).toBeInTheDocument();
} );
it( 'should not render label element if label is set to false', () => {
render( <CheckboxControl label={ false } /> );
const label = screen.queryByRole( 'label' );
expect( label ).not.toBeInTheDocument();
} );
it( 'should render a checkbox in an indeterminate state', () => {
render( <CheckboxControl indeterminate /> );
expect( getInput() ).toHaveProperty( 'indeterminate', true );
} );
it( 'should render the indeterminate icon when in the indeterminate state', () => {
const { container: containerDefault } = render(
<CheckboxControl />
);
const { container: containerIndeterminate } = render(
<CheckboxControl indeterminate />
);
// Expect the diff snapshot to be mostly about the indeterminate icon
expect( containerDefault ).toMatchDiffSnapshot(
containerIndeterminate
);
} );
} );
describe( 'Value', () => {
it( 'should flip the checked property when clicked', async () => {
const user = userEvent.setup();
let state = false;
const setState = jest.fn(
( nextState: boolean ) => ( state = nextState )
);
render( <ControlledCheckboxControl onChange={ setState } /> );
const input = getInput();
await user.click( input );
expect( input ).toHaveProperty( 'checked', true );
expect( state ).toBe( true );
await user.click( input );
expect( input ).toHaveProperty( 'checked', false );
expect( state ).toBe( false );
expect( setState ).toHaveBeenCalledTimes( 2 );
} );
} );
} );