Move scss tests into individual directories (#62277)

## What?

Further simplifying the way the tests are created for Sass so that they
can be moved into `test/e2e` in a follow-up PR.


<!-- Thanks for opening a PR! Your contribution is much appreciated.
To make sure your PR is handled as smoothly as possible we request that
you follow the checklist sections below.
Choose the right checklist for the change(s) that you're making:

## For Contributors

### Improving Documentation

- Run `pnpm prettier-fix` to fix formatting issues before opening the
PR.
- Read the Docs Contribution Guide to ensure your contribution follows
the docs guidelines:
https://nextjs.org/docs/community/contribution-guide

### Adding or Updating Examples

- The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- Make sure the linting passes by running `pnpm build && pnpm lint`. See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

### Fixing a bug

- Related issues linked using `fixes #number`
- Tests added. See:
https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md

### Adding a feature

- Implements an existing feature request or RFC. Make sure the feature
request has been accepted for implementation before opening a PR. (A
discussion must be opened, see
https://github.com/vercel/next.js/discussions/new?category=ideas)
- Related issues/discussions are linked using `fixes #number`
- e2e tests added
(https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs)
- Documentation added
- Telemetry added. In case of a feature if it's used or not.
- Errors have a helpful link attached, see
https://github.com/vercel/next.js/blob/canary/contributing.md


## For Maintainers

- Minimal description (aim for explaining to someone not on the team to
understand the PR)
- When linking to a Slack thread, you might want to share details of the
conclusion
- Link both the Linear (Fixes NEXT-xxx) and the GitHub issues
- Add review comments if necessary to explain to the reviewer the logic
behind a change

### What?

### Why?

### How?

Closes NEXT-
Fixes #

-->


Closes NEXT-2537

test/integration/scss/scss-fixtures/3rd-party-module/3rd-party-module.test.js

@@ -0,0 +1,72 @@
+/* eslint-env jest */
+
+import cheerio from 'cheerio'
+import { readdir, readFile, remove } from 'fs-extra'
+import {
+  findPort,
+  killApp,
+  nextBuild,
+  nextStart,
+  renderViaHTTP,
+} from 'next-test-utils'
+import { join } from 'path'
+
+describe('3rd Party CSS Module Support', () => {
+  ;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
+    const appDir = __dirname
+
+    let appPort
+    let app
+    let stdout
+    let code
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+      ;({ code, stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      }))
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+    })
+
+    it('should have compiled successfully', () => {
+      expect(code).toBe(0)
+      expect(stdout).toMatch(/Compiled successfully/)
+    })
+
+    it(`should've emitted a single CSS file`, async () => {
+      const cssFolder = join(appDir, '.next/static/css')
+
+      const files = await readdir(cssFolder)
+      const cssFiles = files.filter((f) => /\.css$/.test(f))
+
+      expect(cssFiles.length).toBe(1)
+      const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
+
+      expect(
+        cssContent.replace(/\/\*.*?\*\//g, '').trim()
+      ).toMatchInlineSnapshot(
+        `".index_foo__72b4D{position:relative}.index_foo__72b4D .bar,.index_foo__72b4D .baz{height:100%;overflow:hidden}.index_foo__72b4D .lol,.index_foo__72b4D>.lel{width:80%}"`
+      )
+    })
+
+    it(`should've injected the CSS on server render`, async () => {
+      const content = await renderViaHTTP(appPort, '/')
+      const $ = cheerio.load(content)
+
+      const cssPreload = $('link[rel="preload"][as="style"]')
+      expect(cssPreload.length).toBe(1)
+      expect(cssPreload.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
+
+      const cssSheet = $('link[rel="stylesheet"]')
+      expect(cssSheet.length).toBe(1)
+      expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
+
+      expect($('#verify-div').attr('class')).toMatchInlineSnapshot(
+        `"index_foo__72b4D"`
+      )
+    })
+  })
+})

test/integration/scss/scss-fixtures/basic-module-include-paths/basic-module-include-paths.test.js

@@ -0,0 +1,35 @@
+/* eslint-env jest */
+
+import { readdir, readFile, remove } from 'fs-extra'
+import { nextBuild } from 'next-test-utils'
+import { join } from 'path'
+
+describe('Basic Module Include Paths Support', () => {
+  ;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
+    const appDir = __dirname
+
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+    })
+
+    it('should compile successfully', async () => {
+      const { code, stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      })
+      expect(code).toBe(0)
+      expect(stdout).toMatch(/Compiled successfully/)
+    })
+
+    it(`should've emitted a single CSS file`, async () => {
+      const cssFolder = join(appDir, '.next/static/css')
+
+      const files = await readdir(cssFolder)
+      const cssFiles = files.filter((f) => /\.css$/.test(f))
+
+      expect(cssFiles.length).toBe(1)
+      expect(await readFile(join(cssFolder, cssFiles[0]), 'utf8')).toContain(
+        'color:red'
+      )
+    })
+  })
+})

test/integration/scss/scss-fixtures/basic-module-prepend-data/basic-module-prepend-data.test.js

@@ -0,0 +1,35 @@
+/* eslint-env jest */
+
+import { readdir, readFile, remove } from 'fs-extra'
+import { nextBuild } from 'next-test-utils'
+import { join } from 'path'
+
+describe('Basic Module Prepend Data Support', () => {
+  ;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
+    const appDir = __dirname
+
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+    })
+
+    it('should compile successfully', async () => {
+      const { code, stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      })
+      expect(code).toBe(0)
+      expect(stdout).toMatch(/Compiled successfully/)
+    })
+
+    it(`should've emitted a single CSS file`, async () => {
+      const cssFolder = join(appDir, '.next/static/css')
+
+      const files = await readdir(cssFolder)
+      const cssFiles = files.filter((f) => /\.css$/.test(f))
+
+      expect(cssFiles.length).toBe(1)
+      expect(await readFile(join(cssFolder, cssFiles[0]), 'utf8')).toContain(
+        'color:red'
+      )
+    })
+  })
+})

test/integration/scss/scss-fixtures/basic-module/basic-module.test.js

@@ -0,0 +1,70 @@
+/* eslint-env jest */
+
+import cheerio from 'cheerio'
+import { readdir, readFile, remove } from 'fs-extra'
+import {
+  findPort,
+  killApp,
+  nextBuild,
+  nextStart,
+  renderViaHTTP,
+} from 'next-test-utils'
+import { join } from 'path'
+
+describe('Basic SCSS Module Support', () => {
+  ;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
+    const appDir = __dirname
+
+    let appPort
+    let app
+    let stdout
+    let code
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+      ;({ code, stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      }))
+      appPort = await findPort()
+      app = await nextStart(appDir, appPort)
+    })
+    afterAll(async () => {
+      await killApp(app)
+    })
+
+    it('should have compiled successfully', () => {
+      expect(code).toBe(0)
+      expect(stdout).toMatch(/Compiled successfully/)
+    })
+
+    it(`should've emitted a single CSS file`, async () => {
+      const cssFolder = join(appDir, '.next/static/css')
+
+      const files = await readdir(cssFolder)
+      const cssFiles = files.filter((f) => /\.css$/.test(f))
+
+      expect(cssFiles.length).toBe(1)
+      const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
+
+      expect(
+        cssContent.replace(/\/\*.*?\*\//g, '').trim()
+      ).toMatchInlineSnapshot(`".index_redText__zXafh{color:red}"`)
+    })
+
+    it(`should've injected the CSS on server render`, async () => {
+      const content = await renderViaHTTP(appPort, '/')
+      const $ = cheerio.load(content)
+
+      const cssPreload = $('link[rel="preload"][as="style"]')
+      expect(cssPreload.length).toBe(1)
+      expect(cssPreload.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
+
+      const cssSheet = $('link[rel="stylesheet"]')
+      expect(cssSheet.length).toBe(1)
+      expect(cssSheet.attr('href')).toMatch(/^\/_next\/static\/css\/.*\.css$/)
+
+      expect($('#verify-red').attr('class')).toMatchInlineSnapshot(
+        `"index_redText__zXafh"`
+      )
+    })
+  })
+})

test/integration/scss/test/scss-modules-dynamic-route.test.js → test/integration/scss/scss-fixtures/catch-all-module/catch-all-module.test.js

@@ -5,61 +5,9 @@ import { findPort, killApp, nextBuild, nextStart } from 'next-test-utils'
 import webdriver from 'next-webdriver'
 import { join } from 'path'
 
-const fixturesDir = join(__dirname, '..', 'scss-fixtures')
-
-describe('Dynamic Route CSS Module Usage', () => {
-  ;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
-    const appDir = join(fixturesDir, 'dynamic-route-module')
-
-    let stdout
-    let code
-    let app
-    let appPort
-
-    beforeAll(async () => {
-      await remove(join(appDir, '.next'))
-      ;({ code, stdout } = await nextBuild(appDir, [], {
-        stdout: true,
-      }))
-      appPort = await findPort()
-      app = await nextStart(appDir, appPort)
-    })
-    afterAll(() => killApp(app))
-
-    it('should have compiled successfully', () => {
-      expect(code).toBe(0)
-      expect(stdout).toMatch(/Compiled successfully/)
-    })
-
-    it(`should've emitted a single CSS file`, async () => {
-      const cssFolder = join(appDir, '.next/static/css')
-
-      const files = await readdir(cssFolder)
-      const cssFiles = files.filter((f) => /\.css$/.test(f))
-
-      expect(cssFiles.length).toBe(1)
-      const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
-
-      expect(
-        cssContent.replace(/\/\*.*?\*\//g, '').trim()
-      ).toMatchInlineSnapshot(`"._post__home__ZI5mq{background:red}"`)
-    })
-
-    it('should apply styles correctly', async () => {
-      const browser = await webdriver(appPort, '/post-1')
-
-      const background = await browser
-        .elementByCss('#my-div')
-        .getComputedCss('background-color')
-
-      expect(background).toMatch(/rgb(a|)\(255, 0, 0/)
-    })
-  })
-})
-
 describe('Catch-all Route CSS Module Usage', () => {
   ;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
-    const appDir = join(fixturesDir, 'catch-all-module')
+    const appDir = __dirname
 
     let stdout
     let code

test/integration/scss/scss-fixtures/compilation-and-prefixing/compilation-and-prefixing.test.js

@@ -0,0 +1,76 @@
+/* eslint-env jest */
+
+import { readdir, readFile, remove } from 'fs-extra'
+import { nextBuild } from 'next-test-utils'
+import { join } from 'path'
+
+describe('SCSS Support', () => {
+  ;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
+    describe('CSS Compilation and Prefixing', () => {
+      const appDir = __dirname
+
+      beforeAll(async () => {
+        await remove(join(appDir, '.next'))
+      })
+
+      it('should compile successfully', async () => {
+        const { code, stdout } = await nextBuild(appDir, [], {
+          stdout: true,
+        })
+        expect(code).toBe(0)
+        expect(stdout).toMatch(/Compiled successfully/)
+      })
+
+      it(`should've compiled and prefixed`, async () => {
+        const cssFolder = join(appDir, '.next/static/css')
+
+        const files = await readdir(cssFolder)
+        const cssFiles = files.filter((f) => /\.css$/.test(f))
+
+        expect(cssFiles.length).toBe(1)
+        const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
+        expect(
+          cssContent.replace(/\/\*.*?\*\//g, '').trim()
+        ).toMatchInlineSnapshot(
+          `".redText ::placeholder{color:red}.flex-parsing{flex:0 0 calc(50% - var(--vertical-gutter))}"`
+        )
+
+        // Contains a source map
+        expect(cssContent).toMatch(/\/\*#\s*sourceMappingURL=(.+\.map)\s*\*\//)
+      })
+
+      it(`should've emitted a source map`, async () => {
+        const cssFolder = join(appDir, '.next/static/css')
+
+        const files = await readdir(cssFolder)
+        const cssMapFiles = files.filter((f) => /\.css\.map$/.test(f))
+
+        expect(cssMapFiles.length).toBe(1)
+        const cssMapContent = (
+          await readFile(join(cssFolder, cssMapFiles[0]), 'utf8')
+        ).trim()
+
+        const { version, mappings, sourcesContent } = JSON.parse(cssMapContent)
+        expect({ version, mappings, sourcesContent }).toMatchInlineSnapshot(`
+{
+  "mappings": "AAEE,uBACE,SAHE,CAON,cACE,2CAAA",
+  "sourcesContent": [
+    "$var: red;
+.redText {
+  ::placeholder {
+    color: $var;
+  }
+}
+
+.flex-parsing {
+  flex: 0 0 calc(50% - var(--vertical-gutter));
+}
+",
+  ],
+  "version": 3,
+}
+`)
+      })
+    })
+  })
+})

test/integration/scss/scss-fixtures/composes-basic/composes-basic.test.js

@@ -0,0 +1,41 @@
+/* eslint-env jest */
+
+import { readdir, readFile, remove } from 'fs-extra'
+import { nextBuild } from 'next-test-utils'
+import { join } from 'path'
+
+describe('CSS Module Composes Usage (Basic)', () => {
+  ;(process.env.TURBOPACK ? describe.skip : describe)('production mode', () => {
+    // This is a very bad feature. Do not use it.
+    const appDir = __dirname
+    let stdout
+    let code
+    beforeAll(async () => {
+      await remove(join(appDir, '.next'))
+      ;({ code, stdout } = await nextBuild(appDir, [], {
+        stdout: true,
+      }))
+    })
+
+    it('should have compiled successfully', () => {
+      expect(code).toBe(0)
+      expect(stdout).toMatch(/Compiled successfully/)
+    })
+
+    it(`should've emitted a single CSS file`, async () => {
+      const cssFolder = join(appDir, '.next/static/css')
+
+      const files = await readdir(cssFolder)
+      const cssFiles = files.filter((f) => /\.css$/.test(f))
+
+      expect(cssFiles.length).toBe(1)
+      const cssContent = await readFile(join(cssFolder, cssFiles[0]), 'utf8')
+
+      expect(
+        cssContent.replace(/\/\*.*?\*\//g, '').trim()
+      ).toMatchInlineSnapshot(
+        `".index_className__OLWEh{background:red;color:#ff0}.index_subClass__Z_IFg{background:blue}"`
+      )
+    })
+  })
+})