[WIP] Replace `jsdom` with `happy-dom` testing environment to enable `Modal` tests (#461)
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.~~
The problem is in var() values. For exact values it works as expected.
See: https://github.com/jsdom/jsdom/pull/3299
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.