BangSo/apps/web/e2e/avatar-motion.spec.ts

import { expect, test } from "@playwright/test";

test("organic avatar path stays still when reduced motion is enabled", async ({ page }) => {
  await page.emulateMedia({ reducedMotion: "reduce" });
  await page.goto("/e2e/fixtures/avatar-motion.html");

  const avatar = page.locator(".rakazo-organic-avatar").first();
  await expect(avatar).toBeVisible();
  await expect(page.locator(".rakazo-organic-avatar animate")).toHaveCount(0);

  const body = avatar.locator(".rakazo-organic-avatar-body-working");
  const snapshot = () =>
    body.evaluate((path: SVGPathElement) => ({
      animationName: getComputedStyle(path).animationName,
      d: getComputedStyle(path).d,
      length: path.getTotalLength(),
    }));
  const first = await snapshot();
  await page.waitForTimeout(300);
  const second = await snapshot();

  expect(first.animationName).toBe("none");
  expect(second).toEqual(first);
});

test("working faces keep their gaze in the upper-left", async ({ page }) => {
  await page.goto("/e2e/fixtures/avatar-motion.html");

  const workingEyes = page.locator('[data-gaze="upper-left"]');
  await expect(workingEyes).toHaveCount(8);
  await expect(workingEyes.first()).toHaveCSS("animation-name", "rakazo-organic-eyes-thinking");

  const transform = await workingEyes.first().evaluate((eyes: SVGGElement) => {
    const matrix = new DOMMatrixReadOnly(getComputedStyle(eyes).transform);
    return { x: matrix.m41, y: matrix.m42 };
  });
  expect(transform.x).toBeLessThan(0);
  expect(transform.y).toBeLessThan(0);
});