From c7cf7d4b9f1424a467aa9ea2797a70e2e8eed838 Mon Sep 17 00:00:00 2001
From: Jiachi Liu <inbox@huozhi.im>
Date: Tue, 15 Aug 2023 12:33:42 +0200
Subject: [PATCH] update test

---
 test/e2e/app-dir/app-css/index.test.ts        | 29 -------------
 .../not-found/css-precedence/app/not-found.js |  1 +
 .../not-found/css-precedence/app/page.js      |  2 +-
 .../not-found/css-precedence/index.test.ts    | 43 +++++++++++++++++++
 4 files changed, 45 insertions(+), 30 deletions(-)
 create mode 100644 test/e2e/app-dir/not-found/css-precedence/index.test.ts

diff --git a/test/e2e/app-dir/app-css/index.test.ts b/test/e2e/app-dir/app-css/index.test.ts
index d357ccebb8c99..457d9790c3ac0 100644
--- a/test/e2e/app-dir/app-css/index.test.ts
+++ b/test/e2e/app-dir/app-css/index.test.ts
@@ -215,35 +215,6 @@ createNextDescribe(
           )
         })
 
-        it('should load css while navigation between not-found and page', async () => {
-          const browser = await next.browser('/navigate')
-          await check(
-            async () =>
-              await browser.eval(
-                `window.getComputedStyle(document.querySelector('#nav-button')).backgroundColor`
-              ),
-            'rgb(0, 128, 0)'
-          )
-          await browser.elementByCss('#nav-button').click()
-          await browser.waitForElementByCss('#back')
-          await check(
-            async () =>
-              await browser.eval(
-                `window.getComputedStyle(document.querySelector('#back')).backgroundColor`
-              ),
-            'rgb(0, 128, 0)'
-          )
-          await browser.elementByCss('#back').click()
-          await browser.waitForElementByCss('#nav-button')
-          await check(
-            async () =>
-              await browser.eval(
-                `window.getComputedStyle(document.querySelector('#nav-button')).backgroundColor`
-              ),
-            'rgb(0, 128, 0)'
-          )
-        })
-
         it('should include css imported in server not-found.js', async () => {
           const browser = await next.browser('/not-found/servercomponent')
           await check(
diff --git a/test/e2e/app-dir/not-found/css-precedence/app/not-found.js b/test/e2e/app-dir/not-found/css-precedence/app/not-found.js
index e3b9418ad63e1..16864ac3a1600 100644
--- a/test/e2e/app-dir/not-found/css-precedence/app/not-found.js
+++ b/test/e2e/app-dir/not-found/css-precedence/app/not-found.js
@@ -9,6 +9,7 @@ function NotFound() {
     <div>
       <h1>404 - Page Not Found</h1>
       <Button
+        id="go-to-index"
         onClick={() => {
           router.push('/')
         }}
diff --git a/test/e2e/app-dir/not-found/css-precedence/app/page.js b/test/e2e/app-dir/not-found/css-precedence/app/page.js
index ca23f15675725..c72c992530b43 100644
--- a/test/e2e/app-dir/not-found/css-precedence/app/page.js
+++ b/test/e2e/app-dir/not-found/css-precedence/app/page.js
@@ -8,7 +8,7 @@ export default function Page() {
   return (
     <>
       <Button
-        id="nav-button"
+        id="go-to-404"
         onClick={() => {
           router.push('/404')
         }}
diff --git a/test/e2e/app-dir/not-found/css-precedence/index.test.ts b/test/e2e/app-dir/not-found/css-precedence/index.test.ts
new file mode 100644
index 0000000000000..7c3bb44b00498
--- /dev/null
+++ b/test/e2e/app-dir/not-found/css-precedence/index.test.ts
@@ -0,0 +1,43 @@
+import { createNextDescribe } from 'e2e-utils'
+import { check } from 'next-test-utils'
+
+createNextDescribe(
+  'app dir css',
+  {
+    files: __dirname,
+    skipDeployment: true,
+    dependencies: {
+      sass: 'latest',
+    },
+  },
+  ({ next }) => {
+    it('should load css while navigation between not-found and page', async () => {
+      const browser = await next.browser('/')
+      await check(
+        async () =>
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('#go-to-404')).backgroundColor`
+          ),
+        'rgb(0, 128, 0)'
+      )
+      await browser.elementByCss('#go-to-404').click()
+      await browser.waitForElementByCss('#go-to-index')
+      await check(
+        async () =>
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('#go-to-index')).backgroundColor`
+          ),
+        'rgb(0, 128, 0)'
+      )
+      await browser.elementByCss('#go-to-index').click()
+      await browser.waitForElementByCss('#go-to-404')
+      await check(
+        async () =>
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('#go-to-404')).backgroundColor`
+          ),
+        'rgb(0, 128, 0)'
+      )
+    })
+  }
+)