test(circleprogress,numberkeyboard): add test (#1077)

src/packages/__VUE/circleprogress/test/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,10 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render component  when using require prop 1`] = `
+"<div class=\\"nut-circleprogress\\" style=\\"height: 120px; width: 120px;\\"><svg height=\\"120\\" width=\\"120\\" x-mlns=\\"http://www.w3.org/200/svg\\">
+    <circle r=\\"50\\" cx=\\"60\\" cy=\\"60\\" stroke=\\"#d9d9d9\\" stroke-width=\\"10\\" fill=\\"none\\"></circle>
+    <circle r=\\"50\\" cx=\\"60\\" cy=\\"60\\" stroke=\\"red\\" stroke-dasharray=\\"94.2,314\\" stroke-width=\\"10\\" fill=\\"none\\" transform=\\"rotate(-90,60,60)\\" stroke-linecap=\\"round\\" style=\\"transition: stroke-dasharray 0.6s ease 0s, stroke 0.6s ease 0s;\\"></circle>
+  </svg>
+  <div class=\\"nut-circleprogress-content\\">30%</div>
+</div>"
+`;

src/packages/__VUE/circleprogress/test/index.spec.ts

@@ -0,0 +1,45 @@
+import { mount } from '@vue/test-utils';
+import Circleprogress from '../index.vue';
+
+test('should render component  when using require prop', async () => {
+  // 默认圆弧半径为50  2πR为314  默认圆弧宽度为10 所以整个元素宽高为(10+50)*2
+  const wrapper = mount(Circleprogress, {
+    props: {
+      progress: 30
+    }
+  });
+  expect(wrapper.html()).toMatchSnapshot();
+});
+
+test('should change stoke when use width props', async () => {
+  // 圆弧宽度为20 所以整个元素宽高为(20+60)*2
+  const wrapper = mount(Circleprogress, {
+    props: {
+      progress: 40,
+      strokeInnerWidth: 20,
+      progressOption: {
+        radius: 60,
+        strokeOutWidth: 20
+      }
+    }
+  });
+  let element = wrapper.element as HTMLElement;
+  expect(element.style.width).toEqual('160px');
+  expect(element.style.height).toEqual('160px');
+});
+test('should change color when use color props', async () => {
+  // 圆弧宽度为20 所以整个元素宽高为(20+60)*2
+  const wrapper = mount(Circleprogress, {
+    props: {
+      progress: 40,
+      strokeInnerWidth: 20,
+      progressOption: {
+        backColor: 'blue',
+        progressColor: 'yelllow'
+      }
+    }
+  });
+  let circle = wrapper.findAll('circle');
+  expect(circle[0].html()).toContain('blue');
+  expect(circle[1].html()).toContain('yelllow');
+});

src/packages/__VUE/numberkeyboard/index.vue

@@ -4,6 +4,7 @@
     position="bottom"
     :overlay="overlay"
     @click-overlay="closeBoard()"
+    :isWrapTeleport="isWrapTeleport"
     overlay-class="nut-numberkeyboard-overlay"
   >
     <div class="nut-numberkeyboard" ref="root">
@@ -60,7 +61,7 @@
               />
             </div>
           </div>
-          <div class="key-board-wrapper" @click="closeBoard()" v-if="title == ''">
+          <div class="key-board-wrapper key-board-finish" @click="closeBoard()" v-if="title == ''">
             <div :class="['key', 'finish', { activeFinsh: clickKeyIndex == 'finish' }]"> 完成 </div>
           </div>
         </div>
@@ -106,6 +107,10 @@ export default create({
     overlay: {
       type: Boolean,
       default: true
+    },
+    isWrapTeleport: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['input', 'delete', 'close', 'update:value'],

src/packages/__VUE/numberkeyboard/test/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,94 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should shuffle key order when using random-key prop 1`] = `
+"<view>
+  <transition-stub class=\\"nut-numberkeyboard-overlay\\">
+    <view class=\\"nut-overlay\\" style=\\"animation-duration: 0.3s; z-index: 2000;\\"></view>
+  </transition-stub>
+  <transition-stub>
+    <view class=\\"nut-popup popup-bottom\\" style=\\"z-index: 2000; animation-duration: 0.3s;\\">
+      <div class=\\"nut-numberkeyboard\\">
+        <!--v-if-->
+        <div class=\\"number-board-body\\">
+          <div class=\\"number-board\\">
+            <div class=\\"key-board-wrapper\\">
+              <div class=\\"key\\">3
+                <!--v-if-->
+                <!--v-if-->
+              </div>
+            </div>
+            <div class=\\"key-board-wrapper\\">
+              <div class=\\"key\\">2
+                <!--v-if-->
+                <!--v-if-->
+              </div>
+            </div>
+            <div class=\\"key-board-wrapper\\">
+              <div class=\\"key\\">6
+                <!--v-if-->
+                <!--v-if-->
+              </div>
+            </div>
+            <div class=\\"key-board-wrapper\\">
+              <div class=\\"key\\">1
+                <!--v-if-->
+                <!--v-if-->
+              </div>
+            </div>
+            <div class=\\"key-board-wrapper\\">
+              <div class=\\"key\\">5
+                <!--v-if-->
+                <!--v-if-->
+              </div>
+            </div>
+            <div class=\\"key-board-wrapper\\">
+              <div class=\\"key\\">4
+                <!--v-if-->
+                <!--v-if-->
+              </div>
+            </div>
+            <div class=\\"key-board-wrapper\\">
+              <div class=\\"key\\">7
+                <!--v-if-->
+                <!--v-if-->
+              </div>
+            </div>
+            <div class=\\"key-board-wrapper\\">
+              <div class=\\"key\\">9
+                <!--v-if-->
+                <!--v-if-->
+              </div>
+            </div>
+            <div class=\\"key-board-wrapper\\">
+              <div class=\\"key\\">8
+                <!--v-if-->
+                <!--v-if-->
+              </div>
+            </div>
+            <div class=\\"key-board-wrapper\\">
+              <div class=\\"key lock\\">
+                <!--v-if--><img src=\\"https://img11.360buyimg.com/imagetools/jfs/t1/146371/38/8485/738/5f606425Eca239740/14f4b4f5f20d8a68.png\\">
+                <!--v-if-->
+              </div>
+            </div>
+            <div class=\\"key-board-wrapper\\">
+              <div class=\\"key\\">0
+                <!--v-if-->
+                <!--v-if-->
+              </div>
+            </div>
+            <div class=\\"key-board-wrapper\\">
+              <div class=\\"key delete\\">
+                <!--v-if-->
+                <!--v-if--><img src=\\"https://img11.360buyimg.com/imagetools/jfs/t1/129395/8/12735/2030/5f61ac37E70cab338/fb477dc11f46056c.png\\">
+              </div>
+            </div>
+          </div>
+          <!--v-if-->
+        </div>
+      </div>
+      <!--v-if-->
+    </view>
+  </transition-stub>
+</view>"
+`;

src/packages/__VUE/numberkeyboard/test/index.spec.ts

@@ -0,0 +1,102 @@
+import NumberKeyboard from '../index.vue';
+import NutPopup from '../../popup/index.vue';
+import { config, mount } from '@vue/test-utils';
+import { trigger, mockScrollTop } from './../../../utils/unit';
+
+beforeAll(() => {
+  config.global.components = {
+    NutPopup
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
+
+function clickKey(key: Parameters<typeof trigger>[0]) {
+  trigger(key, 'touchstart');
+  trigger(key, 'touchend');
+}
+
+test('should emit input event after clicking number key', async () => {
+  const wrapper = mount(NumberKeyboard, {
+    props: {
+      visible: true,
+      isWrapTeleport: false
+    }
+  });
+  clickKey(wrapper.findAll('.key')[0]);
+  expect(wrapper.emitted('input')![0]).toEqual([1]);
+  wrapper.unmount();
+});
+test('should shuffle key order when using random-key prop', async () => {
+  const wrapper = mount(NumberKeyboard, {
+    props: {
+      visible: true,
+      isWrapTeleport: false,
+      randomKeys: true
+    }
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+});
+test('should emit delete event after clicking delete key', () => {
+  const wrapper = mount(NumberKeyboard, {
+    props: {
+      visible: true,
+      isWrapTeleport: false
+    }
+  });
+  clickKey(wrapper.findAll('.key')[11]);
+  expect(wrapper.emitted('delete')).toBeTruthy();
+});
+test('should emit close event after clicking collapse key', () => {
+  const wrapper = mount(NumberKeyboard, {
+    props: {
+      visible: true,
+      isWrapTeleport: false
+    }
+  });
+  clickKey(wrapper.findAll('.key')[9]);
+  expect(wrapper.emitted('close')).toBeTruthy();
+});
+
+test('should emit close event after clicking close button', () => {
+  const wrapper = mount(NumberKeyboard, {
+    props: {
+      visible: true,
+      isWrapTeleport: false,
+      type: 'rightColumn'
+    }
+  });
+  clickKey(wrapper.find('.key-board-finish'));
+  expect(wrapper.emitted('close')).toBeFalsy();
+});
+
+test('should render title and close button correctly', () => {
+  const wrapper = mount(NumberKeyboard, {
+    props: {
+      visible: true,
+      isWrapTeleport: false,
+      title: '默认键盘'
+    }
+  });
+  let title = wrapper.find('.tit');
+  expect(title.html()).toContain('默认键盘');
+});
+test('should emit "update:modelValue" event after clicking key', () => {
+  const wrapper = mount(NumberKeyboard, {
+    props: {
+      visible: true,
+      isWrapTeleport: false,
+      maxlength: 6
+    }
+  });
+  const keys = wrapper.findAll('.key');
+
+  clickKey(keys[0]);
+  expect(wrapper.emitted('update:value')![0]).toEqual(['1']);
+
+  clickKey(keys[1]);
+  expect(wrapper.emitted('update:value')![1]).toEqual(['2']);
+});

src/packages/__VUE/tag/__test__/__snapshots__/tag.spec.ts.snap

@@ -1,10 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`should hide tag when the show prop is false 1`] = `
-"<view  class=\\"nut-tag nut-tag--default\\" show=\\"false\\">
+"<view class=\\"nut-tag nut-tag--default\\" show=\\"false\\">
   <!--v-if-->
 </view>"
 `;
+
 exports[`should render textColor correctly 1`] = `
 "<view class=\\"nut-tag nut-tag--default nut-tag--plain\\" style=\\"background: red; color: blue;\\">
   <!--v-if-->