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

[bedrich-schindler]

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]

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

See: jsdom/jsdom#3299

[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.

[adamkudrna]

As far as I can understand what's going on, a ✅ for me.

[adamkudrna]

It could still be getByRole('dialog'), couldn't it?

[adamkudrna]

Do we have any jsdom/happy-dom issues to link to so we can remove this in future?

[bedrich-schindler]

We don't. This is not only think that lacks support. I would write more about it later or I would speak about it on Monday.

[bedrich-schindler]

HTML dialog handles focus trap manually, so there is no need to test it. What more, it does not work in testing environment as it is not implemented.