CSSを、Vitestでテストしてみる

import { expect, test } from "vitest";
import { page } from "vitest/browser";
import { render } from "vitest-browser-react";
 
import { CssAiPage } from "./CssAiPage";
 
test("global header stays above demo image when they overlap", async () => {
  // Arrange
  await page.viewport(1200, 800);
  await render(<CssAiPage />);
 
  const header = document.querySelector<HTMLElement>(".fixed-header");
  const demoImage = document.querySelector<HTMLElement>(".demo-image");
 
  if (!header || !demoImage) {
    throw new Error("header or demo image not found");
  }
 
  // Act
  document.documentElement.style.scrollBehavior = "auto";
  const imgAbsTop = demoImage.getBoundingClientRect().top;
  window.scrollTo({ top: imgAbsTop });
  await new Promise(requestAnimationFrame);
 
  // Assert
  const imgRect = demoImage.getBoundingClientRect();
  const pointX = Math.round(imgRect.left);
  const pointY = Math.round(imgRect.top);
  const hit = document.elementFromPoint(pointX, pointY);
  expect(hit?.closest(".fixed-header")).toBe(header);
});

import { page } from "vitest/browser";
import { expect, test } from "vitest";
import { render } from "vitest-browser-react";
 
import { CssAiDemo } from "./CssAiDemo";
 
const setViewport = async (width: number, height = 800) => {
  await page.viewport(width, height);
};
 
const getRects = () => {
  const video = document.querySelector<HTMLElement>(".sidebar-video");
  const steps = document.querySelector<HTMLElement>(".sidebar-steps");
 
  if (!video || !steps) {
    throw new Error("sidebar blocks not found");
  }
 
  return {
    video: video.getBoundingClientRect(),
    steps: steps.getBoundingClientRect(),
  };
};
 
test("positions demo blocks for desktop viewport", async () => {
  // Arrange
  await setViewport(1200);
 
  // Act
  await render(<CssAiDemo />);
 
  // Assert
  const { video, steps } = getRects();
  expect(video.left).toBeLessThan(steps.left);
  expect(video.top).toBe(steps.top);
});
 
test("positions demo blocks for mobile viewport", async () => {
  // Arrange
  await setViewport(375);
 
  // Act
  await render(<CssAiDemo />);
 
  // Assert
  const { video, steps } = getRects();
  expect(video.top).toBeLessThan(steps.top);
});