From 9128c224c65f8f2a172b22a443ccb4573c7acd90 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 29 Sep 2023 15:49:14 +0200
Subject: 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
---
 .../loaders/progress-bar/progress-bar.test.tsx     | 45 ++++++++++++++++++++++
 1 file changed, 45 insertions(+)
 create mode 100644 src/components/atoms/loaders/progress-bar/progress-bar.test.tsx

(limited to 'src/components/atoms/loaders/progress-bar/progress-bar.test.tsx')

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');
+  });
+});
-- 
cgit v1.2.3