Files
pleno-vue/tests/unit/self-serve-questions-step.spec.js
T

75 lines
2.7 KiB
JavaScript

// @vitest-environment jsdom
import { describe, expect, it } from "vitest";
import SelfServeQuestionsStep from "@/components/displays/selfServe/SelfServeQuestionsStep.vue";
import { mountWithApp } from "./helpers/mountWithApp.js";
describe("SelfServeQuestionsStep", () => {
const baseProps = {
isLoading: false,
visibleQuestions: [{ id: 11, question: "Is the trailer closed?" }],
answers: { 11: true },
editAnswers: true,
};
it("renders question cards, emits answers, and does not expose debug controls", async () => {
const wrapper = mountWithApp(SelfServeQuestionsStep, {
props: baseProps,
});
expect(wrapper.find('[data-testid="self-serve-toggle-debug"]').exists()).toBe(false);
expect(wrapper.find('[data-testid="self-serve-debug-panel"]').exists()).toBe(false);
await wrapper.get('[data-testid="self-serve-toggle-edit"]').trigger("click");
await wrapper.get('[data-testid="self-serve-question-11-no"]').trigger("click");
expect(wrapper.emitted("toggle-edit")).toHaveLength(1);
expect(wrapper.emitted("answer-question")).toEqual([[11, false]]);
});
it("shows the full loading state only when no questions are available yet", () => {
const wrapper = mountWithApp(SelfServeQuestionsStep, {
props: {
...baseProps,
isLoading: true,
visibleQuestions: [],
},
});
expect(wrapper.text()).toContain("self_wash.loading_data");
expect(wrapper.find('[data-testid="self-serve-question-cards"]').exists()).toBe(false);
});
it("keeps the selected no answer as a dark danger button", () => {
const wrapper = mountWithApp(SelfServeQuestionsStep, {
props: {
...baseProps,
answers: { 11: false },
},
});
const noButton = wrapper.get('[data-testid="self-serve-question-11-no"]');
expect(noButton.classes()).toContain("is-danger");
expect(noButton.classes()).not.toContain("is-light");
});
it("keeps the question list visible and answer buttons enabled while loading in the background", async () => {
const wrapper = mountWithApp(SelfServeQuestionsStep, {
props: {
...baseProps,
isLoading: true,
},
});
expect(wrapper.find('[data-testid="self-serve-questions-inline-loading"]').exists()).toBe(true);
expect(wrapper.find('[data-testid="self-serve-question-cards"]').exists()).toBe(true);
const yesButton = wrapper.get('[data-testid="self-serve-question-11-yes"]');
const noButton = wrapper.get('[data-testid="self-serve-question-11-no"]');
expect(yesButton.attributes("disabled")).toBeUndefined();
expect(noButton.attributes("disabled")).toBeUndefined();
await noButton.trigger("click");
expect(wrapper.emitted("answer-question")).toEqual([[11, false]]);
});
});