react-ui icon indicating copy to clipboard operation
react-ui copied to clipboard

[WIP] Replace `jsdom` with `happy-dom` testing environment to enable `Modal` tests (#461)

Open bedrich-schindler opened this issue 1 year ago • 2 comments

This is work-in-progress pull request!

~~I've replaced jsdom with happy-dom testing environment and with little changes (typically because of use of incorrect jest functions ) and Modal tests with <dialog> works almost as expected. But for some reason, there are 4 tests in Grid.test.jsx that does not work. TBH, I don't know why.~~

~~I debbuged test functions, respectively toHaveStyle which is part of node_modules/@testing-library/jest-dom/dist/matchers-342a062d.js. toHaveStyle internally uses isSubset function`. I edited function to be able to debug it step-by-step:

function isSubset(styles, computedStyle) {
  return (
    !!Object.keys(styles).length &&
    Object.entries(styles).every(([prop, value]) => {
      const isCustomProperty = prop.startsWith('--');
      const spellingVariants = [prop];
      if (!isCustomProperty) spellingVariants.push(prop.toLowerCase());

      return spellingVariants.some(
        name => {
          const a = computedStyle[name];
          const b = computedStyle.getPropertyValue(name);
          const v = [];
          for (let i = 0; i < computedStyle.length; i++) {
            v.push(computedStyle.item(i));
          }

          return a === value ||
            b === value;
        },
      )
    })
  )
}

~~And for some reason, not all CSS properties are part of computed styles (variable v) and that's the reason why the tests fails.~~

~~Can anybody look at it? Can we discuss if this is the right way? Because without happy-dom, we won't be able to test our Modal component which is problem guys from LMC's Spirit Design System encountered. (cc @adamkudrna @crishpeen @literat).~~

~~If we want to have Modal tested, we either skip those tests for rowGap and columnGap or we can test it different way, for example using .outerHTML.contains(<css>). It is not perfect nor good, but it works at least.~~

bedrich-schindler avatar May 31 '24 11:05 bedrich-schindler

The problem is in var() values. For exact values it works as expected.

See: https://github.com/jsdom/jsdom/pull/3299

bedrich-schindler avatar May 31 '24 11:05 bedrich-schindler

Because of missing support for var() in testing environment, I have updated Grid.test.jsx to compare styles using outerHTML.includes(<CSS>) - the only way how to test it now.

It ready for review.

A mentioned guys from Spirit team for inspiration as their Modal is missing tests.

bedrich-schindler avatar Jun 01 '24 08:06 bedrich-schindler