add test

vercel · Jul 11, 2022 · d3f833f · d3f833f
1 parent 55b0d25
commit d3f833f
Show file tree

Hide file tree

Showing 2 changed files with 71 additions and 49 deletions.
diff --git a/test/e2e/app-dir/app/app/css/layout.server.js b/test/e2e/app-dir/app/app/css/layout.server.js
@@ -4,7 +4,9 @@ import styles from './style.module.css'
 export default function ServerLayout({ children }) {
   return (
     <>
-      <div className={styles['server-css']}>Server Layout: CSS Modules</div>
+      <div id="server-cssm" className={styles['server-css']}>
+        Server Layout: CSS Modules
+      </div>
       <div className="server-css">Server Layout: Global CSS</div>
       {children}
     </>

diff --git a/test/e2e/app-dir/index.test.ts b/test/e2e/app-dir/index.test.ts
@@ -393,66 +393,86 @@ describe('app dir', () => {
   })
 
   describe('css support', () => {
-    it('should support global css inside server component layouts', async () => {
-      const browser = await webdriver(next.url, '/dashboard')
+    describe('server layouts', () => {
+      it('should support global css inside server layouts', async () => {
+        const browser = await webdriver(next.url, '/dashboard')
+
+        // Should body text in red
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('.p')).color`
+          )
+        ).toBe('rgb(255, 0, 0)')
+
+        // Should inject global css for .green selectors
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('.green')).color`
+          )
+        ).toBe('rgb(0, 128, 0)')
+      })
 
-      // Should body text in red
-      expect(
-        await browser.eval(
-          `window.getComputedStyle(document.querySelector('.p')).color`
-        )
-      ).toBe('rgb(255, 0, 0)')
+      it('should support css modules inside server layouts', async () => {
+        const browser = await webdriver(next.url, '/css/css-nested')
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('#server-cssm')).color`
+          )
+        ).toBe('rgb(0, 255, 0)')
+      })
+    })
 
-      // Should inject global css for .green selectors
-      expect(
-        await browser.eval(
-          `window.getComputedStyle(document.querySelector('.green')).color`
-        )
-      ).toBe('rgb(0, 128, 0)')
+    describe('server pages', () => {
+      it.todo('should support global css inside server pages', async () => {})
+      it.todo('should support css modules inside server pages', async () => {})
     })
 
-    it('should support css modules inside client layouts', async () => {
-      const browser = await webdriver(next.url, '/client-nested')
+    describe('client layouts', () => {
+      it('should support css modules inside client layouts', async () => {
+        const browser = await webdriver(next.url, '/client-nested')
 
-      // Should render h1 in red
-      expect(
-        await browser.eval(
-          `window.getComputedStyle(document.querySelector('h1')).color`
-        )
-      ).toBe('rgb(255, 0, 0)')
-    })
+        // Should render h1 in red
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('h1')).color`
+          )
+        ).toBe('rgb(255, 0, 0)')
+      })
 
-    it('should support css modules inside client pages', async () => {
-      const browser = await webdriver(next.url, '/client-component-route')
+      it('should support global css inside client layouts', async () => {
+        const browser = await webdriver(next.url, '/client-nested')
 
-      // Should render p in red
-      expect(
-        await browser.eval(
-          `window.getComputedStyle(document.querySelector('p')).color`
-        )
-      ).toBe('rgb(255, 0, 0)')
+        // Should render button in red
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('button')).color`
+          )
+        ).toBe('rgb(255, 0, 0)')
+      })
     })
 
-    it('should support global css inside client layouts', async () => {
-      const browser = await webdriver(next.url, '/client-nested')
+    describe('client pages', () => {
+      it('should support css modules inside client pages', async () => {
+        const browser = await webdriver(next.url, '/client-component-route')
 
-      // Should render button in red
-      expect(
-        await browser.eval(
-          `window.getComputedStyle(document.querySelector('button')).color`
-        )
-      ).toBe('rgb(255, 0, 0)')
-    })
+        // Should render p in red
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('p')).color`
+          )
+        ).toBe('rgb(255, 0, 0)')
+      })
 
-    it('should support global css inside client pages', async () => {
-      const browser = await webdriver(next.url, '/client-component-route')
+      it('should support global css inside client pages', async () => {
+        const browser = await webdriver(next.url, '/client-component-route')
 
-      // Should render `b` in blue
-      expect(
-        await browser.eval(
-          `window.getComputedStyle(document.querySelector('b')).color`
-        )
-      ).toBe('rgb(0, 0, 255)')
+        // Should render `b` in blue
+        expect(
+          await browser.eval(
+            `window.getComputedStyle(document.querySelector('b')).color`
+          )
+        ).toBe('rgb(0, 0, 255)')
+      })
     })
   })
 })