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')),