From afbf4b10e907cbe5d52849a97465c97a0e89371e Mon Sep 17 00:00:00 2001
From: Shu Ding <g@shud.in>
Date: Sun, 28 Aug 2022 02:49:59 +0200
Subject: [PATCH] Add test for server CSS imports (#40019)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Now we are covering all 8 scenarios in our tests: server-client × global-CSS Modules × page-layout. Next step is to cover HMR and page navigation cases.

## Bug

- [ ] Related issues linked using `fixes #number`
- [x] Integration tests added
- [ ] Errors have helpful link attached, see `contributing.md`

## Feature

- [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR.
- [ ] Related issues linked using `fixes #number`
- [ ] Integration tests added
- [ ] Documentation added
- [ ] Telemetry added. In case of a feature if it's used or not.
- [ ] Errors have helpful link attached, see `contributing.md`

## Documentation / Examples

- [ ] Make sure the linting passes by running `pnpm lint`
- [ ] The examples guidelines are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing.md#adding-examples)
---
 .../app/app/css/css-page/page.server.js       | 10 ++++++++-
 .../app/app/css/css-page/style.module.css     |  3 +++
 test/e2e/app-dir/index.test.ts                | 21 ++++++++++++++++---
 3 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 test/e2e/app-dir/app/app/css/css-page/style.module.css

diff --git a/test/e2e/app-dir/app/app/css/css-page/page.server.js b/test/e2e/app-dir/app/app/css/css-page/page.server.js
index bfef13a4b5c0..2fbdf86dedd5 100644
--- a/test/e2e/app-dir/app/app/css/css-page/page.server.js
+++ b/test/e2e/app-dir/app/app/css/css-page/page.server.js
@@ -1,5 +1,13 @@
 import './style.css'
+import styles from './style.module.css'
 
 export default function Page() {
-  return <h1>Page</h1>
+  return (
+    <>
+      <h1>Page</h1>
+      <div id="cssm" className={styles.mod}>
+        CSSM
+      </div>
+    </>
+  )
 }
diff --git a/test/e2e/app-dir/app/app/css/css-page/style.module.css b/test/e2e/app-dir/app/app/css/css-page/style.module.css
new file mode 100644
index 000000000000..3991f65d58d1
--- /dev/null
+++ b/test/e2e/app-dir/app/app/css/css-page/style.module.css
@@ -0,0 +1,3 @@
+.mod {
+  color: blue;
+}
diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
index 5d4d0f307a79..e22823c3d79d 100644
--- a/test/e2e/app-dir/index.test.ts
+++ b/test/e2e/app-dir/index.test.ts
@@ -1080,9 +1080,24 @@ describe('app dir', () => {
         })
       })
 
-      describe.skip('server pages', () => {
-        it('should support global css inside server pages', async () => {})
-        it('should support css modules inside server pages', async () => {})
+      describe('server pages', () => {
+        it('should support global css inside server pages', async () => {
+          const browser = await webdriver(next.url, '/css/css-page')
+          expect(
+            await browser.eval(
+              `window.getComputedStyle(document.querySelector('h1')).color`
+            )
+          ).toBe('rgb(255, 0, 0)')
+        })
+
+        it('should support css modules inside server pages', async () => {
+          const browser = await webdriver(next.url, '/css/css-page')
+          expect(
+            await browser.eval(
+              `window.getComputedStyle(document.querySelector('#cssm')).color`
+            )
+          ).toBe('rgb(0, 0, 255)')
+        })
       })
 
       describe('client layouts', () => {