From 191a1717ae3c764cc78529384a13b1f058afc5ea Mon Sep 17 00:00:00 2001 From: Eiinu Date: Thu, 25 Jan 2024 18:11:53 +0800 Subject: [PATCH] test: migrate from jsdom to happy-dom (#2881) --- package.json | 2 +- pnpm-lock.yaml | 153 ++------------- .../__VUE/actionsheet/__tests__/index.spec.ts | 2 +- .../__snapshots__/address.spec.ts.snap | 2 +- .../__snapshots__/avatar.spec.tsx.snap | 14 +- .../__VUE/avatar/__tests__/avatar.spec.tsx | 2 +- .../__snapshots__/avatarcropper.spec.ts.snap | 4 +- .../__tests__/avatarcropper.spec.ts | 1 - .../__VUE/button/__tests__/button.spec.ts | 2 +- .../__snapshots__/index.spec.ts.snap | 8 +- .../__snapshots__/cascader.spec.ts.snap | 36 ++-- .../__tests__/__snapshots__/cell.spec.ts.snap | 10 +- ...ox.spec.ts.snap => checkbox.spec.tsx.snap} | 0 .../__VUE/checkbox/__tests__/checkbox.spec.ts | 118 ----------- .../checkbox/__tests__/checkbox.spec.tsx | 76 ++++++++ .../__tests__/checkboxgroup.spec.ts | 96 --------- .../__tests__/checkboxgroup.spec.tsx | 42 ++++ .../__snapshots__/function.spec.ts.snap | 2 +- .../__VUE/dialog/__tests__/function.spec.ts | 4 +- .../__VUE/dialog/__tests__/index.spec.ts | 5 - .../__VUE/divider/__tests__/divider.spec.ts | 2 +- .../__snapshots__/index.spec.ts.snap | 2 +- .../__VUE/ellipsis/__tests__/ellipsis.spec.ts | 9 +- .../__VUE/notify/__tests__/function.spec.ts | 4 +- .../__VUE/radio/__tests__/radio.spec.tsx | 119 +++++++++++ .../radiogroup/__tests__/radiogroup.spec.ts | 184 ------------------ .../__VUE/range/__tests__/range.spec.ts | 2 - .../__VUE/sidenavbar/__tests__/index.spec.ts | 79 -------- .../__VUE/sidenavbar/__tests__/index.spec.tsx | 48 +++++ .../__snapshots__/skeleton.spec.ts.snap | 2 +- .../__snapshots__/index.spec.tsx.snap | 2 +- .../__snapshots__/index.spec.ts.snap | 2 +- .../__snapshots__/index.spec.tsx.snap | 4 +- .../__VUE/tabbar/__tests__/index.spec.tsx | 1 - .../__VUE/tabs/__tests__/index.spec.tsx | 2 +- .../timeselect/__tests__/timeselect.spec.ts | 18 +- .../__VUE/tour/__tests__/tour.spec.ts | 2 +- .../trendarrow/__tests__/trendarrow.spec.ts | 2 +- .../__snapshots__/index.spec.ts.snap | 4 +- .../__snapshots__/video.spec.ts.snap | 2 +- vite.config.ts | 2 +- 41 files changed, 378 insertions(+), 693 deletions(-) rename src/packages/__VUE/checkbox/__tests__/__snapshots__/{checkbox.spec.ts.snap => checkbox.spec.tsx.snap} (100%) delete mode 100644 src/packages/__VUE/checkbox/__tests__/checkbox.spec.ts create mode 100644 src/packages/__VUE/checkbox/__tests__/checkbox.spec.tsx delete mode 100644 src/packages/__VUE/checkboxgroup/__tests__/checkboxgroup.spec.ts create mode 100644 src/packages/__VUE/checkboxgroup/__tests__/checkboxgroup.spec.tsx create mode 100644 src/packages/__VUE/radio/__tests__/radio.spec.tsx delete mode 100644 src/packages/__VUE/radiogroup/__tests__/radiogroup.spec.ts delete mode 100644 src/packages/__VUE/sidenavbar/__tests__/index.spec.ts create mode 100644 src/packages/__VUE/sidenavbar/__tests__/index.spec.tsx diff --git a/package.json b/package.json index f266ae9e04..59f6fabf57 100644 --- a/package.json +++ b/package.json @@ -93,9 +93,9 @@ "codesandbox": "^2.2.3", "eslint": "^8.56.0", "fs-extra": "^11.2.0", + "happy-dom": "^13.3.1", "husky": "^8.0.3", "inquirer": "^9.2.12", - "jsdom": "^24.0.0", "lzutf8": "^0.6.3", "markdown-it": "^14.0.0", "nano-staged": "^0.8.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bf5ca324e9..3255babd35 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -72,15 +72,15 @@ importers: fs-extra: specifier: ^11.2.0 version: 11.2.0 + happy-dom: + specifier: ^13.3.1 + version: 13.3.1 husky: specifier: ^8.0.3 version: 8.0.3 inquirer: specifier: ^9.2.12 version: 9.2.12 - jsdom: - specifier: ^24.0.0 - version: 24.0.0 lzutf8: specifier: ^0.6.3 version: 0.6.3 @@ -110,7 +110,7 @@ importers: version: 7.0.11(vite@5.0.12) vitest: specifier: ^1.2.1 - version: 1.2.1(@types/node@18.19.8)(@vitest/ui@1.2.1)(jsdom@24.0.0)(sass@1.70.0) + version: 1.2.1(@types/node@18.19.8)(@vitest/ui@1.2.1)(happy-dom@13.3.1)(sass@1.70.0) vitest-canvas-mock: specifier: ^0.3.3 version: 0.3.3(vitest@1.2.1) @@ -3966,7 +3966,7 @@ packages: std-env: 3.7.0 test-exclude: 6.0.0 v8-to-istanbul: 9.2.0 - vitest: 1.2.1(@types/node@18.19.8)(@vitest/ui@1.2.1)(jsdom@24.0.0)(sass@1.70.0) + vitest: 1.2.1(@types/node@18.19.8)(@vitest/ui@1.2.1)(happy-dom@13.3.1)(sass@1.70.0) transitivePeerDependencies: - supports-color dev: true @@ -4013,7 +4013,7 @@ packages: pathe: 1.1.2 picocolors: 1.0.0 sirv: 2.0.4 - vitest: 1.2.1(@types/node@18.19.8)(@vitest/ui@1.2.1)(jsdom@24.0.0)(sass@1.70.0) + vitest: 1.2.1(@types/node@18.19.8)(@vitest/ui@1.2.1)(happy-dom@13.3.1)(sass@1.70.0) dev: true /@vitest/utils@1.2.1: @@ -4620,15 +4620,6 @@ packages: - supports-color dev: true - /agent-base@7.1.0: - resolution: {integrity: sha512-o/zjMZRhJxny7OyEF+Op8X+efiELC7k7yOjMzgfzVqOzXqkBkWI79YoTdOtsuWd5BWhAGAuOY/Xa6xpiaWXiNg==} - engines: {node: '>= 14'} - dependencies: - debug: 4.3.4 - transitivePeerDependencies: - - supports-color - dev: true - /agentkeepalive@3.5.2: resolution: {integrity: sha512-e0L/HNe6qkQ7H19kTlRRqUibEAwDK5AFk6y3PtMsuut2VAH6+Q4xZml1tNDJD7kSAyqmbG/K08K5WEJYtUrSlQ==} engines: {node: '>= 4.0.0'} @@ -6478,13 +6469,6 @@ packages: rrweb-cssom: 0.6.0 dev: true - /cssstyle@4.0.1: - resolution: {integrity: sha512-8ZYiJ3A/3OkDd093CBT/0UKDWry7ak4BdPTFP2+QEP7cmhouyq/Up709ASSj2cK02BbZiMgk7kYjZNS4QP5qrQ==} - engines: {node: '>=18'} - dependencies: - rrweb-cssom: 0.6.0 - dev: true - /csstype@3.1.3: resolution: {integrity: sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==} @@ -6524,14 +6508,6 @@ packages: whatwg-url: 12.0.1 dev: true - /data-urls@5.0.0: - resolution: {integrity: sha512-ZYP5VBHshaDAiVZxjbRVcFJpc+4xGgT0bK3vzy1HLN8jTO975HEbuYzZJcHoQEY5K1a0z8YayJkyVETa08eNTg==} - engines: {node: '>=18'} - dependencies: - whatwg-mimetype: 4.0.0 - whatwg-url: 14.0.0 - dev: true - /datauri@3.0.0: resolution: {integrity: sha512-NeDFuUPV1YCpCn8MUIcDk1QnuyenUHs7f4Q5P0n9FFA0neKFrfEH9esR+YMW95BplbYfdmjbs0Pl/ZGAaM2QHQ==} engines: {node: '>= 8'} @@ -8671,6 +8647,15 @@ packages: resolution: {integrity: sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==} dev: true + /happy-dom@13.3.1: + resolution: {integrity: sha512-KIlztn+nRWstprUyI3Wzy1UJrg72uOaoo4SaBLNrV6xrn2Rq86eQruKOL7ZyDhkfou3nEZX6rgRYtvsqwMInvQ==} + engines: {node: '>=16.0.0'} + dependencies: + entities: 4.5.0 + webidl-conversions: 7.0.0 + whatwg-mimetype: 3.0.0 + dev: true + /har-schema@2.0.0: resolution: {integrity: sha512-Oqluz6zhGX8cyRaTQlFMPw80bSJVG2x/cFb8ZPhUILGgHka9SsokCCOQgpveePerqidZOrT14ipqfJb7ILcW5Q==} engines: {node: '>=4'} @@ -8818,13 +8803,6 @@ packages: whatwg-encoding: 2.0.0 dev: true - /html-encoding-sniffer@4.0.0: - resolution: {integrity: sha512-Y22oTqIU4uuPgEemfz7NDJz6OeKf12Lsu+QC+s3BVpda64lTiMYCyGwg5ki4vFxkMwQdeZDl2adZoqUgdFuTgQ==} - engines: {node: '>=18'} - dependencies: - whatwg-encoding: 3.1.1 - dev: true - /html-entities@2.4.0: resolution: {integrity: sha512-igBTJcNNNhvZFRtm8uA6xMY6xYleeDwn3PeBCkDz7tHttv4F2hsDI2aPgNERWzvRcNYHNT3ymRaQzllmXj4YsQ==} dev: true @@ -8967,16 +8945,6 @@ packages: - supports-color dev: true - /http-proxy-agent@7.0.0: - resolution: {integrity: sha512-+ZT+iBxVUQ1asugqnD6oWoRiS25AkjNfG085dKJGtGxkdwLQrMKU5wJr2bOOFAXzKcTuqq+7fZlTMgG3SRfIYQ==} - engines: {node: '>= 14'} - dependencies: - agent-base: 7.1.0 - debug: 4.3.4 - transitivePeerDependencies: - - supports-color - dev: true - /http-proxy-middleware@2.0.6(@types/express@4.17.21): resolution: {integrity: sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==} engines: {node: '>=12.0.0'} @@ -9036,16 +9004,6 @@ packages: - supports-color dev: true - /https-proxy-agent@7.0.2: - resolution: {integrity: sha512-NmLNjm6ucYwtcUmL7JQC1ZQ57LmHP4lT15FQ8D61nak1rO6DH+fz5qNK2Ap5UN4ZapYICE3/0KodcLYSPsPbaA==} - engines: {node: '>= 14'} - dependencies: - agent-base: 7.1.0 - debug: 4.3.4 - transitivePeerDependencies: - - supports-color - dev: true - /human-signals@2.1.0: resolution: {integrity: sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==} engines: {node: '>=10.17.0'} @@ -9762,42 +9720,6 @@ packages: - utf-8-validate dev: true - /jsdom@24.0.0: - resolution: {integrity: sha512-UDS2NayCvmXSXVP6mpTj+73JnNQadZlr9N68189xib2tx5Mls7swlTNao26IoHv46BZJFvXygyRtyXd1feAk1A==} - engines: {node: '>=18'} - peerDependencies: - canvas: ^2.11.2 - peerDependenciesMeta: - canvas: - optional: true - dependencies: - cssstyle: 4.0.1 - data-urls: 5.0.0 - decimal.js: 10.4.3 - form-data: 4.0.0 - html-encoding-sniffer: 4.0.0 - http-proxy-agent: 7.0.0 - https-proxy-agent: 7.0.2 - is-potential-custom-element-name: 1.0.1 - nwsapi: 2.2.7 - parse5: 7.1.2 - rrweb-cssom: 0.6.0 - saxes: 6.0.0 - symbol-tree: 3.2.4 - tough-cookie: 4.1.3 - w3c-xmlserializer: 5.0.0 - webidl-conversions: 7.0.0 - whatwg-encoding: 3.1.1 - whatwg-mimetype: 4.0.0 - whatwg-url: 14.0.0 - ws: 8.16.0 - xml-name-validator: 5.0.0 - transitivePeerDependencies: - - bufferutil - - supports-color - - utf-8-validate - dev: true - /jsesc@0.5.0: resolution: {integrity: sha512-uZz5UnB7u4T9LvwmFqXii7pZSouaRPorGs5who1Ip7VO0wxanFvBL7GkM6dTHlgX+jhBApRetaWpnDabOeTcnA==} hasBin: true @@ -14277,13 +14199,6 @@ packages: punycode: 2.3.1 dev: true - /tr46@5.0.0: - resolution: {integrity: sha512-tk2G5R2KRwBd+ZN0zaEXpmzdKyOYksXwywulIX95MBODjSzMIuQnQ3m8JxgbhnL1LeVo7lqQKsYa1O3Htl7K5g==} - engines: {node: '>=18'} - dependencies: - punycode: 2.3.1 - dev: true - /tree-kill@1.2.2: resolution: {integrity: sha512-L0Orpi8qGpRG//Nd+H90vFB+3iHnue1zSSGmNOOCh1GLJ7rUKVwV2HvijphGQS2UmhUZewS9VgvxYIdgr+fG1A==} hasBin: true @@ -14965,10 +14880,10 @@ packages: vitest: '*' dependencies: jest-canvas-mock: 2.5.2 - vitest: 1.2.1(@types/node@18.19.8)(@vitest/ui@1.2.1)(jsdom@24.0.0)(sass@1.70.0) + vitest: 1.2.1(@types/node@18.19.8)(@vitest/ui@1.2.1)(happy-dom@13.3.1)(sass@1.70.0) dev: true - /vitest@1.2.1(@types/node@18.19.8)(@vitest/ui@1.2.1)(jsdom@24.0.0)(sass@1.70.0): + /vitest@1.2.1(@types/node@18.19.8)(@vitest/ui@1.2.1)(happy-dom@13.3.1)(sass@1.70.0): resolution: {integrity: sha512-TRph8N8rnSDa5M2wKWJCMnztCZS9cDcgVTQ6tsTFTG/odHJ4l5yNVqvbeDJYJRZ6is3uxaEpFs8LL6QM+YFSdA==} engines: {node: ^18.0.0 || >=20.0.0} hasBin: true @@ -15005,7 +14920,7 @@ packages: chai: 4.4.1 debug: 4.3.4 execa: 8.0.1 - jsdom: 24.0.0 + happy-dom: 13.3.1 local-pkg: 0.5.0 magic-string: 0.30.5 pathe: 1.1.2 @@ -15226,13 +15141,6 @@ packages: xml-name-validator: 4.0.0 dev: true - /w3c-xmlserializer@5.0.0: - resolution: {integrity: sha512-o8qghlI8NZHU1lLPrpi2+Uq7abh4GGPpYANlalzWxyWteJOCsr/P+oPBA49TOLu5FTZO4d3F9MnWJfiMo4BkmA==} - engines: {node: '>=18'} - dependencies: - xml-name-validator: 5.0.0 - dev: true - /watchpack@2.4.0: resolution: {integrity: sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==} engines: {node: '>=10.13.0'} @@ -15522,13 +15430,6 @@ packages: iconv-lite: 0.6.3 dev: true - /whatwg-encoding@3.1.1: - resolution: {integrity: sha512-6qN4hJdMwfYBtE3YBTTHhoeuUrDBPZmbQaxWAqSALV/MeEnR5z1xd8UKud2RAkFoPkmB+hli1TZSnyi84xz1vQ==} - engines: {node: '>=18'} - dependencies: - iconv-lite: 0.6.3 - dev: true - /whatwg-fetch@3.6.20: resolution: {integrity: sha512-EqhiFU6daOA8kpjOWTL0olhVOF3i7OrFzSYiGsEMB8GcXS+RrzauAERX65xMeNWVqxA6HXH2m69Z9LaKKdisfg==} dev: false @@ -15538,11 +15439,6 @@ packages: engines: {node: '>=12'} dev: true - /whatwg-mimetype@4.0.0: - resolution: {integrity: sha512-QaKxh0eNIi2mE9p2vEdzfagOKHCcj1pJ56EEHGQOVxp8r9/iszLUUV7v89x9O1p/T+NlTM5W7jW6+cz4Fq1YVg==} - engines: {node: '>=18'} - dev: true - /whatwg-url@12.0.1: resolution: {integrity: sha512-Ed/LrqB8EPlGxjS+TrsXcpUond1mhccS3pchLhzSgPCnTimUCKj3IZE75pAs5m6heB2U2TMerKFUXheyHY+VDQ==} engines: {node: '>=14'} @@ -15551,14 +15447,6 @@ packages: webidl-conversions: 7.0.0 dev: true - /whatwg-url@14.0.0: - resolution: {integrity: sha512-1lfMEm2IEr7RIV+f4lUNPOqfFL+pO+Xw3fJSqmjX9AbXcXcYOkCe1P6+9VBZB6n94af16NfZf+sSk0JCBZC9aw==} - engines: {node: '>=18'} - dependencies: - tr46: 5.0.0 - webidl-conversions: 7.0.0 - dev: true - /whatwg-url@7.1.0: resolution: {integrity: sha512-WUu7Rg1DroM7oQvGWfOiAK21n74Gg+T4elXEQYkOhtyLeWiJFoOGLXPKI/9gzIie9CtwVLm8wtw6YJdKyxSjeg==} dependencies: @@ -15702,11 +15590,6 @@ packages: resolution: {integrity: sha512-ICP2e+jsHvAj2E2lIHxa5tjXRlKDJo4IdvPvCXbXQGdzSfmSpNVyIKMvoZHjDY9DP0zV17iI85o90vRFXNccRw==} engines: {node: '>=12'} - /xml-name-validator@5.0.0: - resolution: {integrity: sha512-EvGK8EJ3DhaHfbRlETOWAS5pO9MZITeauHKJyb8wyajUfQUenkIg2MvLDTZ4T/TgIcm3HU0TFBgWWboAZ30UHg==} - engines: {node: '>=18'} - dev: true - /xml2js@0.5.0: resolution: {integrity: sha512-drPFnkQJik/O+uPKpqSgr22mpuFHqKdbS835iAQrUC73L2F5WkboIRd63ai/2Yg6I1jzifPFKH2NTK+cfglkIA==} engines: {node: '>=4.0.0'} diff --git a/src/packages/__VUE/actionsheet/__tests__/index.spec.ts b/src/packages/__VUE/actionsheet/__tests__/index.spec.ts index b85611ee77..25eb5b86f4 100644 --- a/src/packages/__VUE/actionsheet/__tests__/index.spec.ts +++ b/src/packages/__VUE/actionsheet/__tests__/index.spec.ts @@ -65,7 +65,7 @@ test('should render sure choose when use choose-tag-value', async () => { } }); const item = wrapper.findAll('.nut-action-sheet__item'); - expect(item[0].element.style.color).toContain('238, 10, 36'); + expect(item[0].element.style.color).toContain('#ee0a24'); }); test('should render sure color when use color', async () => { diff --git a/src/packages/__VUE/address/__tests__/__snapshots__/address.spec.ts.snap b/src/packages/__VUE/address/__tests__/__snapshots__/address.spec.ts.snap index c1489d4731..2c661101ca 100644 --- a/src/packages/__VUE/address/__tests__/__snapshots__/address.spec.ts.snap +++ b/src/packages/__VUE/address/__tests__/__snapshots__/address.spec.ts.snap @@ -13,7 +13,7 @@ exports[`Address: choose address item 1`] = ` 请选择所在地区 - + diff --git a/src/packages/__VUE/avatar/__tests__/__snapshots__/avatar.spec.tsx.snap b/src/packages/__VUE/avatar/__tests__/__snapshots__/avatar.spec.tsx.snap index 885e23aff2..541acbbe26 100644 --- a/src/packages/__VUE/avatar/__tests__/__snapshots__/avatar.spec.tsx.snap +++ b/src/packages/__VUE/avatar/__tests__/__snapshots__/avatar.spec.tsx.snap @@ -2,13 +2,13 @@ exports[`Avatar: avatar group render 1`] = ` " - 1 - 2 - 3 - 4 - 5 - 99 + 1 + 2 + 3 + 4 + 5 + 99 " `; -exports[`Avatar: default slot 1`] = `""`; +exports[`Avatar: default slot 1`] = `""`; diff --git a/src/packages/__VUE/avatar/__tests__/avatar.spec.tsx b/src/packages/__VUE/avatar/__tests__/avatar.spec.tsx index 956ede7ff8..c48276a933 100644 --- a/src/packages/__VUE/avatar/__tests__/avatar.spec.tsx +++ b/src/packages/__VUE/avatar/__tests__/avatar.spec.tsx @@ -34,7 +34,7 @@ test('Avatar: bgColor props', () => { } }); const avatar: any = wrapper.find('.nut-avatar'); - expect(avatar.element.style.backgroundColor).toBe('rgb(0, 0, 0)'); + expect(avatar.element.style.backgroundColor).toBe('#000000'); }); test('Avatar: color props', async () => { diff --git a/src/packages/__VUE/avatarcropper/__tests__/__snapshots__/avatarcropper.spec.ts.snap b/src/packages/__VUE/avatarcropper/__tests__/__snapshots__/avatarcropper.spec.ts.snap index 62dbf11e22..2be6d9b269 100644 --- a/src/packages/__VUE/avatarcropper/__tests__/__snapshots__/avatarcropper.spec.ts.snap +++ b/src/packages/__VUE/avatarcropper/__tests__/__snapshots__/avatarcropper.spec.ts.snap @@ -17,10 +17,10 @@ exports[`layout default slot 1`] = ` -
+
-
+
diff --git a/src/packages/__VUE/avatarcropper/__tests__/avatarcropper.spec.ts b/src/packages/__VUE/avatarcropper/__tests__/avatarcropper.spec.ts index e61bfdc078..487da15423 100644 --- a/src/packages/__VUE/avatarcropper/__tests__/avatarcropper.spec.ts +++ b/src/packages/__VUE/avatarcropper/__tests__/avatarcropper.spec.ts @@ -42,7 +42,6 @@ test('AvatarCropper: Select the image to open the crop window', async () => { expect(wrapper.find('.nut-cropper-popup').attributes()).toHaveProperty('style', 'display: none;'); await input.trigger('change'); await sleep(); - expect(wrapper.find('.nut-cropper-popup').attributes()).toHaveProperty('style', ''); const canvas = wrapper.find('.nut-cropper-popup__canvas'); expect(canvas.exists()).toBe(true); diff --git a/src/packages/__VUE/button/__tests__/button.spec.ts b/src/packages/__VUE/button/__tests__/button.spec.ts index f012b76b1a..fe06116ba2 100644 --- a/src/packages/__VUE/button/__tests__/button.spec.ts +++ b/src/packages/__VUE/button/__tests__/button.spec.ts @@ -69,6 +69,6 @@ test('props color & plain', async () => { plain: true }); await nextTick(); - expect(btn.attributes('style')).toContain('background: rgb(255, 255, 255)'); + expect(btn.attributes('style')).toContain('background: #fff'); expect(btn.attributes('style')).toContain('border-color: blue'); }); diff --git a/src/packages/__VUE/card/__tests__/__snapshots__/index.spec.ts.snap b/src/packages/__VUE/card/__tests__/__snapshots__/index.spec.ts.snap index cb5722b573..e58de9b3cb 100644 --- a/src/packages/__VUE/card/__tests__/__snapshots__/index.spec.ts.snap +++ b/src/packages/__VUE/card/__tests__/__snapshots__/index.spec.ts.snap @@ -25,12 +25,12 @@ exports[`Card: normal props 1`] = ` 自营 - 厂商配送 + 厂商配送
-
阳澄湖大闸蟹自营店>
+
阳澄湖大闸蟹自营店>
" @@ -45,7 +45,7 @@ exports[`Card: render prolist , price and origin slot correctly 1`] = ` - + @@ -81,7 +81,7 @@ exports[`Card: render shop-tag and footer slot correctly 1`] = ` - + diff --git a/src/packages/__VUE/cascader/__tests__/__snapshots__/cascader.spec.ts.snap b/src/packages/__VUE/cascader/__tests__/__snapshots__/cascader.spec.ts.snap index ef3872788b..4a9cf2e843 100644 --- a/src/packages/__VUE/cascader/__tests__/__snapshots__/cascader.spec.ts.snap +++ b/src/packages/__VUE/cascader/__tests__/__snapshots__/cascader.spec.ts.snap @@ -308,7 +308,7 @@ exports[`Cascader > modelValue 2`] = ` - + 福建 @@ -370,12 +370,12 @@ exports[`Cascader > modelValue 3`] = ` - + 湖南 - + 福建 @@ -414,12 +414,12 @@ exports[`Cascader > modelValue 4`] = ` - + 湖南 - + 福建 @@ -785,7 +785,7 @@ exports[`Cascader > select 1`] = ` - + 福建 @@ -848,7 +848,7 @@ exports[`Cascader > select 2`] = ` - + 福建 @@ -857,7 +857,7 @@ exports[`Cascader > select 2`] = ` - + 福州 @@ -925,7 +925,7 @@ exports[`Cascader > select 3`] = ` - + 福建 @@ -934,7 +934,7 @@ exports[`Cascader > select 3`] = ` - + 福州 @@ -943,7 +943,7 @@ exports[`Cascader > select 3`] = ` - + 鼓楼区 @@ -992,7 +992,7 @@ exports[`Cascader > select 4`] = ` - + 福建 @@ -1092,7 +1092,7 @@ exports[`Cascader > select with lazy 3`] = ` - + A0 @@ -1174,7 +1174,7 @@ exports[`Cascader > select with lazy 4`] = ` - + A12 @@ -1260,7 +1260,7 @@ exports[`Cascader > select with lazy 5`] = ` - + A21 @@ -1299,7 +1299,7 @@ exports[`Cascader > select with lazy 6`] = ` - + A0 @@ -1343,12 +1343,12 @@ exports[`Cascader > select with lazy 7`] = ` - + A0 - + B0 diff --git a/src/packages/__VUE/cell/__tests__/__snapshots__/cell.spec.ts.snap b/src/packages/__VUE/cell/__tests__/__snapshots__/cell.spec.ts.snap index b108e24e87..8ebb2f62af 100644 --- a/src/packages/__VUE/cell/__tests__/__snapshots__/cell.spec.ts.snap +++ b/src/packages/__VUE/cell/__tests__/__snapshots__/cell.spec.ts.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`prop desc-text-align left 1`] = ` -" +" 张三 @@ -10,7 +10,7 @@ exports[`prop desc-text-align left 1`] = ` `; exports[`prop isLink 1`] = ` -" +" @@ -20,7 +20,7 @@ exports[`prop isLink 1`] = ` `; exports[`prop title desc subtitle 1`] = ` -" +" 标题1 @@ -31,10 +31,10 @@ exports[`prop title desc subtitle 1`] = ` " `; -exports[`slot default test 1`] = `"Custom Content"`; +exports[`slot default test 1`] = `"Custom Content"`; exports[`slot link、icon test 1`] = ` -" +" Custom Icon 标题1 diff --git a/src/packages/__VUE/checkbox/__tests__/__snapshots__/checkbox.spec.ts.snap b/src/packages/__VUE/checkbox/__tests__/__snapshots__/checkbox.spec.tsx.snap similarity index 100% rename from src/packages/__VUE/checkbox/__tests__/__snapshots__/checkbox.spec.ts.snap rename to src/packages/__VUE/checkbox/__tests__/__snapshots__/checkbox.spec.tsx.snap diff --git a/src/packages/__VUE/checkbox/__tests__/checkbox.spec.ts b/src/packages/__VUE/checkbox/__tests__/checkbox.spec.ts deleted file mode 100644 index 70e1deb3b1..0000000000 --- a/src/packages/__VUE/checkbox/__tests__/checkbox.spec.ts +++ /dev/null @@ -1,118 +0,0 @@ -import { mount } from '@vue/test-utils'; -import Checkbox from '../index.vue'; -import { reactive, toRefs } from 'vue'; - -test('basic usage', () => { - const wrapper = mount(Checkbox, { - props: { - modelValue: true, - label: '复选框' - } - }); - - expect(wrapper.html()).toMatchSnapshot(); -}); - -test('checkbox disabled test', async () => { - const wrapper = mount({ - components: { - 'nut-checkbox': Checkbox - }, - template: ` - - `, - setup() { - const state = reactive({ - checkbox1: true - }); - return { ...toRefs(state) }; - } - }); - - const items = wrapper.findAll('.nut-checkbox'); - - await items[0].trigger('click'); - expect(wrapper.vm.checkbox1).toEqual(true); - expect(wrapper.find('.nut-checkbox__icon--disable')).toBeTruthy(); -}); - -test('checkbox text-position test', () => { - const wrapper = mount({ - components: { - 'nut-checkbox': Checkbox - }, - template: ` - - `, - setup() { - const state = reactive({ - checkbox1: true, - checkbox2: true - }); - return { ...toRefs(state) }; - } - }); - - const items = wrapper.findAll('.nut-checkbox'); - expect((items[1] as any).find('.nut-checkbox--reverse')).toBeTruthy(); -}); - -test('checkbox icon-size test', () => { - const wrapper = mount({ - components: { - 'nut-checkbox': Checkbox - }, - template: ` - - `, - setup() { - const state = reactive({ - checkbox5: true, - checkbox6: true - }); - return { ...toRefs(state) }; - } - }); - - const items = wrapper.findAll('.nut-checkbox'); - expect((items[0].findAll('svg') as any)[0].element.style.width).toEqual('25px'); - expect((items[1].findAll('svg') as any)[0].element.style.height).toEqual('10px'); -}); - -test('should emit "update:modelValue" event when checkbox is clicked', async () => { - const wrapper = mount(Checkbox); - - wrapper.trigger('click'); - expect(wrapper.emitted('update:modelValue')![0]).toEqual([true]); - - await wrapper.setProps({ modelValue: true }); - wrapper.trigger('click'); - expect(wrapper.emitted('update:modelValue')![1]).toEqual([false]); -}); - -test('checkbox shape test', async () => { - const wrapper = mount({ - components: { - 'nut-checkbox': Checkbox - }, - template: ` - - ` - }); - - const items = wrapper.findAll('.nut-checkbox'); - - expect((items[0] as any).find('.nut-checkbox__button').exists()).toBeTruthy(); - expect((items[1] as any).find('.nut-checkbox__button').exists()).toBeFalsy(); -}); diff --git a/src/packages/__VUE/checkbox/__tests__/checkbox.spec.tsx b/src/packages/__VUE/checkbox/__tests__/checkbox.spec.tsx new file mode 100644 index 0000000000..e2acd09f1d --- /dev/null +++ b/src/packages/__VUE/checkbox/__tests__/checkbox.spec.tsx @@ -0,0 +1,76 @@ +import { mount } from '@vue/test-utils'; +import Checkbox from '../index.vue'; +import { ref } from 'vue'; + +test('basic usage', () => { + const wrapper = mount(Checkbox, { + props: { + modelValue: true, + label: '复选框' + } + }); + + expect(wrapper.html()).toMatchSnapshot(); +}); + +test('Checkbox: disabled', async () => { + const val = ref(true); + const wrapper = mount(() => { + return ; + }); + + const items = wrapper.findAll('.nut-checkbox'); + await items[0].trigger('click'); + expect(val.value).toEqual(true); + expect(wrapper.find('.nut-checkbox__icon--disable')).toBeTruthy(); +}); + +test('Checkbox: text-position', () => { + const val = ref(true); + const wrapper = mount(() => { + return ; + }); + const item = wrapper.find('.nut-checkbox'); + expect(item.classes()).toContain('nut-checkbox--reverse'); +}); + +test('Checkbox: icon-size', () => { + const wrapper = mount(() => { + return ( + <> + + + + ); + }); + + const items = wrapper.findAll('.nut-checkbox'); + expect(items[0].find('svg').element.style.width).toEqual('25px'); + expect(items[1].find('svg').element.style.height).toEqual('12px'); +}); + +test('Checkbox: click', async () => { + const wrapper = mount(Checkbox); + + wrapper.trigger('click'); + expect(wrapper.emitted('update:modelValue')![0]).toEqual([true]); + + await wrapper.setProps({ modelValue: true }); + wrapper.trigger('click'); + expect(wrapper.emitted('update:modelValue')![1]).toEqual([false]); +}); + +test('Checkbox: shape', async () => { + const wrapper = mount(() => { + return ( + <> + + + + ); + }); + + const items = wrapper.findAll('.nut-checkbox'); + expect(items[0].find('.nut-checkbox__button').exists()).toBeTruthy(); + expect(items[1].find('.nut-checkbox__button').exists()).toBeFalsy(); +}); diff --git a/src/packages/__VUE/checkboxgroup/__tests__/checkboxgroup.spec.ts b/src/packages/__VUE/checkboxgroup/__tests__/checkboxgroup.spec.ts deleted file mode 100644 index 03f65d8ffe..0000000000 --- a/src/packages/__VUE/checkboxgroup/__tests__/checkboxgroup.spec.ts +++ /dev/null @@ -1,96 +0,0 @@ -import { mount } from '@vue/test-utils'; -import Checkboxgroup from '../index.vue'; -import Checkbox from '../../checkbox/index.vue'; -import { reactive, toRefs } from 'vue'; - -test('checkbox-group basic usage', async () => { - const wrapper = mount({ - components: { - 'nut-checkbox-group': Checkboxgroup, - 'nut-checkbox': Checkbox - }, - template: ` - - `, - setup() { - const state = reactive({ - checkboxgroup1: [] - }); - return { ...toRefs(state) }; - } - }); - - const items = wrapper.findAll('.nut-checkbox'); - - await items[0].trigger('click'); - expect(wrapper.vm.checkboxgroup1).toEqual(['1']); -}); - -test('checkbox-group disabled test', async () => { - const wrapper = mount({ - components: { - 'nut-checkbox-group': Checkboxgroup, - 'nut-checkbox': Checkbox - }, - template: ` - - `, - setup() { - const state = reactive({ - checkboxgroup1: [] - }); - return { ...toRefs(state) }; - } - }); - - const items = wrapper.findAll('.nut-checkbox'); - - await items[0].trigger('click'); - expect(wrapper.vm.checkboxgroup1).toEqual([]); - expect(wrapper.find('.nut-checkbox__icon--disable')).toBeTruthy(); -}); - -// test('checkbox-group change event test',async () => { -// const wrapper = mount({ -// components: { -// 'nut-checkbox-group': Checkboxgroup, -// 'nut-checkbox': Checkbox -// }, -// template: ` -// -// `, -// setup() { -// const state = reactive({ -// checkboxgroup1: [], -// }); -// return { ...toRefs(state) }; -// } -// }); - -// const items = wrapper.findAll('.nut-checkbox'); - -// await items[0].trigger('click'); -// // expect(wrapper.vm.checkboxgroup1).toEqual(['1']); -// expect(wrapper.emitted('change')![0]).toEqual(['1']); -// }); diff --git a/src/packages/__VUE/checkboxgroup/__tests__/checkboxgroup.spec.tsx b/src/packages/__VUE/checkboxgroup/__tests__/checkboxgroup.spec.tsx new file mode 100644 index 0000000000..895d3899a8 --- /dev/null +++ b/src/packages/__VUE/checkboxgroup/__tests__/checkboxgroup.spec.tsx @@ -0,0 +1,42 @@ +import { mount } from '@vue/test-utils'; +import CheckboxGroup from '../index.vue'; +import Checkbox from '../../checkbox/index.vue'; +import { ref } from 'vue'; + +test('CheckboxGroup: v-model & change', async () => { + const val = ref([]); + const onChange = vi.fn(); + const wrapper = mount(() => { + return ( + + + + + + + ); + }); + const items = wrapper.findAll('.nut-checkbox'); + await items[0].trigger('click'); + expect(val.value).toEqual(['1']); + expect(onChange).toBeCalledTimes(1); + expect(onChange).toBeCalledWith(['1']); +}); + +test('CheckboxGroup: disabled', async () => { + const val = ref([]); + const wrapper = mount(() => { + return ( + + + + + + + ); + }); + const items = wrapper.findAll('.nut-checkbox'); + await items[0].trigger('click'); + expect(val.value).toEqual([]); + expect(wrapper.find('.nut-checkbox__icon--disable')).toBeTruthy(); +}); diff --git a/src/packages/__VUE/dialog/__tests__/__snapshots__/function.spec.ts.snap b/src/packages/__VUE/dialog/__tests__/__snapshots__/function.spec.ts.snap index e6bc0b1eb3..0955afa93a 100644 --- a/src/packages/__VUE/dialog/__tests__/__snapshots__/function.spec.ts.snap +++ b/src/packages/__VUE/dialog/__tests__/__snapshots__/function.spec.ts.snap @@ -1,5 +1,5 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`function Dialog > dialog cancelText okText 1`] = `"取消文案自定义"`; +exports[`function Dialog > dialog cancelText okText 1`] = `"取消文案自定义"`; exports[`function Dialog > dialog cancelText okText 2`] = `"确定文案自定义"`; diff --git a/src/packages/__VUE/dialog/__tests__/function.spec.ts b/src/packages/__VUE/dialog/__tests__/function.spec.ts index 175062433e..51b183be03 100644 --- a/src/packages/__VUE/dialog/__tests__/function.spec.ts +++ b/src/packages/__VUE/dialog/__tests__/function.spec.ts @@ -19,7 +19,7 @@ describe('function Dialog', () => { `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__footer` ) as HTMLDivElement; expect(footer.children.length).toEqual(2); - let cancelBtn = footer.querySelector(`#dialog-${dialog.options.id} .nut-dialog__footer-cancel`) as HTMLDivElement; + let cancelBtn = document.querySelector(`#dialog-${dialog.options.id} .nut-dialog__footer-cancel`) as HTMLDivElement; cancelBtn.click(); cancelBtn = document.querySelector(`#dialog-${dialog.options.id}`) as HTMLDivElement; expect(cancelBtn).toBeNull(); @@ -43,7 +43,7 @@ describe('function Dialog', () => { `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__footer` ) as HTMLDivElement; expect(footer.children.length).toEqual(2); - let okBtn = footer.querySelector(`#dialog-${dialog.options.id} .nut-dialog__footer-ok`) as HTMLDivElement; + let okBtn = document.querySelector(`#dialog-${dialog.options.id} .nut-dialog__footer-ok`) as HTMLDivElement; okBtn.click(); okBtn = document.querySelector(`#dialog-${dialog.options.id}`) as HTMLDivElement; expect(okBtn).toBeNull(); diff --git a/src/packages/__VUE/dialog/__tests__/index.spec.ts b/src/packages/__VUE/dialog/__tests__/index.spec.ts index b443e3b771..8bdca70229 100644 --- a/src/packages/__VUE/dialog/__tests__/index.spec.ts +++ b/src/packages/__VUE/dialog/__tests__/index.spec.ts @@ -9,11 +9,6 @@ beforeEach(() => { document.body.appendChild(el); }); -afterEach(() => { - // clean up - document.body.outerHTML = ''; -}); - test('Dialog: basic props', async () => { const wrapper = mount(Dialog, { props: { diff --git a/src/packages/__VUE/divider/__tests__/divider.spec.ts b/src/packages/__VUE/divider/__tests__/divider.spec.ts index caac2afdb9..40016e6169 100644 --- a/src/packages/__VUE/divider/__tests__/divider.spec.ts +++ b/src/packages/__VUE/divider/__tests__/divider.spec.ts @@ -45,7 +45,7 @@ test('Divider: custom style', () => { } }); const _html = wrapper.find('.nut-divider'); - expect((_html.element as HTMLElement).style.color).toBe('rgb(25, 137, 250)'); + expect((_html.element as HTMLElement).style.color).toBe('#1989fa'); expect((_html.element as HTMLElement).style.borderColor).toBe('#1989fa'); expect((_html.element as HTMLElement).style.padding).toBe('0px 16px'); }); diff --git a/src/packages/__VUE/ecard/__tests__/__snapshots__/index.spec.ts.snap b/src/packages/__VUE/ecard/__tests__/__snapshots__/index.spec.ts.snap index 0144480c68..298ef2b17f 100644 --- a/src/packages/__VUE/ecard/__tests__/__snapshots__/index.spec.ts.snap +++ b/src/packages/__VUE/ecard/__tests__/__snapshots__/index.spec.ts.snap @@ -17,7 +17,7 @@ exports[`should render ecard 1`] = ` - diff --git a/src/packages/__VUE/ellipsis/__tests__/ellipsis.spec.ts b/src/packages/__VUE/ellipsis/__tests__/ellipsis.spec.ts index 08f8a8688c..0ae78d0d03 100644 --- a/src/packages/__VUE/ellipsis/__tests__/ellipsis.spec.ts +++ b/src/packages/__VUE/ellipsis/__tests__/ellipsis.spec.ts @@ -3,17 +3,18 @@ import { nextTick } from 'vue'; import Ellipsis from '../index.vue'; const originGetComputedStyle = window.getComputedStyle; - const lineHeight = 19.5; - const content = 'NutUI3.0上线后我们研发团队也在不断的优化、测试、使用、迭代 Vue3 的相关组件，但是在跨端小程序的开发过程中，发现没有合适的组件库可以支持多端开发。为了填补这一空白，同时为了优化开发者体验，让 NutUI 能够为更多的开发者带来便利，我们决定在 NutUI 中增加小程序多端适配的能力。'; beforeAll(() => { window.getComputedStyle = (el) => { const style = originGetComputedStyle(el); - style.lineHeight = `${lineHeight}px`; - return style; + return { + lineHeight: `${lineHeight}px`, + paddingTop: style.paddingTop, + paddingBottom: style.paddingBottom + } as any; }; Object.defineProperty(HTMLElement.prototype, 'offsetHeight', { get() { diff --git a/src/packages/__VUE/notify/__tests__/function.spec.ts b/src/packages/__VUE/notify/__tests__/function.spec.ts index 9fb2296f8b..dbe9521a31 100644 --- a/src/packages/__VUE/notify/__tests__/function.spec.ts +++ b/src/packages/__VUE/notify/__tests__/function.spec.ts @@ -10,8 +10,8 @@ describe('function notify', () => { }); const textNotify = document.querySelector('.nut-notify') as HTMLElement; expect(textNotify.innerHTML).toContain('基础用法'); - expect(textNotify.style.color).toEqual('rgb(173, 0, 0)'); - expect(textNotify.style.background).toEqual('rgb(255, 225, 225)'); + expect(textNotify.style.color).toEqual('#ad0000'); + expect(textNotify.style.background).toEqual('#ffe1e1'); await sleep(50); expect(textNotify.style.display).toEqual(''); }); diff --git a/src/packages/__VUE/radio/__tests__/radio.spec.tsx b/src/packages/__VUE/radio/__tests__/radio.spec.tsx new file mode 100644 index 0000000000..b32a79131f --- /dev/null +++ b/src/packages/__VUE/radio/__tests__/radio.spec.tsx @@ -0,0 +1,119 @@ +import { mount } from '@vue/test-utils'; +import RadioGroup from '../../radiogroup/index.vue'; +import Radio from '../index.vue'; +import { ref } from 'vue'; + +test('Radio: v-model & change', async () => { + const val = ref(''); + const onChange = vi.fn(); + const wrapper = mount(() => { + return ( + <> + + + + + + + + ); + }); + + const items = wrapper.findAll('.nut-radio'); + await items[0].trigger('click'); + expect(val.value).toEqual('1'); + expect(onChange).toBeCalledTimes(1); + expect(onChange).toBeCalledWith('1'); +}); + +test('Radio: text-position', () => { + const wrapper = mount(() => { + return ( + <> + + + + + + + + ); + }); + + const items = wrapper.findAll('.nut-radio'); + expect(items[0].classes()).toContain('nut-radio--reverse'); +}); + +test('Radio: direction', () => { + const wrapper = mount(() => { + return ( + <> + + + + + + + + ); + }); + + const item = wrapper.find('.nut-radio-group'); + expect(item.html()).toContain('nut-radio-group--horizontal'); +}); + +test('Radio: disabled', async () => { + const val = ref('4'); + const onChange = vi.fn(); + const wrapper = mount(() => { + return ( + <> + + + + + + + + ); + }); + + const items = wrapper.findAll('.nut-radio'); + await items[1].trigger('click'); + expect(onChange).toBeCalledTimes(0); + expect(val.value).toBe('4'); +}); + +test('Radio: icon-size', async () => { + const wrapper = mount(() => { + return ( + <> + + + + + + ); + }); + + const items = wrapper.findAll('.nut-radio'); + expect(items[0].findAll('svg')[0].element.style.width).toEqual('25px'); + expect(items[1].findAll('svg')[0].element.style.height).toEqual('12px'); +}); + +test('Radio: shape', async () => { + const wrapper = mount(() => { + return ( + <> + + + + + + ); + }); + + const items = wrapper.findAll('.nut-radio'); + expect(items[0].classes()).toContain('nut-radio--button'); + expect(items[1].classes()).toContain('nut-radio--round'); +}); diff --git a/src/packages/__VUE/radiogroup/__tests__/radiogroup.spec.ts b/src/packages/__VUE/radiogroup/__tests__/radiogroup.spec.ts deleted file mode 100644 index b83f819555..0000000000 --- a/src/packages/__VUE/radiogroup/__tests__/radiogroup.spec.ts +++ /dev/null @@ -1,184 +0,0 @@ -import { mount } from '@vue/test-utils'; -import RadioGroup from '../index.vue'; -import Radio from '../../radio/index.vue'; -import { reactive, toRefs } from 'vue'; - -test('should emit "update:modelValue" and "change" event when radio is clicked', async () => { - const wrapper = mount({ - emits: ['change'], - components: { - 'nut-radio-group': RadioGroup, - 'nut-radio': Radio - }, - template: ` - - `, - setup(props: any, { emit }: any) { - const state = reactive({ - radioVal: '' - }); - return { - emit, - change(value: string) { - emit('change', value); - }, - ...toRefs(state) - }; - } - }); - - const items = wrapper.findAll('.nut-radio'); - - await items[0].trigger('click'); - expect(wrapper.vm.radioVal).toEqual('1'); - expect(wrapper.emitted('change')![0]).toEqual(['1']); -}); - -test('radiogroup text-position test', () => { - const wrapper = mount({ - components: { - 'nut-radio-group': RadioGroup, - 'nut-radio': Radio - }, - template: ` - - `, - setup() { - const state = reactive({ - radioVal: '' - }); - return { - ...toRefs(state) - }; - } - }); - - const items = wrapper.findAll('.nut-radio'); - expect((items[1] as any).find('.nut-radio--reverse')).toBeTruthy(); -}); - -test('radiogroup direction test', () => { - const wrapper = mount({ - components: { - 'nut-radio-group': RadioGroup, - 'nut-radio': Radio - }, - template: ` - - `, - setup() { - const state = reactive({ - radioVal: '' - }); - return { - ...toRefs(state) - }; - } - }); - - const items = wrapper.findAll('.nut-radio-group'); - expect((items[0] as any).find('.nut-radio-group--horizontal')).toBeTruthy(); -}); - -test('radio disabled test', async () => { - const wrapper = mount({ - components: { - 'nut-radio-group': RadioGroup, - 'nut-radio': Radio - }, - template: ` - - `, - setup() { - const state = reactive({ - radioVal: '' - }); - return { - ...toRefs(state) - }; - } - }); - - const items: any = wrapper.findAll('.nut-radio'); - expect(items[1].find('.nut-radio__icon--disable')).toBeTruthy(); -}); - -test('radio icon-size test', async () => { - const wrapper = mount({ - components: { - 'nut-radio-group': RadioGroup, - 'nut-radio': Radio - }, - template: ` - - `, - setup() { - const state = reactive({ - radioVal: '' - }); - return { - ...toRefs(state) - }; - } - }); - - const items: any = wrapper.findAll('.nut-radio'); - expect((items[0].findAll('svg') as any)[0].element.style.width).toEqual('25px'); - expect((items[1].findAll('svg') as any)[0].element.style.height).toEqual('12px'); -}); - -test('radio shape test', async () => { - const wrapper = mount({ - components: { - 'nut-radio-group': RadioGroup, - 'nut-radio': Radio - }, - template: ` - - `, - setup() { - const state = reactive({ - radioVal: '' - }); - return { - ...toRefs(state) - }; - } - }); - - const items = wrapper.findAll('.nut-radio'); - expect((items[0] as any).find('.nut-radio--button')).toBeTruthy(); - expect((items[1] as any).find('.nut-radio--round')).toBeTruthy(); -}); diff --git a/src/packages/__VUE/range/__tests__/range.spec.ts b/src/packages/__VUE/range/__tests__/range.spec.ts index 4888b3e72f..82eeccccff 100644 --- a/src/packages/__VUE/range/__tests__/range.spec.ts +++ b/src/packages/__VUE/range/__tests__/range.spec.ts @@ -56,10 +56,8 @@ test('should change color template when use color props', async () => { await nextTick(); const root = wrapper.find('.nut-range'); const bar = wrapper.find('.nut-range-bar'); - const btn = wrapper.find('.nut-range-button'); expect(root.element.style.backgroundColor).toEqual('rgb(163, 184, 255)'); expect(bar.element.style.background).toEqual('rgb(238, 238, 238)'); - expect(btn.element.style.borderColor).toEqual('rgb(52,96,250)'); }); test('should render slots template when use slots', async () => { diff --git a/src/packages/__VUE/sidenavbar/__tests__/index.spec.ts b/src/packages/__VUE/sidenavbar/__tests__/index.spec.ts deleted file mode 100644 index b4953177a3..0000000000 --- a/src/packages/__VUE/sidenavbar/__tests__/index.spec.ts +++ /dev/null @@ -1,79 +0,0 @@ -import { mount } from '@vue/test-utils'; -import SideNavBar from '../index.vue'; -import SideNavBarItem from '../../sidenavbaritem/index.vue'; -import SubSideNavBar from '../../subsidenavbar/index.vue'; -import { nextTick } from 'vue'; - -const template = ` - - - - - - - - - - - - -`; - -test('render offset props', async () => { - const wrapper = mount({ - components: { - 'nut-side-navbar': SideNavBar, - 'nut-side-navbar-item': SideNavBarItem, - 'nut-sub-side-navbar': SubSideNavBar - }, - template, - setup: () => {} - }); - - await nextTick(); - - const subSideNavBar = wrapper.findAll('.nut-sub-side-navbar__title'); - - expect((subSideNavBar[0].element as HTMLElement).style.paddingLeft).toEqual('30px'); - expect((subSideNavBar[1].element as HTMLElement).style.paddingLeft).toEqual('60px'); - expect((subSideNavBar[2].element as HTMLElement).style.paddingLeft).toEqual('60px'); -}); - -test('render subsidenavbar open props', async () => { - const wrapper = mount({ - components: { - 'nut-side-navbar': SideNavBar, - 'nut-side-navbar-item': SideNavBarItem, - 'nut-sub-side-navbar': SubSideNavBar - }, - template, - setup: () => {} - }); - - await nextTick(); - - const subSideNavBar = wrapper.findAll('.nut-sub-side-navbar__list'); - - expect((subSideNavBar[1].element as HTMLElement).style.height).toEqual('0px'); -}); - -test('subsidenavbar trigger click', async () => { - const wrapper = mount({ - components: { - 'nut-side-navbar': SideNavBar, - 'nut-side-navbar-item': SideNavBarItem, - 'nut-sub-side-navbar': SubSideNavBar - }, - template - }); - - await nextTick(); - - const subSideNavBarTitle = wrapper.findAll('.nut-sub-side-navbar__title'); - const subSideNavBarList = wrapper.findAll('.nut-sub-side-navbar__list'); - - await subSideNavBarTitle[0].trigger('click'); - await nextTick(); - - expect((subSideNavBarList[0].element as HTMLElement).style.height).toEqual('0px'); -}); diff --git a/src/packages/__VUE/sidenavbar/__tests__/index.spec.tsx b/src/packages/__VUE/sidenavbar/__tests__/index.spec.tsx new file mode 100644 index 0000000000..a760add9ae --- /dev/null +++ b/src/packages/__VUE/sidenavbar/__tests__/index.spec.tsx @@ -0,0 +1,48 @@ +import { mount } from '@vue/test-utils'; +import SideNavbar from '../index.vue'; +import SideNavbarItem from '../../sidenavbaritem/index.vue'; +import SubSideNavbar from '../../subsidenavbar/index.vue'; + +beforeAll(() => { + MutationObserver.prototype.observe = vi.fn(); +}); + +const template = ( + <> + + + + + + + + + + + + + +); + +test('SideNavbar: offset', async () => { + const wrapper = mount(() => { + return template; + }); + + const items = wrapper.findAll('.nut-sub-side-navbar__title'); + expect(items[0].attributes('style')).toContain('padding-left: 30px'); + expect(items[1].attributes('style')).toContain('padding-left: 60px'); + expect(items[2].attributes('style')).toContain('padding-left: 60px'); +}); + +test('SideNavbar: click', async () => { + const wrapper = mount(() => { + return template; + }); + + const items = wrapper.findAll('.nut-sub-side-navbar__title'); + const list = wrapper.findAll('.nut-sub-side-navbar__list'); + + await items[0].trigger('click'); + expect(list[0].attributes('style')).toContain('display: none'); +}); diff --git a/src/packages/__VUE/skeleton/__tests__/__snapshots__/skeleton.spec.ts.snap b/src/packages/__VUE/skeleton/__tests__/__snapshots__/skeleton.spec.ts.snap index 5482cdff22..acb4646943 100644 --- a/src/packages/__VUE/skeleton/__tests__/__snapshots__/skeleton.spec.ts.snap +++ b/src/packages/__VUE/skeleton/__tests__/__snapshots__/skeleton.spec.ts.snap @@ -1,6 +1,6 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`should change avatar shape when using avatarShape prop 1`] = `""`; +exports[`should change avatar shape when using avatarShape prop 1`] = `""`; exports[`should change avatar size when using avatarSize prop > 20px 1`] = `"20px"`; diff --git a/src/packages/__VUE/steps/__tests__/__snapshots__/index.spec.tsx.snap b/src/packages/__VUE/steps/__tests__/__snapshots__/index.spec.tsx.snap index 6fabc27260..010b1885b6 100644 --- a/src/packages/__VUE/steps/__tests__/__snapshots__/index.spec.tsx.snap +++ b/src/packages/__VUE/steps/__tests__/__snapshots__/index.spec.tsx.snap @@ -1,3 +1,3 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html -exports[`step props and icon slots 1`] = `"svg"`; +exports[`step props and icon slots 1`] = `"SVG"`; diff --git a/src/packages/__VUE/sticky/__tests__/__snapshots__/index.spec.ts.snap b/src/packages/__VUE/sticky/__tests__/__snapshots__/index.spec.ts.snap index 11dcfc43bd..286aea1659 100644 --- a/src/packages/__VUE/sticky/__tests__/__snapshots__/index.spec.ts.snap +++ b/src/packages/__VUE/sticky/__tests__/__snapshots__/index.spec.ts.snap @@ -7,7 +7,7 @@ exports[`should sticky to bottom after scroll 1`] = ` `; exports[`should sticky to top after scroll 1`] = ` -"
+"
" `; diff --git a/src/packages/__VUE/tabbar/__tests__/__snapshots__/index.spec.tsx.snap b/src/packages/__VUE/tabbar/__tests__/__snapshots__/index.spec.tsx.snap index 887288d80d..f75a05cf64 100644 --- a/src/packages/__VUE/tabbar/__tests__/__snapshots__/index.spec.tsx.snap +++ b/src/packages/__VUE/tabbar/__tests__/__snapshots__/index.spec.tsx.snap @@ -1,13 +1,13 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`should render fixed element when using bottom prop 1`] = ` -"
+"
" `; exports[`should render tabbar when default 1`] = ` -"
+"
diff --git a/src/packages/__VUE/tabbar/__tests__/index.spec.tsx b/src/packages/__VUE/tabbar/__tests__/index.spec.tsx index 7b3e4e0470..28e574bab0 100644 --- a/src/packages/__VUE/tabbar/__tests__/index.spec.tsx +++ b/src/packages/__VUE/tabbar/__tests__/index.spec.tsx @@ -106,7 +106,6 @@ test('should match active tabbar by clcik', async () => { expect(tabbarItem[2].element.style.color).toEqual('blue'); }); -// jsdom: Not implemented: navigation test('should show sure emitted when click', async () => { const tabSwitch = vi.fn(); const wrapper = mount(() => { diff --git a/src/packages/__VUE/tabs/__tests__/index.spec.tsx b/src/packages/__VUE/tabs/__tests__/index.spec.tsx index 705325d8d8..ed0b05ce2c 100644 --- a/src/packages/__VUE/tabs/__tests__/index.spec.tsx +++ b/src/packages/__VUE/tabs/__tests__/index.spec.tsx @@ -41,7 +41,7 @@ test('base tabs props', async () => { }); await nextTick(); const stepItem = wrapper.find('.nut-tabs__titles'); - expect((stepItem.element as HTMLElement).style.background).toEqual('rgb(245, 245, 245)'); + expect((stepItem.element as HTMLElement).style.background).toEqual('#f5f5f5'); const _stepItem = wrapper.findAll('.horizontal'); expect(_stepItem.length).toBe(1); const _stepItem1 = wrapper.findAll('.nut-tabs__titles')[0]; diff --git a/src/packages/__VUE/timeselect/__tests__/timeselect.spec.ts b/src/packages/__VUE/timeselect/__tests__/timeselect.spec.ts index 9168703507..ddf90be6a5 100644 --- a/src/packages/__VUE/timeselect/__tests__/timeselect.spec.ts +++ b/src/packages/__VUE/timeselect/__tests__/timeselect.spec.ts @@ -3,6 +3,7 @@ import { reactive, toRefs, nextTick } from 'vue'; import TimeSelect from '../index.vue'; import TimePanel from '../../timepannel/index.vue'; import TimeDetail from '../../timedetail/index.vue'; +import Popup from '../../popup/index.vue'; test('props test', async () => { const wrapper = mount({ @@ -80,29 +81,29 @@ test('props test', async () => { }); await nextTick(); // timeselect prop - const popup: any = wrapper.find('.nut-popup'); + const popup = wrapper.getComponent(Popup).find('.nut-popup'); // visible test expect(popup).toBeTruthy(); // height test - expect(popup.element.style.height).toEqual('50%'); + expect(popup.attributes('style')).toContain('height: 50%'); // title test - expect(wrapper.find('.nut-time-select__title__fixed').html()).toContain('标题测试'); + expect(popup.find('.nut-time-select__title__fixed').html()).toContain('标题测试'); // current-key test - const leftPannel = wrapper.findAll('.nut-time-pannel'); + const leftPannel = popup.findAll('.nut-time-pannel'); await leftPannel[1].trigger('click'); expect(leftPannel[1].find('.nut-time-pannel--curr')).toBeTruthy(); // current-time test - const rightPannel = wrapper.findAll('.nut-time-detail__detail__list__item'); + const rightPannel = popup.findAll('.nut-time-detail__detail__list__item'); await rightPannel[1].trigger('click'); expect(rightPannel[1].find('.nut-time-detail__detail__list__item--curr')).toBeTruthy(); // timepannel name test - expect(wrapper.find('.nut-time-pannel').html()).toContain('2月23日(今天)'); + expect(popup.find('.nut-time-pannel').html()).toContain('2月23日(今天)'); // timedetail times test, 2 月 24 日的取件时间有两个，长度应该为 2 - expect(wrapper.findAll('.nut-time-detail__detail__list__item').length).toEqual(2); + expect(popup.findAll('.nut-time-detail__detail__list__item').length).toEqual(2); }); test('Events test', async () => { @@ -185,7 +186,8 @@ test('Events test', async () => { // event test await nextTick(); - const timepannel = wrapper.find('.nut-time-select__content__pannel').findAll('.nut-time-pannel')[1]; + const popup = wrapper.getComponent(Popup).find('.nut-popup'); + const timepannel = popup.find('.nut-time-select__content__pannel').findAll('.nut-time-pannel')[1]; await timepannel.trigger('click'); expect(timepannel.classes()).toContain('nut-time-pannel--curr'); }); diff --git a/src/packages/__VUE/tour/__tests__/tour.spec.ts b/src/packages/__VUE/tour/__tests__/tour.spec.ts index ccdecc1d26..5be0e7221e 100644 --- a/src/packages/__VUE/tour/__tests__/tour.spec.ts +++ b/src/packages/__VUE/tour/__tests__/tour.spec.ts @@ -83,7 +83,7 @@ test('custom style', async () => { expect(arrow.html()).toContain('border-bottom-color: #f00'); const popover = wrapper.find('.nut-popover-content'); - expect(popover.html()).toContain('background: rgb(255, 0, 0)'); + expect(popover.html()).toContain('background: #f00'); }); test('custom offset', async () => { diff --git a/src/packages/__VUE/trendarrow/__tests__/trendarrow.spec.ts b/src/packages/__VUE/trendarrow/__tests__/trendarrow.spec.ts index 0d4e139689..530987e025 100644 --- a/src/packages/__VUE/trendarrow/__tests__/trendarrow.spec.ts +++ b/src/packages/__VUE/trendarrow/__tests__/trendarrow.spec.ts @@ -89,7 +89,7 @@ test('should render sync text color when syncTextColor is true', async () => { } }); const span = wrapper.find('.nut-trend-arrow-rate'); - expect(span.element.style.color).toContain('250, 44, 25'); + expect(span.element.style.color).toContain('#fa2c19'); }); test('should render text color when textColor used', async () => { diff --git a/src/packages/__VUE/uploader/__tests__/__snapshots__/index.spec.ts.snap b/src/packages/__VUE/uploader/__tests__/__snapshots__/index.spec.ts.snap index 8eb8728db8..6fb8b4642e 100644 --- a/src/packages/__VUE/uploader/__tests__/__snapshots__/index.spec.ts.snap +++ b/src/packages/__VUE/uploader/__tests__/__snapshots__/index.spec.ts.snap @@ -3,7 +3,7 @@ exports[`delete-icon prop 1`] = ` " - + " @@ -12,7 +12,7 @@ exports[`delete-icon prop 1`] = ` exports[`render preview image 1`] = ` " - + " diff --git a/src/packages/__VUE/video/__tests__/__snapshots__/video.spec.ts.snap b/src/packages/__VUE/video/__tests__/__snapshots__/video.spec.ts.snap index 8a1d78f08c..c499813b13 100644 --- a/src/packages/__VUE/video/__tests__/__snapshots__/video.spec.ts.snap +++ b/src/packages/__VUE/video/__tests__/__snapshots__/video.spec.ts.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`Video: base info 1`] = ` -"