Browse Source

fix: dialog单元测试

guoxiao 5 years ago
parent
commit
4b11efdf6a
2 changed files with 202 additions and 192 deletions
  1. 65 51
      src/packages/dialog/__test__/dialog.spec.js
  2. 137 141
      src/packages/dialog/dialog.scss

+ 65 - 51
src/packages/dialog/__test__/dialog.spec.js

@@ -1,74 +1,88 @@
-import { shallowMount, mount } from '@vue/test-utils'
+import { shallowMount, mount } from '@vue/test-utils';
 import Dialog from '../dialog.vue';
 import Dialog from '../dialog.vue';
 import Vue from 'vue';
 import Vue from 'vue';
 
 
-
 describe('Dialog.vue', () => {
 describe('Dialog.vue', () => {
-    const wrapper = shallowMount(Dialog, {});
+  const wrapper = shallowMount(Dialog, {});
 
 
-    it('可见', () => {
-        wrapper.setProps({ title: '测试标题', visible: true });
+  it('展示', () => {
+    wrapper.setProps({ title: '测试标题', visible: true });
 
 
-        return Vue.nextTick().then(function() {
-            expect(wrapper.find('.nut-dialog-mask').isVisible()).toBe(true);
-            expect(wrapper.find('.nut-dialog-box').isVisible()).toBe(true);
-        })
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.nut-dialog-wrapper').isVisible()).toBe(true);
     });
     });
+  });
 
 
-    it('隐藏', () => {
-        wrapper.setProps({ title: '测试标题', visible: false });
+  it('内容文案展示', () => {
+    wrapper.setProps({ content: '测试文案', visible: true });
 
 
-        return Vue.nextTick().then(function() {
-            expect(wrapper.find('.nut-dialog-box').isVisible()).toBe(false);
-        })
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.nut-dialog-content').exists()).toBe(true);
     });
     });
+  });
 
 
-    it('内容文案展示', () => {
-        wrapper.setProps({ content: '测试文案', visible: true });
+  it('标题文案展示-标题-内容', () => {
+    wrapper.setProps({ title: '测试标题', content: '测试内容', visible: true });
 
 
-        return Vue.nextTick().then(function() {
-            expect(wrapper.find('.nut-dialog-content').exists()).toBe(true);
-        })
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.nut-dialog-title').exists()).toBe(true);
     });
     });
+  });
 
 
-    it('标题文案展示', () => {
-        wrapper.setProps({ title: '测试标题', visible: true });
+  it('隐藏底栏', () => {
+    wrapper.setProps({ title: '测试标题', visible: true, noFooter: true });
 
 
-        return Vue.nextTick().then(function() {
-            expect(wrapper.find('.nut-dialog-title').exists()).toBe(true);
-        })
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.nut-dialog-footer').exists()).toBe(false);
     });
     });
+  });
 
 
-    it('隐藏底栏', () => {
-        wrapper.setProps({ title: '测试标题', visible: true, noFooter: true });
+  it('隐藏确定键', () => {
+    wrapper.setProps({ title: '测试标题', visible: true, noOkBtn: true });
 
 
-        return Vue.nextTick().then(function() {
-            expect(wrapper.find('.nut-dialog-footer').exists()).toBe(false);
-        })
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.nut-dialog-ok').exists()).toBe(false);
     });
     });
-
-    it('隐藏确定键', () => {
-        wrapper.setProps({ title: '测试标题', visible: true, noOkBtn: true });
-
-        return Vue.nextTick().then(function() {
-            expect(wrapper.find('.nut-dialog-ok').exists()).toBe(false);
-        })
+  });
+  it('多行按钮', () => {
+    wrapper.setProps({
+      content: '内容',
+      visible: true,
+      multiButton: true,
+      multiButtonText: [
+        {
+          name: '主要操作1(禁止)',
+          value: 0,
+          disabled: true,
+        },
+        {
+          name: '主要操作2',
+          value: 1,
+          disabled: false,
+        },
+      ],
     });
     });
 
 
-    it('图片弹窗', () => {
-        wrapper.setProps({
-            visible: true,
-            type: 'image',
-            link: "http://m.jd.com",
-            imgSrc: "https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/4875/23/1968/285655/5b9549eeE4997a18c/070eaf5bddf26be8.jpg",
-        });
-
-        return Vue.nextTick().then(function() {
-            expect(wrapper.find('.nut-dialog-link').exists()).toBe(true);
-            expect(wrapper.find('.nut-dialog-image').exists()).toBe(true);
-            expect(wrapper.find('.nut-dialog-image').attributes('src')).toBe('https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/4875/23/1968/285655/5b9549eeE4997a18c/070eaf5bddf26be8.jpg');
-            expect(wrapper.find('.nut-dialog-body').exists()).toBe(false);
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.nut-dialog-multi-button').exists()).toBe(false);
+      //  expect(wrapper.findAll('.nut-dialog-multi-button').length).toBe(2);
+      expect(wrapper.findAll('.nut-dialog-multi-button').at(0).contains('.nut-dialog-multi-disabled')).toBe(true);
+    });
+  });
+  it('图片弹窗', () => {
+    wrapper.setProps({
+      visible: true,
+      type: 'image',
+      link: 'http://m.jd.com',
+      imgSrc: 'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/4875/23/1968/285655/5b9549eeE4997a18c/070eaf5bddf26be8.jpg',
+    });
 
 
-        })
+    return Vue.nextTick().then(function () {
+      expect(wrapper.find('.nut-dialog-wrapper').exists()).toBe(true);
+      expect(wrapper.find('.nut-dialog-link').exists()).toBe(true);
+      expect(wrapper.find('.nut-dialog-image').attributes('src')).toBe(
+        'https://m.360buyimg.com/mobilecms/s750x750_jfs/t1/4875/23/1968/285655/5b9549eeE4997a18c/070eaf5bddf26be8.jpg'
+      );
     });
     });
-});
+  });
+});

File diff suppressed because it is too large
+ 137 - 141
src/packages/dialog/dialog.scss