test: 增加 CSS 嵌套测试用例

uct8086 · Nov 9, 2023 · 1e45b05 · 1e45b05
1 parent 6bbd408
commit 1e45b05
Show file tree

Hide file tree

Showing 3 changed files with 244 additions and 0 deletions.
diff --git a/src/__tests__/demos/common/nesting-css.css b/src/__tests__/demos/common/nesting-css.css
@@ -0,0 +1,106 @@
+/*--------------------
+     User Actions
+---------------------*/
+.ui.comments {
+
+  .empty1 {
+
+  }
+
+  .empty2 {}
+  .empty3 {
+    .empty4 {}
+  }
+  .empty5 {
+    .empty6 {
+
+    }
+  }
+  .empty7 {
+    /** { hello } */
+    .empty8 {
+      /* { world } */
+    }
+  }
+
+  .anime {
+    @keyframes framer {
+      from {
+        color: white;
+      }
+      to {
+        color: red;
+      }
+    }
+  }
+
+  .comment {
+    .actions {
+      font-size: 0.9em;
+
+      a {
+        display: inline-block;
+        margin: 0em 0.3em 0em 0em;
+        color: rgba(0, 0, 0, 0.3);
+      }
+
+      a.active, a:hover {
+        color: rgba(0, 0, 0, 0.6);
+      }
+    }
+  }
+
+  .complex {
+    .actions {
+      font-size: 0.9em;
+      /* great comment */
+      a {
+        display: inline-block;
+        margin: 0em 0.3em 0em 0em;
+        color: rgba(0, 0, 0, 0.3);
+        b {
+          display: inline-block;
+          margin: 0em 0.3em 0em 0em;
+          color: rgba(0, 0, 0, 0.3);
+        }
+        b.active, b:hover {
+          color: rgba(0, 0, 0, 0.6);
+        }
+      }
+      /* great {} comment ! */
+      a.active, a:hover {
+        color: rgba(0, 0, 0, 0.6);
+        b {
+          display: inline-block;
+          margin: 0em 0.3em 0em 0em;
+          color: rgba(0, 0, 0, 0.3);
+          c {
+            display: inline-block;
+            margin: 0em 0.3em 0em 0em;
+            color: rgba(0, 0, 0, 0.3);
+
+            d.active, d:hover {
+              color: rgba(0, 0, 0, 0.6);
+            }
+          }
+        }
+        b.active, b:hover {
+          color: rgba(0, 0, 0, 0.6);
+        }
+      }
+    }
+    @keyframes framer {
+      from {
+        content: '{}';
+      }
+      /* great comment */
+      50% {
+        color: green;
+      }
+      /* great {} comment ! */
+      to {
+        color: red;
+      }
+    }
+  }
+}
diff --git a/src/__tests__/demos/common/nesting-css.scoped.css b/src/__tests__/demos/common/nesting-css.scoped.css
@@ -0,0 +1,106 @@
+/*--------------------
+     User Actions
+---------------------*/
+micro-app[name=test-app13] .ui.comments{
+
+  .empty1 {
+
+  }
+
+  .empty2 {}
+  .empty3 {
+    .empty4 {}
+  }
+  .empty5 {
+    .empty6 {
+
+    }
+  }
+  .empty7 {
+    /** { hello } */
+    .empty8 {
+      /* { world } */
+    }
+  }
+
+  .anime {
+    @keyframes framer {
+      from {
+        color: white;
+      }
+      to {
+        color: red;
+      }
+    }
+  }
+
+  .comment {
+    .actions {
+      font-size: 0.9em;
+
+      a {
+        display: inline-block;
+        margin: 0em 0.3em 0em 0em;
+        color: rgba(0, 0, 0, 0.3);
+      }
+
+      a.active, a:hover {
+        color: rgba(0, 0, 0, 0.6);
+      }
+    }
+  }
+
+  .complex {
+    .actions {
+      font-size: 0.9em;
+      /* great comment */
+      a {
+        display: inline-block;
+        margin: 0em 0.3em 0em 0em;
+        color: rgba(0, 0, 0, 0.3);
+        b {
+          display: inline-block;
+          margin: 0em 0.3em 0em 0em;
+          color: rgba(0, 0, 0, 0.3);
+        }
+        b.active, b:hover {
+          color: rgba(0, 0, 0, 0.6);
+        }
+      }
+      /* great {} comment ! */
+      a.active, a:hover {
+        color: rgba(0, 0, 0, 0.6);
+        b {
+          display: inline-block;
+          margin: 0em 0.3em 0em 0em;
+          color: rgba(0, 0, 0, 0.3);
+          c {
+            display: inline-block;
+            margin: 0em 0.3em 0em 0em;
+            color: rgba(0, 0, 0, 0.3);
+
+            d.active, d:hover {
+              color: rgba(0, 0, 0, 0.6);
+            }
+          }
+        }
+        b.active, b:hover {
+          color: rgba(0, 0, 0, 0.6);
+        }
+      }
+    }
+    @keyframes framer {
+      from {
+        content: '{}';
+      }
+      /* great comment */
+      50% {
+        color: green;
+      }
+      /* great {} comment ! */
+      to {
+        color: red;
+      }
+    }
+  }
+}
diff --git a/src/__tests__/source/scoped_css.test.ts b/src/__tests__/source/scoped_css.test.ts
@@ -1,5 +1,6 @@
 /* eslint-disable promise/param-names, no-extend-native */
 import { createHash } from 'crypto'
+// import fs from 'fs'
 import { commonStartEffect, releaseAllEffect, ports, setAppName } from '../common/initial'
 import { defer } from '../../libs/utils'
 import microApp from '../..'
@@ -245,6 +246,8 @@ describe('source scoped_css', () => {
 
         defer(async () => {
           const result = await fetchText(`http://127.0.0.1:${ports.scoped_css}/common/large.scoped.css`)
+          // * for debug
+          // fs.writeFileSync('./large.scoped.css', dynamicLink.textContent!, 'utf-8')
           // * md5 for prettier error log
           expect(md5(dynamicLink.textContent!)).toBe(md5(result!))
           resolve(true)
@@ -254,6 +257,7 @@ describe('source scoped_css', () => {
   })
 
   // 处理所有错误情况
+  // TODO FIXME
   test.skip('coverage of all failures', async () => {
     const microAppElement10 = document.createElement('micro-app')
     microAppElement10.setAttribute('name', 'test-app10')
@@ -442,4 +446,32 @@ describe('source scoped_css', () => {
       configurable: true,
     })
   })
+
+  // 支持原生 CSS 嵌套（Nesting CSS）
+  test('coverage: nesting-css support', async () => {
+    const microAppElement13 = document.createElement('micro-app')
+    microAppElement13.setAttribute('name', 'test-app13')
+    microAppElement13.setAttribute('url', `http://127.0.0.1:${ports.scoped_css}/dynamic/`)
+
+    appCon.appendChild(microAppElement13)
+
+    await new Promise((resolve) => {
+      microAppElement13.addEventListener('mounted', async () => {
+        setAppName('test-app13')
+        const dynamicLink = document.createElement('style')
+        const dynamicContent = await fetchText(`http://127.0.0.1:${ports.scoped_css}/common/nesting-css.css`)
+        dynamicLink.textContent = dynamicContent
+        document.head.appendChild(dynamicLink)
+
+        defer(async () => {
+          // * for debug
+          // fs.writeFileSync('./nesting-css.scoped.css', dynamicLink.textContent!, 'utf-8')
+          const result = await fetchText(`http://127.0.0.1:${ports.scoped_css}/common/nesting-css.scoped.css`)
+          // * md5 for prettier error log
+          expect(md5(dynamicLink.textContent!)).toBe(md5(result!))
+          resolve(true)
+        })
+      }, false)
+    })
+  })
 })