82 lines
3.1 KiB
JavaScript
82 lines
3.1 KiB
JavaScript
// @vitest-environment jsdom
|
|
import { describe, expect, it } from "vitest";
|
|
import SelfServeTasksStep from "@/components/displays/selfServe/SelfServeTasksStep.vue";
|
|
import { mountWithApp } from "./helpers/mountWithApp.js";
|
|
|
|
const mountTasksStep = (props = {}) =>
|
|
mountWithApp(SelfServeTasksStep, {
|
|
props: {
|
|
isLoading: false,
|
|
dynamicImageUrl: "https://cdn.example.test/dynamic.png",
|
|
activeTasks: [],
|
|
completedTasks: {},
|
|
allVisibleQuestionsAnswered: false,
|
|
editAnswers: false,
|
|
...props,
|
|
},
|
|
global: {
|
|
stubs: {
|
|
BIcon: true,
|
|
SelfServeTaskList: {
|
|
template: '<div data-testid="self-serve-task-list-stub" />',
|
|
},
|
|
},
|
|
},
|
|
});
|
|
|
|
describe("SelfServeTasksStep", () => {
|
|
it("preloads the dynamic image without reserving frame space until it loads", async () => {
|
|
const wrapper = mountTasksStep();
|
|
|
|
expect(wrapper.find('[data-testid="self-serve-dynamic-image-frame"]').exists()).toBe(false);
|
|
expect(wrapper.get('[data-testid="self-serve-dynamic-image-preload"]').attributes("src")).toBe(
|
|
"https://cdn.example.test/dynamic.png"
|
|
);
|
|
|
|
await wrapper.get('[data-testid="self-serve-dynamic-image-preload"]').trigger("load");
|
|
|
|
expect(wrapper.get('[data-testid="self-serve-dynamic-image-frame"]').exists()).toBe(true);
|
|
expect(wrapper.find('[data-testid="self-serve-dynamic-image-preload"]').exists()).toBe(false);
|
|
expect(wrapper.get('[data-testid="self-serve-dynamic-image"]').attributes("src")).toBe(
|
|
"https://cdn.example.test/dynamic.png"
|
|
);
|
|
});
|
|
|
|
it("preloads again without showing a frame when the dynamic image URL changes", async () => {
|
|
const wrapper = mountTasksStep();
|
|
|
|
await wrapper.get('[data-testid="self-serve-dynamic-image-preload"]').trigger("load");
|
|
expect(wrapper.get('[data-testid="self-serve-dynamic-image"]').attributes("src")).toBe(
|
|
"https://cdn.example.test/dynamic.png"
|
|
);
|
|
|
|
await wrapper.setProps({
|
|
dynamicImageUrl: "https://cdn.example.test/dynamic-step-2.png",
|
|
});
|
|
|
|
expect(wrapper.find('[data-testid="self-serve-dynamic-image-frame"]').exists()).toBe(false);
|
|
expect(wrapper.get('[data-testid="self-serve-dynamic-image-preload"]').attributes("src")).toBe(
|
|
"https://cdn.example.test/dynamic-step-2.png"
|
|
);
|
|
});
|
|
|
|
it("clears loading state and emits clear-dynamic-image on image errors", async () => {
|
|
const wrapper = mountTasksStep();
|
|
|
|
await wrapper.get('[data-testid="self-serve-dynamic-image-preload"]').trigger("error");
|
|
|
|
expect(wrapper.find('[data-testid="self-serve-dynamic-image-frame"]').exists()).toBe(false);
|
|
expect(wrapper.emitted("clear-dynamic-image")).toEqual([[]]);
|
|
});
|
|
|
|
it("does not render dynamic image elements when there is no dynamic image URL", () => {
|
|
const wrapper = mountTasksStep({
|
|
dynamicImageUrl: null,
|
|
});
|
|
|
|
expect(wrapper.find('[data-testid="self-serve-dynamic-image-preload"]').exists()).toBe(false);
|
|
expect(wrapper.find('[data-testid="self-serve-dynamic-image-frame"]').exists()).toBe(false);
|
|
expect(wrapper.find('[data-testid="self-serve-dynamic-image"]').exists()).toBe(false);
|
|
});
|
|
});
|