diff --git a/src/components/Grid/__tests__/Grid.test.jsx b/src/components/Grid/__tests__/Grid.test.jsx
index 5057f194..f330722e 100644
--- a/src/components/Grid/__tests__/Grid.test.jsx
+++ b/src/components/Grid/__tests__/Grid.test.jsx
@@ -84,15 +84,20 @@ describe('rendering', () => {
{ children:
content text
},
(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')),