-
-
- {#if steps >= 2}
-
- {#each Array(steps).keys() as currentStep (currentStep)}
-
= 2}
+
+ {#if Array.isArray(steps)}
+ {#each steps as currentStep, idx (currentStep)}
+ {@const id = `step-${randomUUID()}`}
+ {currentStep.label}
{/each}
-
- {/if}
-
+ {:else}
+ {#each Array(steps).keys() as idx (idx)}
+
{showStepNumbers ? idx + 1 : ""}
+ {/each}
+ {/if}
+
+{/if}
diff --git a/web-wallet/src/lib/dusk/components/Wizard/WizardStep.svelte b/web-wallet/src/lib/dusk/components/Wizard/WizardStep.svelte
index 444fbaf5e9..1183692daa 100644
--- a/web-wallet/src/lib/dusk/components/Wizard/WizardStep.svelte
+++ b/web-wallet/src/lib/dusk/components/Wizard/WizardStep.svelte
@@ -90,7 +90,7 @@
{#if step === currentStep}
{#if showStepper}
-
+
{/if}
diff --git a/web-wallet/src/lib/dusk/components/__tests__/Stepper.spec.js b/web-wallet/src/lib/dusk/components/__tests__/Stepper.spec.js
index 9f531ae969..4630d1063d 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/Stepper.spec.js
+++ b/web-wallet/src/lib/dusk/components/__tests__/Stepper.spec.js
@@ -1,39 +1,91 @@
-import { afterEach, describe, expect, it } from "vitest";
+import { afterAll, afterEach, describe, expect, it, vi } from "vitest";
import { cleanup, render } from "@testing-library/svelte";
+import { mdiCheckDecagramOutline } from "@mdi/js";
import { Stepper } from "..";
+vi.mock("$lib/dusk/string", async (importOriginal) => {
+ /** @type {typeof import("$lib/dusk/string")} */
+ const original = await importOriginal();
+
+ return {
+ ...original,
+ randomUUID: () => "some-generated-id",
+ };
+});
+
describe("Stepper", () => {
+ const baseProps = {
+ activeStep: 2,
+ steps: [
+ { label: "foo" },
+ { label: "bar" },
+ { label: "baz" },
+ { label: "qux" },
+ { iconPath: mdiCheckDecagramOutline, label: "quux" },
+ ],
+ };
+ const baseOptions = {
+ props: baseProps,
+ target: document.body,
+ };
+
afterEach(cleanup);
- it("renders the Stepper component with two steps", () => {
- const { container } = render(Stepper, {
- props: { activeStep: 0, steps: 2 },
- });
+ afterAll(() => {
+ vi.doUnmock("$lib/dusk/string");
+ });
+
+ it("should render the `Stepper` component accepting an array of `StepperStep` objects as steps", async () => {
+ const { container, rerender } = render(Stepper, baseOptions);
+
+ expect(container.firstChild).toMatchSnapshot();
+
+ await rerender({ ...baseProps, activeStep: 3 });
expect(container.firstChild).toMatchSnapshot();
});
- it("renders the Stepper component with a completed step", () => {
- const { container } = render(Stepper, {
- props: { activeStep: 1, steps: 2 },
- });
+ it("should render the `Stepper` component accepting a number as the amount of steps", async () => {
+ const props = { ...baseProps, steps: 5 };
+ const { container, rerender } = render(Stepper, { ...baseOptions, props });
+
+ expect(container.firstChild).toMatchSnapshot();
+
+ await rerender({ ...baseProps, activeStep: 3 });
+
+ expect(container.firstChild).toMatchSnapshot();
+ });
+
+ it("should pass additional class names and attributes to the rendered element", () => {
+ const props = {
+ ...baseProps,
+ className: "foo bar",
+ id: "some-id",
+ };
+ const { container } = render(Stepper, { ...baseOptions, props });
expect(container.firstChild).toMatchSnapshot();
});
- it("renders the Stepper component with five steps", () => {
- const { container } = render(Stepper, {
- props: { activeStep: 0, steps: 5 },
- });
+ it("should add the proper class name for the desired variant", () => {
+ const props = {
+ ...baseProps,
+
+ /** @type {StepperVariant} */
+ variant: "secondary",
+ };
+ const { container } = render(Stepper, { ...baseOptions, props });
expect(container.firstChild).toMatchSnapshot();
});
- it("renders the Stepper component with five steps, with the third one being active, and the first two – completed", () => {
- const { container } = render(Stepper, {
- props: { activeStep: 3, steps: 5 },
- });
+ it("should allow to hide the step numbers", () => {
+ const props = {
+ ...baseProps,
+ showStepNumbers: false,
+ };
+ const { container } = render(Stepper, { ...baseOptions, props });
expect(container.firstChild).toMatchSnapshot();
});
diff --git a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Stepper.spec.js.snap b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Stepper.spec.js.snap
index aeb0ef98a3..e0ac9f7bad 100644
--- a/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Stepper.spec.js.snap
+++ b/web-wallet/src/lib/dusk/components/__tests__/__snapshots__/Stepper.spec.js.snap
@@ -1,155 +1,541 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`Stepper > renders the Stepper component with a completed step 1`] = `
+exports[`Stepper > should add the proper class name for the desired variant 1`] = `
-
-
-
+
+ 1
+
+
+
+ foo
+
+
+ 2
+
+
+
+ bar
+
+
+ 3
+
+
+
+ baz
+
+
+ 4
+
+
+
+ qux
+
+
+
+
+
+
+
+
+ quux
+
+
+
+`;
+
+exports[`Stepper > should allow to hide the step numbers 1`] = `
+
+
+
+
+
+
+ foo
+
+
+
+
+
+
+ bar
+
+
+
+
+
+
+ baz
+
+
+
+
+
+
+ qux
+
+
+
+
+
+
+
+
+ quux
+
+
+
+`;
+
+exports[`Stepper > should pass additional class names and attributes to the rendered element 1`] = `
+
+
+ 1
+
+
+
+ foo
+
+
+ 2
+
+
+
+ bar
+
+
+ 3
+
+
+
+ baz
+
+
+ 4
+
+
+
+ qux
+
+
+
+
+
+
+
+
+ quux
+
+
`;
-exports[`Stepper > renders the Stepper component with five steps 1`] = `
+exports[`Stepper > should render the \`Stepper\` component accepting a number as the amount of steps 1`] = `
-
-
-
+
+ 1
+
+
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
`;
-exports[`Stepper > renders the Stepper component with five steps, with the third one being active, and the first two – completed 1`] = `
+exports[`Stepper > should render the \`Stepper\` component accepting a number as the amount of steps 2`] = `
-
-
-
+
+ 1
+
+
+
+ foo
+
+
+ 2
+
+
+
+ bar
+
+
+ 3
+
+
+
+ baz
+
+
+ 4
+
+
+
+ qux
+
+
+
+
+
+
+
+
+ quux
+
+
`;
-exports[`Stepper > renders the Stepper component with two steps 1`] = `
+exports[`Stepper > should render the \`Stepper\` component accepting an array of \`StepperStep\` objects as steps 1`] = `
-
-
-
+
+ 1
+
+
+
+ foo
+
+
+ 2
+
+
+
+ bar
+
+
+ 3
+
+
+
+ baz
+
+
+ 4
+
+
+
+ qux
+
+
+
+
+
+
+
+
+ quux
+
+
+
+`;
+
+exports[`Stepper > should render the \`Stepper\` component accepting an array of \`StepperStep\` objects as steps 2`] = `
+
+
+ 1
+
+
+
+ foo
+
+
+ 2
+
+
+
+ bar
+
+
+ 3
+
+
+
+ baz
+
+
+ 4
+
+
+
+ qux
+
+
+
+
+
+
+
+
+ quux
+
+
`;
diff --git a/web-wallet/src/lib/dusk/components/dusk.components.d.ts b/web-wallet/src/lib/dusk/components/dusk.components.d.ts
index 6ef80fece2..0412d875e6 100644
--- a/web-wallet/src/lib/dusk/components/dusk.components.d.ts
+++ b/web-wallet/src/lib/dusk/components/dusk.components.d.ts
@@ -34,6 +34,13 @@ type SelectOption = {
value: string;
};
+type StepperStep = {
+ iconPath?: string;
+ label: string;
+};
+
+type StepperVariant = "primary" | "secondary";
+
type SuspenseErrorVariant = "alert" | "details";
type TabItem = {
diff --git a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
index 7a9f01b3f1..95d257c130 100644
--- a/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
+++ b/web-wallet/src/routes/(welcome)/setup/create/__tests__/__snapshots__/page.spec.js.snap
@@ -19,53 +19,43 @@ exports[`Create > correctly renders the Mnemonic Preview page 1`] = `
-
-
-
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
correctly renders the Mnemonic Verification page 1`] = `
-
-
-
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
doesn't let the user proceed if they have entered mismatching
-
-
-
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
ensures that the Undo button on the Mnemonic Validate step wor
-
-
-
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
ensures the All Done step renders as expected 1`] = `
-
-
-
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
ensures the Password step renders as expected 1`] = `
-
-
-
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
ensures the Password step renders as expected 2`] = `
-
-
-
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
ensures the Swap To Native Dusk step renders as expected 1`] =
-
-
-
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
The ERC20 token swap functionality is currently disabled and will be provided
@@ -2227,53 +2147,43 @@ exports[`Create > lets the user proceed if they have entered a matching Mnemonic
-
-
-
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
should render the \`Securely store your seed phrase!\` agreeme
-
-
-
+ 2
+
+
+ 3
+
+
+ 4
+
+
+ 5
+
+
+ 6
+
+
+
should render the Mnemonic Authenticate step after accepting
+
+
-
-