primevue-mirror/components/lib/button/Button.spec.js

85 lines
2.5 KiB
JavaScript

import { mount } from '@vue/test-utils';
import { h } from 'vue';
import Button from './Button.vue';
describe('Button.vue', () => {
it('is Button element exist', () => {
const wrapper = mount(Button);
expect(wrapper.find('.p-button.p-component').exists()).toBe(true);
expect(wrapper.find('.p-button-label').exists()).toBe(true);
});
});
describe('Button.vue', () => {
it('is icon exist and right position', () => {
const icon = 'pi pi-discord';
const iconPos = 'right';
const label = 'Save';
const props = { icon, iconPos };
let wrapper;
wrapper = mount(Button, {
props
});
expect(wrapper.find('.p-button-icon-only').exists()).toBe(true);
wrapper = mount(Button, {
props: { ...props, label }
});
expect(wrapper.find('.p-button-icon.p-button-icon-' + iconPos).exists()).toBe(true);
});
});
describe('Button.vue', () => {
it('is badge working', () => {
const badge = '5';
const badgeClass = 'p-badge-danger';
const wrapper = mount(Button, {
props: { badge, badgeClass }
});
expect(wrapper.find('.p-badge').text()).toEqual(badge);
expect(wrapper.find('.' + badgeClass).exists()).toBe(true);
});
});
describe('Button.vue', () => {
it('is loading working', async () => {
const loadingIcon = 'pi pi-discord';
const wrapper = mount(Button, {
props: {
loading: false,
loadingIcon
}
});
expect(wrapper.find('.p-disabled').exists()).toBe(false);
await wrapper.setProps({ loading: true });
const array = loadingIcon.split(' ');
const lastIcon = '.' + array.join('.');
expect(wrapper.find('.p-button-loading').exists()).toBe(true);
expect(wrapper.find('.p-button-loading-icon' + lastIcon).exists()).toBe(true);
await wrapper.setProps({ loading: false });
expect(wrapper.find('.p-button-loading').exists()).toBe(false);
});
});
describe('Button.vue', () => {
it('should render default slot', () => {
const wrapper = mount(Button, {
slots: {
default: h('span', { class: 'ml-2 font-bold' }, 'Default PrimeVue Button')
}
});
expect(wrapper.html()).toBe(`<button class="p-button p-component" type="button" data-pc-name="button" data-pc-section="root"><span class="ml-2 font-bold">Default PrimeVue Button</span></button>`);
});
});