Commit aedaef2b authored by Paul Slaughter's avatar Paul Slaughter

Update callout component to receive slot

**Why?**
- This is needed to add buttons to the callout
parent bc69b934
......@@ -11,13 +11,14 @@ export default {
},
message: {
type: String,
required: true,
required: false,
default: '',
},
},
};
</script>
<template>
<div :class="`bs-callout bs-callout-${category}`" role="alert" aria-live="assertive">
{{ message }}
{{ message }} <slot></slot>
</div>
</template>
import Vue from 'vue';
import callout from '~/vue_shared/components/callout.vue';
import createComponent from 'spec/helpers/vue_mount_component_helper';
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();
describe('Callout Component', () => {
let CalloutComponent;
let vm;
const exampleMessage = 'This is a callout message!';
let wrapper;
beforeEach(() => {
CalloutComponent = Vue.extend(callout);
});
const factory = options => {
wrapper = shallowMount(localVue.extend(Callout), {
localVue,
...options,
});
};
afterEach(() => {
vm.$destroy();
wrapper.destroy();
});
it('should render the appropriate variant of callout', () => {
vm = createComponent(CalloutComponent, {
category: 'info',
message: exampleMessage,
factory({
propsData: {
category: 'info',
message: TEST_MESSAGE,
},
});
expect(vm.$el.getAttribute('class')).toEqual('bs-callout bs-callout-info');
expect(wrapper.classes()).toEqual(['bs-callout', 'bs-callout-info']);
expect(vm.$el.tagName).toEqual('DIV');
expect(wrapper.element.tagName).toEqual('DIV');
});
it('should render accessibility attributes', () => {
vm = createComponent(CalloutComponent, {
message: exampleMessage,
factory({
propsData: {
message: TEST_MESSAGE,
},
});
expect(vm.$el.getAttribute('role')).toEqual('alert');
expect(vm.$el.getAttribute('aria-live')).toEqual('assertive');
expect(wrapper.attributes('role')).toEqual('alert');
expect(wrapper.attributes('aria-live')).toEqual('assertive');
});
it('should render the provided message', () => {
vm = createComponent(CalloutComponent, {
message: exampleMessage,
factory({
propsData: {
message: TEST_MESSAGE,
},
});
expect(wrapper.element.innerHTML.trim()).toEqual(TEST_MESSAGE);
});
it('should render the provided slot', () => {
factory({
slots: {
default: TEST_SLOT,
},
});
expect(vm.$el.innerHTML.trim()).toEqual(exampleMessage);
expect(wrapper.element.innerHTML.trim()).toEqual(TEST_SLOT);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment