108 lines
3.7 KiB
JavaScript
108 lines
3.7 KiB
JavaScript
// @vitest-environment jsdom
|
|
import { describe, expect, it } from "vitest";
|
|
import SelfServeCompletedStep from "@/components/displays/selfServe/SelfServeCompletedStep.vue";
|
|
import SelfServeGuidedInstructions from "@/components/displays/selfServe/SelfServeGuidedInstructions.vue";
|
|
import { guidedWashFlowSteps } from "@/constants/guidedWashFlowSteps";
|
|
import { mountWithApp } from "./helpers/mountWithApp.js";
|
|
|
|
const messages = {
|
|
en: {
|
|
common: {
|
|
previous: "Previous",
|
|
next: "Next",
|
|
warning: "Warning",
|
|
},
|
|
self_wash: {
|
|
follow_steps: "Follow the steps",
|
|
wash_completed: "Wash completed",
|
|
wash_completed_message: "Your wash is complete.",
|
|
wash_completed_contact: "Contact support if needed.",
|
|
total_time: "Total time {minutes}:{seconds}",
|
|
},
|
|
},
|
|
};
|
|
|
|
describe("SelfServe guided/completed components", () => {
|
|
it("moves between guided steps with bounded navigation", async () => {
|
|
const wrapper = mountWithApp(SelfServeGuidedInstructions, {
|
|
props: {
|
|
currentStep: 0,
|
|
steps: [
|
|
{ title: "Foam", content: "Apply foam", brushes: [] },
|
|
{ title: "Rinse", content: "Rinse off", brushes: [] },
|
|
],
|
|
},
|
|
messages,
|
|
});
|
|
|
|
expect(wrapper.get('[data-testid="self-serve-guided-prev"]').attributes("disabled")).toBeDefined();
|
|
expect(wrapper.get('[data-testid="self-serve-guided-step-0"]').text()).toContain("Apply foam");
|
|
expect(wrapper.text()).not.toContain("Rinse off");
|
|
|
|
await wrapper.get('[data-testid="self-serve-guided-next"]').trigger("click");
|
|
|
|
expect(wrapper.emitted("update:currentStep")).toEqual([[1]]);
|
|
});
|
|
|
|
it("can hide guided step actions when the parent owns bottom controls", () => {
|
|
const wrapper = mountWithApp(SelfServeGuidedInstructions, {
|
|
props: {
|
|
currentStep: 0,
|
|
showActions: false,
|
|
steps: [
|
|
{ title: "Foam", content: "Apply foam", brushes: [] },
|
|
{ title: "Rinse", content: "Rinse off", brushes: [] },
|
|
],
|
|
},
|
|
messages,
|
|
});
|
|
|
|
expect(wrapper.find('[data-testid="self-serve-guided-prev"]').exists()).toBe(false);
|
|
expect(wrapper.find('[data-testid="self-serve-guided-next"]').exists()).toBe(false);
|
|
expect(wrapper.get('[data-testid="self-serve-guided-step-0"]').text()).toContain("Apply foam");
|
|
});
|
|
|
|
it("keeps the guided step counter in the active step label row", () => {
|
|
const wrapper = mountWithApp(SelfServeGuidedInstructions, {
|
|
props: {
|
|
currentStep: 5,
|
|
steps: guidedWashFlowSteps,
|
|
},
|
|
messages,
|
|
});
|
|
|
|
const label = wrapper.get('[data-testid="self-serve-guided-step-label"]');
|
|
const title = wrapper.get('[data-testid="self-serve-guided-step-title"]');
|
|
const counter = wrapper.get('[data-testid="self-serve-guided-counter"]');
|
|
|
|
expect(title.text()).toBe("6. Spot Free-skylning");
|
|
expect(title.classes()).toContain("guided-instructions__step-title");
|
|
expect(counter.text()).toBe("6/6");
|
|
expect(label.element.contains(counter.element)).toBe(true);
|
|
expect(wrapper.get(".guided-instructions__header").text()).not.toContain("6/6");
|
|
});
|
|
|
|
it("formats the completed duration through the completion message", () => {
|
|
const wrapper = mountWithApp(SelfServeCompletedStep, {
|
|
props: {
|
|
completedDurationMs: 65_000,
|
|
},
|
|
messages,
|
|
});
|
|
|
|
expect(wrapper.text()).toContain("Total time 1:5");
|
|
});
|
|
|
|
it("left-aligns the completed wash copy", () => {
|
|
const wrapper = mountWithApp(SelfServeCompletedStep, {
|
|
props: {
|
|
completedDurationMs: null,
|
|
},
|
|
messages,
|
|
});
|
|
|
|
expect(wrapper.get('[data-testid="self-serve-completed-step"]').classes()).toContain("has-text-left");
|
|
expect(wrapper.find(".has-text-centered").exists()).toBe(false);
|
|
});
|
|
});
|