test: migrate from jsdom to happy-dom (#2881)

jd-opensource · Jan 25, 2024 · 191a171 · 191a171
1 parent 148479b
commit 191a171
Show file tree

Hide file tree

Showing 41 changed files with 378 additions and 693 deletions.
diff --git 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
diff --git 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<HTMLElement>('.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
@@ -13,7 +13,7 @@ exports[`Address: choose address item 1`] = `
               <path d="M642.973 1005.542 321.912 587.098a123.278 123.278 0 0 1 0-150.17l321.06-418.443a47.182 47.182 0 0 1 74.83 57.422l-321.088 418.47a28.994 28.994 0 0 0 0 35.3l321.088 418.47a47.155 47.155 0 0 1-74.83 57.395" fill="currentColor" fill-opacity="0.9"></path>
             </svg></view>
           <view class="nut-address__header__title">请选择所在地区</view>
-          <view class="nut-address__header-close"><svg class="nut-icon nut-icon-close" style="color: rgb(204, 204, 204);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1026 1024" role="presentation" size="14px">
+          <view class="nut-address__header-close"><svg class="nut-icon nut-icon-close" style="color: #cccccc;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1026 1024" role="presentation" size="14px">
               <path d="M981.577 1024c-11.703 0-23.406-2.926-32.183-11.703L13.166 76.07c-14.629-17.555-14.629-46.812 0-64.366 17.554-14.629 46.811-14.629 64.365 0L1013.76 947.93c17.554 17.555 17.554 43.886 0 61.44-8.777 11.703-20.48 14.629-32.183 14.629zm-936.228 0c-11.703 0-23.406-2.926-32.183-11.703-17.555-17.554-17.555-43.886 0-61.44L949.394 14.63c17.555-17.555 43.886-17.555 61.44 0 17.555 17.554 17.555 43.885 0 61.44L74.606 1012.297C68.754 1021.074 57.05 1024 45.349 1024z" fill="currentColor" fill-opacity="0.9"></path>
             </svg></view>
         </view><!-- 请选择 -->

diff --git 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`] = `
 "<view class="nut-avatar-group" style="margin-left: 8px;">
-  <view style="background-color: rgb(238, 238, 238); color: rgb(102, 102, 102); margin-left: -8px;" class="nut-avatar nut-avatar-normal nut-avatar-round">1</view>
-  <view style="background-color: rgb(238, 238, 238); color: rgb(102, 102, 102); margin-left: -8px;" class="nut-avatar nut-avatar-normal nut-avatar-round">2</view>
-  <view style="background-color: rgb(238, 238, 238); color: rgb(102, 102, 102); margin-left: -8px;" class="nut-avatar nut-avatar-normal nut-avatar-round">3</view>
-  <view style="background-color: rgb(238, 238, 238); color: rgb(102, 102, 102); margin-left: -8px;" class="nut-avatar nut-avatar-normal nut-avatar-round">4</view>
-  <view style="background-color: rgb(238, 238, 238); color: rgb(102, 102, 102); margin-left: -8px;" class="nut-avatar nut-avatar-normal nut-avatar-round">5</view>
-  <view style="background-color: rgb(238, 238, 238); color: rgb(102, 102, 102); margin-left: -8px;" class="nut-avatar nut-avatar-normal nut-avatar-round avater-fold">99</view>
+  <view style="background-color: #eee; color: #666; margin-left: -8px;" class="nut-avatar nut-avatar-normal nut-avatar-round">1</view>
+  <view style="background-color: #eee; color: #666; margin-left: -8px;" class="nut-avatar nut-avatar-normal nut-avatar-round">2</view>
+  <view style="background-color: #eee; color: #666; margin-left: -8px;" class="nut-avatar nut-avatar-normal nut-avatar-round">3</view>
+  <view style="background-color: #eee; color: #666; margin-left: -8px;" class="nut-avatar nut-avatar-normal nut-avatar-round">4</view>
+  <view style="background-color: #eee; color: #666; margin-left: -8px;" class="nut-avatar nut-avatar-normal nut-avatar-round">5</view>
+  <view style="background-color: #eee; color: #666; margin-left: -8px;" class="nut-avatar nut-avatar-normal nut-avatar-round avater-fold">99</view>
 </view>"
 `;
 
-exports[`Avatar: default slot 1`] = `"<view style="background-color: rgb(238, 238, 238); color: rgb(102, 102, 102);" class="nut-avatar nut-avatar-normal nut-avatar-round"><img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"></view>"`;
+exports[`Avatar: default slot 1`] = `"<view style="background-color: #eee; color: #666;" class="nut-avatar nut-avatar-normal nut-avatar-round"><img src="https://img12.360buyimg.com/imagetools/jfs/t1/196430/38/8105/14329/60c806a4Ed506298a/e6de9fb7b8490f38.png"></view>"`;
diff --git 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
@@ -17,10 +17,10 @@ exports[`layout default slot 1`] = `
           </view>
         </view>
       </div>
-      <div class="nut-cropper-popup__toolbar-item"><svg class="nut-icon nut-icon-refresh2" style="color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="presentation">
+      <div class="nut-cropper-popup__toolbar-item"><svg class="nut-icon nut-icon-refresh2" style="color: #fff;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="presentation">
           <path d="M771.938 315.077h199.55L958.358 469.99 758.81 364.964c-13.128-7.877-18.38-23.63-10.502-36.759 2.625-7.877 13.128-13.128 23.63-13.128zm-535.63 393.846H44.636L57.764 554.01l191.672 105.026c13.128 7.877 18.38 23.63 10.502 36.759-5.25 7.877-15.753 13.128-23.63 13.128zM509.374 1024C257.313 1024 44.636 845.456 5.251 596.02 0 575.016 15.754 556.637 36.76 551.386c21.005-2.626 42.01 10.502 44.636 31.507 34.133 210.052 215.302 362.339 427.98 362.339 191.671 0 362.338-128.657 417.476-312.452 5.252-21.005 28.882-34.133 49.887-26.256 21.006 5.251 34.134 28.882 26.257 49.887C937.354 871.713 735.179 1024 509.375 1024zm467.364-551.385c-18.379 0-36.759-13.128-39.384-34.133C903.22 231.056 722.05 78.77 509.374 78.77c-191.671 0-362.338 128.657-414.85 312.452-5.252 21.005-28.883 34.133-49.888 26.256-21.005-5.251-34.133-28.882-26.257-49.887C81.395 152.287 283.57 0 509.374 0c252.062 0 464.739 178.544 504.123 427.98 2.626 21.005-10.502 42.01-31.507 44.635h-5.252z" fill="currentColor" fill-opacity="0.9"></path>
         </svg></div>
-      <div class="nut-cropper-popup__toolbar-item"><svg class="nut-icon nut-icon-retweet" style="color: rgb(255, 255, 255);" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="presentation">
+      <div class="nut-cropper-popup__toolbar-item"><svg class="nut-icon nut-icon-retweet" style="color: #fff;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" role="presentation">
           <path d="M136 552h63.6c4.4 0 8-3.6 8-8V288.7h528.6v72.6c0 1.9.6 3.7 1.8 5.2 2.9 3.6 8.1 4.3 11.7 1.4L893 255.4c4.3-5 3.6-10.3 0-13.2L749.7 129.8c-1.5-1.2-3.3-1.8-5.2-1.8-4.6 0-8.4 3.8-8.4 8.4V209H199.7c-39.5 0-71.7 32.2-71.7 71.8V544c0 4.4 3.6 8 8 8zm752-80h-63.6c-4.4 0-8 3.6-8 8v255.3H287.8v-72.6c0-1.9-.6-3.7-1.8-5.2-2.9-3.6-8.1-4.3-11.7-1.4L131 768.6c-4.3 5-3.6 10.3 0 13.2l143.3 112.4c1.5 1.2 3.3 1.8 5.2 1.8 4.6 0 8.4-3.8 8.4-8.4V815h536.6c39.5 0 71.7-32.2 71.7-71.8V480c-.2-4.4-3.8-8-8.2-8z" fill="currentColor" fill-opacity="0.9"></path>
         </svg></div>
       <div class="nut-cropper-popup__toolbar-item">

diff --git 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
@@ -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');
 });