83 lines
2.3 KiB
JavaScript
83 lines
2.3 KiB
JavaScript
import { mount, config } from '@vue/test-utils';
|
|
import { test, describe, expect } from 'vitest';
|
|
import RichSelect from '@/components/RichSelect.vue';
|
|
import { setupGlobalConfig } from '../setup/msw';
|
|
import { nextTick } from 'vue';
|
|
|
|
setupGlobalConfig(config); // Setup vue app global config
|
|
|
|
// Ref: Testing teleports
|
|
// https://test-utils.vuejs.org/guide/advanced/teleport.html#interacting-with-the-teleported-component
|
|
|
|
let wrapper;
|
|
|
|
beforeEach(() => {
|
|
// create teleport target
|
|
const el = document.createElement('div');
|
|
el.id = 'popovers';
|
|
document.body.appendChild(el);
|
|
|
|
wrapper = mount(RichSelect, {
|
|
props: {
|
|
value: 'opt-1',
|
|
options: [
|
|
{
|
|
label: 'Option 1',
|
|
value: 'opt-1',
|
|
image: 'https://via.placeholder.com/100x100'
|
|
},
|
|
{
|
|
label: 'Option 2',
|
|
value: 'opt-2',
|
|
image: 'https://via.placeholder.com/200x200'
|
|
}
|
|
]
|
|
}
|
|
});
|
|
});
|
|
|
|
afterEach(() => {
|
|
// clean up
|
|
document.body.outerHTML = '';
|
|
});
|
|
|
|
describe('Rich Select Component', () => {
|
|
test('should display a dropdown menu', () => {
|
|
expect(RichSelect).toBeTruthy();
|
|
|
|
expect(wrapper.find('button').exists()).toBe(true);
|
|
|
|
// Image should be displayed along with the label
|
|
expect(wrapper.find('img').exists()).toBe(true);
|
|
expect(wrapper.find('img').attributes('src')).toBe(
|
|
'https://via.placeholder.com/100x100'
|
|
);
|
|
|
|
expect(wrapper.text()).toContain('Option 1');
|
|
});
|
|
|
|
test('should display a popup with desired options', () => {
|
|
expect(wrapper.find('button').exists()).toBe(true);
|
|
wrapper.find('button').trigger('click');
|
|
|
|
// Test images are displayed
|
|
const images = document.getElementsByTagName('img');
|
|
expect(images.length).toBe(2);
|
|
expect(images[0].src).toBe('https://via.placeholder.com/100x100');
|
|
expect(images[1].src).toBe('https://via.placeholder.com/200x200');
|
|
|
|
// Test labels are displayed
|
|
expect(images[0].parentNode.children[1].innerHTML).toBe('Option 1');
|
|
expect(images[1].parentNode.children[1].innerHTML).toBe('Option 2');
|
|
});
|
|
|
|
test('should emit on clicking of other option', () => {
|
|
wrapper.find('button').trigger('click');
|
|
expect(wrapper.text()).toContain('Option 1');
|
|
const images = document.getElementsByTagName('img');
|
|
|
|
images[1].parentNode.click();
|
|
expect(wrapper.emitted('change')[0]).toEqual(['opt-2']);
|
|
});
|
|
});
|