shinuwa/sokko-g
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Cover remaining Sass families and fix autocomplete hover
All checks were successful
Deploy Sokko G / deploy (push) Successful in 18s
Details

Browse source
This commit is contained in:
Shinuwa 2026-09-14 13:58:40 +02:00
parent 77f357e056
commit e52d6e66eb
13 changed files with 617 additions and 286 deletions
Download patch file Download diff file Expand all files Collapse all files

14
e2e/card-surfaces.spec.js
View file

@ -1,14 +1,9 @@
// Rôle : vérifie les surfaces de cartes à partir du Sass compilé et des styles calculés.
import { test, expect } from "@playwright/test";
import { compile } from "sass";
let css;
test.beforeAll(() => {
css = compile("website/src/styles/main.scss").css;
});
import { mountStyles } from "./fixtures/compiled-styles.js";
async function mountCards(page) {
await page.setContent(`
await mountStyles(page, `
<main style="display:grid;gap:24px;padding:24px">
<article id="global" class="nds-card" data-variant="interactive">
<div class="nds-card-cover">Cover</div><button>Open</button>
@ -20,6 +15,7 @@ async function mountCards(page) {
<div class="mhwilds-card-art">Art</div><div class="mhwilds-card-body">Endemic</div>
</article>
<article id="monster" class="mhwilds-card monster-card" tabindex="0">
<span class="mhwilds-flip-indicator">Flip</span>
<div class="mhwilds-card-inner">
<div class="mhwilds-card-face mhwilds-card-front"><div class="mhwilds-card-art">Front</div></div>
<div class="mhwilds-card-face mhwilds-card-back"><div class="mhwilds-card-body">Back</div></div>
@ -27,8 +23,6 @@ async function mountCards(page) {
</article>
</main>
`);
await page.addStyleTag({ content: css });
await page.mouse.move(0, 0);
}
async function expectSurface(card, { hovered = false, face = false } = {}) {
@ -78,6 +72,8 @@ for (const width of [1280, 390]) {
await global.getByRole("button").focus();
await expectSurface(global, { hovered: true });
const monster = page.locator("#monster");
await expect(monster.locator(".mhwilds-flip-indicator")).toHaveCSS("pointer-events", "none");
await expect(monster.locator(".mhwilds-flip-indicator")).toHaveCSS("width", "34px");
for (const face of await monster.locator(".mhwilds-card-face").all()) {
await expectSurface(face, { face: true });
await expect(face).toHaveCSS("backface-visibility", "hidden");