Merge pull request #2076 from dusk-network/feature-2060

explorer: progress bar tests miss the `ariaLabel` required prop
dusk-network · Aug 7, 2024 · 5ec59a2 · 5ec59a2
2 parents f8ba62b + f459f8d
commit 5ec59a2
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 15 deletions.
diff --git a/explorer/src/lib/dusk/components/__tests__/ProgressBar.spec.js b/explorer/src/lib/dusk/components/__tests__/ProgressBar.spec.js
@@ -4,31 +4,48 @@ import { cleanup, render } from "@testing-library/svelte";
 import { ProgressBar } from "..";
 
 describe("ProgressBar", () => {
+  const baseProps = {
+    ariaLabel: "Loading",
+    currentPercentage: 0,
+  };
+  const baseOptions = {
+    props: baseProps,
+    target: document.body,
+  };
+
   afterEach(cleanup);
 
-  it("renders the ProgressBar component with no current percentage set", () => {
-    const { container } = render(ProgressBar);
+  it("renders the `ProgressBar` component with no current percentage set", () => {
+    const { container } = render(ProgressBar, {
+      ...baseOptions,
+      props: { ariaLabel: baseProps.ariaLabel },
+    });
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it("renders the Stepper component with current percentage set as zero", () => {
-    const { container } = render(ProgressBar, {
-      props: { ariaLabel: "Loading", currentPercentage: 0 },
-    });
+  it("renders the `ProgressBar` component with current percentage set as zero", () => {
+    const { container } = render(ProgressBar, baseOptions);
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it("re-renders the Stepper component when the current percentage property changes", async () => {
-    const { container, rerender } = render(ProgressBar, {
-      props: { ariaLabel: "Loading", currentPercentage: 0 },
-    });
+  it("re-renders the `ProgressBar` component when the current percentage property changes", async () => {
+    const { container, rerender } = render(ProgressBar, baseOptions);
 
     expect(container.firstChild).toMatchSnapshot();
 
     await rerender({ currentPercentage: 50 });
 
     expect(container.firstChild).toMatchSnapshot();
   });
+
+  it("should pass additional class names to the rendered element", () => {
+    const { container } = render(ProgressBar, {
+      ...baseOptions,
+      props: { ...baseProps, className: "foo bar" },
+    });
+
+    expect(container.firstChild).toMatchSnapshot();
+  });
 });
diff --git a/explorer/src/lib/dusk/components/__tests__/__snapshots__/ProgressBar.spec.js.snap b/explorer/src/lib/dusk/components/__tests__/__snapshots__/ProgressBar.spec.js.snap
@@ -1,6 +1,6 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
-exports[`ProgressBar > re-renders the Stepper component when the current percentage property changes 1`] = `
+exports[`ProgressBar > re-renders the \`ProgressBar\` component when the current percentage property changes 1`] = `
 <div
   aria-label="Loading"
   class="dusk-progress-bar"
@@ -13,7 +13,7 @@ exports[`ProgressBar > re-renders the Stepper component when the current percent
 </div>
 `;
 
-exports[`ProgressBar > re-renders the Stepper component when the current percentage property changes 2`] = `
+exports[`ProgressBar > re-renders the \`ProgressBar\` component when the current percentage property changes 2`] = `
 <div
   aria-label="Loading"
   class="dusk-progress-bar"
@@ -26,22 +26,36 @@ exports[`ProgressBar > re-renders the Stepper component when the current percent
 </div>
 `;
 
-exports[`ProgressBar > renders the ProgressBar component with no current percentage set 1`] = `
+exports[`ProgressBar > renders the \`ProgressBar\` component with current percentage set as zero 1`] = `
 <div
+  aria-label="Loading"
   class="dusk-progress-bar"
   role="progressbar"
 >
   <div
-    class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
+    class="dusk-progress-bar__filler"
+    style="width: 0%"
   />
 </div>
 `;
 
-exports[`ProgressBar > renders the Stepper component with current percentage set as zero 1`] = `
+exports[`ProgressBar > renders the \`ProgressBar\` component with no current percentage set 1`] = `
 <div
   aria-label="Loading"
   class="dusk-progress-bar"
   role="progressbar"
+>
+  <div
+    class="dusk-progress-bar__filler dusk-progress-bar__filler--undetermined"
+  />
+</div>
+`;
+
+exports[`ProgressBar > should pass additional class names to the rendered element 1`] = `
+<div
+  aria-label="Loading"
+  class="dusk-progress-bar foo bar"
+  role="progressbar"
 >
   <div
     class="dusk-progress-bar__filler"