update test

Author: huozhi

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(

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('/')
         }}

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')
         }}

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)'
+      )
+    })
+  }
+)