feat(empathize): migrate empathize component to composition API

EMP-4087

packages/_vue3-migration-test/src/main.ts

@@ -11,13 +11,15 @@ const VUE_COMPAT_MODE = Number(import.meta.env.VITE_VUE_COMPAT_MODE);
 if (VUE_COMPAT_MODE === 2) {
   configureCompat({
     /**
-     * Remove $attrs and $listeners when Vue 3 and `INSTANCE_LISTENERS: false`.
+     * Remove $attrs and $listeners when Vue 3 and `INSTANCE_LISTENERS` and
+     * `INSTANCE_ATTRS_CLASS_STYLE`.
      * Both $attrs and $listeners are inherited (automatically forwarded) to the root component
      * by default:
      * https://vuejs.org/guide/components/attrs#nested-component-inheritance
      * https://github.com/vuejs/core/issues/4566#issuecomment-917997056.
      */
     INSTANCE_LISTENERS: 'suppress-warning',
+    INSTANCE_ATTRS_CLASS_STYLE: 'suppress-warning',
     RENDER_FUNCTION: false,
     COMPONENT_V_MODEL: false,
     WATCH_ARRAY: false

packages/_vue3-migration-test/src/router.ts

@@ -16,7 +16,8 @@ import {
   TestSortList,
   TestSortPickerList,
   TestBaseScroll,
-  TestSearchBox
+  TestSearchBox,
+  TestEmpathize
 } from './';
 
 const routes = [
@@ -100,6 +101,11 @@ const routes = [
     name: 'SearchBox',
     component: TestSearchBox
   },
+  {
+    path: '/empathize',
+    name: 'Empathize',
+    component: TestEmpathize
+  },
   {
     path: '/elements-list',
     name: 'ElementsList',

packages/_vue3-migration-test/src/x-modules/empathize/test-empathize.vue

@@ -0,0 +1,25 @@
+<template>
+  <SearchInput />
+  <Empathize :animation="CollapseHeight" class="empathize">
+    <h1>It is a Empathize</h1>
+    <h2>It is a Empathize</h2>
+    <h3>It is a Empathize</h3>
+    <p>
+      Component containing the empathize. It has a required slot to define its content and two props
+      to define when to open and close it: `eventsToOpenEmpathize` and `eventsToCloseEmpathize`.
+    </p>
+  </Empathize>
+  <Empathize :animation="CollapseHeight" class="empathize" />
+</template>
+
+<script setup lang="ts">
+  import CollapseHeight from '../../../../x-components/src/components/animations/collapse-height.vue';
+  import Empathize from '../../../../x-components/src/x-modules/empathize/components/empathize.vue';
+  import SearchInput from '../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+</script>
+
+<style scoped>
+  .empathize {
+    border: 3px solid red;
+  }
+</style>

packages/_vue3-migration-test/src/x-modules/index.ts

@@ -1,3 +1,4 @@
+export { default as TestEmpathize } from './empathize/test-empathize.vue';
 export * from './facets';
 export * from './next-queries';
 export * from './search';

packages/x-components/src/x-modules/empathize/components/__tests__/empathize.spec.ts

@@ -1,107 +1,86 @@
-import { mount, Wrapper } from '@vue/test-utils';
-import Vue from 'vue';
-import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
+import { mount } from '@vue/test-utils';
+import { nextTick } from 'vue';
+import { getXComponentXModuleName, isXComponent } from '../../../../components';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
+import { XPlugin } from '../../../../plugins/index';
 import Empathize from '../empathize.vue';
-import { empathizeXModule } from '../../x-module';
-import { XPlugin } from '../../../../plugins/x-plugin';
-import { XEvent } from '../../../../wiring/events.types';
 
-jest.useFakeTimers();
-
-describe('testing empathize component', () => {
-  function renderEmpathize({
-    eventsToOpenEmpathize = ['UserClickedSearchBox'],
-    eventsToCloseEmpathize = ['UserClosedEmpathize'],
-    template = `<Empathize v-bind="$attrs">
-                  <template #default>
-                    <span data-test="empathize-content">Empathize</span>
-                  </template>
-                </Empathize>`
-  }: RenderEmpathizeOptions = {}): RenderEmpathizeAPI {
-    const [, localVue] = installNewXPlugin();
-    XPlugin.registerXModule(empathizeXModule);
-
-    const parent = document.createElement('div');
-    document.body.appendChild(parent);
-
-    const wrapper = mount(
-      {
-        components: { Empathize },
-        template
-      },
-      {
-        localVue,
-        attachTo: parent,
-        propsData: {
-          eventsToOpenEmpathize,
-          eventsToCloseEmpathize
-        }
+function render({
+  eventsToOpenEmpathize = ['UserClickedSearchBox'],
+  eventsToCloseEmpathize = ['UserClosedEmpathize'],
+  template = `
+    <Empathize v-bind="$attrs">
+      <template #default>
+        <span data-test="empathize-content">Empathize</span>
+      </template>
+    </Empathize>`
+} = {}) {
+  installNewXPlugin();
+
+  const parent = document.createElement('div');
+  document.body.appendChild(parent);
+
+  const wrapper = mount(
+    {
+      components: { Empathize },
+      template
+    },
+    {
+      attachTo: parent,
+      propsData: {
+        eventsToOpenEmpathize,
+        eventsToCloseEmpathize
       }
-    ).findComponent(Empathize);
+    }
+  );
+
+  return {
+    wrapper: wrapper.findComponent(Empathize)
+  };
+}
 
-    return {
-      wrapper
-    };
-  }
+describe('testing empathize component', () => {
+  beforeAll(jest.useFakeTimers);
+  afterEach(jest.clearAllTimers);
 
   it('is an XComponent which has an XModule', () => {
-    const { wrapper } = renderEmpathize();
-    expect(isXComponent(wrapper.vm)).toEqual(true);
+    const { wrapper } = render();
+
+    expect(isXComponent(wrapper.vm)).toBeTruthy();
     expect(getXComponentXModuleName(wrapper.vm)).toEqual('empathize');
   });
 
-  it('will not open empathize if there is no content to render', () => {
+  it('will not open empathize if there is no content to render', async () => {
     const template = `<Empathize v-bind="$attrs"/>`;
-    const { wrapper } = renderEmpathize({ template });
+    const { wrapper } = render({ template });
 
-    wrapper.vm.$x.emit('UserClickedSearchBox');
+    await XPlugin.bus.emit('UserClickedSearchBox');
 
-    expect(wrapper.find(getDataTestSelector('empathize')).exists()).toBe(true);
-    expect(wrapper.find(getDataTestSelector('empathize-content')).exists()).toBe(false);
+    expect(wrapper.find(getDataTestSelector('empathize')).exists()).toBeTruthy();
+    expect(wrapper.find(getDataTestSelector('empathize-content')).exists()).toBeFalsy();
   });
 
   it('listens to UserOpenedEmpathize and UserClosedEmpathize by default', async () => {
-    const { wrapper } = renderEmpathize();
+    const { wrapper } = render();
 
-    wrapper.vm.$x.emit('UserClickedSearchBox');
+    await XPlugin.bus.emit('UserClickedSearchBox');
     jest.runAllTimers();
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     // Both should exist and be visible
-    expect(wrapper.find(getDataTestSelector('empathize')).exists()).toBe(true);
+    expect(wrapper.find(getDataTestSelector('empathize')).exists()).toBeTruthy();
     expect(wrapper.find(getDataTestSelector('empathize')).element).toBeVisible();
-    expect(wrapper.find(getDataTestSelector('empathize-content')).exists()).toBe(true);
+    expect(wrapper.find(getDataTestSelector('empathize-content')).exists()).toBeTruthy();
     expect(wrapper.find(getDataTestSelector('empathize-content')).element).toBeVisible();
 
-    wrapper.vm.$x.emit('UserClosedEmpathize');
+    await XPlugin.bus.emit('UserClosedEmpathize');
     jest.runAllTimers();
-    await wrapper.vm.$nextTick();
+    await nextTick();
 
     // Both should exist, as v-show doesn't remove the elements in the DOM, and not be visible
-    expect(wrapper.find(getDataTestSelector('empathize')).exists()).toBe(true);
+    expect(wrapper.find(getDataTestSelector('empathize')).exists()).toBeTruthy();
     expect(wrapper.find(getDataTestSelector('empathize')).element).not.toBeVisible();
-    expect(wrapper.find(getDataTestSelector('empathize-content')).exists()).toBe(true);
+    expect(wrapper.find(getDataTestSelector('empathize-content')).exists()).toBeTruthy();
     expect(wrapper.find(getDataTestSelector('empathize-content')).element).not.toBeVisible();
   });
 });
-
-interface RenderEmpathizeOptions {
-  /**
-   * Array of {@link XEvent | xEvents} to open the empathize.
-   */
-  eventsToOpenEmpathize?: XEvent[];
-  /**
-   * Array of {@link XEvent | xEvents} to close the empathize.
-   */
-  eventsToCloseEmpathize?: XEvent[];
-  /**
-   * The template to render {@link Empathize} component.
-   */
-  template?: string;
-}
-
-interface RenderEmpathizeAPI {
-  /** The Vue testing utils wrapper for the {@link Empathize} component. */
-  wrapper: Wrapper<Vue>;
-}