@oiz/stzh-components 4.10.0 → 4.11.0-beta1

package/dist/.build/test/utils.js

@@ -1,24 +1,28 @@
 import { expect } from "@playwright/test";
 export async function gotoStory(page, id) {
-    // Use one of these configurations for the desired DESI version:
     const defaultVersion = 'current';
     const refVersion = process.env.REF_VERSION || defaultVersion;
     const refTarget = process.env.REF_TARGET;
-    const targetUri = ['prod', 'uat', 'dev'].includes(refTarget) ? `/${refVersion}/iframe.html?args=&id=${id}&viewMode=story` : `/iframe.html?args=&id=${id}&viewMode=story`;
-    await page.goto(`${targetUri}`, { waitUntil: "load" }); // local
-    // make sure the page is visible and animations have ended
-    try {
-        await page.waitForSelector('body', { state: 'visible', timeout: 60000 });
-    }
-    catch (error) {
-        // ignore it, do nothing
-    }
-    await waitForAnimationEnd(page, 'body');
+    const targetUri = ['prod', 'uat', 'dev'].includes(refTarget)
+        ? `/${refVersion}/iframe.html?args=&id=${id}&viewMode=story`
+        : `/iframe.html?args=&id=${id}&viewMode=story`;
+    await page.goto(targetUri, { waitUntil: 'load' });
+    await expect(page.locator('body')).toBeVisible();
+    await page.waitForFunction(() => {
+        const roots = ['#storybook-root', '#root'];
+        return roots.some((selector) => {
+            const el = document.querySelector(selector);
+            return !!el && el.childElementCount > 0;
+        });
+    });
+    await page.evaluate(() => document.fonts.ready);
 }
 export async function visualDiff({ storyId, page, url, onBefore = null, fullPage = true }) {
     await gotoStory(page, `${url}--${storyId}`);
+    await page.evaluate(() => document.fonts.ready);
     if (onBefore) {
         await onBefore(page, storyId);
+        await waitForAnimationEnd(page, 'body');
     }
     await expect(page).toHaveScreenshot({ fullPage });
 }

package/dist/.build/test/utils.js.map

@@ -1 +1 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../.build/test/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAa,MAAM,kBAAkB,CAAC;AAErD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAI,EAAE,EAAE;IACtC,gEAAgE;IAEhE,MAAM,cAAc,GAAG,SAAS,CAAC;IACjC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,CAAC,WAAW,IAAI,cAAc,CAAC;IAE7D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;IACzC,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,IAAI,UAAU,yBAAyB,EAAE,iBAAiB,CAAC,CAAC,CAAC,yBAAyB,EAAE,iBAAiB,CAAC;IAEzK,MAAM,IAAI,CAAC,IAAI,CAAC,GAAG,SAAS,EAAE,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC,CAAE,QAAQ;IAEjE,0DAA0D;IAC1D,IAAI,CAAC;QACH,MAAM,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,OAAO,EAAE,KAAK,EAAE,CAAC,CAAC;IAC3E,CAAC;IAAC,OAAO,KAAK,EAAE,CAAC;QACf,wBAAwB;IAC1B,CAAC;IACD,MAAM,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;AAC1C,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,UAAU,CAC9B,EACE,OAAO,EACP,IAAI,EACJ,GAAG,EACH,QAAQ,GAAG,IAAI,EACf,QAAQ,GAAG,IAAI,EAOhB;IAED,MAAM,SAAS,CAAC,IAAI,EAAE,GAAG,GAAG,KAAK,OAAO,EAAE,CAAC,CAAC;IAE5C,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;IAChC,CAAC;IAED,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;AACpD,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,IAAU,EAAE,QAAgB;IAC9D,OAAO,IAAI;SACR,OAAO,CAAC,QAAQ,CAAC;SACjB,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CACpB,OAAO,CAAC,GAAG,CACT,OAAO;SACJ,aAAa,EAAE;SACf,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,CAC1C,CACF,CAAA;AACL,CAAC","sourcesContent":["import { expect, type Page } from \"@playwright/test\";\n\nexport async function gotoStory(page, id) {\n  // Use one of these configurations for the desired DESI version:\n\n  const defaultVersion = 'current';\n  const refVersion = process.env.REF_VERSION || defaultVersion;\n\n  const refTarget = process.env.REF_TARGET;\n  const targetUri = ['prod', 'uat', 'dev'].includes(refTarget) ? `/${refVersion}/iframe.html?args=&id=${id}&viewMode=story` : `/iframe.html?args=&id=${id}&viewMode=story`;\n\n  await page.goto(`${targetUri}`, { waitUntil: \"load\" });  // local\n\n  // make sure the page is visible and animations have ended\n  try {\n    await page.waitForSelector('body', { state: 'visible', timeout: 60000 });\n  } catch (error) {\n    // ignore it, do nothing\n  }\n  await waitForAnimationEnd(page, 'body');\n}\n\nexport async function visualDiff(\n  {\n    storyId,\n    page,\n    url,\n    onBefore = null,\n    fullPage = true\n  }: {\n    storyId: string\n    page: Page\n    url: string\n    onBefore?: (page: Page, storyId: string) => void\n    fullPage?: boolean\n  }\n) {\n  await gotoStory(page, `${url}--${storyId}`);\n\n  if (onBefore) {\n    await onBefore(page, storyId);\n  }\n\n  await expect(page).toHaveScreenshot({ fullPage });\n}\n\nexport function waitForAnimationEnd(page: Page, selector: string) {\n  return page\n    .locator(selector)\n    .evaluate((element) =>\n      Promise.all(\n        element\n          .getAnimations()\n          .map((animation) => animation.finished)\n      )\n    )\n}\n"]}
+{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../../.build/test/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAa,MAAM,kBAAkB,CAAC;AAErD,MAAM,CAAC,KAAK,UAAU,SAAS,CAAC,IAAI,EAAE,EAAU;IAC9C,MAAM,cAAc,GAAG,SAAS,CAAC;IACjC,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,CAAC,WAAW,IAAI,cAAc,CAAC;IAE7D,MAAM,SAAS,GAAG,OAAO,CAAC,GAAG,CAAC,UAAU,CAAC;IACzC,MAAM,SAAS,GAAG,CAAC,MAAM,EAAE,KAAK,EAAE,KAAK,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC;QAC1D,CAAC,CAAC,IAAI,UAAU,yBAAyB,EAAE,iBAAiB;QAC5D,CAAC,CAAC,yBAAyB,EAAE,iBAAiB,CAAC;IAEjD,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,CAAC,CAAC;IAElD,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,WAAW,EAAE,CAAC;IAEjD,MAAM,IAAI,CAAC,eAAe,CAAC,GAAG,EAAE;QAC9B,MAAM,KAAK,GAAG,CAAC,iBAAiB,EAAE,OAAO,CAAC,CAAC;QAC3C,OAAO,KAAK,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE;YAC7B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,QAAQ,CAAC,CAAC;YAC5C,OAAO,CAAC,CAAC,EAAE,IAAI,EAAE,CAAC,iBAAiB,GAAG,CAAC,CAAC;QAC1C,CAAC,CAAC,CAAC;IACL,CAAC,CAAC,CAAC;IAEH,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;AAClD,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,UAAU,CAC9B,EACE,OAAO,EACP,IAAI,EACJ,GAAG,EACH,QAAQ,GAAG,IAAI,EACf,QAAQ,GAAG,IAAI,EAOhB;IAED,MAAM,SAAS,CAAC,IAAI,EAAE,GAAG,GAAG,KAAK,OAAO,EAAE,CAAC,CAAC;IAE5C,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IAEhD,IAAI,QAAQ,EAAE,CAAC;QACb,MAAM,QAAQ,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QAC9B,MAAM,mBAAmB,CAAC,IAAI,EAAE,MAAM,CAAC,CAAC;IAC1C,CAAC;IAED,MAAM,MAAM,CAAC,IAAI,CAAC,CAAC,gBAAgB,CAAC,EAAE,QAAQ,EAAE,CAAC,CAAC;AACpD,CAAC;AAED,MAAM,UAAU,mBAAmB,CAAC,IAAU,EAAE,QAAgB;IAC9D,OAAO,IAAI;SACR,OAAO,CAAC,QAAQ,CAAC;SACjB,QAAQ,CAAC,CAAC,OAAO,EAAE,EAAE,CACpB,OAAO,CAAC,GAAG,CACT,OAAO;SACJ,aAAa,EAAE;SACf,GAAG,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,SAAS,CAAC,QAAQ,CAAC,CAC1C,CACF,CAAA;AACL,CAAC","sourcesContent":["import { expect, type Page } from \"@playwright/test\";\n\nexport async function gotoStory(page, id: string) {\n  const defaultVersion = 'current';\n  const refVersion = process.env.REF_VERSION || defaultVersion;\n\n  const refTarget = process.env.REF_TARGET;\n  const targetUri = ['prod', 'uat', 'dev'].includes(refTarget)\n    ? `/${refVersion}/iframe.html?args=&id=${id}&viewMode=story`\n    : `/iframe.html?args=&id=${id}&viewMode=story`;\n\n  await page.goto(targetUri, { waitUntil: 'load' });\n\n  await expect(page.locator('body')).toBeVisible();\n\n  await page.waitForFunction(() => {\n    const roots = ['#storybook-root', '#root'];\n    return roots.some((selector) => {\n      const el = document.querySelector(selector);\n      return !!el && el.childElementCount > 0;\n    });\n  });\n\n  await page.evaluate(() => document.fonts.ready);\n}\n\nexport async function visualDiff(\n  {\n    storyId,\n    page,\n    url,\n    onBefore = null,\n    fullPage = true\n  }: {\n    storyId: string\n    page: Page\n    url: string\n    onBefore?: (page: Page, storyId: string) => Promise<void> | void\n    fullPage?: boolean\n  }\n) {\n  await gotoStory(page, `${url}--${storyId}`);\n\n  await page.evaluate(() => document.fonts.ready);\n\n  if (onBefore) {\n    await onBefore(page, storyId);\n    await waitForAnimationEnd(page, 'body');\n  }\n\n  await expect(page).toHaveScreenshot({ fullPage });\n}\n\nexport function waitForAnimationEnd(page: Page, selector: string) {\n  return page\n    .locator(selector)\n    .evaluate((element) =>\n      Promise.all(\n        element\n          .getAnimations()\n          .map((animation) => animation.finished)\n      )\n    )\n}\n"]}

package/dist/cjs/{index-Br_Y6IzY.js → index-D8r_QCOW.js}

@@ -22,7 +22,7 @@ const NAMESPACE = 'stzh-components';
 const BUILD = /* stzh-components */ { experimentalSlotFixes: true, hydratedSelectorName: "hydrated", lazyLoad: true, propChangeCallback: true, shadowDom: true, slotRelocation: true, state: true, updatable: true};
 
 const name = "@oiz/stzh-components";
-const version = "4.10.0";
+const version = "4.11.0-beta1";
 
 const packageName = name.substring(name.indexOf('/')+1);
 // let focused = false;
@@ -3359,6 +3359,6 @@ exports.registerInstance = registerInstance;
 exports.setNonce = setNonce;
 exports.win = win;
 exports.writeTask = writeTask;
-//# sourceMappingURL=index-Br_Y6IzY.js.map
+//# sourceMappingURL=index-D8r_QCOW.js.map
 
-//# sourceMappingURL=index-Br_Y6IzY.js.map
+//# sourceMappingURL=index-D8r_QCOW.js.map