From f459f8d92029086cb0725e65a3c8f0f892cd12ca Mon Sep 17 00:00:00 2001
From: Andrea Scartabelli <andrea.scartabelli@gmail.com>
Date: Mon, 5 Aug 2024 14:36:40 +0200
Subject: [PATCH] explorer: progress bar tests miss the `ariaLabel` required
 prop

Resolves #2060
---
 .../components/__tests__/ProgressBar.spec.js  | 37 ++++++++++++++-----
 .../__snapshots__/ProgressBar.spec.js.snap    | 24 +++++++++---
 2 files changed, 46 insertions(+), 15 deletions(-)

diff --git a/explorer/src/lib/dusk/components/__tests__/ProgressBar.spec.js b/explorer/src/lib/dusk/components/__tests__/ProgressBar.spec.js
index 82d308db57..2f223988b2 100644
--- a/explorer/src/lib/dusk/components/__tests__/ProgressBar.spec.js
+++ b/explorer/src/lib/dusk/components/__tests__/ProgressBar.spec.js
@@ -4,26 +4,34 @@ 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();
 
@@ -31,4 +39,13 @@ describe("ProgressBar", () => {
 
     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
index 164423c333..f16c850b8a 100644
--- 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"