Skip to content

Commit c841426

Browse files
RobinMalfaitRobinMalfait
committed
add integration tests
1 parent b0f47e4 commit c841426

File tree

3 files changed

+172
-1
lines changed

3 files changed

+172
-1
lines changed

‎crates/oxide/tests/scanner.rs

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -325,7 +325,7 @@ mod scanner {
325325
("c.less", ""),
326326
]);
327327

328-
assert_eq!(files, vec!["index.html"]);
328+
assert_eq!(files, vec!["a.css", "index.html"]);
329329
assert_eq!(globs, vec!["*"]);
330330
assert_eq!(normalized_sources, vec!["**/*"]);
331331
}

‎integrations/cli/index.test.ts

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1468,6 +1468,80 @@ test(
14681468
},
14691469
)
14701470

1471+
test(
1472+
'changes to CSS files should pick up new CSS variables (if any)',
1473+
{
1474+
fs: {
1475+
'package.json': json`
1476+
{
1477+
"dependencies": {
1478+
"tailwindcss": "workspace:^",
1479+
"@tailwindcss/cli": "workspace:^"
1480+
}
1481+
}
1482+
`,
1483+
'unrelated.module.css': css`
1484+
.module {
1485+
color: var(--color-blue-500);
1486+
}
1487+
`,
1488+
'index.css': css`
1489+
@import 'tailwindcss/theme';
1490+
@import 'tailwindcss/utilities';
1491+
`,
1492+
'index.html': html`<div class="flex"></div>`,
1493+
},
1494+
},
1495+
async ({ spawn, exec, fs, expect }) => {
1496+
// Generate the initial build so output CSS files exist on disk
1497+
await exec('pnpm tailwindcss --input ./index.css --output ./dist/out.css')
1498+
1499+
// NOTE: We are writing to an output CSS file which is not being ignored by
1500+
// `.gitignore` nor marked with `@source not`. This should not result in an
1501+
// infinite loop.
1502+
let process = await spawn(
1503+
'pnpm tailwindcss --input ./index.css --output ./dist/out.css --watch',
1504+
)
1505+
await process.onStderr((m) => m.includes('Done in'))
1506+
1507+
expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
1508+
"
1509+
--- ./dist/out.css ---
1510+
:root, :host {
1511+
--color-blue-500: oklch(0.623 0.214 259.815);
1512+
}
1513+
.flex {
1514+
display: flex;
1515+
}
1516+
"
1517+
`)
1518+
1519+
await fs.write(
1520+
'unrelated.module.css',
1521+
css`
1522+
.module {
1523+
color: var(--color-blue-500);
1524+
background-color: var(--color-red-500);
1525+
}
1526+
`,
1527+
)
1528+
await process.onStderr((m) => m.includes('Done in'))
1529+
1530+
expect(await fs.dumpFiles('./dist/*.css')).toMatchInlineSnapshot(`
1531+
"
1532+
--- ./dist/out.css ---
1533+
:root, :host {
1534+
--color-red-500: oklch(0.637 0.237 25.331);
1535+
--color-blue-500: oklch(0.623 0.214 259.815);
1536+
}
1537+
.flex {
1538+
display: flex;
1539+
}
1540+
"
1541+
`)
1542+
},
1543+
)
1544+
14711545
function withBOM(text: string): string {
14721546
return '\uFEFF' + text
14731547
}

‎integrations/postcss/next.test.ts

Lines changed: 97 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -257,3 +257,100 @@ test(
257257
])
258258
},
259259
)
260+
261+
test(
262+
'changes to CSS files should pick up new CSS variables (if any)',
263+
{
264+
fs: {
265+
'package.json': json`
266+
{
267+
"dependencies": {
268+
"react": "^18",
269+
"react-dom": "^18",
270+
"next": "^14"
271+
},
272+
"devDependencies": {
273+
"@tailwindcss/postcss": "workspace:^",
274+
"tailwindcss": "workspace:^"
275+
}
276+
}
277+
`,
278+
'postcss.config.mjs': js`
279+
export default {
280+
plugins: {
281+
'@tailwindcss/postcss': {},
282+
},
283+
}
284+
`,
285+
'next.config.mjs': js`export default {}`,
286+
'app/layout.js': js`
287+
import './globals.css'
288+
289+
export default function RootLayout({ children }) {
290+
return (
291+
<html>
292+
<body>{children}</body>
293+
</html>
294+
)
295+
}
296+
`,
297+
'app/page.js': js`
298+
export default function Page() {
299+
return <div className="flex"></div>
300+
}
301+
`,
302+
'unrelated.module.css': css`
303+
.module {
304+
color: var(--color-blue-500);
305+
}
306+
`,
307+
'app/globals.css': css`
308+
@import 'tailwindcss/theme';
309+
@import 'tailwindcss/utilities';
310+
`,
311+
},
312+
},
313+
async ({ spawn, exec, fs, expect }) => {
314+
// Generate the initial build so output CSS files exist on disk
315+
await exec('pnpm next build')
316+
317+
// NOTE: We are writing to an output CSS file which is not being ignored by
318+
// `.gitignore` nor marked with `@source not`. This should not result in an
319+
// infinite loop.
320+
let process = await spawn(`pnpm next dev`)
321+
322+
let url = ''
323+
await process.onStdout((m) => {
324+
let match = /Local:\s*(http.*)/.exec(m)
325+
if (match) url = match[1]
326+
return Boolean(url)
327+
})
328+
329+
await process.onStdout((m) => m.includes('Ready in'))
330+
331+
await retryAssertion(async () => {
332+
let css = await fetchStyles(url)
333+
expect(css).toContain(candidate`flex`)
334+
expect(css).toContain('--color-blue-500:')
335+
expect(css).not.toContain('--color-red-500:')
336+
})
337+
338+
await fs.write(
339+
'unrelated.module.css',
340+
css`
341+
.module {
342+
color: var(--color-blue-500);
343+
background-color: var(--color-red-500);
344+
}
345+
`,
346+
)
347+
await process.onStdout((m) => m.includes('Compiled in'))
348+
349+
await retryAssertion(async () => {
350+
let css = await fetchStyles(url)
351+
expect(css).toContain(candidate`flex`)
352+
expect(css).toContain('--color-blue-500:')
353+
expect(css).toContain('--color-red-500:')
354+
})
355+
},
356+
)

0 commit comments

Comments
 (0)