fixup! [WIP] Replace jsdom with happy-dom testing environment to …

…enable `Modal` tests (#461)
react-ui-org · Jun 1, 2024 · 9151d36 · 9151d36
1 parent 7ad19e6
commit 9151d36
Showing 1 changed file with 28 additions and 18 deletions.
diff --git a/src/components/Grid/__tests__/Grid.test.jsx b/src/components/Grid/__tests__/Grid.test.jsx
@@ -84,15 +84,20 @@ describe('rendering', () => {
       { children: <div>content text</div> },
       (rootElement) => expect(within(rootElement).getByText('content text')),
     ],
-    // Those tests are temporarily disabled due to unexpected behavior of the testing library
-    // [
-    //   { columnGap: responsiveSpacingBreakpoints },
-    //   (rootElement) => expect(rootElement).toHaveStyle(responsiveSpacingStyles('column-gap')),
-    // ],
-    // [
-    //   { columnGap: 0 },
-    //   (rootElement) => expect(rootElement).toHaveStyle({ '--rui-local-column-gap-xs': 'var(--rui-dimension-space-0)' }),
-    // ],
+    // 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.
+    [
+      { columnGap: responsiveSpacingBreakpoints },
+      (rootElement) => {
+        Object.entries(responsiveSpacingStyles('column-gap')).forEach(([ccsAttribute, cssValue]) => {
+          expect(rootElement.outerHTML.includes(`${ccsAttribute}: ${cssValue}`)).toBeTruthy();
+        });
+      },
+    ],
+    [
+      { columnGap: 0 },
+      (rootElement) => expect(rootElement.outerHTML.includes('--rui-local-column-gap-xs: var(--rui-dimension-space-0)')).toBeTruthy(),
+    ],
     [
       { columns: responsiveBreakpoints },
       (rootElement) => expect(rootElement).toHaveStyle(responsiveStyles('columns')),
@@ -117,15 +122,20 @@ describe('rendering', () => {
       { justifyItems: 'placeholder' },
       (rootElement) => expect(rootElement).toHaveStyle({ '--rui-local-justify-items-xs': 'placeholder' }),
     ],
-    // Those tests are temporarily disabled due to unexpected behavior of the testing library
-    // [
-    //   { rowGap: responsiveSpacingBreakpoints },
-    //   (rootElement) => expect(rootElement).toHaveStyle(responsiveSpacingStyles('row-gap')),
-    // ],
-    // [
-    //   { rowGap: 0 },
-    //   (rootElement) => expect(rootElement).toHaveStyle({ '--rui-local-row-gap-xs': 'var(--rui-dimension-space-0)' }),
-    // ],
+    // 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.
+    [
+      { rowGap: responsiveSpacingBreakpoints },
+      (rootElement) => {
+        Object.entries(responsiveSpacingStyles('row-gap')).forEach(([ccsAttribute, cssValue]) => {
+          expect(rootElement.outerHTML.includes(`${ccsAttribute}: ${cssValue}`)).toBeTruthy();
+        });
+      },
+    ],
+    [
+      { rowGap: 0 },
+      (rootElement) => expect(rootElement.outerHTML.includes('--rui-local-row-gap-xs: var(--rui-dimension-space-0)')).toBeTruthy(),
+    ],
     [
       { rows: responsiveBreakpoints },
       (rootElement) => expect(rootElement).toHaveStyle(responsiveStyles('rows')),