From e1f6e1368171c8c31b0932e324914e38462cc2da Mon Sep 17 00:00:00 2001
From: devjiwonchoi <devjiwonchoi@gmail.com>
Date: Thu, 12 Sep 2024 21:30:46 +0900
Subject: [PATCH] on demand

---
 .../pages-dir/css-module/next-dynamic.test.ts | 84 ++++++++++++++++---
 test/e2e/pages-dir/css-module/pages/index.tsx | 19 +++++
 .../next-dynamic/{edge.tsx => edge/index.tsx} | 13 ++-
 .../pages/next-dynamic/edge/on-demand.tsx     | 37 ++++++++
 .../{nodejs.tsx => nodejs/index.tsx}          | 13 ++-
 .../pages/next-dynamic/nodejs/on-demand.tsx   | 33 ++++++++
 .../pages/next-dynamic/on-demand.tsx          | 27 +++---
 7 files changed, 197 insertions(+), 29 deletions(-)
 create mode 100644 test/e2e/pages-dir/css-module/pages/index.tsx
 rename test/e2e/pages-dir/css-module/pages/next-dynamic/{edge.tsx => edge/index.tsx} (67%)
 create mode 100644 test/e2e/pages-dir/css-module/pages/next-dynamic/edge/on-demand.tsx
 rename test/e2e/pages-dir/css-module/pages/next-dynamic/{nodejs.tsx => nodejs/index.tsx} (64%)
 create mode 100644 test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs/on-demand.tsx

diff --git a/test/e2e/pages-dir/css-module/next-dynamic.test.ts b/test/e2e/pages-dir/css-module/next-dynamic.test.ts
index 2b54a0eaac5ab..7828eb56ae62a 100644
--- a/test/e2e/pages-dir/css-module/next-dynamic.test.ts
+++ b/test/e2e/pages-dir/css-module/next-dynamic.test.ts
@@ -19,9 +19,7 @@ describe('pages-dir-css-module-next-dynamic-client-navigation', () => {
       const buttonBgColor = await browser.eval(
         `window.getComputedStyle(document.querySelector('button')).backgroundColor`
       )
-      // not gray
-      expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
-      // but red
+      // red
       expect(buttonBgColor).toBe('rgb(255, 0, 0)')
     })
 
@@ -38,9 +36,41 @@ describe('pages-dir-css-module-next-dynamic-client-navigation', () => {
       const buttonBgColor = await browser.eval(
         `window.getComputedStyle(document.querySelector('button')).backgroundColor`
       )
-      // not gray
-      expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
-      // but red
+      // red
+      expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+    })
+
+    it('should not remove style when navigating from static imported component to on demand next/dynamic', async () => {
+      const browser = await next.browser('/next-dynamic/nodejs')
+      expect(
+        await browser
+          .elementByCss('a[href="/next-dynamic/on-demand"]')
+          .click()
+          .waitForElementByCss('#red-button')
+          .text()
+      ).toBe('My background should be red!')
+
+      const buttonBgColor = await browser.eval(
+        `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+      )
+      // red
+      expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+    })
+
+    it('should not remove style when navigating from static imported component with on demand next/dynamic to on demand next/dynamic', async () => {
+      const browser = await next.browser('/next-dynamic/nodejs/on-demand')
+      expect(
+        await browser
+          .elementByCss('a[href="/next-dynamic/on-demand"]')
+          .click()
+          .waitForElementByCss('#red-button')
+          .text()
+      ).toBe('My background should be red!')
+
+      const buttonBgColor = await browser.eval(
+        `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+      )
+      // red
       expect(buttonBgColor).toBe('rgb(255, 0, 0)')
     })
   })
@@ -59,9 +89,7 @@ describe('pages-dir-css-module-next-dynamic-client-navigation', () => {
       const buttonBgColor = await browser.eval(
         `window.getComputedStyle(document.querySelector('button')).backgroundColor`
       )
-      // not gray
-      expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
-      // but red
+      // red
       expect(buttonBgColor).toBe('rgb(255, 0, 0)')
     })
 
@@ -78,9 +106,41 @@ describe('pages-dir-css-module-next-dynamic-client-navigation', () => {
       const buttonBgColor = await browser.eval(
         `window.getComputedStyle(document.querySelector('button')).backgroundColor`
       )
-      // not gray
-      expect(buttonBgColor).not.toBe('rgb(239, 239, 239)')
-      // but red
+      // red
+      expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+    })
+
+    it('should not remove style when navigating from static imported component to on demand next/dynamic', async () => {
+      const browser = await next.browser('/next-dynamic/edge')
+      expect(
+        await browser
+          .elementByCss('a[href="/next-dynamic/on-demand"]')
+          .click()
+          .waitForElementByCss('#red-button')
+          .text()
+      ).toBe('My background should be red!')
+
+      const buttonBgColor = await browser.eval(
+        `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+      )
+      // red
+      expect(buttonBgColor).toBe('rgb(255, 0, 0)')
+    })
+
+    it('should not remove style when navigating from static imported component with on demand next/dynamic to on demand next/dynamic', async () => {
+      const browser = await next.browser('/next-dynamic/edge/on-demand')
+      expect(
+        await browser
+          .elementByCss('a[href="/next-dynamic/on-demand"]')
+          .click()
+          .waitForElementByCss('#red-button')
+          .text()
+      ).toBe('My background should be red!')
+
+      const buttonBgColor = await browser.eval(
+        `window.getComputedStyle(document.querySelector('button')).backgroundColor`
+      )
+      // red
       expect(buttonBgColor).toBe('rgb(255, 0, 0)')
     })
   })
diff --git a/test/e2e/pages-dir/css-module/pages/index.tsx b/test/e2e/pages-dir/css-module/pages/index.tsx
new file mode 100644
index 0000000000000..f538499b3aaa6
--- /dev/null
+++ b/test/e2e/pages-dir/css-module/pages/index.tsx
@@ -0,0 +1,19 @@
+import Link from 'next/link'
+
+export default function Home() {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        width: '400px',
+      }}
+    >
+      <Link href="/next-dynamic/nodejs">/next-dynamic/nodejs</Link>
+      <Link href="/next-dynamic/edge">/next-dynamic/edge</Link>
+      <Link href="/dynamic-import/nodejs">/dynamic-import/nodejs</Link>
+      <Link href="/dynamic-import/edge">/dynamic-import/edge</Link>
+    </div>
+  )
+}
diff --git a/test/e2e/pages-dir/css-module/pages/next-dynamic/edge.tsx b/test/e2e/pages-dir/css-module/pages/next-dynamic/edge/index.tsx
similarity index 67%
rename from test/e2e/pages-dir/css-module/pages/next-dynamic/edge.tsx
rename to test/e2e/pages-dir/css-module/pages/next-dynamic/edge/index.tsx
index 3d7d725215af9..b8054edfce6d3 100644
--- a/test/e2e/pages-dir/css-module/pages/next-dynamic/edge.tsx
+++ b/test/e2e/pages-dir/css-module/pages/next-dynamic/edge/index.tsx
@@ -1,15 +1,22 @@
 import Link from 'next/link'
-import { RedButton } from '../../components/red-button'
+import { RedButton } from '../../../components/red-button'
 
 export default function Home() {
   return (
-    <>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        width: '400px',
+      }}
+    >
       <Link href="/next-dynamic/basic">/next-dynamic/basic</Link>
       <Link href="/next-dynamic/ssr-false">/next-dynamic/ssr-false</Link>
       <Link href="/next-dynamic/on-demand">/next-dynamic/on-demand</Link>
       {/* RedButton should be imported to reproduce the issue */}
       <RedButton />
-    </>
+    </div>
   )
 }
 
diff --git a/test/e2e/pages-dir/css-module/pages/next-dynamic/edge/on-demand.tsx b/test/e2e/pages-dir/css-module/pages/next-dynamic/edge/on-demand.tsx
new file mode 100644
index 0000000000000..00110db1ab941
--- /dev/null
+++ b/test/e2e/pages-dir/css-module/pages/next-dynamic/edge/on-demand.tsx
@@ -0,0 +1,37 @@
+import Link from 'next/link'
+import dynamic from 'next/dynamic'
+import { useState } from 'react'
+import { RedButton } from '../../../components/red-button'
+
+const NextDynamicRedButton = dynamic(
+  () =>
+    import('../../../components/red-button').then((module) => module.RedButton),
+  { ssr: false }
+)
+
+export default function Home() {
+  const [button, setButton] = useState(<button>Red Button on Standby</button>)
+  const handleClick = () => {
+    setButton(<NextDynamicRedButton />)
+  }
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        width: '400px',
+      }}
+    >
+      <Link href="/next-dynamic/on-demand">/next-dynamic/on-demand</Link>
+      <button onClick={handleClick}>Click to load red button</button>
+      <RedButton />
+      {button}
+    </div>
+  )
+}
+
+export const config = {
+  runtime: 'experimental-edge',
+}
diff --git a/test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs.tsx b/test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs/index.tsx
similarity index 64%
rename from test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs.tsx
rename to test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs/index.tsx
index 894362e5aef80..26bbd15b56c72 100644
--- a/test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs.tsx
+++ b/test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs/index.tsx
@@ -1,14 +1,21 @@
 import Link from 'next/link'
-import { RedButton } from '../../components/red-button'
+import { RedButton } from '../../../components/red-button'
 
 export default function Home() {
   return (
-    <>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        width: '400px',
+      }}
+    >
       <Link href="/next-dynamic/basic">/next-dynamic/basic</Link>
       <Link href="/next-dynamic/ssr-false">/next-dynamic/ssr-false</Link>
       <Link href="/next-dynamic/on-demand">/next-dynamic/on-demand</Link>
       {/* RedButton should be imported to reproduce the issue */}
       <RedButton />
-    </>
+    </div>
   )
 }
diff --git a/test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs/on-demand.tsx b/test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs/on-demand.tsx
new file mode 100644
index 0000000000000..d564ee085fb81
--- /dev/null
+++ b/test/e2e/pages-dir/css-module/pages/next-dynamic/nodejs/on-demand.tsx
@@ -0,0 +1,33 @@
+import Link from 'next/link'
+import dynamic from 'next/dynamic'
+import { useState } from 'react'
+import { RedButton } from '../../../components/red-button'
+
+const NextDynamicRedButton = dynamic(
+  () =>
+    import('../../../components/red-button').then((module) => module.RedButton),
+  { ssr: false }
+)
+
+export default function Home() {
+  const [button, setButton] = useState(<button>Red Button on Standby</button>)
+  const handleClick = () => {
+    setButton(<NextDynamicRedButton />)
+  }
+
+  return (
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        width: '400px',
+      }}
+    >
+      <Link href="/next-dynamic/on-demand">/next-dynamic/on-demand</Link>
+      <button onClick={handleClick}>Click to load red button</button>
+      <RedButton />
+      {button}
+    </div>
+  )
+}
diff --git a/test/e2e/pages-dir/css-module/pages/next-dynamic/on-demand.tsx b/test/e2e/pages-dir/css-module/pages/next-dynamic/on-demand.tsx
index 35be0c8c3e6a3..05d1a3e9fe44a 100644
--- a/test/e2e/pages-dir/css-module/pages/next-dynamic/on-demand.tsx
+++ b/test/e2e/pages-dir/css-module/pages/next-dynamic/on-demand.tsx
@@ -1,3 +1,4 @@
+import Link from 'next/link'
 import dynamic from 'next/dynamic'
 import { useState } from 'react'
 
@@ -7,20 +8,24 @@ const NextDynamicRedButton = dynamic(
   { ssr: false }
 )
 
-export default function NextDynamic() {
-  const [showRedButton, setShowRedButton] = useState(false)
-
+export default function Home() {
+  const [button, setButton] = useState(<button>Red Button on Standby</button>)
   const handleClick = () => {
-    setShowRedButton(true)
+    setButton(<NextDynamicRedButton />)
   }
 
   return (
-    <>
-      {showRedButton ? (
-        <NextDynamicRedButton />
-      ) : (
-        <button onClick={handleClick}>My background should be gray!</button>
-      )}
-    </>
+    <div
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        gap: '10px',
+        width: '400px',
+      }}
+    >
+      <Link href="/">/</Link>
+      <button onClick={handleClick}>Click to load red button</button>
+      {button}
+    </div>
   )
 }