From d7dff4be07a7814cc62f12ef0f6eab6ef3d8601f Mon Sep 17 00:00:00 2001 From: kalykun <984757534@qq.com> Date: Fri, 13 Aug 2021 00:11:03 +0800 Subject: [PATCH] test(alert): add some test case (#836) * test(alert): add some test case * Code optimization * Code optimization * remove unnecessary snap --- src/alert/tests/Alert.spec.ts | 53 +++++++++++++++++++ .../tests/__snapshots__/Alert.spec.ts.snap | 9 ++++ 2 files changed, 62 insertions(+) create mode 100644 src/alert/tests/__snapshots__/Alert.spec.ts.snap diff --git a/src/alert/tests/Alert.spec.ts b/src/alert/tests/Alert.spec.ts index e309ae498..187f8db1c 100644 --- a/src/alert/tests/Alert.spec.ts +++ b/src/alert/tests/Alert.spec.ts @@ -1,5 +1,8 @@ +import { h } from 'vue' import { NAlert } from '../index' import { mount } from '@vue/test-utils' +import { NIcon } from '../../icon' +import { IosAirplane } from '@vicons/ionicons4' describe('n-alert', () => { it('should work with import on demand', () => { @@ -19,6 +22,46 @@ describe('n-alert', () => { expect(wrapper.find('.n-alert-body__title').text()).toBe(title) }) + it('should work with type prop', async () => { + const wrapper = mount(NAlert) + + await wrapper.setProps({ type: 'info' }) + expect(wrapper.find('.n-alert').attributes('style')).toMatchSnapshot() + + await wrapper.setProps({ type: 'success' }) + expect(wrapper.find('.n-alert').attributes('style')).toMatchSnapshot() + + await wrapper.setProps({ type: 'warning' }) + expect(wrapper.find('.n-alert').attributes('style')).toMatchSnapshot() + + await wrapper.setProps({ type: 'error' }) + expect(wrapper.find('.n-alert').attributes('style')).toMatchSnapshot() + }) + + it('should work with default slot', () => { + const wrapper = mount(NAlert, { + slots: { + default: () => 'default' + } + }) + + expect(wrapper.find('.n-alert-body__content').exists()).toBe(true) + expect(wrapper.find('.n-alert-body__content').text()).toBe('default') + }) + + it('should work with icon slot', async () => { + const wrapper = mount(NAlert, { + slots: { + icon: () => + h(NIcon, null, { + default: () => h(IosAirplane) + }) + } + }) + + expect(wrapper.findComponent(NIcon).exists()).toBe(true) + }) + it('shouldnt be closable by default', () => { const wrapper = mount(NAlert) expect(wrapper.find('.n-base-close.n-alert__close').exists()).toBe(false) @@ -39,6 +82,16 @@ describe('n-alert', () => { expect(wrapper.find('.n-alert__icon').exists()).toBe(false) }) + it("shouldn't closed when on-close prop returns false", async () => { + const wrapper = mount(NAlert, { + props: { closable: true, onClose: () => false } + }) + const closeBtn = wrapper.find('.n-base-close.n-alert__close') + await closeBtn.trigger('click') + + expect(wrapper.find('.n-base-close.n-alert__close').exists()).toBe(true) + }) + it('should trigger callback when closed', async () => { const handleCloseClick = jest.fn() const wrapper = mount(NAlert, { diff --git a/src/alert/tests/__snapshots__/Alert.spec.ts.snap b/src/alert/tests/__snapshots__/Alert.spec.ts.snap new file mode 100644 index 000000000..0b27d6ef2 --- /dev/null +++ b/src/alert/tests/__snapshots__/Alert.spec.ts.snap @@ -0,0 +1,9 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`n-alert should work with type prop 1`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --color: rgba(237, 245, 254, 1); --close-color: rgba(122, 122, 122, 1); --close-color-hover: rgba(89, 89, 89, 1); --close-color-pressed: rgba(149, 149, 149, 1); --icon-color: #2080f0; --border: 1px solid rgba(199, 223, 251, 1); --title-text-color: rgb(31, 34, 37); --content-text-color: rgb(51, 54, 57); --line-height: 1.6; --border-radius: 3px; --font-size: 14px; --title-font-weight: 500; --icon-size: 26px; --icon-margin: 12px 8px 0 12px; --close-size: 16px; --close-margin: 14px 16px 0 0; --padding: 15px; --icon-margin-left: 12px; --icon-margin-right: 8px;"`; + +exports[`n-alert should work with type prop 2`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --color: rgba(237, 247, 242, 1); --close-color: rgba(122, 122, 122, 1); --close-color-hover: rgba(89, 89, 89, 1); --close-color-pressed: rgba(149, 149, 149, 1); --icon-color: #18a058; --border: 1px solid rgba(197, 231, 213, 1); --title-text-color: rgb(31, 34, 37); --content-text-color: rgb(51, 54, 57); --line-height: 1.6; --border-radius: 3px; --font-size: 14px; --title-font-weight: 500; --icon-size: 26px; --icon-margin: 12px 8px 0 12px; --close-size: 16px; --close-margin: 14px 16px 0 0; --padding: 15px; --icon-margin-left: 12px; --icon-margin-right: 8px;"`; + +exports[`n-alert should work with type prop 3`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --color: rgba(254, 247, 237, 1); --close-color: rgba(122, 122, 122, 1); --close-color-hover: rgba(89, 89, 89, 1); --close-color-pressed: rgba(149, 149, 149, 1); --icon-color: #f0a020; --border: 1px solid rgba(250, 224, 181, 1); --title-text-color: rgb(31, 34, 37); --content-text-color: rgb(51, 54, 57); --line-height: 1.6; --border-radius: 3px; --font-size: 14px; --title-font-weight: 500; --icon-size: 26px; --icon-margin: 12px 8px 0 12px; --close-size: 16px; --close-margin: 14px 16px 0 0; --padding: 15px; --icon-margin-left: 12px; --icon-margin-right: 8px;"`; + +exports[`n-alert should work with type prop 4`] = `"--bezier: cubic-bezier(.4, 0, .2, 1); --color: rgba(251, 238, 241, 1); --close-color: rgba(122, 122, 122, 1); --close-color-hover: rgba(89, 89, 89, 1); --close-color-pressed: rgba(149, 149, 149, 1); --icon-color: #d03050; --border: 1px solid rgba(243, 203, 211, 1); --title-text-color: rgb(31, 34, 37); --content-text-color: rgb(51, 54, 57); --line-height: 1.6; --border-radius: 3px; --font-size: 14px; --title-font-weight: 500; --icon-size: 26px; --icon-margin: 12px 8px 0 12px; --close-size: 16px; --close-margin: 14px 16px 0 0; --padding: 15px; --icon-margin-left: 12px; --icon-margin-right: 8px;"`;