test(components): fix tests after Vue3 update BATCH 2

empathyco · Aug 7, 2024 · e6a2d95 · e6a2d95
1 parent 1152fd3
commit e6a2d95
Show file tree

Hide file tree

Showing 11 changed files with 94 additions and 252 deletions.
diff --git a/packages/x-components/src/components/__tests__/base-variable-column-grid.spec.ts b/packages/x-components/src/components/__tests__/base-variable-column-grid.spec.ts
@@ -1,8 +1,7 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue, { nextTick } from 'vue';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import { getSearchResponseStub } from '../../__stubs__/search-response-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../__tests__/utils';
-import { ListItem } from '../../utils/types';
 import BaseVariableColumnGrid from '../base-variable-column-grid.vue';
 import { XPlugin } from '../../plugins/x-plugin';
 
@@ -13,16 +12,14 @@ const itemsStub = [
   ...searchResponse.results
 ];
 
-function renderComponent({ items = itemsStub }: RenderOptions = {}): RenderAPI {
-  const [, localVue] = installNewXPlugin();
-  function mountComponent(): Wrapper<Vue> {
+function renderComponent({ items = itemsStub } = {}) {
+  function mountComponent() {
     return mount(BaseVariableColumnGrid, {
-      props: ['items'],
-      propsData: {
+      global: { plugins: [installNewXPlugin()] },
+      props: {
         items
       },
-      localVue,
-      scopedSlots: {
+      slots: {
         default: '<span data-test="default-slot" slot-scope="{ item }">{{ item.id }}</span>',
         result: '<span data-test="result-slot" slot-scope="{ item }">{{ item.name }}</span>'
       }
@@ -34,12 +31,9 @@ function renderComponent({ items = itemsStub }: RenderOptions = {}): RenderAPI {
   return {
     wrapper: wrapper,
     mountComponent,
-    hasColumns(columns: number): boolean {
-      return wrapper.classes(`x-base-grid--cols-${columns}`);
-    },
-    isScopedSlotOverridden(selector): boolean {
-      return wrapper.find(getDataTestSelector(selector)).exists();
-    }
+    hasColumns: (columns: number) => wrapper.classes(`x-base-grid--cols-${columns}`),
+    isScopedSlotOverridden: (selector: string) =>
+      wrapper.find(getDataTestSelector(selector)).exists()
   };
 }
 
@@ -70,22 +64,10 @@ describe('testing BaseVariableColumnGrid component', () => {
     expect(hasColumns(6)).toBe(true);
 
     const wrapper2 = mountComponent();
+
+    console.log(wrapper2.classes());
+    await nextTick();
+
     expect(wrapper2.classes('x-base-grid--cols-6')).toBe(true);
   });
 });
-
-interface RenderOptions {
-  /** The array of items to render in the grid. */
-  items?: ListItem[];
-}
-
-interface RenderAPI {
-  /** The grid's wrapper. */
-  wrapper: Wrapper<Vue>;
-  /** Mounts the grid component. */
-  mountComponent: () => Wrapper<Vue>;
-  /** Checks if the grid has a certain number of columns. */
-  hasColumns: (columns: number) => boolean;
-  /** Check if a scoped slot is overridden. */
-  isScopedSlotOverridden: (selector: string) => boolean;
-}
diff --git a/packages/x-components/src/components/__tests__/display-emitter.spec.ts b/packages/x-components/src/components/__tests__/display-emitter.spec.ts
@@ -24,7 +24,8 @@ function render({
   });
 
   return {
-    wrapper: wrapper.findComponent(DisplayEmitter),
+    wrapper,
+    displayEmiter: wrapper.findComponent(DisplayEmitter),
     element: wrapper.find(getDataTestSelector('child')).element,
     payload,
     eventMetadata
@@ -38,9 +39,9 @@ describe('testing DisplayEmitter component', () => {
   });
 
   it('renders everything passed to its default slot', () => {
-    const { wrapper } = render();
+    const { displayEmiter } = render();
 
-    expect(wrapper.find(getDataTestSelector('child')).exists()).toBeTruthy();
+    expect(displayEmiter.find(getDataTestSelector('child')).exists()).toBeTruthy();
   });
 
   it('executes `useEmitDisplayEvent` composable underneath', () => {
@@ -70,7 +71,7 @@ describe('testing DisplayEmitter component', () => {
   it('removes the watcher on unmount', async () => {
     const { wrapper } = render();
 
-    wrapper.destroy();
+    wrapper.unmount();
     await nextTick();
 
     expect(unwatchDisplaySpy).toHaveBeenCalled();

diff --git a/packages/x-components/src/components/__tests__/dynamic-props.mixin.spec.ts b/packages/x-components/src/components/__tests__/dynamic-props.mixin.spec.ts
diff --git a/packages/x-components/src/components/__tests__/global-x-bus.spec.ts b/packages/x-components/src/components/__tests__/global-x-bus.spec.ts
@@ -4,10 +4,11 @@ import { XPlugin } from '../../plugins/index';
 import GlobalXBus from '../global-x-bus.vue';
 
 function renderGlobalXBus({ listeners = {} } = {}) {
-  installNewXPlugin();
-
   return {
-    wrapper: mount(GlobalXBus, { listeners })
+    wrapper: mount(GlobalXBus, {
+      props: { listeners },
+      global: { plugins: [installNewXPlugin()] }
+    })
   } as const;
 }
 
@@ -41,7 +42,7 @@ describe('testing GlobalXBus component', () => {
     await XPlugin.bus.emit('UserClickedColumnPicker');
     expect(clickedColumnPickerCallback).toHaveBeenCalledTimes(1);
 
-    wrapper.destroy();
+    wrapper.unmount();
 
     await XPlugin.bus.emit('UserClickedColumnPicker');
     expect(clickedColumnPickerCallback).toHaveBeenCalledTimes(1);

diff --git a/packages/x-components/src/components/__tests__/highlight.spec.ts b/packages/x-components/src/components/__tests__/highlight.spec.ts
@@ -1,33 +1,26 @@
-import { mount, Wrapper } from '@vue/test-utils';
+import { mount } from '@vue/test-utils';
 import Highlight from '../highlight.vue';
 import { getDataTestSelector } from '../../__tests__/utils';
+import { nextTick } from 'vue';
 
 function renderHighlight({
-  template = '<Highlight v-bind="$attrs"/>',
-  text,
-  highlight,
-  noMatchClass,
-  matchingPartClass,
-  matchClass
-}: RenderHighlightOptions): RenderHighlightAPI {
-  const wrapper = mount(
-    {
-      inheritAttrs: false,
-      components: {
-        Highlight
-      },
-      template
+  slots = {},
+  text = '',
+  highlight = '',
+  noMatchClass = '',
+  matchingPartClass = '',
+  matchClass = ''
+} = {}) {
+  const wrapper = mount(Highlight, {
+    props: {
+      text,
+      highlight,
+      noMatchClass,
+      matchingPartClass,
+      matchClass
     },
-    {
-      propsData: {
-        text,
-        highlight,
-        noMatchClass,
-        matchingPartClass,
-        matchClass
-      }
-    }
-  );
+    slots: { ...slots }
+  });
   return {
     wrapper,
     getStartPart() {
@@ -39,7 +32,7 @@ function renderHighlight({
     getEndPart() {
       return wrapper.find(getDataTestSelector('highlight-end'));
     },
-    async setHighlight(highlight) {
+    async setHighlight(highlight: string) {
       return await wrapper.setProps({ highlight });
     }
   };
@@ -112,13 +105,14 @@ describe('testing Highlight component', () => {
     expect(getEndPart().exists()).toBe(false);
   });
 
-  it('allows to add classes when the text matches', () => {
+  it('allows to add classes when the text matches', async () => {
     const { getMatchingPart, wrapper } = renderHighlight({
       text: 'salchichón',
       highlight: 'sal',
       matchClass: 'custom-match-class',
       matchingPartClass: 'custom-matching-part-class'
     });
+    await nextTick();
     expect(wrapper.classes('custom-match-class')).toBe(true);
     expect(getMatchingPart().classes('custom-matching-part-class')).toBe(true);
   });
@@ -133,14 +127,13 @@ describe('testing Highlight component', () => {
   });
 
   it('allows customising the HTML', async () => {
+    const customHtml = `
+        <span v-if="hasMatch" class="match-custom-layout">
+          <strong>{{ start }}</strong>{{ match }}<strong>{{ end }}</strong>
+        </span>
+        <span v-else class="no-match-custom">{{ text }}</span>`;
     const { wrapper, setHighlight } = renderHighlight({
-      template: `
-        <Highlight v-bind="$attrs" #default="{ hasMatch, start, match, end, text }">
-          <span v-if="hasMatch" class="match-custom-layout">
-            <strong>{{ start }}</strong>{{ match }}<strong>{{ end }}</strong>
-          </span>
-          <span v-else class="no-match-custom">{{ text }}</span>
-        </Highlight>`,
+      slots: { default: customHtml },
       text: 'churrasco',
       highlight: 'chur'
     });
@@ -154,31 +147,3 @@ describe('testing Highlight component', () => {
     );
   });
 });
-
-interface RenderHighlightOptions {
-  /** The template to render. */
-  template?: string;
-  /** The text to be highlighted. */
-  text: string;
-  /** The part of the text to highlight. */
-  highlight: string;
-  /** Class to add to the root node when the given text doesn't contain the part to highlight. */
-  noMatchClass?: string;
-  /** Class to add to the node wrapping the matching text. */
-  matchingPartClass?: string;
-  /** Class to add to the root node when the given text contains the part to highlight. */
-  matchClass?: string;
-}
-
-interface RenderHighlightAPI {
-  /** Testing wrapper component. */
-  wrapper: Wrapper<Vue>;
-  /** Only the start node wrapper. */
-  getStartPart: () => Wrapper<Vue>;
-  /** Only the matching node wrapper. */
-  getMatchingPart: () => Wrapper<Vue>;
-  /** Only the end node wrapper. */
-  getEndPart: () => Wrapper<Vue>;
-  /** Sets the part of the text to highlight. */
-  setHighlight: (highlight: string) => Promise<void>;
-}
diff --git a/packages/x-components/src/components/__tests__/items-list.spec.ts b/packages/x-components/src/components/__tests__/items-list.spec.ts
@@ -1,5 +1,4 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
+import { mount, VueWrapper } from '@vue/test-utils';
 import { ListItem } from '../../utils/types';
 import { getDataTestSelector } from '../../__tests__/utils';
 import { getBannersStub } from '../../__stubs__/banners-stubs.factory';
@@ -13,20 +12,13 @@ import { getPromotedsStub } from '../../__stubs__/promoteds-stubs.factory';
  * @param options - The options to render the component with.
  * @returns The API for testing the `BannersList` component.
  */
-function renderItemsList({
-  items = [],
-  scopedSlots
-}: RenderItemsListOptions = {}): RendersItemsListAPI {
+function renderItemsList({ items = [], slots }: RenderItemsListOptions = {}): RendersItemsListAPI {
   const wrapper = mount(ItemsList, {
-    propsData: {
-      items
-    },
-    scopedSlots
+    props: { items },
+    slots
   });
 
-  return {
-    wrapper
-  };
+  return { wrapper };
 }
 
 describe('testing ItemsList component', () => {
@@ -50,7 +42,7 @@ describe('testing ItemsList component', () => {
     const itemsWrapperArray = wrapper.findAll('.x-items-list__item');
     expect(itemsWrapperArray).toHaveLength(resultsStub.length);
     resultsStub.forEach((result, index: number) => {
-      expect(itemsWrapperArray.at(index).text()).toBe(result.id);
+      expect(itemsWrapperArray.at(index)?.text()).toBe(result.id);
     });
   });
 
@@ -74,7 +66,7 @@ describe('testing ItemsList component', () => {
 
   it('allows to customize each item using the slot', () => {
     const { wrapper } = renderItemsList({
-      scopedSlots: {
+      slots: {
         result: `<template #result="{ item }">Result: {{ item.name }}</template>`,
         banner: `<template #banner="{ item }">Banner: {{ item.id }}</template>`,
         promoted: `<template #promoted="{ item }">Promoted: {{ item.title }}</template>`
@@ -100,10 +92,10 @@ interface RenderItemsListOptions {
   /** Items to be passed to the component. */
   items?: ListItem[];
   /** Scoped slots to be passed to the mount function. */
-  scopedSlots?: Record<string, string>;
+  slots?: Record<string, string>;
 }
 
 interface RendersItemsListAPI {
   /** The `wrapper` wrapper component. */
-  wrapper: Wrapper<Vue>;
+  wrapper: VueWrapper;
 }