Testing a slot

The mountAsChild enables testing slots. It creates a new Vue Instance, binds the Vue Component to be tested as a child element and adds the slots as child elements of the Component.

Example

ExampleSlot Component

import { extend } from '@jasoeight/vue-testing';
import { expect } from 'chai';
import ExampleSlot from './path/to/ExampleSlot.vue';

describe('ExampleSlot.vue', () => {
    it('renders slots', () => {
        const wrapper = mountAsChild(ExampleSlot, {}, {
            'default': 'My Default Slot Content',
            'headline': {
                content: 'My Headline',
                element: 'h2'
            },
            'footer': {
                content: 'My Footer'
            }
        });

        console.log(wrapper.html());
        expect(wrapper.find('div.header > h2')[0].text()).to.equal('My Headline');
        expect(wrapper.find('div.content > div')[0].text()).to.equal('My Default Slot Content');
        expect(wrapper.find('div.footer > div')[0].text()).to.equal('My Footer');
    });
});