test(cli): tweak test & update snapshot (#1050)

Co-authored-by: Anthony Fu <anthonyfu117@hotmail.com>

packages/cli/src/index.ts

@@ -82,13 +82,6 @@ export async function build(_options: CliOptions) {
     const { patterns } = options
     const ignored = ['**/{.git,node_modules}/**']
 
-    consola.info(
-      `Watching for changes in ${
-        toArray(patterns)
-          .map(i => cyan(i))
-          .join(', ')}`,
-    )
-
     const watcher = watch(patterns, {
       ignoreInitial: true,
       ignorePermissionErrors: true,
@@ -115,6 +108,13 @@ export async function build(_options: CliOptions) {
 
       debouncedBuild()
     })
+
+    consola.info(
+      `Watching for changes in ${
+        toArray(patterns)
+          .map(i => cyan(i))
+          .join(', ')}`,
+    )
   }
 
   await generate(options)

test/__snapshots__/cli.test.ts.snap

@@ -14,10 +14,3 @@ exports[`cli > supports unocss.config.js 1`] = `
 /* layer: shortcuts */
 .box{margin-left:auto;margin-right:auto;max-width:80rem;border-radius:0.375rem;--un-bg-opacity:1;background-color:rgba(243,244,246,var(--un-bg-opacity));padding:1rem;--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgba(0,0,0,0.05));box-shadow:var(--un-ring-offset-shadow, 0 0 #0000), var(--un-ring-shadow, 0 0 #0000), var(--un-shadow);}"
 `;
-
-exports[`cli > uno.css exclude initialized class after changing file 1`] = `
-"/* layer: preflights */
-*,::before,::after{--un-rotate:0;--un-rotate-x:0;--un-rotate-y:0;--un-rotate-z:0;--un-scale-x:1;--un-scale-y:1;--un-scale-z:1;--un-skew-x:0;--un-skew-y:0;--un-translate-x:0;--un-translate-y:0;--un-translate-z:0;--un-transform:translateX(var(--un-translate-x)) translateY(var(--un-translate-y)) translateZ(var(--un-translate-z)) rotate(var(--un-rotate)) rotateX(var(--un-rotate-x)) rotateY(var(--un-rotate-y)) rotateZ(var(--un-rotate-z)) skewX(var(--un-skew-x)) skewY(var(--un-skew-y)) scaleX(var(--un-scale-x)) scaleY(var(--un-scale-y)) scaleZ(var(--un-scale-z));--un-pan-x:var(--un-empty,/*!*/ /*!*/);--un-pan-y:var(--un-empty,/*!*/ /*!*/);--un-pinch-zoom:var(--un-empty,/*!*/ /*!*/);--un-touch-action:var(--un-pan-x) var(--un-pan-y) var(--un-pinch-zoom);--un-scroll-snap-strictness:proximity;--un-ordinal:var(--un-empty,/*!*/ /*!*/);--un-slashed-zero:var(--un-empty,/*!*/ /*!*/);--un-numeric-figure:var(--un-empty,/*!*/ /*!*/);--un-numeric-spacing:var(--un-empty,/*!*/ /*!*/);--un-numeric-fraction:var(--un-empty,/*!*/ /*!*/);--un-font-variant-numeric:var(--un-ordinal) var(--un-slashed-zero) var(--un-numeric-figure) var(--un-numeric-spacing) var(--un-numeric-fraction);--un-border-spacing-x:0;--un-border-spacing-y:0;--un-ring-offset-shadow:0 0 #0000;--un-ring-shadow:0 0 #0000;--un-shadow-inset:var(--un-empty,/*!*/ /*!*/);--un-shadow:0 0 #0000;--un-ring-inset:var(--un-empty,/*!*/ /*!*/);--un-ring-offset-width:0px;--un-ring-offset-color:#fff;--un-ring-width:0px;--un-ring-color:rgba(147,197,253,0.5);--un-blur:var(--un-empty,/*!*/ /*!*/);--un-brightness:var(--un-empty,/*!*/ /*!*/);--un-contrast:var(--un-empty,/*!*/ /*!*/);--un-drop-shadow:var(--un-empty,/*!*/ /*!*/);--un-grayscale:var(--un-empty,/*!*/ /*!*/);--un-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-invert:var(--un-empty,/*!*/ /*!*/);--un-saturate:var(--un-empty,/*!*/ /*!*/);--un-sepia:var(--un-empty,/*!*/ /*!*/);--un-filter:var(--un-blur) var(--un-brightness) var(--un-contrast) var(--un-drop-shadow) var(--un-grayscale) var(--un-hue-rotate) var(--un-invert) var(--un-saturate) var(--un-sepia);--un-backdrop-blur:var(--un-empty,/*!*/ /*!*/);--un-backdrop-brightness:var(--un-empty,/*!*/ /*!*/);--un-backdrop-contrast:var(--un-empty,/*!*/ /*!*/);--un-backdrop-grayscale:var(--un-empty,/*!*/ /*!*/);--un-backdrop-hue-rotate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-invert:var(--un-empty,/*!*/ /*!*/);--un-backdrop-opacity:var(--un-empty,/*!*/ /*!*/);--un-backdrop-saturate:var(--un-empty,/*!*/ /*!*/);--un-backdrop-sepia:var(--un-empty,/*!*/ /*!*/);--un-backdrop-filter:var(--un-backdrop-blur) var(--un-backdrop-brightness) var(--un-backdrop-contrast) var(--un-backdrop-grayscale) var(--un-backdrop-hue-rotate) var(--un-backdrop-invert) var(--un-backdrop-opacity) var(--un-backdrop-saturate) var(--un-backdrop-sepia);}
-/* layer: default */
-.bg-blue{--un-bg-opacity:1;background-color:rgba(96,165,250,var(--un-bg-opacity));}"
-`;

test/cli.test.ts

@@ -6,29 +6,6 @@ import { execa } from 'execa'
 export const tempDir = resolve('.temp')
 export const cli = resolve(__dirname, '../packages/cli/src/cli.ts')
 
-function createWaiting() {
-  const loop = () => { }
-  let $resolve = loop
-  let $reject = loop
-  const waiting = new Promise<void>((resolve, reject) => {
-    $resolve = resolve
-    $reject = reject
-  })
-  return {
-    waiting,
-    $resolve,
-    $reject,
-  }
-}
-
-function sleep(time = 300) {
-  return new Promise<void>((resolve) => {
-    setTimeout(() => {
-      resolve()
-    }, time)
-  })
-}
-
 beforeAll(async () => {
   await fs.remove(tempDir)
 })
@@ -61,11 +38,16 @@ describe('cli', () => {
         $resolve()
     })
     await waiting
+    await sleep()
     await fs.writeFile(absolutePathOfFile, changedContent)
-    await sleep(2022)
+    // polling until update
+    for (let i = 20; i >= 0; i--) {
+      await sleep(50)
+      const output = await readUnocssFile(testDir)
+      if (i === 0 || output.includes('.bg-red'))
+        expect(output).toContain('.bg-red')
+    }
     subProcess.cancel()
-    const output = await readUnocssFile(testDir)
-    expect(output).toMatchSnapshot()
   })
 
   it('supports unocss.config.js', async () => {
@@ -83,11 +65,36 @@ export default defineConfig({
   })
 })
 
+// ----- Utils -----
+
+function createWaiting() {
+  const loop = () => { }
+  let $resolve = loop
+  let $reject = loop
+  const waiting = new Promise<void>((resolve, reject) => {
+    $resolve = resolve
+    $reject = reject
+  })
+  return {
+    waiting,
+    $resolve,
+    $reject,
+  }
+}
+
+function sleep(time = 300) {
+  return new Promise<void>((resolve) => {
+    setTimeout(() => {
+      resolve()
+    }, time)
+  })
+}
+
 function getTestDir() {
   return resolve(tempDir, Math.round(Math.random() * 100000).toString())
 }
 
-function initalOutputFiles(testDir: string, files: Record<string, string>) {
+function initOutputFiles(testDir: string, files: Record<string, string>) {
   return Promise.all(
     Object.entries(files).map(([path, content]) =>
       fs.outputFile(resolve(testDir, path), content, 'utf8'),
@@ -109,7 +116,7 @@ function readUnocssFile(testDir: string) {
 async function runCli(files: Record<string, string>) {
   const testDir = getTestDir()
 
-  await initalOutputFiles(testDir, files)
+  await initOutputFiles(testDir, files)
 
   const { exitCode, stdout, stderr } = await runAsyncChildProcess(testDir, 'views/**/*')