@motion-proto/live-tokens 0.74.0 → 0.76.0

package/src/testing-js/component-alias.contract.js

@@ -0,0 +1,81 @@
+import {
+  openComponentsEditor
+} from "./chunk-L73N4NSO.js";
+import "./chunk-ZMSX6CXR.js";
+
+// src/testing/component-alias.contract.ts
+import fs from "fs";
+import path from "path";
+import { expect, test } from "@playwright/test";
+function discoverDefaultAliases() {
+  const root = path.resolve(process.env.LIVE_TOKENS_DATA_DIR ?? "src/live-tokens/data", "component-configs");
+  const cases = [];
+  for (const directory of fs.readdirSync(root).sort()) {
+    const file = path.join(root, directory, "default.json");
+    if (!fs.existsSync(file)) continue;
+    const data = JSON.parse(fs.readFileSync(file, "utf8"));
+    const component = data.component ?? directory;
+    for (const variable of Object.keys(data.aliases ?? {}).sort()) {
+      cases.push({ component, variable });
+    }
+  }
+  return cases;
+}
+var aliasCases = discoverDefaultAliases();
+test("every shipped component alias fans out set, update, and remove to the document root", async ({ page }) => {
+  test.setTimeout(6e4);
+  await openComponentsEditor(page);
+  const result = await page.evaluate(async (cases) => {
+    const editor = window.__liveTokensEditor;
+    if (!editor) throw new Error("window.__liveTokensEditor is not present on the components route");
+    let originalComponents;
+    const unsubscribe = editor.editorState.subscribe((state) => {
+      if (originalComponents === void 0) {
+        originalComponents = structuredClone(state.components);
+      }
+    });
+    unsubscribe();
+    const rootStyle = document.documentElement.style;
+    const failures = [];
+    const check = (expected, phase) => {
+      for (const { variable } of cases) {
+        const actual = rootStyle.getPropertyValue(variable).trim();
+        if (actual !== expected) {
+          failures.push(`${phase} ${variable}: ${actual}`);
+          if (failures.length >= 20) return;
+        }
+      }
+    };
+    editor.mutate("Playwright: set every component alias", (state) => {
+      for (const { component, variable } of cases) {
+        const slice = state.components[component] ?? (state.components[component] = { aliases: {}, config: {} });
+        slice.aliases[variable] = { kind: "literal", value: "__playwright_set__" };
+      }
+    });
+    check("__playwright_set__", "set");
+    editor.mutate("Playwright: update every component alias", (state) => {
+      for (const { component, variable } of cases) {
+        state.components[component].aliases[variable] = {
+          kind: "literal",
+          value: "__playwright_update__"
+        };
+      }
+    });
+    check("__playwright_update__", "update");
+    editor.mutate("Playwright: remove every component alias", (state) => {
+      for (const { component, variable } of cases) {
+        delete state.components[component]?.aliases[variable];
+      }
+    });
+    check("", "remove");
+    editor.mutate("Playwright: restore component aliases", (state) => {
+      state.components = originalComponents;
+    });
+    return { checked: cases.length, failures };
+  }, aliasCases);
+  expect(aliasCases.length).toBeGreaterThan(1e3);
+  expect(new Set(aliasCases.map(({ variable }) => variable)).size).toBe(aliasCases.length);
+  expect(result.checked).toBe(aliasCases.length);
+  expect(result.failures).toEqual([]);
+});
+//# sourceMappingURL=component-alias.contract.js.map

package/src/testing-js/component-alias.contract.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../testing/component-alias.contract.ts"],"sourcesContent":["import fs from 'node:fs';\nimport path from 'node:path';\nimport { expect, test } from '@playwright/test';\nimport { openComponentsEditor } from './support/editor';\n\ninterface AliasCase {\n  component: string;\n  variable: string;\n}\n\nfunction discoverDefaultAliases(): AliasCase[] {\n  const root = path.resolve(process.env.LIVE_TOKENS_DATA_DIR ?? 'src/live-tokens/data', 'component-configs');\n  const cases: AliasCase[] = [];\n  for (const directory of fs.readdirSync(root).sort()) {\n    const file = path.join(root, directory, 'default.json');\n    if (!fs.existsSync(file)) continue;\n    const data = JSON.parse(fs.readFileSync(file, 'utf8')) as {\n      component?: string;\n      aliases?: Record<string, unknown>;\n    };\n    const component = data.component ?? directory;\n    for (const variable of Object.keys(data.aliases ?? {}).sort()) {\n      cases.push({ component, variable });\n    }\n  }\n  return cases;\n}\n\nconst aliasCases = discoverDefaultAliases();\n\ntest('every shipped component alias fans out set, update, and remove to the document root', async ({ page }) => {\n  test.setTimeout(60_000);\n  await openComponentsEditor(page);\n\n  const result = await page.evaluate(async (cases: AliasCase[]) => {\n    const editor = window.__liveTokensEditor;\n    if (!editor) throw new Error('window.__liveTokensEditor is not present on the components route');\n\n    let originalComponents: unknown;\n    const unsubscribe = editor.editorState.subscribe((state) => {\n      if (originalComponents === undefined) {\n        originalComponents = structuredClone(state.components);\n      }\n    });\n    unsubscribe();\n\n    const rootStyle = document.documentElement.style;\n    const failures: string[] = [];\n    const check = (expected: string, phase: string) => {\n      for (const { variable } of cases) {\n        const actual = rootStyle.getPropertyValue(variable).trim();\n        if (actual !== expected) {\n          failures.push(`${phase} ${variable}: ${actual}`);\n          if (failures.length >= 20) return;\n        }\n      }\n    };\n\n    editor.mutate('Playwright: set every component alias', (state: any) => {\n      for (const { component, variable } of cases) {\n        const slice = state.components[component]\n          ?? (state.components[component] = { aliases: {}, config: {} });\n        slice.aliases[variable] = { kind: 'literal', value: '__playwright_set__' };\n      }\n    });\n    check('__playwright_set__', 'set');\n\n    editor.mutate('Playwright: update every component alias', (state: any) => {\n      for (const { component, variable } of cases) {\n        state.components[component].aliases[variable] = {\n          kind: 'literal',\n          value: '__playwright_update__',\n        };\n      }\n    });\n    check('__playwright_update__', 'update');\n\n    editor.mutate('Playwright: remove every component alias', (state: any) => {\n      for (const { component, variable } of cases) {\n        delete state.components[component]?.aliases[variable];\n      }\n    });\n    check('', 'remove');\n\n    editor.mutate('Playwright: restore component aliases', (state: any) => {\n      state.components = originalComponents;\n    });\n\n    return { checked: cases.length, failures };\n  }, aliasCases);\n\n  expect(aliasCases.length).toBeGreaterThan(1_000);\n  expect(new Set(aliasCases.map(({ variable }) => variable)).size).toBe(aliasCases.length);\n  expect(result.checked).toBe(aliasCases.length);\n  expect(result.failures).toEqual([]);\n});\n"],"mappings":"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","names":[]}

package/src/testing-js/component-editor.contract.js

@@ -0,0 +1,62 @@
+import {
+  ContractHarness
+} from "./chunk-AO7EZHYV.js";
+import "./chunk-L73N4NSO.js";
+import {
+  isInapplicable,
+  selectedContracts
+} from "./chunk-LXR3MN6N.js";
+import "./chunk-ZMSX6CXR.js";
+
+// src/testing/component-editor.contract.ts
+import { test } from "@playwright/test";
+for (const contract of await selectedContracts()) {
+  test.describe.serial(contract.id, () => {
+    test(`${contract.id} is listed in its registry group`, async ({ page }) => {
+      const harness = await ContractHarness.attach(page, contract);
+      await harness.assertListed();
+    });
+    test(`${contract.id} declares every part and every shipped alias`, async ({ page }) => {
+      const harness = await ContractHarness.open(page, contract);
+      await harness.assertInventory();
+    });
+    test(`${contract.id} resolves every alias it paints with`, async ({ page }) => {
+      const harness = await ContractHarness.open(page, contract);
+      await harness.assertAliasesResolve();
+    });
+    test(`${contract.id} previews the state being edited`, async ({ page }) => {
+      const harness = await ContractHarness.open(page, contract);
+      if (isInapplicable(contract.states)) {
+        test.info().annotations.push({ type: "inapplicable", description: contract.states.reason });
+      }
+      await harness.assertStates();
+    });
+    test(`${contract.id} answers the pointer and the keyboard`, async ({ page }) => {
+      const harness = await ContractHarness.open(page, contract);
+      if (isInapplicable(contract.interaction)) {
+        test.info().annotations.push({ type: "inapplicable", description: contract.interaction.reason });
+      }
+      await harness.assertInteraction();
+    });
+    test(`${contract.id} persists an edit and resets to the saved config`, async ({ page }) => {
+      test.setTimeout(18e4);
+      const harness = await ContractHarness.open(page, contract);
+      await harness.assertPersistence();
+    });
+    test(`${contract.id} takes the theme's values and gives them back`, async ({ page }) => {
+      const harness = await ContractHarness.open(page, contract);
+      await harness.assertThemeProjection(contract.theme);
+    });
+    test(`${contract.id} draws every painted part in Sketch mode`, async ({ page }) => {
+      const harness = await ContractHarness.open(page, contract);
+      const sketch = contract.sketch;
+      if (isInapplicable(sketch)) {
+        test.info().annotations.push({ type: "inapplicable", description: sketch.reason });
+        await harness.assertNoSketchPaint("pencil");
+        return;
+      }
+      await harness.assertSketchPaint(sketch);
+    });
+  });
+}
+//# sourceMappingURL=component-editor.contract.js.map

package/src/testing-js/component-editor.contract.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../testing/component-editor.contract.ts"],"sourcesContent":["import { test } from '@playwright/test';\nimport { isInapplicable } from './componentContract';\nimport { selectedContracts } from './contracts';\nimport { ContractHarness } from './support/contractHarness';\n\nfor (const contract of await selectedContracts()) {\n  // Serial, so a component that is not registered reports that and stops rather\n  // than reporting six preview failures caused by the missing entry.\n  test.describe.serial(contract.id, () => {\n    test(`${contract.id} is listed in its registry group`, async ({ page }) => {\n      const harness = await ContractHarness.attach(page, contract);\n      await harness.assertListed();\n    });\n\n    test(`${contract.id} declares every part and every shipped alias`, async ({ page }) => {\n      const harness = await ContractHarness.open(page, contract);\n      await harness.assertInventory();\n    });\n\n    test(`${contract.id} resolves every alias it paints with`, async ({ page }) => {\n      const harness = await ContractHarness.open(page, contract);\n      await harness.assertAliasesResolve();\n    });\n\n    test(`${contract.id} previews the state being edited`, async ({ page }) => {\n      const harness = await ContractHarness.open(page, contract);\n      if (isInapplicable(contract.states)) {\n        test.info().annotations.push({ type: 'inapplicable', description: contract.states.reason });\n      }\n      await harness.assertStates();\n    });\n\n    test(`${contract.id} answers the pointer and the keyboard`, async ({ page }) => {\n      const harness = await ContractHarness.open(page, contract);\n      if (isInapplicable(contract.interaction)) {\n        test.info().annotations.push({ type: 'inapplicable', description: contract.interaction.reason });\n      }\n      await harness.assertInteraction();\n    });\n\n    test(`${contract.id} persists an edit and resets to the saved config`, async ({ page }) => {\n      test.setTimeout(180_000);\n      const harness = await ContractHarness.open(page, contract);\n      await harness.assertPersistence();\n    });\n\n    test(`${contract.id} takes the theme's values and gives them back`, async ({ page }) => {\n      const harness = await ContractHarness.open(page, contract);\n      await harness.assertThemeProjection(contract.theme);\n    });\n\n    test(`${contract.id} draws every painted part in Sketch mode`, async ({ page }) => {\n      const harness = await ContractHarness.open(page, contract);\n      const sketch = contract.sketch;\n      if (isInapplicable(sketch)) {\n        test.info().annotations.push({ type: 'inapplicable', description: sketch.reason });\n        await harness.assertNoSketchPaint('pencil');\n        return;\n      }\n      await harness.assertSketchPaint(sketch);\n    });\n  });\n}\n"],"mappings":";;;;;;;;;;;AAAA,SAAS,YAAY;AAKrB,WAAW,YAAY,MAAM,kBAAkB,GAAG;AAGhD,OAAK,SAAS,OAAO,SAAS,IAAI,MAAM;AACtC,SAAK,GAAG,SAAS,EAAE,oCAAoC,OAAO,EAAE,KAAK,MAAM;AACzE,YAAM,UAAU,MAAM,gBAAgB,OAAO,MAAM,QAAQ;AAC3D,YAAM,QAAQ,aAAa;AAAA,IAC7B,CAAC;AAED,SAAK,GAAG,SAAS,EAAE,gDAAgD,OAAO,EAAE,KAAK,MAAM;AACrF,YAAM,UAAU,MAAM,gBAAgB,KAAK,MAAM,QAAQ;AACzD,YAAM,QAAQ,gBAAgB;AAAA,IAChC,CAAC;AAED,SAAK,GAAG,SAAS,EAAE,wCAAwC,OAAO,EAAE,KAAK,MAAM;AAC7E,YAAM,UAAU,MAAM,gBAAgB,KAAK,MAAM,QAAQ;AACzD,YAAM,QAAQ,qBAAqB;AAAA,IACrC,CAAC;AAED,SAAK,GAAG,SAAS,EAAE,oCAAoC,OAAO,EAAE,KAAK,MAAM;AACzE,YAAM,UAAU,MAAM,gBAAgB,KAAK,MAAM,QAAQ;AACzD,UAAI,eAAe,SAAS,MAAM,GAAG;AACnC,aAAK,KAAK,EAAE,YAAY,KAAK,EAAE,MAAM,gBAAgB,aAAa,SAAS,OAAO,OAAO,CAAC;AAAA,MAC5F;AACA,YAAM,QAAQ,aAAa;AAAA,IAC7B,CAAC;AAED,SAAK,GAAG,SAAS,EAAE,yCAAyC,OAAO,EAAE,KAAK,MAAM;AAC9E,YAAM,UAAU,MAAM,gBAAgB,KAAK,MAAM,QAAQ;AACzD,UAAI,eAAe,SAAS,WAAW,GAAG;AACxC,aAAK,KAAK,EAAE,YAAY,KAAK,EAAE,MAAM,gBAAgB,aAAa,SAAS,YAAY,OAAO,CAAC;AAAA,MACjG;AACA,YAAM,QAAQ,kBAAkB;AAAA,IAClC,CAAC;AAED,SAAK,GAAG,SAAS,EAAE,oDAAoD,OAAO,EAAE,KAAK,MAAM;AACzF,WAAK,WAAW,IAAO;AACvB,YAAM,UAAU,MAAM,gBAAgB,KAAK,MAAM,QAAQ;AACzD,YAAM,QAAQ,kBAAkB;AAAA,IAClC,CAAC;AAED,SAAK,GAAG,SAAS,EAAE,iDAAiD,OAAO,EAAE,KAAK,MAAM;AACtF,YAAM,UAAU,MAAM,gBAAgB,KAAK,MAAM,QAAQ;AACzD,YAAM,QAAQ,sBAAsB,SAAS,KAAK;AAAA,IACpD,CAAC;AAED,SAAK,GAAG,SAAS,EAAE,4CAA4C,OAAO,EAAE,KAAK,MAAM;AACjF,YAAM,UAAU,MAAM,gBAAgB,KAAK,MAAM,QAAQ;AACzD,YAAM,SAAS,SAAS;AACxB,UAAI,eAAe,MAAM,GAAG;AAC1B,aAAK,KAAK,EAAE,YAAY,KAAK,EAAE,MAAM,gBAAgB,aAAa,OAAO,OAAO,CAAC;AACjF,cAAM,QAAQ,oBAAoB,QAAQ;AAC1C;AAAA,MACF;AACA,YAAM,QAAQ,kBAAkB,MAAM;AAAA,IACxC,CAAC;AAAA,EACH,CAAC;AACH;","names":[]}