mirror of https://github.com/rancher/dashboard.git
65 lines
2.2 KiB
TypeScript
65 lines
2.2 KiB
TypeScript
import { shallowMount } from '@vue/test-utils';
|
|
import CollapsibleCard from '@shell/components/CollapsibleCard.vue';
|
|
|
|
describe('component: CollapsibleCard', () => {
|
|
it('should render component with the correct data applied', () => {
|
|
const wrapper = shallowMount(CollapsibleCard, {
|
|
propsData: { title: 'some-card-title' },
|
|
slots: {
|
|
'header-right': '<p>some stuff for header</p>',
|
|
content: '<p>some content</p>'
|
|
}
|
|
});
|
|
|
|
const cardWrapper = wrapper.find('.collapsible-card');
|
|
const cardHeader = wrapper.find('.collapsible-card-header');
|
|
const cardBody = wrapper.find('.collapsible-card-body');
|
|
|
|
expect(cardWrapper.exists()).toBe(true);
|
|
|
|
expect(cardHeader.exists()).toBe(true);
|
|
expect(cardHeader.find('h2 span').text()).toBe('some-card-title');
|
|
expect(cardHeader.find('p').exists()).toBe(true);
|
|
expect(cardHeader.find('p').text()).toBe('some stuff for header');
|
|
expect(cardHeader.find('i').exists()).toBe(true);
|
|
expect(cardHeader.find('i').classes()).toContain('icon-chevron-up');
|
|
|
|
expect(cardBody.exists()).toBe(true);
|
|
expect(cardBody.find('p').exists()).toBe(true);
|
|
expect(cardBody.find('p').text()).toBe('some content');
|
|
});
|
|
|
|
it('clicking on card header should emit event', () => {
|
|
const wrapper = shallowMount(CollapsibleCard, {
|
|
propsData: { title: 'some-card-title' },
|
|
slots: {
|
|
'header-right': '<p>some stuff for header</p>',
|
|
content: '<p>some content</p>'
|
|
}
|
|
});
|
|
|
|
const cardHeader = wrapper.find('.collapsible-card-header');
|
|
|
|
cardHeader.trigger('click');
|
|
|
|
expect(wrapper.emitted('toggleCollapse')).toHaveLength(1);
|
|
expect(wrapper.emitted('toggleCollapse')![0][0]).toBe(true);
|
|
});
|
|
|
|
it('clicking on card title should emit event', () => {
|
|
const wrapper = shallowMount(CollapsibleCard, {
|
|
propsData: { title: 'some-card-title', isTitleClickable: true },
|
|
slots: {
|
|
'header-right': '<p>some stuff for header</p>',
|
|
content: '<p>some content</p>'
|
|
}
|
|
});
|
|
|
|
const cardHeaderTitle = wrapper.find('.collapsible-card-header h2 span');
|
|
|
|
cardHeaderTitle.trigger('click');
|
|
|
|
expect(wrapper.emitted('titleClick')).toHaveLength(1);
|
|
});
|
|
});
|