aboutsummaryrefslogtreecommitdiffstats
path: root/src/components/atoms/loaders/progress-bar/progress-bar.test.tsx
blob: 1f5d90e5a643d79128b46c305be25cd57a05b134 (plain)
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
import { describe, expect, it } from '@jest/globals';
import { render, screen as rtlScreen } from '@testing-library/react';
import { ProgressBar } from './progress-bar';

describe('ProgressBar', () => {
  it('renders a progress bar', () => {
    const max = 50;
    const current = 10;
    const label = `${current} loaded out of a total of ${max}`;

    render(<ProgressBar current={current} label={label} max={max} />);

    expect(
      rtlScreen.getByRole('progressbar', { name: label })
    ).toBeInTheDocument();
  });

  it('can render a progress bar with loading state', () => {
    const max = 50;
    const current = 10;
    const label = `${current} loaded out of a total of ${max}`;

    render(<ProgressBar current={current} isLoading label={label} max={max} />);

    const progressBar = rtlScreen.getByRole('progressbar', { name: label });

    expect(progressBar).not.toHaveValue();
    expect(progressBar.parentElement).toHaveClass('progress--loading');
  });

  it('can render a centered progress bar', () => {
    const max = 50;
    const current = 10;
    const label = `${current} loaded out of a total of ${max}`;

    render(
      <ProgressBar current={current} isCentered label={label} max={max} />
    );

    expect(
      rtlScreen.getByRole('progressbar', { name: label }).parentElement
        ?.parentElement
    ).toHaveClass('wrapper--centered');
  });
});