test(e2e): add css-modules-pure-no-check.test.ts

samcx · samcx · commit 04b7533b55fe · 2025-03-31T16:53:32.000-07:00
diff --git a/test/e2e/app-dir/css-modules-pure-no-check/app/home.module.css b/test/e2e/app-dir/css-modules-pure-no-check/app/home.module.css
@@ -0,0 +1,19 @@
+/* cssmodules-pure-no-check */
+
+/* View Transitions API - requires global scope to work properly */
+:global(::view-transition-old(root)) {
+  animation-duration: 0.3s;
+}
+
+/* a local class */
+.home {
+  background-color: #f0f0f0;
+  color: #333;
+  font-size: 16px;
+  padding: 20px;
+}
+
+/* a global class */
+:global(.global) {
+  font-weight: 700;
+}
diff --git a/test/e2e/app-dir/css-modules-pure-no-check/app/layout.tsx b/test/e2e/app-dir/css-modules-pure-no-check/app/layout.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from 'react'
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: ReactNode
+}>) {
+  return (
+    <html lang="en">
+      <body>{children}</body>
+    </html>
+  )
+}
diff --git a/test/e2e/app-dir/css-modules-pure-no-check/app/page.tsx b/test/e2e/app-dir/css-modules-pure-no-check/app/page.tsx
@@ -0,0 +1,9 @@
+import styles from './home.module.css'
+
+export default function Home() {
+  return (
+    <div id="my-div" className={`${styles.home} global`}>
+      <div>This text should be bold</div>
+    </div>
+  )
+}
diff --git a/test/e2e/app-dir/css-modules-pure-no-check/css-modules-pure-no-check.test.ts b/test/e2e/app-dir/css-modules-pure-no-check/css-modules-pure-no-check.test.ts
@@ -0,0 +1,35 @@
+import { nextTestSetup } from 'e2e-utils'
+import cheerio from 'cheerio'
+
+describe('css-modules-pure-no-check', () => {
+  const { next } = nextTestSetup({
+    files: __dirname,
+  })
+
+  it('should apply styles correctly', async () => {
+    const browser = await next.browser('/')
+
+    const elementWithGlobalStyles = await browser
+      .elementByCss('#my-div')
+      .getComputedCss('font-weight')
+
+    expect(elementWithGlobalStyles).toBe('700')
+  })
+
+  it('should have emitted a CSS file', async () => {
+    const html = await next.render('/')
+    const $html = cheerio.load(html)
+
+    const cssLink = $html('link[rel="stylesheet"]')
+    expect(cssLink.length).toBe(1)
+    const cssHref = cssLink[0].attribs['href']
+
+    const res = await next.fetch(cssHref)
+    const cssCode = await res.text()
+
+    expect(cssCode).toInclude(`.global{font-weight:700}`)
+    expect(cssCode).toInclude(
+      `::view-transition-old(root){animation-duration:.3s}`
+    )
+  })
+})
diff --git a/test/e2e/app-dir/css-modules-pure-no-check/next.config.ts b/test/e2e/app-dir/css-modules-pure-no-check/next.config.ts
@@ -0,0 +1,7 @@
+import type { NextConfig } from 'next'
+
+const nextConfig: NextConfig = {
+  /* config options here */
+}
+
+export default nextConfig
