[WIP] 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?

[adamkudrna]

Could you check this please?

[adamkudrna]

+1 for not forgetting to remove this 🙂.

[adamkudrna]

Suggested change

	// Two following tests must used rootElement.outerHTML.includes() to test presence of CSS variables in the DOM,
	// because the `toHaveStyle` matcher does not support CSS variables with var() function.
	// The following tests must use `rootElement.outerHTML.includes()` to test presence of CSS variables in the DOM
	// because the `toHaveStyle` matcher does not support reading CSS variables via the `var()` function.

It's twice in this document.

[adamkudrna]

Suggested change

	Object.entries(responsiveSpacingStyles('row-gap')).forEach(([ccsAttribute, cssValue]) => {
	expect(rootElement.outerHTML.includes(`${ccsAttribute}: ${cssValue}`)).toBeTruthy();
	Object.entries(responsiveSpacingStyles('row-gap')).forEach(([cssAttribute, cssValue]) => {
	expect(rootElement.outerHTML.includes(`${cssAttribute}: ${cssValue}`)).toBeTruthy();