refactor(components): rewrite ProgressBar component

* Avoid browser vendors by adding an extra div
* Add a loading state
* Add an option to center the progress bar (no longer the default)
* Remove min since it is always 0

1 files changed, 45 insertions, 0 deletions

diff --git a/src/components/atoms/loaders/progress-bar/progress-bar.test.tsx b/src/components/atoms/loaders/progress-bar/progress-bar.test.tsx
new file mode 100644
index 0000000..1f5d90e
--- /dev/null
+++ b/src/components/atoms/loaders/progress-bar/progress-bar.test.tsx
@@ -0,0 +1,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');
+  });
+});