Browse Source

fix: 优化

Drjnigfubo 3 years ago
parent
commit
24bbab145a

+ 25 - 0
src/packages/__VUE/actionsheet/__test__/__snapshots__/index.spec.ts.snap

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`should render sure actionsheet when use custom props 1`] = `
+"<view class=\\"nut-actionsheet\\">
+  <view>
+    <transition-stub class=\\"\\">
+      <view class=\\"nut-overlay\\" style=\\"animation-duration: 0.3s; z-index: 2000;\\"></view>
+    </transition-stub>
+    <transition-stub>
+      <view class=\\"nut-popup round popup-bottom popclass\\" style=\\"z-index: 2000; animation-duration: 0.3s;\\">
+        <view class=\\"nut-actionsheet-panel\\">
+          <!--v-if-->
+          <!--v-if-->
+          <view class=\\"nut-actionsheet-menu\\">
+            <view class=\\"nut-actionsheet-item\\" style=\\"color: rgb(26, 26, 26);\\">选项一<view class=\\"subdesc\\">描述信息</view>
+            </view>
+          </view>
+          <!--v-if-->
+        </view>
+        <!--v-if-->
+      </view>
+    </transition-stub>
+  </view>
+</view>"
+`;

+ 123 - 3
src/packages/__VUE/actionsheet/__test__/index.spec.ts

@@ -1,7 +1,8 @@
 import { config, mount } from '@vue/test-utils';
 import ActionSheet from '../index.vue';
 import NutIcon from '../../icon/index.vue';
-import NutPopup from '../../icon/index.vue';
+import NutPopup from '../../popup/index.vue';
+import { nextTick } from 'vue';
 
 beforeAll(() => {
   config.global.components = {
@@ -14,10 +15,129 @@ afterAll(() => {
   config.global.components = {};
 });
 
-test('should render shortpassword when visible is true', async () => {
+test('should render ActionSheet when visible is true', async () => {
   const wrapper = mount(ActionSheet, {
     props: {
-      visible: true
+      visible: true,
+      isWrapTeleport: false,
+      menuItems: [
+        {
+          name: '选项一'
+        },
+        {
+          name: '选项二'
+        },
+        {
+          name: '选项三'
+        }
+      ]
     }
   });
+  const menuItem = wrapper.findAll('.nut-actionsheet-item');
+  expect(menuItem.length).toBe(3);
+});
+test('should emit select event after clicking option', async () => {
+  const wrapper = mount(ActionSheet, {
+    props: {
+      visible: true,
+      isWrapTeleport: false,
+      menuItems: [{ name: '选项一' }]
+    }
+  });
+  const menuItem = wrapper.find('.nut-actionsheet-item');
+  menuItem.trigger('click');
+  await nextTick();
+  expect(wrapper.emitted('choose')).toHaveLength(1);
+  expect(wrapper.emitted('choose')![0]).toEqual([
+    {
+      name: '选项一'
+    },
+    0
+  ]);
+});
+
+test('should render sure actionsheet when use custom props', () => {
+  const wrapper = mount(ActionSheet, {
+    props: {
+      visible: true,
+      isWrapTeleport: false,
+      optionTag: 'names',
+      optionSubTag: 'subname',
+      menuItems: [{ names: '选项一', subname: '描述信息' }]
+    }
+  });
+
+  expect(wrapper.html()).toMatchSnapshot();
+  let subdesc = wrapper.find('.subdesc');
+  expect(subdesc.html()).toContain('描述信息');
+});
+
+test('should render sure choose when use choose-tag-value', async () => {
+  const wrapper = mount(ActionSheet, {
+    props: {
+      visible: true,
+      isWrapTeleport: false,
+      chooseTagValue: '选项一',
+      menuItems: [{ name: '选项一' }, { name: '选项二' }]
+    }
+  });
+  let item: any = wrapper.findAll('.nut-actionsheet-item');
+  expect(item[0].element.style.color).toContain('238, 10, 36');
+});
+
+test('should render sure color when use color', async () => {
+  const wrapper = mount(ActionSheet, {
+    props: {
+      visible: true,
+      isWrapTeleport: false,
+      chooseTagValue: '选项一',
+      color: 'green',
+      menuItems: [{ name: '选项一' }, { name: '选项二' }]
+    }
+  });
+  let item: any = wrapper.findAll('.nut-actionsheet-item');
+  expect(item[0].element.style.color).toContain('green');
+});
+
+test('should not emit select event after clicking disabled option', async () => {
+  const wrapper = mount(ActionSheet, {
+    props: {
+      visible: true,
+      isWrapTeleport: false,
+      menuItems: [{ name: '选项一', disabled: true }]
+    }
+  });
+
+  wrapper.find('.nut-actionsheet-item').trigger('click');
+  await nextTick();
+  expect(wrapper.emitted('select')).toBeFalsy();
+});
+
+test('should render description when use description', async () => {
+  const wrapper = mount(ActionSheet, {
+    props: {
+      visible: true,
+      isWrapTeleport: false,
+      description: '这是一段描述信息',
+      title: '主标题',
+      menuItems: [{ name: '选项一', disabled: true }]
+    }
+  });
+  let desc = wrapper.find('.desc');
+  let title = wrapper.find('.nut-actionsheet-title');
+  expect(desc.exists()).toBeTruthy();
+  expect(title.exists()).toBeTruthy();
+});
+
+test('should emit cancel event after clicking cancel ', () => {
+  const wrapper = mount(ActionSheet, {
+    props: {
+      visible: true,
+      isWrapTeleport: false,
+      menuItems: [{ name: '选项一' }],
+      cancelTxt: '取消'
+    }
+  });
+  wrapper.find('.nut-actionsheet-cancel').trigger('click');
+  expect(wrapper.emitted('cancel')).toHaveLength(1);
 });

+ 12 - 1
src/packages/__VUE/actionsheet/index.vue

@@ -1,6 +1,13 @@
 <template>
   <view :class="classes">
-    <nut-popup pop-class="popclass" :visible="visible" position="bottom" round @click-overlay="close">
+    <nut-popup
+      pop-class="popclass"
+      :visible="visible"
+      :isWrapTeleport="isWrapTeleport"
+      position="bottom"
+      round
+      @click-overlay="close"
+    >
       <view class="nut-actionsheet-panel">
         <view v-if="title" class="nut-actionsheet-title">{{ title }}</view>
         <view class="nut-actionsheet-item desc" v-if="description">{{ description }}</view>
@@ -61,6 +68,10 @@ export default create({
     menuItems: {
       type: Array,
       default: () => []
+    },
+    isWrapTeleport: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['cancel', 'close', 'choose', 'update:visible'],

+ 1 - 2
src/packages/__VUE/toast/doc.md

@@ -285,6 +285,5 @@ toast.hide();
 | loadingRotate       | loading图标是否旋转,仅对loading类型生效                                      | Boolean       | true                          |
 | on-close             | 关闭时触发的事件                                                              | function      | null                          |
 | close-on-click-overlay | 是否在点击遮罩层后关闭提示                                                    | Boolean       | false                         |
-| toast-style          | 提示框style                                                        | object       | {}                         |
-| toast-class          | 提示框class                                                        | String       | ""                         |
+| custom-class          | 提示框class                                                        | String       | ""                         |