From 098e7ea156f476385afd88ea5c48d0db01e3d6e1 Mon Sep 17 00:00:00 2001 From: tjz <415800467@qq.com> Date: Thu, 24 May 2018 23:04:41 +0800 Subject: [PATCH] test: add confirm & layout test --- components/layout/__tests__/index.test.js | 64 +++++++++++++++++++ components/modal/__tests__/confirm.test.js | 74 ++++++++++++++++++++++ 2 files changed, 138 insertions(+) create mode 100644 components/layout/__tests__/index.test.js create mode 100644 components/modal/__tests__/confirm.test.js diff --git a/components/layout/__tests__/index.test.js b/components/layout/__tests__/index.test.js new file mode 100644 index 000000000..91558440b --- /dev/null +++ b/components/layout/__tests__/index.test.js @@ -0,0 +1,64 @@ +import { mount } from '@vue/test-utils' +import Vue from 'vue' +import Layout from '..' + +const { Sider, Content } = Layout + +describe('Layout', () => { + it('detect the sider as children', (done) => { + const wrapper = mount( + { + render () { + return ( + + Sider + Content + + ) + }, + }, + ) + Vue.nextTick(() => { + expect(wrapper.find('.ant-layout').classes()).toContain('ant-layout-has-sider') + done() + }) + }) + + it('detect the sider inside the children', (done) => { + const wrapper = mount( + { + render () { + return ( + +
Sider
+ Content +
+ ) + }, + } + ) + Vue.nextTick(() => { + expect(wrapper.find('.ant-layout').classes()).toContain('ant-layout-has-sider') + done() + }) + }) + + it('detect ant-layout-sider-has-trigger class in sider when ant-layout-sider-trigger div tag exists', (done) => { + const wrapper = mount( + { + render () { + return ( + +
Sider
+ Content +
+ ) + }, + } + ) + Vue.nextTick(() => { + expect(wrapper.find('.ant-layout-sider').classes()).toContain('ant-layout-sider-has-trigger') + done() + }) + }) +}) diff --git a/components/modal/__tests__/confirm.test.js b/components/modal/__tests__/confirm.test.js new file mode 100644 index 000000000..095478e7d --- /dev/null +++ b/components/modal/__tests__/confirm.test.js @@ -0,0 +1,74 @@ +import Modal from '..' + +const { confirm } = Modal + +describe('Modal.confirm triggers callbacks correctly', () => { + const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {}) + + afterEach(() => { + errorSpy.mockReset() + document.body.innerHTML = '' + }) + + afterAll(() => { + errorSpy.mockRestore() + }) + + function $$ (className) { + return document.body.querySelectorAll(className) + } + + function open (args) { + confirm({ + title: 'Want to delete these items?', + content: 'some descriptions', + ...args, + }) + } + + it('trigger onCancel once when click on cancel button', () => { + const onCancel = jest.fn() + const onOk = jest.fn() + open({ + onCancel, + onOk, + }) + // first Modal + $$('.ant-btn')[0].click() + expect(onCancel.mock.calls.length).toBe(1) + expect(onOk.mock.calls.length).toBe(0) + }) + + it('trigger onOk once when click on ok button', () => { + const onCancel = jest.fn() + const onOk = jest.fn() + open({ + onCancel, + onOk, + }) + // second Modal + $$('.ant-btn-primary')[0].click() + expect(onCancel.mock.calls.length).toBe(0) + expect(onOk.mock.calls.length).toBe(1) + }) + + it('should allow Modal.comfirm without onCancel been set', () => { + open() + // Third Modal + $$('.ant-btn')[0].click() + expect(errorSpy).not.toHaveBeenCalled() + }) + + it('should allow Modal.comfirm without onOk been set', () => { + open() + // Fourth Modal + $$('.ant-btn-primary')[0].click() + expect(errorSpy).not.toHaveBeenCalled() + }) + + it('ok only', () => { + open({ okCancel: false }) + expect($$('.ant-btn')).toHaveLength(1) + expect($$('.ant-btn')[0].innerHTML).toContain('OK') + }) +})