import { shallowMount } from '@vue/test-utils'; import SlotSwitch from '~/vue_shared/components/slot_switch'; describe('SlotSwitch', () => { const slots = { first: 'AGP', second: '

PCI

', }; let wrapper; const createComponent = propsData => { wrapper = shallowMount(SlotSwitch, { propsData, slots, sync: false, }); }; const getChildrenHtml = () => wrapper.findAll('* *').wrappers.map(c => c.html()); afterEach(() => { if (wrapper) { wrapper.destroy(); } }); it('throws an error if activeSlotNames is missing', () => { expect(createComponent).toThrow('[Vue warn]: Missing required prop: "activeSlotNames"'); }); it('renders no slots if activeSlotNames is empty', () => { createComponent({ activeSlotNames: [], }); expect(getChildrenHtml().length).toBe(0); }); it('renders one slot if activeSlotNames contains single slot name', () => { createComponent({ activeSlotNames: ['first'], }); expect(getChildrenHtml()).toEqual([slots.first]); }); it('renders multiple slots if activeSlotNames contains multiple slot names', () => { createComponent({ activeSlotNames: Object.keys(slots), }); expect(getChildrenHtml()).toEqual(Object.values(slots)); }); });