@onereach/orest-input-cli/lib/generators/tests/templates/new-input/VSettings.spec.js

The tool for creating, serving, and publishing OREST Inputs

import { describe, expect, it } from '@jest/globals';
import { mount } from '@vue/test-utils';

import VSettings from '@src/VSettings.vue';

// Example of tests for VSettings component. You can adopt it to your component structure or remove it
describe('VSettings', () => {
  it('defines component', () => {
    expect(VSettings).toBeDefined();
  });

  describe('Test validations', () => {
    const wrapper = mount(VSettings);
    const validations = wrapper.vm.$options.validations();

    it('has vuelidate validations', () => {
      expect(validations).toBeTruthy();
    });

    it('has required for label field', () => {
      expect(validations).toHaveProperty('label.required');
    });
  });

  describe('Test label field', () => {
    const wrapper = mount(VSettings);
    const labelFieldSelector = '[data-test-id="label"] input';

    it('has label field', () => {
      expect(wrapper.getComponent(labelFieldSelector)).toBeTruthy();
    });

    it('emits update event on change', async () => {
      const input = wrapper.getComponent(labelFieldSelector);
      const value = 'My custom label text';

      input.setValue(value);
      expect(input.element.value).toBe(value);

      await wrapper.vm.$nextTick(); // Wait until $emits have been handled

      expect(wrapper.emitted()['update:label']).toBeTruthy();
    });
  });
});