88 lines
3.2 KiB
JavaScript
88 lines
3.2 KiB
JavaScript
// @vitest-environment jsdom
|
|
|
|
import { afterEach, describe, expect, it } from "vitest";
|
|
import { mount } from "@vue/test-utils";
|
|
import BrandedLoadingScreen from "@/components/global/BrandedLoadingScreen.vue";
|
|
|
|
let wrappers = [];
|
|
|
|
const mountLoader = (options) => {
|
|
const wrapper = mount(BrandedLoadingScreen, options);
|
|
wrappers.push(wrapper);
|
|
return wrapper;
|
|
};
|
|
|
|
describe("BrandedLoadingScreen", () => {
|
|
afterEach(() => {
|
|
wrappers.forEach((wrapper) => wrapper.unmount());
|
|
wrappers = [];
|
|
document.documentElement.classList.remove("tw-loader-scroll-lock");
|
|
document.body.classList.remove("tw-loader-scroll-lock");
|
|
delete document.documentElement.dataset.twLoaderScrollLocks;
|
|
delete window.__TW_LOADER_STARTED_AT__;
|
|
});
|
|
|
|
it("renders the title and subtitle with custom test ids", () => {
|
|
const wrapper = mountLoader({
|
|
props: {
|
|
title: "Omdirigerer...",
|
|
subtitle: "Vi finder den rigtige side for dig",
|
|
testId: "redirect-loading",
|
|
statusTestId: "redirect-loading-status",
|
|
ariaLabel: "Omdirigerer",
|
|
},
|
|
});
|
|
|
|
expect(wrapper.get('[data-testid="redirect-loading"]').exists()).toBe(true);
|
|
expect(wrapper.get('[data-testid="redirect-loading-status"]').text()).toBe("Omdirigerer...");
|
|
expect(wrapper.text()).toContain("Vi finder den rigtige side for dig");
|
|
});
|
|
|
|
it("exposes polite status semantics", () => {
|
|
const wrapper = mountLoader({
|
|
props: {
|
|
title: "Indlæser din session...",
|
|
ariaLabel: "Indlæser session",
|
|
},
|
|
});
|
|
|
|
const root = wrapper.get('[data-testid="branded-loading-screen"]');
|
|
expect(root.attributes("role")).toBe("status");
|
|
expect(root.attributes("aria-live")).toBe("polite");
|
|
expect(root.attributes("aria-label")).toBe("Indlæser session");
|
|
});
|
|
|
|
it("marks animated decoration as hidden from assistive technology", () => {
|
|
const wrapper = mountLoader();
|
|
|
|
expect(wrapper.get(".branded-loading-screen__ambient").attributes("aria-hidden")).toBe("true");
|
|
expect(wrapper.get(".branded-loading-screen__motion").attributes("aria-hidden")).toBe("true");
|
|
expect(wrapper.get(".branded-loading-screen__dots").attributes("aria-hidden")).toBe("true");
|
|
});
|
|
|
|
it("continues the shared loader animation phase after remounts", () => {
|
|
window.__TW_LOADER_STARTED_AT__ = performance.now() - 1800;
|
|
|
|
const wrapper = mountLoader();
|
|
const style = wrapper.attributes("style") || "";
|
|
|
|
expect(style).toMatch(/--branded-loader-spin-delay:\s*-\d/);
|
|
expect(style).toMatch(/--branded-loader-sweep-delay:\s*-\d/);
|
|
expect(style).toMatch(/--branded-loader-dot-three-delay:\s*-\d/);
|
|
});
|
|
|
|
it("locks page scroll only while mounted", () => {
|
|
const wrapper = mountLoader();
|
|
|
|
expect(document.documentElement.classList.contains("tw-loader-scroll-lock")).toBe(true);
|
|
expect(document.body.classList.contains("tw-loader-scroll-lock")).toBe(true);
|
|
expect(document.documentElement.dataset.twLoaderScrollLocks).toBe("1");
|
|
|
|
wrapper.unmount();
|
|
|
|
expect(document.documentElement.classList.contains("tw-loader-scroll-lock")).toBe(false);
|
|
expect(document.body.classList.contains("tw-loader-scroll-lock")).toBe(false);
|
|
expect(document.documentElement.dataset.twLoaderScrollLocks).toBeUndefined();
|
|
});
|
|
});
|