40 lines
1.5 KiB
TypeScript
40 lines
1.5 KiB
TypeScript
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);
|
|
});
|