/
index.tsx
79 lines (63 loc) · 2.39 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
/**
* External dependencies
*/
import { render, screen } from '@testing-library/react';
/**
* Internal dependencies
*/
import { ProgressBar } from '..';
import { INDETERMINATE_TRACK_WIDTH } from '../styles';
describe( 'ProgressBar', () => {
it( 'should render an indeterminate semantic progress bar element', () => {
render( <ProgressBar /> );
const progressBar = screen.getByRole( 'progressbar' );
expect( progressBar ).toBeInTheDocument();
expect( progressBar ).not.toBeVisible();
expect( progressBar ).not.toHaveValue();
} );
it( 'should render a determinate semantic progress bar element', () => {
render( <ProgressBar value={ 55 } /> );
const progressBar = screen.getByRole( 'progressbar' );
expect( progressBar ).toBeInTheDocument();
expect( progressBar ).not.toBeVisible();
expect( progressBar ).toHaveValue( 55 );
} );
it( 'should use `INDETERMINATE_TRACK_WIDTH`% as track width for indeterminate progress bar', () => {
const { container } = render( <ProgressBar /> );
/**
* We're intentionally not using an accessible selector, because
* the track is an intentionally non-interactive presentation element.
*/
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const indicator = container.firstChild?.firstChild;
expect( indicator ).toHaveStyle( {
width: `${ INDETERMINATE_TRACK_WIDTH }%`,
} );
} );
it( 'should use `value`% as width for determinate progress bar', () => {
const { container } = render( <ProgressBar value={ 55 } /> );
/**
* We're intentionally not using an accessible selector, because
* the track is an intentionally non-interactive presentation element.
*/
// eslint-disable-next-line testing-library/no-container, testing-library/no-node-access
const indicator = container.firstChild?.firstChild;
expect( indicator ).toHaveStyle( {
width: '55%',
} );
} );
it( 'should pass any additional props down to the underlying `progress` element', () => {
const id = 'foo-bar-123';
const ariaLabel = 'in progress...';
const style = { opacity: 1 };
render(
<ProgressBar id={ id } aria-label={ ariaLabel } style={ style } />
);
expect( screen.getByRole( 'progressbar' ) ).toHaveAttribute( 'id', id );
expect( screen.getByRole( 'progressbar' ) ).toHaveAttribute(
'aria-label',
ariaLabel
);
expect( screen.getByRole( 'progressbar' ) ).toHaveStyle( style );
} );
} );