fix: genCodeUnitTest failed (#1291)

Author: chilingling

packages/vue-generator/src/generator/vue/sfc/generateAttribute.js

@@ -469,6 +469,7 @@ const transformObjValue = (renderKey, value, globalHooks, config, transformObjTy
   return result
 }
 
+const normalKeyRegexp = /^[a-zA-Z_$][a-zA-Z0-9_$]*$/
 export const transformObjType = (obj, globalHooks, config) => {
   if (!obj || typeof obj !== 'object') {
     return {
@@ -481,7 +482,12 @@ export const transformObjType = (obj, globalHooks, config) => {
   let shouldRenderKey = !Array.isArray(obj)
 
   for (const [key, value] of Object.entries(obj)) {
-    let renderKey = shouldRenderKey ? `${key}: ` : ''
+    let renderKey = shouldRenderKey
+      ? // 如果 key 是合法的变量名，则直接使用 key: 的形式，否则需要添加引号，防止不合法的 key 导致语法错误
+        normalKeyRegexp.test(key)
+        ? `${key}: `
+        : `'${key}': `
+      : ''
 
     const { res, shouldBindToState: tmpShouldBindToState } = transformObjValue(
       renderKey,

packages/vue-generator/test/testcases/element-plus-case/element-plus-case.test.js

@@ -29,11 +29,7 @@ describe('generate element-plus material project correctly', () => {
       fs.mkdirSync(path.resolve(__dirname, `./result/appdemo01/${filePath}`), { recursive: true })
 
       if (typeof fileContent === 'string') {
-        fs.writeFileSync(
-          path.resolve(__dirname, `./result/appdemo01/${filePath}/${fileName}`),
-          // 这里需要将换行符替换成 CRLF 格式的
-          fileContent.replace(/\r?\n/g, '\r\n')
-        )
+        fs.writeFileSync(path.resolve(__dirname, `./result/appdemo01/${filePath}/${fileName}`), fileContent)
       } else if (fileContent instanceof Blob) {
         const arrayBuffer = await fileContent.arrayBuffer()
         const buffer = Buffer.from(arrayBuffer)
@@ -46,7 +42,9 @@ describe('generate element-plus material project correctly', () => {
       compareContent: true,
       ignoreLineEnding: true,
       ignoreAllWhiteSpaces: true,
-      ignoreEmptyLines: true
+      ignoreEmptyLines: true,
+      compareFileSync: dirCompare.fileCompareHandlers.lineBasedFileCompare.compareSync,
+      compareFileAsync: dirCompare.fileCompareHandlers.lineBasedFileCompare.compareAsync
     }
 
     const path1 = path.resolve(__dirname, './expected/appdemo01')

packages/vue-generator/test/testcases/element-plus-case/expected/appdemo01/src/http/axios.js

@@ -20,6 +20,7 @@ export default (config) => {
 
   if (typeof MockAdapter.prototype.proxy === 'undefined') {
     MockAdapter.prototype.proxy = function ({ url, config = {}, proxy, response, handleData } = {}) {
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
       let stream = this
       const request = (proxy, any) => {
         return (setting) => {
@@ -28,8 +29,9 @@ export default (config) => {
             axios
               .get(any ? proxy + setting.url + '.json' : proxy, config)
               .then(({ data }) => {
-                /* eslint-disable  no-useless-call */
-                typeof handleData === 'function' && (data = handleData.call(null, data, setting))
+                if (typeof handleData === 'function') {
+                  data = handleData.call(null, data, setting)
+                }
                 resolve([200, data])
               })
               .catch((error) => {
@@ -127,7 +129,9 @@ export default (config) => {
       return mock
     },
     disableMock() {
-      mock && mock.restore()
+      if (mock) {
+        mock.restore()
+      }
       mock = undefined
     },
     isMock() {

packages/vue-generator/test/testcases/element-plus-case/expected/appdemo01/src/lowcodeConfig/dataSource.js

@@ -72,7 +72,9 @@ dataSources.list.forEach((config) => {
   }
 
   const errorHandler = (error) => {
-    config.errorHandler?.value && createFn(config.errorHandler.value)(error)
+    if (config.errorHandler?.value) {
+      createFn(config.errorHandler.value)(error)
+    }
     dataSource.status = 'error'
     dataSource.error = error
   }

packages/vue-generator/test/testcases/element-plus-case/expected/appdemo01/vite.config.js

@@ -19,5 +19,6 @@ export default defineConfig({
       transformMixedEsModules: true
     },
     cssCodeSplit: false
-  }
+  },
+  base: './'
 })

packages/vue-generator/test/testcases/generator/expected/appdemo01/src/http/axios.js

@@ -20,6 +20,7 @@ export default (config) => {
 
   if (typeof MockAdapter.prototype.proxy === 'undefined') {
     MockAdapter.prototype.proxy = function ({ url, config = {}, proxy, response, handleData } = {}) {
+      // eslint-disable-next-line @typescript-eslint/no-this-alias
       let stream = this
       const request = (proxy, any) => {
         return (setting) => {
@@ -28,8 +29,9 @@ export default (config) => {
             axios
               .get(any ? proxy + setting.url + '.json' : proxy, config)
               .then(({ data }) => {
-                /* eslint-disable  no-useless-call */
-                typeof handleData === 'function' && (data = handleData.call(null, data, setting))
+                if (typeof handleData === 'function') {
+                  data = handleData.call(null, data, setting)
+                }
                 resolve([200, data])
               })
               .catch((error) => {
@@ -127,7 +129,9 @@ export default (config) => {
       return mock
     },
     disableMock() {
-      mock && mock.restore()
+      if (mock) {
+        mock.restore()
+      }
       mock = undefined
     },
     isMock() {

packages/vue-generator/test/testcases/generator/expected/appdemo01/src/lowcodeConfig/dataSource.js

@@ -72,7 +72,9 @@ dataSources.list.forEach((config) => {
   }
 
   const errorHandler = (error) => {
-    config.errorHandler?.value && createFn(config.errorHandler.value)(error)
+    if (config.errorHandler?.value) {
+      createFn(config.errorHandler.value)(error)
+    }
     dataSource.status = 'error'
     dataSource.error = error
   }

packages/vue-generator/test/testcases/generator/expected/appdemo01/src/views/createVm.vue

@@ -285,7 +285,10 @@
       >
         <tiny-form-item label="数据盘" style="border-radius: 0px">
           <div v-for="() in state.dataDisk" style="margin-top: 12px; display: flex">
-            <tiny-icon-panel-mini style="margin-right: 10px; width: 16px; height: 16px"></tiny-icon-panel-mini>
+            <tiny-icon-panel-mini
+              style="margin-right: 10px; width: 16px; height: 16px"
+              fill="currentColor"
+            ></tiny-icon-panel-mini>
             <tiny-select
               modelValue=""
               placeholder="请选择"
@@ -300,7 +303,7 @@
             <tiny-input placeholder="请输入" modelValue="" style="width: 120px"></tiny-input>
           </div>
           <div style="display: flex; margin-top: 12px; border-radius: 0px">
-            <tiny-icon-plus style="width: 16px; height: 16px; margin-right: 10px"></tiny-icon-plus>
+            <tiny-icon-plus style="width: 16px; height: 16px; margin-right: 10px" fill="currentColor"></tiny-icon-plus>
             <span style="font-size: 12px; border-radius: 0px; margin-right: 10px">增加一块数据盘</span>
             <span style="color: #8a8e99; font-size: 12px">您还可以挂载 21 块磁盘（云硬盘）</span>
           </div></tiny-form-item

packages/vue-generator/test/testcases/generator/expected/appdemo01/vite.config.js

@@ -19,5 +19,6 @@ export default defineConfig({
       transformMixedEsModules: true
     },
     cssCodeSplit: false
-  }
+  },
+  base: './'
 })

packages/vue-generator/test/testcases/generator/generateApp.test.js

@@ -29,11 +29,7 @@ describe('generate whole application', () => {
       fs.mkdirSync(path.resolve(__dirname, `./result/appdemo01/${filePath}`), { recursive: true })
 
       if (typeof fileContent === 'string') {
-        fs.writeFileSync(
-          path.resolve(__dirname, `./result/appdemo01/${filePath}/${fileName}`),
-          // 这里需要将换行符替换成 CRLF 格式的
-          fileContent.replace(/\r?\n/g, '\r\n')
-        )
+        fs.writeFileSync(path.resolve(__dirname, `./result/appdemo01/${filePath}/${fileName}`), fileContent)
       } else if (fileContent instanceof Blob) {
         const arrayBuffer = await fileContent.arrayBuffer()
         const buffer = Buffer.from(arrayBuffer)
@@ -46,7 +42,9 @@ describe('generate whole application', () => {
       compareContent: true,
       ignoreLineEnding: true,
       ignoreAllWhiteSpaces: true,
-      ignoreEmptyLines: true
+      ignoreEmptyLines: true,
+      compareFileSync: dirCompare.fileCompareHandlers.lineBasedFileCompare.compareSync,
+      compareFileAsync: dirCompare.fileCompareHandlers.lineBasedFileCompare.compareAsync
     }
 
     const path1 = path.resolve(__dirname, './expected/appdemo01')

packages/vue-generator/test/testcases/sfc/accessor/accessor.test.js

@@ -1,11 +1,13 @@
-import { expect, test } from 'vitest'
+import { expect, test, describe } from 'vitest'
 import { genSFCWithDefaultPlugin } from '@/generator/vue/sfc'
 import schema from './schema.json'
 import { formatCode } from '@/utils/formatCode'
 
-test('should validate tagName', async () => {
-  const res = genSFCWithDefaultPlugin(schema, [])
-  const formattedCode = formatCode(res, 'vue')
+describe('should generate state correctly', () => {
+  test('should generate state accessor correctly', async () => {
+    const res = genSFCWithDefaultPlugin(schema, [])
+    const formattedCode = formatCode(res, 'vue')
 
-  await expect(formattedCode).toMatchFileSnapshot('./expected/Accessor.vue')
+    await expect(formattedCode).toMatchFileSnapshot('./expected/Accessor.vue')
+  })
 })

packages/vue-generator/test/testcases/sfc/accessor/expected/Accessor.vue

@@ -20,6 +20,7 @@ const { utils } = wrap(function () {
   return this
 })()
 const state = vue.reactive({
+  'a.b': 'test',
   firstName: 'Opentiny',
   lastName: 'TinyEngine',
   nullValue: null,

packages/vue-generator/test/testcases/sfc/accessor/schema.json

@@ -13,6 +13,7 @@
     }
   ],
   "state": {
+    "a.b": "test",
     "firstName": "Opentiny",
     "lastName": "TinyEngine",
     "nullValue": {

packages/vue-generator/test/testcases/sfc/case01/expected/FormTable.vue

@@ -60,7 +60,7 @@
       ></tiny-grid>
     </div>
     <div :style="{ width: props.quotePopWidth }">循环渲染：</div>
-    <tiny-icon-help-circle v-if="false"></tiny-icon-help-circle>
+    <tiny-icon-help-circle v-if="false" fill="currentColor"></tiny-icon-help-circle>
 
     <tiny-button
       v-for="(item, index) in state.buttons"
@@ -181,7 +181,7 @@ const state = vue.reactive({
       slots: {
         default: ({ row }, h) => (
           <div>
-            <TinyIconEdit></TinyIconEdit>
+            <TinyIconEdit fill="currentColor"></TinyIconEdit>
             {props.isEdit && (
               <CrmQuoteListGridStatus isEdit={props.isEdit} status={row.status}></CrmQuoteListGridStatus>
             )}
@@ -207,7 +207,10 @@ const state = vue.reactive({
           >
             <TinyInput value={row.giveamount}></TinyInput>
             {state.cityOptions.length && <span>{t('operation.hello')}</span>}
-            <TinyIconHelpCircle style="margin-left: 6px; cursor: pointer;vertical-align: top;"></TinyIconHelpCircle>
+            <TinyIconHelpCircle
+              style="margin-left: 6px; cursor: pointer;vertical-align: top;"
+              fill="currentColor"
+            ></TinyIconHelpCircle>
           </div>
         )
       }