packages/testing/testing-helpers/index.js
/**
 * Takes the web component markup passed in, waits for it to render, then returns back the rendered inner and outer HTML
 * @param {*} componentTag - the web component HTML tag being rendered
 * @param {String} html - the actual HTML being rendered
 * @param {*} page - puppeteer page instance to render within
 * @param {Array} extraSelectors - extra web component selectors to wait to finish rendering before returning
 */
Takes the web component markup passed in, waits for it to render, then returns back the rendered inner and outer HTML
@param {*} componentTag - the web component HTML tag being rendered
@param {String} html - the actual HTML being rendered
@param {*} page - puppeteer page instance to render within
@param {Array} extraSelectors - extra web component selectors to wait to finish rendering before returning
Takes the web component markup passed in waits for it to render then returns back the rendered inner and outer HTML @param { * } componentTag - the web component HTML tag being rendered @param { String } html - the actual HTML being rendered @param { * } page - puppeteer page instance to render within @param { Array } extraSelectors - extra web component selectors to wait to finish rendering before returning
async function renderWC(componentTag, html, page) {
  const uuid = uuidv4();
  return await page.evaluate(
    async (htmlResults, componentTag, uuid) => {
      const uuidSelector = `js-${uuid}`;
      document.body.insertAdjacentHTML(
        'beforeend',
        `<span class="${uuidSelector}">${htmlResults}</span>`,
      );
      const undefinedElements = document.querySelectorAll(
        `${componentTag}, ssr-keep`,
      );
      const promises = [...undefinedElements].map(
        elem =>
          new Promise((resolve, reject) => {
            const interval = setInterval(() => {
              if (typeof elem.firstUpdated === 'function') {
                resolve();
                clearInterval(interval);
              }
            });
            setTimeout(() => {
              resolve();
            }, 5000);
          }),
      );
      await Promise.all(promises);
      const component = document.querySelector(
        `.${uuidSelector} ${componentTag}`,
      );
      return {
        innerHTML: component.renderRoot.innerHTML,
        outerHTML: component.outerHTML,
      };
    },
    html,
    componentTag,
    uuid,
  );
}
async function renderWC ( componentTag , html , page ) { const uuid = uuidv4 ( ) ; return await page . evaluate ( async ( htmlResults , componentTag , uuid ) => { const uuidSelector = ` ${ uuid } ` ; document . body . insertAdjacentHTML ( 'beforeend' , ` ${ uuidSelector } ${ htmlResults } ` , ) ; const undefinedElements = document . querySelectorAll ( ` ${ componentTag } ` , ) ; const promises = [ ... undefinedElements ] . map ( elem => new Promise ( ( resolve , reject ) => { const interval = setInterval ( ( ) => { if ( typeof elem . firstUpdated === 'function' ) { resolve ( ) ; clearInterval ( interval ) ; } } ) ; setTimeout ( ( ) => { resolve ( ) ; } , 5000 ) ; } ) , ) ; await Promise . all ( promises ) ; const component = document . querySelector ( ` ${ uuidSelector } ${ componentTag } ` , ) ; return { innerHTML : component . renderRoot . innerHTML , outerHTML : component . outerHTML , } ; } , html , componentTag , uuid , ) ; }
Takes the web component markup passed in, waits for it to render, then returns back the rendered inner and outer HTML
 @param {*} componentTag - the web component HTML tag being rendered
 @param {String} html - the actual HTML being rendered
 @param {*} page - puppeteer page instance to render within
 @param {Array} extraSelectors - extra web component selectors to wait to finish rendering before returning
Takes the web component markup passed in waits for it to render then returns back the rendered inner and outer HTML @param { * } componentTag - the web component HTML tag being rendered @param { String } html - the actual HTML being rendered @param { * } page - puppeteer page instance to render within @param { Array } extraSelectors - extra web component selectors to wait to finish rendering before returning
// Here in the Jest `page` context, `customElements` and `whenDefined` do not exist. // It's not a complete DOM. We must set a timer and wait for component to be ready, then return. // Consider component loaded once this is true // bail after 5 seconds