Skip to content

Commit 11a1b1d

Browse files
harlan-zwharlan-zw
committed
chore(tests): add test for non-applied jsx @apply, tests #89 
1 parent 59e3e52 commit 11a1b1d

File tree

4 files changed

+96
-2
lines changed

4 files changed

+96
-2
lines changed

‎test/__snapshots__/tranform-template.test.js.snap‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,74 @@ body {
3434
}"
3535
`;
3636
37+
exports[`Transform template test should render jsx: layout1 1`] = `
38+
"import 'virtual:windi.css';
39+
export default function Layout({
40+
title,
41+
children
42+
}) {
43+
return /*#__PURE__*/React.createElement(\\"div\\", {
44+
id: \\"layout-wrapper\\",
45+
className: 'bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100'
46+
}, /*#__PURE__*/React.createElement(Head, null, /*#__PURE__*/React.createElement(\\"title\\", null, title)), children, /*#__PURE__*/React.createElement(\\"style\\", {
47+
jsx: true,
48+
global: true
49+
}, \`body:hover {
50+
--tw-bg-opacity: 1;
51+
background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
52+
font-size: 0.75rem;
53+
line-height: 1rem;
54+
}
55+
body {
56+
height: 100vh;
57+
margin: 0px;
58+
overflow: hidden;
59+
padding: 0px;
60+
width: 100vw;
61+
font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI',
62+
'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
63+
'Helvetica Neue', 'sans-serif';
64+
-webkit-font-smoothing: antialiased;
65+
-moz-osx-font-smoothing: grayscale;
66+
}
67+
\`));
68+
}"
69+
`;
70+
71+
exports[`Transform template test should render jsx: layout2 1`] = `
72+
"import 'virtual:windi.css';
73+
export default function Layout({
74+
title,
75+
children
76+
}) {
77+
return /*#__PURE__*/React.createElement(\\"div\\", {
78+
id: \\"layout-wrapper\\",
79+
className: \\"bg-gray-100 text-gray-900\\"
80+
}, /*#__PURE__*/React.createElement(Head, null, /*#__PURE__*/React.createElement(\\"title\\", null, title)), children, /*#__PURE__*/React.createElement(\\"style\\", {
81+
jsx: true,
82+
global: true
83+
}, \`body:hover {
84+
--tw-bg-opacity: 1;
85+
background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
86+
font-size: 0.75rem;
87+
line-height: 1rem;
88+
}
89+
body {
90+
height: 100vh;
91+
margin: 0px;
92+
overflow: hidden;
93+
padding: 0px;
94+
width: 100vw;
95+
font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI',
96+
'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
97+
'Helvetica Neue', 'sans-serif';
98+
-webkit-font-smoothing: antialiased;
99+
-moz-osx-font-smoothing: grayscale;
100+
}
101+
\`));
102+
}"
103+
`;
104+
37105
exports[`Transform template test should render jsx: vue windi 1`] = `
38106
"// Imports
39107
import ___CSS_LOADER_API_IMPORT___ from \\"../../../node_modules/css-loader/dist/runtime/api.js\\";

‎test/fixtures/react/index.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,2 @@
11
require ('./templates/layout.jsx')
2+
require ('./templates/layout2.jsx')

‎test/fixtures/react/templates/layout2.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import 'virtual:windi.css'
2+
3+
export default function Layout({ title, children }) {
4+
return (
5+
<div id="layout-wrapper" className="bg-gray-100 text-gray-900">
6+
<Head>
7+
<title >{title}</title>
8+
</Head>
9+
{children}
10+
<style jsx global>{`
11+
body {
12+
@apply m-0 p-0 w-100vw h-100vh overflow-hidden hover:(bg-blue-500 text-xs);
13+
font-family: '-apple-system', 'BlinkMacSystemFont', 'Segoe UI',
14+
'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
15+
'Helvetica Neue', 'sans-serif';
16+
-webkit-font-smoothing: antialiased;
17+
-moz-osx-font-smoothing: grayscale;
18+
}
19+
`}</style>
20+
</div>
21+
)
22+
}

‎test/tranform-template.test.js‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,12 @@ describe("Transform template test", function() {
1010
const compiler = reactWebpackCompiler()
1111
compiler.run((err, stats) => {
1212
expect(stats.compilation.errors).toStrictEqual([])
13-
const transformedLayout = getModuleSource('layout.jsx', stats)
13+
let transformedLayout = getModuleSource('layout.jsx', stats)
1414
expect(transformedLayout).not.toContain('@apply')
15-
expect(transformedLayout).toMatchSnapshot()
15+
expect(transformedLayout).toMatchSnapshot('layout1')
16+
transformedLayout = getModuleSource('layout2.jsx', stats)
17+
expect(transformedLayout).not.toContain('@apply')
18+
expect(transformedLayout).toMatchSnapshot('layout2')
1619
// check the windi file has generated the right classes
1720
const windi = getModuleSource('virtual:windi.css', stats)
1821
expect(windi).toContain('bg-blue-500')

0 commit comments

Comments
 (0)