test(dialog): add spec config

src/packages/__VUE/dialog/__tests__/dialog.ts

@@ -7,6 +7,8 @@ export class DialogOptions {
   okText?: string = '确定';
   textAlign?: string = 'center';
   teleport?: String | HTMLElement = 'body';
+  id?: string | number = new Date().getTime();
+  footerDirection?: string = 'horizontal'; //使用横纵方向 可选值 horizontal、vertical
 
   // function
   onUpdate?: Function = (value: boolean) => {};
@@ -39,7 +41,7 @@ class DialogFunction {
       }
     }
     const root = document.createElement('view');
-    root.id = 'dialog-' + new Date().getTime();
+    root.id = 'dialog-' + options.id;
     const Wrapper = {
       setup() {
         options.onUpdate = (val: boolean) => {

src/packages/__VUE/dialog/__tests__/function.spec.ts

@@ -7,16 +7,133 @@ function sleep(delay = 0): Promise<void> {
 }
 
 describe('function Dialog', () => {
-  test('show dialog info ', async () => {
-    DialogFunction({
+  test('show dialog base info display ', async () => {
+    let dialog = DialogFunction({
       title: 'title',
       content: 'content'
     });
-    await sleep(1000);
-    expect(document.querySelector('.nut-dialog')).toBeTruthy();
-    let textTitle = document.querySelector('.nut-dialog .nut-dialog__header') as HTMLDivElement;
+    await sleep(500);
+    expect(document.querySelector(`#dialog-${dialog.options.id} .nut-dialog`)).toBeTruthy();
+    let textTitle = document.querySelector(
+      `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__header`
+    ) as HTMLDivElement;
+    expect(textTitle.innerHTML).toEqual('title');
+    let content = document.querySelector(
+      `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__content view`
+    ) as HTMLDivElement;
+    expect(content.innerHTML).toEqual('content');
+    let footer = document.querySelector(
+      `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__footer`
+    ) as HTMLDivElement;
+    expect(footer.children.length).toEqual(2);
+    let cancelBtn = footer.querySelector(`#dialog-${dialog.options.id} .nut-dialog__footer-cancel`) as HTMLDivElement;
+    cancelBtn.click();
+    await sleep(500);
+    cancelBtn = document.querySelector(`#dialog-${dialog.options.id}`) as HTMLDivElement;
+    expect(cancelBtn).toBeNull();
+  });
+
+  test('show dialog custom info display ', async () => {
+    let dialog = DialogFunction({
+      title: 'title',
+      content: 'content'
+    });
+    await sleep(500);
+    expect(document.querySelector(`#dialog-${dialog.options.id} .nut-dialog`)).toBeTruthy();
+    let textTitle = document.querySelector(
+      `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__header`
+    ) as HTMLDivElement;
     expect(textTitle.innerHTML).toEqual('title');
-    let content = document.querySelector('.nut-dialog .nut-dialog__content view') as HTMLDivElement;
+    let content = document.querySelector(
+      `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__content view`
+    ) as HTMLDivElement;
     expect(content.innerHTML).toEqual('content');
+    let footer = document.querySelector(
+      `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__footer`
+    ) as HTMLDivElement;
+    expect(footer.children.length).toEqual(2);
+    let okBtn = footer.querySelector(`#dialog-${dialog.options.id} .nut-dialog__footer-ok`) as HTMLDivElement;
+    okBtn.click();
+    await sleep(500);
+    okBtn = document.querySelector(`#dialog-${dialog.options.id}`) as HTMLDivElement;
+    expect(okBtn).toBeNull();
+  });
+
+  test('show dialog custom footer-direction ', async () => {
+    let dialog = DialogFunction({
+      title: 'title',
+      content: 'content',
+      footerDirection: 'vertical'
+    });
+    await sleep(500);
+    expect(
+      document.querySelector(`#dialog-${dialog.options.id} .nut-dialog .nut-dialog__footer.vertical`)
+    ).toBeTruthy();
+  });
+
+  test('hide dialog footer', async () => {
+    let dialog = DialogFunction({
+      title: 'title',
+      content: 'content',
+      noFooter: true
+    });
+    await sleep(500);
+    let footer = document.querySelector(
+      `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__footer`
+    ) as HTMLDivElement;
+    expect(footer).toBeNull();
+  });
+
+  test('hide dialog title', async () => {
+    let dialog = DialogFunction({
+      content: 'content',
+      noFooter: true
+    });
+    await sleep(500);
+    let footer = document.querySelector(
+      `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__header`
+    ) as HTMLDivElement;
+    expect(footer).toBeNull();
+  });
+  test('tips dialog', async () => {
+    let dialog = DialogFunction({
+      title: '温馨提示',
+      content: '支持函数调用和组件调用两种方式。',
+      noCancelBtn: true
+    });
+    await sleep(500);
+    let footer = document.querySelector(
+      `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__footer-cancel`
+    ) as HTMLDivElement;
+    expect(footer).toBeNull();
+  });
+
+  test('dialog cancelText okText', async () => {
+    let dialog = DialogFunction({
+      title: '温馨提示',
+      content: '支持函数调用和组件调用两种方式。',
+      cancelText: '取消文案自定义',
+      okText: '确定文案自定义'
+    });
+    await sleep(500);
+    let cancelText = document.querySelector(
+      `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__footer-cancel > view > view`
+    ) as HTMLDivElement;
+    expect(cancelText.innerHTML).toEqual('取消文案自定义');
+    let okText = document.querySelector(
+      `#dialog-${dialog.options.id} .nut-dialog .nut-dialog__footer-ok > view > view`
+    ) as HTMLDivElement;
+    expect(okText.innerHTML).toEqual('确定文案自定义');
+  });
+
+  test('dialog teleport', async () => {
+    let dialog = DialogFunction({
+      title: 't1',
+      content: 't2',
+      teleport: 'body'
+    });
+    await sleep(1000);
+    let dialogDom = document.querySelector(`#dialog-${dialog.options.id} .nut-dialog`) as HTMLDivElement;
+    expect(dialogDom).toBeTruthy();
   });
 });

src/packages/__VUE/dialog/__tests__/index.spec.ts

@@ -3,7 +3,7 @@ import DialogTemplate from '../index.vue';
 import Icon from '../../icon/index.vue';
 import Popup from '../../popup/index.vue';
 import Button from '../../button/index.vue';
-import OverLay from '../../overLay/index.vue';
+import OverLay from '../../overlay/index.vue';
 
 beforeAll(() => {
   config.global.components = {

src/packages/__VUE/dialog/doc.md

@@ -171,6 +171,7 @@ export default {
 | 字段                | 说明                                  | 类型     | 默认值   |
 |---------------------|---------------------------------------|----------|----------|
 | title               | 标题                                  | String   | -        |
+| id               | 标识符，相同者共用一个实例<br>loading类型默认使用一个实例，其他类型默认不共用 | String/Number   | new Date().getTime()        |
 | content             | 内容，支持HTML                        | String   | -        |
 | teleport            | 指定挂载节点                          | String   | "body"   |
 | closeOnClickOverlay | 点击蒙层是否关闭对话框                | Boolean  | false    |

src/packages/__VUE/dialog/index.ts

@@ -7,6 +7,8 @@ export class DialogOptions {
   okText?: string = '确定';
   textAlign?: string = 'center';
   teleport?: String | HTMLElement = 'body';
+  id?: string | number = new Date().getTime();
+  footerDirection?: string = 'horizontal'; //使用横纵方向 可选值 horizontal、vertical
 
   // function
   onUpdate?: Function = (value: boolean) => {};
@@ -39,7 +41,7 @@ class DialogFunction {
       }
     }
     const root = document.createElement('view');
-    root.id = 'dialog-' + new Date().getTime();
+    root.id = 'dialog-' + options.id;
     const Wrapper = {
       setup() {
         options.onUpdate = (val: boolean) => {
@@ -73,7 +75,7 @@ class DialogFunction {
   };
 }
 
-const _Dialog = function(options: DialogOptions) {
+const _Dialog = function (options: DialogOptions) {
   return new DialogFunction(options);
 };
 _Dialog.install = (app: any) => {