2019-02-15 15:39:39 +05:30
|
|
|
import { createLocalVue, shallowMount } from '@vue/test-utils';
|
|
|
|
import Callout from '~/vue_shared/components/callout.vue';
|
|
|
|
|
|
|
|
const TEST_MESSAGE = 'This is a callout message!';
|
|
|
|
const TEST_SLOT = '<button>This is a callout slot!</button>';
|
|
|
|
|
|
|
|
const localVue = createLocalVue();
|
2018-10-15 14:42:47 +05:30
|
|
|
|
|
|
|
describe('Callout Component', () => {
|
2019-02-15 15:39:39 +05:30
|
|
|
let wrapper;
|
2018-10-15 14:42:47 +05:30
|
|
|
|
2019-02-15 15:39:39 +05:30
|
|
|
const factory = options => {
|
|
|
|
wrapper = shallowMount(localVue.extend(Callout), {
|
|
|
|
localVue,
|
|
|
|
...options,
|
|
|
|
});
|
|
|
|
};
|
2018-10-15 14:42:47 +05:30
|
|
|
|
|
|
|
afterEach(() => {
|
2019-02-15 15:39:39 +05:30
|
|
|
wrapper.destroy();
|
2018-10-15 14:42:47 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('should render the appropriate variant of callout', () => {
|
2019-02-15 15:39:39 +05:30
|
|
|
factory({
|
|
|
|
propsData: {
|
|
|
|
category: 'info',
|
|
|
|
message: TEST_MESSAGE,
|
|
|
|
},
|
2018-10-15 14:42:47 +05:30
|
|
|
});
|
|
|
|
|
2019-02-15 15:39:39 +05:30
|
|
|
expect(wrapper.classes()).toEqual(['bs-callout', 'bs-callout-info']);
|
2018-10-15 14:42:47 +05:30
|
|
|
|
2019-02-15 15:39:39 +05:30
|
|
|
expect(wrapper.element.tagName).toEqual('DIV');
|
2018-10-15 14:42:47 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('should render accessibility attributes', () => {
|
2019-02-15 15:39:39 +05:30
|
|
|
factory({
|
|
|
|
propsData: {
|
|
|
|
message: TEST_MESSAGE,
|
|
|
|
},
|
2018-10-15 14:42:47 +05:30
|
|
|
});
|
|
|
|
|
2019-02-15 15:39:39 +05:30
|
|
|
expect(wrapper.attributes('role')).toEqual('alert');
|
|
|
|
expect(wrapper.attributes('aria-live')).toEqual('assertive');
|
2018-10-15 14:42:47 +05:30
|
|
|
});
|
|
|
|
|
|
|
|
it('should render the provided message', () => {
|
2019-02-15 15:39:39 +05:30
|
|
|
factory({
|
|
|
|
propsData: {
|
|
|
|
message: TEST_MESSAGE,
|
|
|
|
},
|
|
|
|
});
|
|
|
|
|
|
|
|
expect(wrapper.element.innerHTML.trim()).toEqual(TEST_MESSAGE);
|
|
|
|
});
|
|
|
|
|
|
|
|
it('should render the provided slot', () => {
|
|
|
|
factory({
|
|
|
|
slots: {
|
|
|
|
default: TEST_SLOT,
|
|
|
|
},
|
2018-10-15 14:42:47 +05:30
|
|
|
});
|
|
|
|
|
2019-02-15 15:39:39 +05:30
|
|
|
expect(wrapper.element.innerHTML.trim()).toEqual(TEST_SLOT);
|
2018-10-15 14:42:47 +05:30
|
|
|
});
|
|
|
|
});
|