rogerioromao.dev
This project is a palette creator tool that allows users to generate and customize color palettes for their design projects.
1import { mount } from '@vue/test-utils';
2
3import InstructionsModal from './InstructionsModal.vue';
4
5describe('component InstructionsModal', () => {
6 it('renders the modal', () => {
7 const wrapper = mount(InstructionsModal);
8
9 expect(wrapper.find('[data-testid="instructions-title"]').text()).toBe(
10 'Instructions',
11 );
12 });
13
14 it('contains instruction text', () => {
15 const wrapper = mount(InstructionsModal);
16
17 expect(wrapper.text()).toContain('random palette is generated on load');
18 });
19
20 it('emits close event when close button clicked', async () => {
21 const wrapper = mount(InstructionsModal);
22 await wrapper.find('button').trigger('click');
23
24 expect(wrapper.emitted('close')).toBeTruthy();
25 });
26
27 it('emits close event when Escape key is pressed', async () => {
28 const wrapper = mount(InstructionsModal, {
29 attachTo: document.body,
30 });
31
32 await wrapper.trigger('keydown', { key: 'Escape' });
33
34 expect(wrapper.emitted('close')).toBeTruthy();
35
36 wrapper.unmount();
37 });
38});