fix: searchbar taro-h5环境enter触发无效 (#1088)

* upd: 单元测试编写

* upd: 单元测试完善

* upd: searchbar taro-h5环境下enter触发无效问题修改

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

@@ -1,6 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`should render title、desc slot correctly 1`] = `
-"<view class=\\"nut-cell-group\\">Custom TitleCustom Desc<view class=\\"nut-cell-group__warp\\"></view>
-</view>"
-`;

src/packages/__VUE/divider/__tests__/__snapshots__/divider.spec.ts.snap

@@ -1,3 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`slot: html should contain test text 1`] = `"<div class=\\"nut-divider nut-divider-center nut-divider-hairline\\">test text</div>"`;

src/packages/__VUE/popup/__tests__/popup.spec.ts

@@ -2,6 +2,12 @@ import { mount } from '@vue/test-utils';
 import { nextTick } from 'vue';
 import PopUp from '../index.vue';
 
+function sleep(delay = 0): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, delay);
+  });
+}
+
 test('should change z-index when using z-index prop', async () => {
   const wrapper = mount(PopUp, {
     props: {
@@ -28,17 +34,39 @@ test('should change animation duration when using duration prop', () => {
   expect(overlay.element.style.animationDuration).toEqual('12s');
 });
 
-// test('should lock scroll when showed', async () => {
-//   const wrapper = mount(PopUp,
-//     {
-//       isWrapTeleport: false,
-//     });
-//   expect(document.body.classList.contains('van-overflow-hidden')).toBeFalsy();
+test('prop overlay-class test', async () => {
+  const wrapper = mount(PopUp, {
+    props: {
+      visible: true,
+      isWrapTeleport: false,
+      overlayClass: 'testclas'
+    }
+  });
+  const overlay: any = wrapper.find('transition-stub');
+  expect(overlay.classes()).toContain('testclas');
+});
 
-//   await wrapper.setProps({ visible: true });
-//   // 这里body拿不到class
-//   expect(document.body.classList.contains('van-overflow-hidden')).toBeTruthy();
-// });
+test('prop overlay-style test', async () => {
+  const wrapper = mount(PopUp, {
+    props: {
+      visible: true,
+      isWrapTeleport: false,
+      overlayStyle: { color: 'red' }
+    }
+  });
+  const overlay: any = wrapper.find('transition-stub');
+  expect(overlay.element.style.color).toContain('red');
+});
+
+test('should lock scroll when showed', async () => {
+  const wrapper = mount(PopUp, {
+    visible: false,
+    isWrapTeleport: false
+  });
+
+  await wrapper.setProps({ visible: true });
+  expect(document.body.classList.contains('nut-overflow-hidden')).toBeTruthy();
+});
 
 test('should not render overlay when overlay prop is false', () => {
   const wrapper = mount(PopUp, {
@@ -198,17 +226,17 @@ test('should emit open event when prop visible is set to true', async () => {
   expect(wrapper.emitted('open')).toBeTruthy();
 });
 
-// test('event close test', async () => {
-//   const wrapper = mount(PopUp, {
-//     props: {
-//       visible: true,
-//       isWrapTeleport: false,
-//     },
-//   });
-//   await nextTick();
-//   wrapper.find('.nut-popup').trigger('click');
-//   expect(wrapper.emitted('close')!.length).toEqual(1);
-// });
+test('event close test', async () => {
+  const wrapper = mount(PopUp, {
+    props: {
+      visible: true,
+      isWrapTeleport: false
+    }
+  });
+  await wrapper.find('.nut-overlay').trigger('click');
+  await sleep(2000);
+  expect(wrapper.emitted('close')).toBeTruthy();
+});
 
 test('event click-overlay test', async () => {
   const wrapper = mount(PopUp, {

src/packages/__VUE/searchbar/__tests__/__snapshots__/searchbar.spec.ts.snap

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`basic usage 1`] = `
-"<view class=\\"nut-searchbar\\">
-  <!--v-if-->
-  <view class=\\"nut-searchbar__search-input\\">
-    <!--v-if-->
-    <view class=\\"nut-searchbar__input-inner\\">
-      <form action=\\"#\\"><input class=\\"nut-searchbar__input-bar\\" type=\\"text\\" maxlength=\\"9999\\" placeholder=\\"请输入\\"></form>
-      <view class=\\"nut-searchbar__input-clear\\" style=\\"display: none;\\"><i class=\\"nutui-iconfont nut-icon nut-icon-circle-close\\" style=\\"color: rgb(85, 85, 85); font-size: 12px; width: 12px; height: 12px;\\" src=\\"\\"></i></view>
-    </view>
-    <!--v-if-->
-  </view>
-  <!--v-if-->
-</view>"
-`;
-
-exports[`slot test 1`] = `
-"<view class=\\"nut-searchbar\\">
-  <!--v-if-->
-  <view class=\\"nut-searchbar__search-input\\">
-    <!--v-if-->
-    <view class=\\"nut-searchbar__input-inner\\">
-      <form action=\\"#\\"><input class=\\"nut-searchbar__input-bar\\" type=\\"text\\" maxlength=\\"9999\\" placeholder=\\"请输入\\"></form>
-      <view class=\\"nut-searchbar__input-clear\\" style=\\"display: none;\\"><i class=\\"nutui-iconfont nut-icon nut-icon-circle-close\\" style=\\"color: rgb(85, 85, 85); font-size: 12px; width: 12px; height: 12px;\\" src=\\"\\"></i></view>
-    </view>
-    <!--v-if-->
-  </view>
-  <!--v-if-->
-</view>"
-`;

src/packages/__VUE/searchbar/__tests__/searchbar.spec.ts

@@ -45,6 +45,19 @@ test('should format input value when type is number', () => {
     }
   });
   const input = wrapper.find('input');
+  input.trigger('input');
+  expect((wrapper.emitted('change') as any)[0][0]).toEqual('999');
+  input.element.value = '9999';
+});
+
+test('should format input value when type is number', () => {
+  const wrapper = mount(SearchBar, {
+    props: {
+      type: 'number',
+      modelValue: ''
+    }
+  });
+  const input = wrapper.find('input');
   input.element.value = '1';
   input.trigger('input');
   expect((wrapper.emitted('change') as any)[0][0]).toEqual('1');

src/packages/__VUE/searchbar/index.taro.vue

@@ -8,7 +8,7 @@
         <slot name="leftin"></slot>
       </view>
       <view class="nut-searchbar__input-inner">
-        <form action="#" onsubmit="return false">
+        <form action="#" onsubmit="return false" @submit.prevent="handleSubmit">
           <input
             class="nut-searchbar__input-bar"
             :type="inputType"

src/packages/__VUE/timeselect/__tests__/timeselect.spec.ts

@@ -1,10 +1,31 @@
-import { mount } from '@vue/test-utils';
-import { reactive, toRefs, getCurrentInstance } from 'vue';
+import { config, mount } from '@vue/test-utils';
+import { reactive, toRefs, getCurrentInstance, nextTick } from 'vue';
 import TimeSelect from '../index.vue';
 import TimePanel from '../../timepannel/index.vue';
 import TimeDetail from '../../timedetail/index.vue';
+import NutOverLay from '../../overlay/index.vue';
+import NutPopup from '../../popup/index.vue';
+import NutIcon from '../../icon/index.vue';
 
-test('should emit "update:modelValue" and "change" event when radio is clicked', async () => {
+beforeAll(() => {
+  config.global.components = {
+    NutOverLay,
+    NutPopup,
+    NutIcon
+  };
+});
+
+afterAll(() => {
+  config.global.components = {};
+});
+
+function sleep(delay = 0): Promise<void> {
+  return new Promise((resolve) => {
+    setTimeout(resolve, delay);
+  });
+}
+
+test('props test', async () => {
   const wrapper = mount({
     emits: ['change', 'select'],
     components: {
@@ -14,10 +35,10 @@ test('should emit "update:modelValue" and "change" event when radio is clicked',
     },
     template: `
       <template>
-        <nut-cell @click="handleClick1">
+        <div id="cell" @click="handleClick1">
           <span><label>请选择配送时间</label></span>
-        </nut-cell>
-        <nut-timeselect v-model:visible="visible1" height="50%" :current-key="currentKey1" :current-time="currentTime1" @select="handleSelected1">
+        </div>
+        <nut-timeselect v-model:visible="visible1" title="标题测试" height="50%" :current-key="currentKey1" :current-time="currentTime1" @select="handleSelected1">
           <template #pannel>
             <nut-timepannel name="2月23日(今天)" pannel-key="0" @change="handleChange1"></nut-timepannel>
             <nut-timepannel name="2月24日(星期三)" pannel-key="1" @change="handleChange1"></nut-timepannel>
@@ -31,7 +52,7 @@ test('should emit "update:modelValue" and "change" event when radio is clicked',
     setup() {
       const { proxy } = getCurrentInstance() as any;
       const state = reactive({
-        visible1: false,
+        visible1: true,
         currentKey1: 0,
         currentTime1: [] as any[],
         times1: [
@@ -68,9 +89,7 @@ test('should emit "update:modelValue" and "change" event when radio is clicked',
         }
       };
 
-      const handleSelected1 = (obj: any) => {
-        proxy.$toast.text(`您选择了：${JSON.stringify(obj)}`);
-      };
+      const handleSelected1 = (obj: any) => {};
 
       return {
         ...toRefs(state),
@@ -81,4 +100,18 @@ test('should emit "update:modelValue" and "change" event when radio is clicked',
       };
     }
   });
+  await nextTick();
+  // timeselect prop
+  const popup: any = wrapper.find('.nut-popup');
+  expect(popup).toBeTruthy();
+  expect(popup.element.style.height).toEqual('50%');
+  expect(wrapper.find('.nut-timeselect__title__fixed').html()).toContain('标题测试');
+
+  // timepannel name test
+  expect(wrapper.find('.nut-timepannel').html()).toContain('2月23日(今天)');
+
+  // TimeSelect event test
+  // await wrapper.find('.nut-overlay').trigger('click');
+  // sleep(200);
+  // expect(wrapper.emitted('select')).toBeTruthy();
 });