Provide single dummy component for tests

Author: rtucek

tests/components/Component.vue

@@ -0,0 +1,14 @@
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-property-decorator';
+
+@Component
+export default class Input extends Vue {
+  @Prop({
+    default: null,
+  }) readonly value!: any;
+}
+</script>
+
+<template>
+  <span class="dummy-component"/>
+</template>

tests/components/Input.vue

@@ -2,8 +2,7 @@ import { mount } from '@vue/test-utils';
 import { QueryBuilderConfig, RuleSet } from '@/types';
 import QueryBuilder from '@/QueryBuilder.vue';
 import QueryBuilderGroup from '@/QueryBuilderGroup.vue';
-import Number from '../components/Number.vue';
-import Input from '../components/Input.vue';
+import Component from '../components/Component.vue';
 
 describe('Testing drag\'n\'drop related features', () => {
   const config: QueryBuilderConfig = {
@@ -21,13 +20,13 @@ describe('Testing drag\'n\'drop related features', () => {
       {
         identifier: 'txt',
         name: 'Text Selection',
-        component: Input,
+        component: Component,
         initialValue: 'foo',
       },
       {
         identifier: 'num',
         name: 'Number Selection',
-        component: Number,
+        component: Component,
         initialValue: 10,
       },
     ],

tests/components/Number.vue

@@ -5,8 +5,7 @@ import QueryBuilderGroup from '@/QueryBuilderGroup.vue';
 import {
   RuleSet, Rule, QueryBuilderConfig, QueryBuilderGroup as QueryBuilderGroupInterface,
 } from '@/types';
-import Number from '../components/Number.vue';
-import Input from '../components/Input.vue';
+import Component from '../components/Component.vue';
 
 // Schedule a microtask, so all pending promises can be executed
 const flushPromises = (): Promise<void> => new Promise(res => setTimeout(res, 0));
@@ -86,13 +85,13 @@ describe('Test drag\'n\'drop related actions', () => {
       {
         identifier: 'txt',
         name: 'Text Selection',
-        component: Input,
+        component: Component,
         initialValue: '',
       },
       {
         identifier: 'num',
         name: 'Number Selection',
-        component: Number,
+        component: Component,
         initialValue: 10,
       },
     ],

tests/unit/colored-borders.spec.ts

@@ -1,6 +1,5 @@
 import { mount } from '@vue/test-utils';
-import Input from '../components/Input.vue';
-import Number from '../components/Number.vue';
+import Component from '../components/Component.vue';
 import QueryBuilder from '@/QueryBuilder.vue';
 import App from '../components/App.vue';
 import QueryBuilderGroup from '@/QueryBuilderGroup.vue';
@@ -24,13 +23,13 @@ describe('Test basic functionality of QueryBuilder.vue', () => {
         {
           identifier: 'txt',
           name: 'Text Selection',
-          component: Input,
+          component: Component,
           initialValue: '',
         },
         {
           identifier: 'num',
           name: 'Number Selection',
-          component: Number,
+          component: Component,
           initialValue: 10,
         },
       ],
@@ -106,8 +105,8 @@ describe('Test basic functionality of QueryBuilder.vue', () => {
     });
 
     // Manually update value
-    const num = wrapper.find(Number);
-    num.setValue('20');
+    const num = wrapper.find(Component);
+    num.vm.$emit('input', 20);
     expect(wrapper.emittedByOrder()).toHaveLength(2);
     expect(wrapper.emittedByOrder()[1]).toStrictEqual({
       name: 'input',
@@ -149,13 +148,13 @@ describe('Test basic functionality of QueryBuilder.vue', () => {
           {
             identifier: 'txt',
             name: 'Text Selection',
-            component: Input,
+            component: Component,
             initialValue: '',
           },
           {
             identifier: 'num',
             name: 'Number Selection',
-            component: Number,
+            component: Component,
             initialValue: 10,
           },
         ],
@@ -271,13 +270,13 @@ describe('Test basic functionality of QueryBuilder.vue', () => {
           {
             identifier: 'txt',
             name: 'Text Selection',
-            component: Input,
+            component: Component,
             initialValue: '',
           },
           {
             identifier: 'num',
             name: 'Number Selection',
-            component: Number,
+            component: Component,
             initialValue: 10,
           },
         ],
@@ -384,7 +383,7 @@ describe('Test basic functionality of QueryBuilder.vue', () => {
       .filter(({ vm: { $props } }) => $props.query.identifier === 'txt' && $props.query.value === 'd')
       .at(0);
 
-    rule.find('input').setValue('D');
+    rule.find('.dummy-component').vm.$emit('input', 'D');
     expect(app.vm.$data.query).toStrictEqual({
       operatorIdentifier: 'or',
       children: [

tests/unit/drag-n-drop.spec.ts

@@ -3,8 +3,7 @@ import { RuleSet, Rule, QueryBuilderConfig } from '@/types';
 import QueryBuilder from '@/QueryBuilder.vue';
 import QueryBuilderGroup from '@/QueryBuilderGroup.vue';
 import QueryBuilderRule from '@/QueryBuilderRule.vue';
-import Number from '../components/Number.vue';
-import Input from '../components/Input.vue';
+import Component from '../components/Component.vue';
 
 describe('Testing slot related features', () => {
   const propsData: { value: RuleSet, config: QueryBuilderConfig } = {
@@ -40,13 +39,13 @@ describe('Testing slot related features', () => {
         {
           identifier: 'txt',
           name: 'Text Selection',
-          component: Input,
+          component: Component,
           initialValue: 'foo',
         },
         {
           identifier: 'num',
           name: 'Number Selection',
-          component: Number,
+          component: Component,
           initialValue: 10,
         },
       ],
@@ -195,7 +194,7 @@ describe('Testing slot related features', () => {
     const ruleComponent = slot.find('.slot-rule');
 
     // Verify rule slot is properly rendered
-    expect(ruleComponent.is(Input)).toBeTruthy();
+    expect(ruleComponent.is(Component)).toBeTruthy();
     expect(ruleComponent.vm.$props.value).toBe('A');
     ruleComponent.vm.$emit('input', 'a');
     expect(rule.emitted()['query-update'][0][0]).toStrictEqual({ identifier: 'txt', value: 'a' });

tests/unit/query-builder.spec.ts

@@ -1,4 +1,4 @@
-import Input from '../components/Input.vue';
+import Component from '../components/Component.vue';
 import { isQueryBuilderConfig, isRule, isRuleSet } from '@/guards';
 
 describe('Testing component props and guards', () => {
@@ -26,7 +26,7 @@ describe('Testing component props and guards', () => {
           {
             identifier: 'baz',
             name: 'baz',
-            component: Input,
+            component: Component,
           },
         ],
       },