@nanoporetech-digital/components 1.13.22 → 1.15.1

package/dist/collection/utils/testing/index.js

@@ -0,0 +1,242 @@
+import { newE2EPage } from '@stencil/core/testing';
+import axe from 'axe-core';
+export class E2EPlayGround {
+  constructor(setup) {
+    this.viewportWidth = 600;
+    setup =
+      typeof setup === 'string'
+        ? { template: `<${setup} {{ attrs }}></${setup}>`, tag: setup }
+        : setup;
+    this.template = setup.template;
+    this.tag = setup.tag;
+  }
+  get attrs() {
+    if (!this.props)
+      return '';
+    return Object.entries(this.props)
+      .map(([attr, value]) => `${kebabize(attr)}="${value}"`)
+      .join(' ');
+  }
+  get css() {
+    if (!this.cssVars)
+      return '';
+    return Object.entries(this.cssVars)
+      .map(([attr, value]) => `${attr}: ${value}`)
+      .join('\n');
+  }
+  async newPage(props, docOpts) {
+    if (!this.template || !this.tag) {
+      console.warn('no template set');
+      return;
+    }
+    this.props = props;
+    this.page = await createPage({
+      html: `
+      <style>
+        :root {
+          ${this.css}
+        }
+      </style>
+      ${this.template.replace(/(\{\{ attrs \}\})/g, this.attrs)}
+    `,
+      viewportWidth: this.viewportWidth,
+      viewportHeight: this.viewportHeight,
+      dir: docOpts ? docOpts.dir : 'ltr',
+    });
+    return this.page;
+  }
+  reportA11y() {
+    if (!this.page) {
+      console.warn('no page rendered');
+      return;
+    }
+    return this.page.reportA11y(this.tag);
+  }
+  component() {
+    if (!this.page) {
+      console.warn('no page rendered');
+      return;
+    }
+    return this.page.find(this.tag);
+  }
+  async componentQuery(selectorStr, shadow = true) {
+    if (!this.page) {
+      console.warn('no page rendered');
+      return;
+    }
+    if (!selectorStr) {
+      console.warn('selectorStr not set');
+      return;
+    }
+    if (shadow) {
+      return (await this.page.waitForFunction((args) => {
+        const [tag, selectorStr] = args;
+        return document
+          .querySelector(tag)
+          .shadowRoot.querySelector(selectorStr);
+      }, {}, [this.tag, selectorStr])).asElement();
+    }
+    else {
+      return (await this.page.waitForFunction((args) => {
+        const [tag, selectorStr] = args;
+        return document.querySelector(tag + ' ' + selectorStr);
+      }, {}, [this.tag, selectorStr])).asElement();
+    }
+  }
+}
+export async function getFocusedElement(page, shadowEleSelector = null) {
+  if (!shadowEleSelector)
+    return page.evaluateHandle(() => document.activeElement);
+  else {
+    return page.evaluateHandle((shadowEleSelector) => document.querySelector(shadowEleSelector).shadowRoot.activeElement, shadowEleSelector);
+  }
+}
+export async function createPage(optionsOrHtml) {
+  const options = typeof optionsOrHtml === 'string'
+    ? { html: optionsOrHtml, viewportWidth: 600, dir: 'ltr' }
+    : optionsOrHtml;
+  const page = (await newE2EPage());
+  // setup navigator langs for consistent localization
+  await page.evaluate(() => {
+    Object.defineProperty(navigator, 'language', {
+      get: function () {
+        return 'en-GB';
+      },
+    });
+    Object.defineProperty(navigator, 'languages', {
+      get: function () {
+        return ['en-GB'];
+      },
+    });
+  });
+  const viewport = Object.assign({ height: options.viewportHeight || page.viewport().height }, { width: options.viewportWidth });
+  // set viewport size
+  await page.setViewport(viewport);
+  // add content
+  await page.setContent(`<link rel="stylesheet" href="/themes/nanopore.css">
+    <div class="screenshot" style="padding: 1rem;">${options.html}</div>`, { waitUntil: 'networkidle2' });
+  // set the direction - need to set here as stencil removes it on setContent
+  await page.evaluate((dir) => {
+    document.documentElement.setAttribute('dir', dir);
+    document.dir = dir;
+  }, options.dir);
+  // monkey patch screenshot function to add some extra features
+  const screenshot = page.screenshot;
+  page.screenshot = async function () {
+    // get the element's height, and set viewport to that height
+    // this enables us to get full page, clipped screenshots
+    const htmlElement = await page.$('.screenshot');
+    let { width, height } = await htmlElement.boundingBox();
+    await page.setViewport({
+      width: page.viewport().width,
+      height: options.viewportHeight || Math.round(height),
+    });
+    return screenshot.call(page, {
+      clip: {
+        x: 0,
+        y: 0,
+        width: Math.round(width),
+        height: options.viewportHeight || Math.round(height),
+      },
+      captureBeyondViewport: false,
+    });
+  };
+  await page.evaluate(async (source) => await window.eval(source), axe.source);
+  page.reportA11y = async (contextQuery) => {
+    const result = await page.evaluate(async (contextQuery) => {
+      const context = {
+        include: contextQuery ? [[contextQuery]] : undefined,
+        exclude: [[contextQuery + ' .button--primary']],
+      };
+      const opts = {};
+      return await window.axe.run(context, opts);
+    }, contextQuery);
+    // we only want serious issues and we want to ignore nanopore buttons. We know though they're bad.
+    const violations = result.violations
+      .filter((violation) => [`serious`, `critical`].includes(violation.impact))
+      .filter((violation) => {
+      violation.nodes = violation.nodes.filter((node) => !node.target.join().match('.button--'));
+      return !!violation.nodes.length;
+    });
+    const outout = violations
+      .map((violations, index) => `(${index}) [Type: ${violations.id}]: ${violations.description} (${violations.help}).
+          Elements: ${violations.nodes
+      .map((node, index) => `[${index}]'${node.target}'`)
+      .join(`, `)}.`)
+      .join(`\n\n`);
+    return outout;
+  };
+  return page;
+}
+export const kebabize = (str) => {
+  return str
+    .split('')
+    .map((letter, idx) => {
+    return letter.toUpperCase() === letter
+      ? `${idx !== 0 ? '-' : ''}${letter.toLowerCase()}`
+      : letter;
+  })
+    .join('');
+};
+export const screenshotSettings = (dirname) => {
+  return {
+    failureThreshold: 0.002,
+    failureThresholdType: 'percent',
+    customSnapshotsDir: `${dirname}/__screenshots__/${process.platform}`,
+  };
+};
+export const waitForVisibleSnippet = (selector) => {
+  return `
+  (function () {
+    function isVisible(elem) {
+      if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');
+      const style = getComputedStyle(elem);
+      if (style.display === 'none') return false;
+      if (style.visibility !== 'visible') return false;
+      if (style.opacity < 0.1) return false;
+      if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +
+          elem.getBoundingClientRect().width === 0) {
+          return false;
+      }
+      const elemCenter   = {
+          x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,
+          y: elem.getBoundingClientRect().top + elem.offsetHeight / 2
+      };
+      if (elemCenter.x < 0) return false;
+      if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;
+      if (elemCenter.y < 0) return false;
+      if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;
+      let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);
+      do {
+          if (pointContainer === elem) return true;
+      } while (pointContainer = pointContainer.parentNode);
+      return false;
+    }
+    return isVisible(document.querySelector("${selector}"));
+  })()
+`;
+};
+export const stringifyFormSnippet = `
+<div id="form-result"></div>
+<script>
+  var form = document.querySelector('form');
+  var result = document.querySelector('#form-result');
+  form.addEventListener('submit', (e) => {
+    e.preventDefault();
+    var data = new FormData(event.target);
+    var object = {};
+    data.forEach((value, key) => {
+        // Reflect.has in favor of: object.hasOwnProperty(key)
+        if(!Reflect.has(object, key)){
+            object[key] = value;
+            return;
+        }
+        if(!Array.isArray(object[key])){
+            object[key] = [object[key]];
+        }
+        object[key].push(value);
+    });
+    result.innerHTML = JSON.stringify(object);
+  })
+</script>`;
+//# sourceMappingURL=index.js.map

package/dist/collection/utils/testing/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/utils/testing/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAW,MAAM,uBAAuB,CAAC;AAE5D,OAAO,GAAkC,MAAM,UAAU,CAAC;AAsB1D,MAAM,OAAO,aAAa;EAUxB,YAAY,KAAiD;IAJtD,kBAAa,GAAG,GAAG,CAAC;IAKzB,KAAK;MACH,OAAO,KAAK,KAAK,QAAQ;QACvB,CAAC,CAAC,EAAE,QAAQ,EAAE,IAAI,KAAK,kBAAkB,KAAK,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE;QAC/D,CAAC,CAAC,KAAK,CAAC;IACZ,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,QAAQ,CAAC;IAC/B,IAAI,CAAC,GAAG,GAAG,KAAK,CAAC,GAAG,CAAC;EACvB,CAAC;EAED,IAAY,KAAK;IACf,IAAI,CAAC,IAAI,CAAC,KAAK;MAAE,OAAO,EAAE,CAAC;IAC3B,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC;OAC9B,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,QAAQ,CAAC,IAAI,CAAC,KAAK,KAAK,GAAG,CAAC;OACtD,IAAI,CAAC,GAAG,CAAC,CAAC;EACf,CAAC;EAED,IAAY,GAAG;IACb,IAAI,CAAC,IAAI,CAAC,OAAO;MAAE,OAAO,EAAE,CAAC;IAC7B,OAAO,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,OAAO,CAAC;OAChC,GAAG,CAAC,CAAC,CAAC,IAAI,EAAE,KAAK,CAAC,EAAE,EAAE,CAAC,GAAG,IAAI,KAAK,KAAK,EAAE,CAAC;OAC3C,IAAI,CAAC,IAAI,CAAC,CAAC;EAChB,CAAC;EAEM,KAAK,CAAC,OAAO,CAAC,KAAkB,EAAE,OAAgC;IACvE,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,GAAG,EAAE;MAC/B,OAAO,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC;MAChC,OAAO;KACR;IAED,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;IACnB,IAAI,CAAC,IAAI,GAAG,MAAM,UAAU,CAAC;MAC3B,IAAI,EAAE;;;YAGA,IAAI,CAAC,GAAG;;;QAGZ,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,oBAAoB,EAAE,IAAI,CAAC,KAAK,CAAC;KAC1D;MACC,aAAa,EAAE,IAAI,CAAC,aAAa;MACjC,cAAc,EAAE,IAAI,CAAC,cAAc;MACnC,GAAG,EAAE,OAAO,CAAC,CAAC,CAAC,OAAO,CAAC,GAAG,CAAC,CAAC,CAAC,KAAK;KACnC,CAAC,CAAC;IAEH,OAAO,IAAI,CAAC,IAAI,CAAC;EACnB,CAAC;EAEM,UAAU;IACf,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACd,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;MACjC,OAAO;KACR;IACD,OAAO,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;EACxC,CAAC;EAEM,SAAS;IACd,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACd,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;MACjC,OAAO;KACR;IACD,OAAO,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;EAClC,CAAC;EAEM,KAAK,CAAC,cAAc,CAAC,WAAmB,EAAE,MAAM,GAAG,IAAI;IAC5D,IAAI,CAAC,IAAI,CAAC,IAAI,EAAE;MACd,OAAO,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAC;MACjC,OAAO;KACR;IACD,IAAI,CAAC,WAAW,EAAE;MAChB,OAAO,CAAC,IAAI,CAAC,qBAAqB,CAAC,CAAC;MACpC,OAAO;KACR;IAED,IAAI,MAAM,EAAE;MACV,OAAO,CACL,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAC7B,CAAC,IAAI,EAAE,EAAE;QACP,MAAM,CAAC,GAAG,EAAE,WAAW,CAAC,GAAG,IAAI,CAAC;QAChC,OAAO,QAAQ;WACZ,aAAa,CAAC,GAAG,CAAC;WAClB,UAAU,CAAC,aAAa,CAAC,WAAW,CAAC,CAAC;MAC3C,CAAC,EACD,EAAE,EACF,CAAC,IAAI,CAAC,GAAG,EAAE,WAAW,CAAC,CACxB,CACF,CAAC,SAAS,EAAE,CAAC;KACf;SAAM;MACL,OAAO,CACL,MAAM,IAAI,CAAC,IAAI,CAAC,eAAe,CAC7B,CAAC,IAAI,EAAE,EAAE;QACP,MAAM,CAAC,GAAG,EAAE,WAAW,CAAC,GAAG,IAAI,CAAC;QAChC,OAAO,QAAQ,CAAC,aAAa,CAAC,GAAG,GAAG,GAAG,GAAG,WAAW,CAAC,CAAC;MACzD,CAAC,EACD,EAAE,EACF,CAAC,IAAI,CAAC,GAAG,EAAE,WAAW,CAAC,CACxB,CACF,CAAC,SAAS,EAAE,CAAC;KACf;EACH,CAAC;CACF;AAED,MAAM,CAAC,KAAK,UAAU,iBAAiB,CACrC,IAAa,EACb,oBAA4B,IAAI;EAEhC,IAAI,CAAC,iBAAiB;IACpB,OAAO,IAAI,CAAC,cAAc,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,aAAa,CAAC,CAAC;OACtD;IACH,OAAO,IAAI,CAAC,cAAc,CACxB,CAAC,iBAAiB,EAAE,EAAE,CACpB,QAAQ,CAAC,aAAa,CAAC,iBAAiB,CAAC,CAAC,UAAU,CAAC,aAAa,EACpE,iBAAiB,CAClB,CAAC;GACH;AACH,CAAC;AAED,MAAM,CAAC,KAAK,UAAU,UAAU,CAAC,aAA2C;EAC1E,MAAM,OAAO,GACX,OAAO,aAAa,KAAK,QAAQ;IAC/B,CAAC,CAAC,EAAE,IAAI,EAAE,aAAa,EAAE,aAAa,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,EAAE;IACzD,CAAC,CAAC,aAAa,CAAC;EAEpB,MAAM,IAAI,GAAG,CAAC,MAAM,UAAU,EAAE,CAAgB,CAAC;EAEjD,oDAAoD;EACpD,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE;IACvB,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,UAAU,EAAE;MAC3C,GAAG,EAAE;QACH,OAAO,OAAO,CAAC;MACjB,CAAC;KACF,CAAC,CAAC;IACH,MAAM,CAAC,cAAc,CAAC,SAAS,EAAE,WAAW,EAAE;MAC5C,GAAG,EAAE;QACH,OAAO,CAAC,OAAO,CAAC,CAAC;MACnB,CAAC;KACF,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EACH,MAAM,QAAQ,GAAG,MAAM,CAAC,MAAM,CAC5B,EAAE,MAAM,EAAE,OAAO,CAAC,cAAc,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC,MAAM,EAAE,EAC5D,EAAE,KAAK,EAAE,OAAO,CAAC,aAAa,EAAE,CACjC,CAAC;EACF,oBAAoB;EACpB,MAAM,IAAI,CAAC,WAAW,CAAC,QAAQ,CAAC,CAAC;EAEjC,cAAc;EACd,MAAM,IAAI,CAAC,UAAU,CACnB;qDACiD,OAAO,CAAC,IAAI,QAAQ,EACrE,EAAE,SAAS,EAAE,cAAc,EAAE,CAC9B,CAAC;EAEF,2EAA2E;EAC3E,MAAM,IAAI,CAAC,QAAQ,CAAC,CAAC,GAAG,EAAE,EAAE;IAC1B,QAAQ,CAAC,eAAe,CAAC,YAAY,CAAC,KAAK,EAAE,GAAG,CAAC,CAAC;IAClD,QAAQ,CAAC,GAAG,GAAG,GAAG,CAAC;EACrB,CAAC,EAAE,OAAO,CAAC,GAAG,CAAC,CAAC;EAEhB,8DAA8D;EAC9D,MAAM,UAAU,GAAG,IAAI,CAAC,UAAU,CAAC;EACnC,IAAI,CAAC,UAAU,GAAG,KAAK;IACrB,4DAA4D;IAC5D,wDAAwD;IACxD,MAAM,WAAW,GAAG,MAAM,IAAI,CAAC,CAAC,CAAC,aAAa,CAAC,CAAC;IAChD,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,GAAG,MAAM,WAAW,CAAC,WAAW,EAAE,CAAC;IAExD,MAAM,IAAI,CAAC,WAAW,CAAC;MACrB,KAAK,EAAE,IAAI,CAAC,QAAQ,EAAE,CAAC,KAAK;MAC5B,MAAM,EAAE,OAAO,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;KACrD,CAAC,CAAC;IAEH,OAAO,UAAU,CAAC,IAAI,CAAC,IAAI,EAAE;MAC3B,IAAI,EAAE;QACJ,CAAC,EAAE,CAAC;QACJ,CAAC,EAAE,CAAC;QACJ,KAAK,EAAE,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC;QACxB,MAAM,EAAE,OAAO,CAAC,cAAc,IAAI,IAAI,CAAC,KAAK,CAAC,MAAM,CAAC;OACrD;MACD,qBAAqB,EAAE,KAAK;KAC7B,CAAC,CAAC;EACL,CAAC,CAAC;EAEF,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,EAAE,GAAG,CAAC,MAAM,CAAC,CAAC;EAE7E,IAAI,CAAC,UAAU,GAAG,KAAK,EAAE,YAAqB,EAAE,EAAE;IAChD,MAAM,MAAM,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,EAAE,YAAY,EAAE,EAAE;MACxD,MAAM,OAAO,GAAkB;QAC7B,OAAO,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS;QACpD,OAAO,EAAE,CAAC,CAAC,YAAY,GAAG,mBAAmB,CAAC,CAAC;OAChD,CAAC;MACF,MAAM,IAAI,GAAe,EAAE,CAAC;MAC5B,OAAO,MAAM,MAAM,CAAC,GAAG,CAAC,GAAG,CAAC,OAAO,EAAE,IAAI,CAAC,CAAC;IAC7C,CAAC,EAAE,YAAY,CAAC,CAAC;IAEjB,kGAAkG;IAClG,MAAM,UAAU,GAAG,MAAM,CAAC,UAAU;OACjC,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,QAAQ,CAAC,SAAS,CAAC,MAAM,CAAC,CAAC;OACzE,MAAM,CAAC,CAAC,SAAS,EAAE,EAAE;MACpB,SAAS,CAAC,KAAK,GAAG,SAAS,CAAC,KAAK,CAAC,MAAM,CACtC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,MAAM,CAAC,IAAI,EAAE,CAAC,KAAK,CAAC,WAAW,CAAC,CACjD,CAAC;MACF,OAAO,CAAC,CAAC,SAAS,CAAC,KAAK,CAAC,MAAM,CAAC;IAClC,CAAC,CAAC,CAAC;IAEL,MAAM,MAAM,GAAG,UAAU;OACtB,GAAG,CACF,CAAC,UAAU,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,KAAK,YAAY,UAAU,CAAC,EAAE,MACvD,UAAU,CAAC,WACb,KAAK,UAAU,CAAC,IAAI;sBACN,UAAU,CAAC,KAAK;OACzB,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,KAAK,KAAK,IAAI,CAAC,MAAM,GAAG,CAAC;OAClD,IAAI,CAAC,IAAI,CAAC,GAAG,CACnB;OACA,IAAI,CAAC,MAAM,CAAC,CAAC;IAChB,OAAO,MAAM,CAAC;EAChB,CAAC,CAAC;EAEF,OAAO,IAAI,CAAC;AACd,CAAC;AAED,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,GAAG,EAAE,EAAE;EAC9B,OAAO,GAAG;KACP,KAAK,CAAC,EAAE,CAAC;KACT,GAAG,CAAC,CAAC,MAAM,EAAE,GAAG,EAAE,EAAE;IACnB,OAAO,MAAM,CAAC,WAAW,EAAE,KAAK,MAAM;MACpC,CAAC,CAAC,GAAG,GAAG,KAAK,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,EAAE,GAAG,MAAM,CAAC,WAAW,EAAE,EAAE;MAClD,CAAC,CAAC,MAAM,CAAC;EACb,CAAC,CAAC;KACD,IAAI,CAAC,EAAE,CAAC,CAAC;AACd,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,OAAe,EACY,EAAE;EAC7B,OAAO;IACL,gBAAgB,EAAE,KAAK;IACvB,oBAAoB,EAAE,SAAS;IAC/B,kBAAkB,EAAE,GAAG,OAAO,oBAAoB,OAAO,CAAC,QAAQ,EAAE;GACrE,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,qBAAqB,GAAG,CAAC,QAAQ,EAAE,EAAE;EAChD,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;+CA0BsC,QAAQ;;CAEtD,CAAC;AACF,CAAC,CAAC;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG;;;;;;;;;;;;;;;;;;;;;;UAsB1B,CAAC","sourcesContent":["import { newE2EPage, E2EPage } from '@stencil/core/testing';\nimport { Page as PuppeteerPage } from 'puppeteer';\nimport axe, { RunOptions, ContextObject } from 'axe-core';\nimport { MatchImageSnapshotOptions } from 'jest-image-snapshot';\n\ndeclare global {\n  interface Window {\n    axe: typeof axe;\n  }\n}\n\nexport interface NanoE2EPage\n  extends E2EPage,\n    Pick<PuppeteerPage, 'screenshot' | 'viewport'> {\n  reportA11y: (contextQuery?: string) => Promise<string>;\n}\n\ntype NanoE2EPageOptions = {\n  html: string;\n  viewportWidth: number;\n  viewportHeight?: number;\n  dir: 'ltr' | 'rtl';\n};\n\nexport class E2EPlayGround<T> {\n  public props: Partial<T>;\n  public viewportHeight: number;\n  /** element template string. Add `{{ attrs }}` to place the attributes */\n  public template: string;\n  public cssVars: { [key: string]: string };\n  public viewportWidth = 600;\n  public page: NanoE2EPage;\n  public tag: string;\n\n  constructor(setup: { template: string; tag: string } | string) {\n    setup =\n      typeof setup === 'string'\n        ? { template: `<${setup} {{ attrs }}></${setup}>`, tag: setup }\n        : setup;\n    this.template = setup.template;\n    this.tag = setup.tag;\n  }\n\n  private get attrs() {\n    if (!this.props) return '';\n    return Object.entries(this.props)\n      .map(([attr, value]) => `${kebabize(attr)}=\"${value}\"`)\n      .join(' ');\n  }\n\n  private get css() {\n    if (!this.cssVars) return '';\n    return Object.entries(this.cssVars)\n      .map(([attr, value]) => `${attr}: ${value}`)\n      .join('\\n');\n  }\n\n  public async newPage(props?: Partial<T>, docOpts?: { dir: 'rtl' | 'ltr' }) {\n    if (!this.template || !this.tag) {\n      console.warn('no template set');\n      return;\n    }\n\n    this.props = props;\n    this.page = await createPage({\n      html: `\n      <style>\n        :root {\n          ${this.css}\n        }\n      </style>\n      ${this.template.replace(/(\\{\\{ attrs \\}\\})/g, this.attrs)}\n    `,\n      viewportWidth: this.viewportWidth,\n      viewportHeight: this.viewportHeight,\n      dir: docOpts ? docOpts.dir : 'ltr',\n    });\n\n    return this.page;\n  }\n\n  public reportA11y() {\n    if (!this.page) {\n      console.warn('no page rendered');\n      return;\n    }\n    return this.page.reportA11y(this.tag);\n  }\n\n  public component() {\n    if (!this.page) {\n      console.warn('no page rendered');\n      return;\n    }\n    return this.page.find(this.tag);\n  }\n\n  public async componentQuery(selectorStr: string, shadow = true) {\n    if (!this.page) {\n      console.warn('no page rendered');\n      return;\n    }\n    if (!selectorStr) {\n      console.warn('selectorStr not set');\n      return;\n    }\n\n    if (shadow) {\n      return (\n        await this.page.waitForFunction(\n          (args) => {\n            const [tag, selectorStr] = args;\n            return document\n              .querySelector(tag)\n              .shadowRoot.querySelector(selectorStr);\n          },\n          {},\n          [this.tag, selectorStr]\n        )\n      ).asElement();\n    } else {\n      return (\n        await this.page.waitForFunction(\n          (args) => {\n            const [tag, selectorStr] = args;\n            return document.querySelector(tag + ' ' + selectorStr);\n          },\n          {},\n          [this.tag, selectorStr]\n        )\n      ).asElement();\n    }\n  }\n}\n\nexport async function getFocusedElement(\n  page: E2EPage,\n  shadowEleSelector: string = null\n) {\n  if (!shadowEleSelector)\n    return page.evaluateHandle(() => document.activeElement);\n  else {\n    return page.evaluateHandle(\n      (shadowEleSelector) =>\n        document.querySelector(shadowEleSelector).shadowRoot.activeElement,\n      shadowEleSelector\n    );\n  }\n}\n\nexport async function createPage(optionsOrHtml?: string | NanoE2EPageOptions) {\n  const options: NanoE2EPageOptions =\n    typeof optionsOrHtml === 'string'\n      ? { html: optionsOrHtml, viewportWidth: 600, dir: 'ltr' }\n      : optionsOrHtml;\n\n  const page = (await newE2EPage()) as NanoE2EPage;\n\n  // setup navigator langs for consistent localization\n  await page.evaluate(() => {\n    Object.defineProperty(navigator, 'language', {\n      get: function () {\n        return 'en-GB';\n      },\n    });\n    Object.defineProperty(navigator, 'languages', {\n      get: function () {\n        return ['en-GB'];\n      },\n    });\n  });\n  const viewport = Object.assign(\n    { height: options.viewportHeight || page.viewport().height },\n    { width: options.viewportWidth }\n  );\n  // set viewport size\n  await page.setViewport(viewport);\n\n  // add content\n  await page.setContent(\n    `<link rel=\"stylesheet\" href=\"/themes/nanopore.css\">\n    <div class=\"screenshot\" style=\"padding: 1rem;\">${options.html}</div>`,\n    { waitUntil: 'networkidle2' }\n  );\n\n  // set the direction - need to set here as stencil removes it on setContent\n  await page.evaluate((dir) => {\n    document.documentElement.setAttribute('dir', dir);\n    document.dir = dir;\n  }, options.dir);\n\n  // monkey patch screenshot function to add some extra features\n  const screenshot = page.screenshot;\n  page.screenshot = async function () {\n    // get the element's height, and set viewport to that height\n    // this enables us to get full page, clipped screenshots\n    const htmlElement = await page.$('.screenshot');\n    let { width, height } = await htmlElement.boundingBox();\n\n    await page.setViewport({\n      width: page.viewport().width,\n      height: options.viewportHeight || Math.round(height),\n    });\n\n    return screenshot.call(page, {\n      clip: {\n        x: 0,\n        y: 0,\n        width: Math.round(width),\n        height: options.viewportHeight || Math.round(height),\n      },\n      captureBeyondViewport: false,\n    });\n  };\n\n  await page.evaluate(async (source) => await window.eval(source), axe.source);\n\n  page.reportA11y = async (contextQuery?: string) => {\n    const result = await page.evaluate(async (contextQuery) => {\n      const context: ContextObject = {\n        include: contextQuery ? [[contextQuery]] : undefined,\n        exclude: [[contextQuery + ' .button--primary']],\n      };\n      const opts: RunOptions = {};\n      return await window.axe.run(context, opts);\n    }, contextQuery);\n\n    // we only want serious issues and we want to ignore nanopore buttons. We know though they're bad.\n    const violations = result.violations\n      .filter((violation) => [`serious`, `critical`].includes(violation.impact))\n      .filter((violation) => {\n        violation.nodes = violation.nodes.filter(\n          (node) => !node.target.join().match('.button--')\n        );\n        return !!violation.nodes.length;\n      });\n\n    const outout = violations\n      .map(\n        (violations, index) => `(${index}) [Type: ${violations.id}]: ${\n          violations.description\n        } (${violations.help}).\n          Elements: ${violations.nodes\n            .map((node, index) => `[${index}]'${node.target}'`)\n            .join(`, `)}.`\n      )\n      .join(`\\n\\n`);\n    return outout;\n  };\n\n  return page;\n}\n\nexport const kebabize = (str) => {\n  return str\n    .split('')\n    .map((letter, idx) => {\n      return letter.toUpperCase() === letter\n        ? `${idx !== 0 ? '-' : ''}${letter.toLowerCase()}`\n        : letter;\n    })\n    .join('');\n};\n\nexport const screenshotSettings = (\n  dirname: string\n): MatchImageSnapshotOptions => {\n  return {\n    failureThreshold: 0.002,\n    failureThresholdType: 'percent',\n    customSnapshotsDir: `${dirname}/__screenshots__/${process.platform}`,\n  };\n};\n\nexport const waitForVisibleSnippet = (selector) => {\n  return `\n  (function () {\n    function isVisible(elem) {\n      if (!(elem instanceof Element)) throw Error('DomUtil: elem is not an element.');\n      const style = getComputedStyle(elem);\n      if (style.display === 'none') return false;\n      if (style.visibility !== 'visible') return false;\n      if (style.opacity < 0.1) return false;\n      if (elem.offsetWidth + elem.offsetHeight + elem.getBoundingClientRect().height +\n          elem.getBoundingClientRect().width === 0) {\n          return false;\n      }\n      const elemCenter   = {\n          x: elem.getBoundingClientRect().left + elem.offsetWidth / 2,\n          y: elem.getBoundingClientRect().top + elem.offsetHeight / 2\n      };\n      if (elemCenter.x < 0) return false;\n      if (elemCenter.x > (document.documentElement.clientWidth || window.innerWidth)) return false;\n      if (elemCenter.y < 0) return false;\n      if (elemCenter.y > (document.documentElement.clientHeight || window.innerHeight)) return false;\n      let pointContainer = document.elementFromPoint(elemCenter.x, elemCenter.y);\n      do {\n          if (pointContainer === elem) return true;\n      } while (pointContainer = pointContainer.parentNode);\n      return false;\n    }\n    return isVisible(document.querySelector(\"${selector}\"));\n  })()\n`;\n};\n\nexport const stringifyFormSnippet = `\n<div id=\"form-result\"></div>\n<script>\n  var form = document.querySelector('form');\n  var result = document.querySelector('#form-result');\n  form.addEventListener('submit', (e) => {\n    e.preventDefault();\n    var data = new FormData(event.target);\n    var object = {};\n    data.forEach((value, key) => {\n        // Reflect.has in favor of: object.hasOwnProperty(key)\n        if(!Reflect.has(object, key)){\n            object[key] = value;\n            return;\n        }\n        if(!Array.isArray(object[key])){\n            object[key] = [object[key]];\n        }\n        object[key].push(value);\n    });\n    result.innerHTML = JSON.stringify(object);\n  })\n</script>`;\n"]}