packages/components/containers/challenge/challengeHelper.ts

   1 import ReactTestUtils from 'react-dom/test-utils';
   2
   3 // Select option is broken on react. Correct the HTML here.
   4 export const normalizeSelectOptions = (el: HTMLElement) => {
   5     el.querySelectorAll('select').forEach((selectEl) => {
   6         for (let i = 0; i < selectEl.children.length; ++i) {
   7             const liEl = selectEl.children[i];
   8             if (i === selectEl.selectedIndex) {
   9                 liEl.setAttribute('selected', 'true');
  10             } else {
  11                 liEl.removeAttribute('selected');
  12             }
  13         }
  14     });
  15 };
  16
  17 interface EventPayload {
  18     type: string;
  19     id?: string;
  20     value?: string;
  21     key?: string;
  22 }
  23
  24 export const handleEvent = (renderEl: HTMLElement | undefined, eventPayload: EventPayload) => {
  25     if (!renderEl) {
  26         return;
  27     }
  28     const { type, id } = eventPayload;
  29     if (type === 'keydown' && id) {
  30         const inputEl = renderEl.querySelector<HTMLInputElement>(`#${id}`);
  31         if (inputEl) {
  32             ReactTestUtils.Simulate.keyDown(inputEl, { key: eventPayload.key });
  33         }
  34     }
  35     if (type === 'input' && id) {
  36         const inputEl = renderEl.querySelector<HTMLInputElement>(`#${id}`);
  37         if (inputEl) {
  38             inputEl.value = eventPayload.value || '';
  39             ReactTestUtils.Simulate.change(inputEl);
  40         }
  41     }
  42     if (type === 'click' && id) {
  43         const targetEl = renderEl.querySelector(`#${id}`);
  44         if (targetEl) {
  45             ReactTestUtils.Simulate.click(targetEl);
  46         }
  47     }
  48 };
  49
  50 export const getStyleSrcUrls = () => {
  51     return [...document.querySelectorAll<HTMLLinkElement>('link[rel=stylesheet]')].reduce<string[]>((acc, link) => {
  52         const url = new URL(link.href, window.location.origin);
  53         if (url.origin.startsWith(window.location.origin) && url.pathname.endsWith('.css')) {
  54             acc.push(url.toString());
  55         }
  56         return acc;
  57     }, []);
  58 };
  59
  60 export const getStyleSrcsData = (styleSrcUrls: string[]) => {
  61     return Promise.all(
  62         styleSrcUrls.map(async (styleSrcUrls) => {
  63             const response = await fetch(styleSrcUrls);
  64             const text = await response.text();
  65             const trimmedText = text.replace(/^\s+/, '');
  66             if (!(response.status >= 200 && response.status < 300) || trimmedText[0] === '<') {
  67                 throw new Error('Invalid asset loading');
  68             }
  69             return [...trimmedText.matchAll(/url\(\/(assets\/[^)]+)\)/g)]
  70                 .map((matchArray) => {
  71                     const [all, match] = matchArray;
  72                     const newUrl = new URL(match, window.location.origin);
  73                     // Chrome uses the cached font response making CORS fail.
  74                     // Cache bust it by adding a query parameter.
  75                     newUrl.searchParams.set('t', `${Date.now()}`);
  76                     return {
  77                         all,
  78                         newUrl: newUrl.toString(),
  79                     };
  80                 })
  81                 .reduce((acc, cur) => {
  82                     return acc.replace(cur.all, `url(${cur.newUrl})`);
  83                 }, trimmedText);
  84         })
  85     ).then((results) => {
  86         return results.join('');
  87     });
  88 };