mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2024-12-21 04:50:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

test(alert): add some test case (#836)

Browse Source 
* test(alert): add some test case

* Code optimization

* Code optimization

* remove unnecessary snap
This commit is contained in:
kalykun 2021-08-13 00:11:03 +08:00 committed by GitHub
parent dc7706dbdb
commit d7dff4be07
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/alert/tests/Alert.spec.ts
View File

@ -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, {

9
src/alert/tests/__snapshots__/Alert.spec.ts.snap Normal file
View File

@ -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;"`;