test: added inject cssvars unit test

Author: baiwusanyu-c

packages/core/inject/__test__/__snapshots__/inject-cssvars.spec.ts.snap

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`inject cssvars > injectCSSVars: basic 1`] = `
+"<style>.foo{ color: red }</style>
+<style scoped>\\\\n/* created by @unplugin-vue-cssvars */\\\\n/* <inject start> */\\\\n.foo{color:v-bind(color)}\\\\n/* <inject end> */\\\\n
+</style>"
+`;
+
+exports[`inject cssvars > injectCSSVars: multiple value 1`] = `
+"<style>.foo{ color: red }</style>
+<style scoped>\\\\n/* created by @unplugin-vue-cssvars */\\\\n/* <inject start> */\\\\n.foo{color:v-bind(color)}\\\\n/* <inject end> */\\\\n\\\\n/* created by @unplugin-vue-cssvars */\\\\n/* <inject start> */\\\\n.bar{color:v-bind(color)}\\\\n/* <inject end> */\\\\n
+</style>"
+`;
+
+exports[`inject cssvars > injectCSSVars: unmatched key 1`] = `"<style>.foo{ color: red }</style>"`;
+
+exports[`inject cssvars > injectCSSVars: vBindCode is null 1`] = `"<style>.foo{ color: red }</style>"`;

packages/core/inject/__test__/inject-cssvars.spec.ts

@@ -1,6 +1,50 @@
-import { describe, expect, test } from 'vitest'
+import { beforeEach, describe, expect, test } from 'vitest'
+import { injectCSSVars } from '../inject-cssvars'
 describe('inject cssvars', () => {
-  test('basic', () => {
-    expect(1).toBe(1)
+  const mockCode = '<style>.foo{ color: red }</style>'
+  const vBindValue = new Set()
+  vBindValue.add('\\n/* created by @unplugin-vue-cssvars */\\n/* <inject start> */\\n.foo{color:v-bind(color)}\\n/* <inject end> */\\n')
+  let mockCSSModule = [] as any
+  const mockVariableName = {
+    color: ' ',
+  }
+  let expectContent = ''
+  beforeEach(() => {
+    mockCSSModule = [
+      {
+        vBindCode: {
+          color: vBindValue,
+        },
+      },
+    ]
+    expectContent = `${mockCode}\n<style scoped>${[...mockCSSModule[0].vBindCode.color]}\n</style>`
+  })
+
+  test('injectCSSVars: basic', () => {
+    const res = injectCSSVars(mockCode, mockCSSModule as any, mockVariableName as any)
+    expect(res).toBe(expectContent)
+    expect(res).matchSnapshot()
+  })
+
+  test('injectCSSVars: vBindCode is null', () => {
+    mockCSSModule[0].vBindCode = null
+    const res = injectCSSVars(mockCode, mockCSSModule as any, mockVariableName as any)
+    expect(res).toBe(mockCode)
+    expect(res).matchSnapshot()
+  })
+
+  test('injectCSSVars: unmatched key', () => {
+    const res = injectCSSVars(mockCode, mockCSSModule as any, { foo: '' } as any)
+    expect(res).toBe(mockCode)
+    expect(res).matchSnapshot()
+  })
+
+  test('injectCSSVars: multiple value', () => {
+    vBindValue.add('\\n/* created by @unplugin-vue-cssvars */\\n/* <inject start> */\\n.bar{color:v-bind(color)}\\n/* <inject end> */\\n')
+    expectContent = `${mockCode}\n<style scoped>${[...mockCSSModule[0].vBindCode.color].join('')}\n</style>`
+    const res = injectCSSVars(mockCode, mockCSSModule as any, mockVariableName as any)
+    console.log(res)
+    expect(res).toBe(expectContent)
+    expect(res).matchSnapshot()
   })
 })

packages/core/inject/inject-cssvars.ts

@@ -16,6 +16,8 @@ export const injectCSSVars = (
       })
     }
   })
-  code = `${code}\n<style scoped>${injectCSSSet.join('')}\n</style>`
+  if (injectCSSSet.length > 0)
+    code = `${code}\n<style scoped>${injectCSSSet.join('')}\n</style>`
+
   return code
 }