-
Notifications
You must be signed in to change notification settings - Fork 292
/
jest-dom.test.ts
37 lines (32 loc) · 1.37 KB
/
jest-dom.test.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/**
* @jest-environment jsdom
*/
import { screen } from '@testing-library/dom';
import { assignInlineVars } from '@vanilla-extract/dynamic';
import { hide, padding, twentyTheme, blackBg, vars } from './jest-dom.css';
describe('jest-dom', () => {
it('should attach css to nodes', () => {
document.body.innerHTML = `
<div data-testid="hidden" class="${hide}">Hidden Example</div>
<div data-testid="blackBg" class="${blackBg}">Hidden Example</div>
`;
expect(screen.queryByTestId('hidden')).not.toBeVisible();
expect(screen.queryByTestId('blackBg')).toHaveStyle({
backgroundColor: 'rgb(0, 0, 0)',
});
});
// CSS vars seem to be broken in jsdom/cssom/cssstyle (whichever one is relevant here)
// As far as I can tell the issue is not on our end
it.skip('should support css variables', () => {
document.body.innerHTML = `
<div data-testid="10" class="${padding}">10 padding top</div>
<div data-testid="20" class="${twentyTheme} ${padding}">20 padding top</div>
<div data-testid="30" style="${assignInlineVars(vars, {
space: '30px',
})}" class="${padding}">20 padding top</div>
`;
expect(screen.queryByTestId('10')).toHaveStyle({ paddingTop: '10px' });
expect(screen.queryByTestId('20')).toHaveStyle({ paddingTop: '20px' });
expect(screen.queryByTestId('30')).toHaveStyle({ paddingTop: '30px' });
});
});