feat: migrate Redirection component to composition api

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

@@ -5,6 +5,7 @@ import { getRelatedTagsStub } from '../../x-components/src/__stubs__/related-tag
 import { getQuerySuggestionsStub } from '../../x-components/src/__stubs__/query-suggestions-stubs.factory';
 import {
   createResultStub,
+  createRedirectionStub,
   getBannersStub,
   getNextQueriesStub,
   getPromotedsStub,
@@ -75,7 +76,8 @@ const adapter = {
         results: getResultsStub(10),
         totalResults: 50,
         promoteds: getPromotedsStub(),
-        banners: getBannersStub()
+        banners: getBannersStub(),
+        redirections: [createRedirectionStub('redirection')]
       });
     }),
   identifierResults: () =>

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

@@ -41,6 +41,7 @@ import {
   TestPopularSearches,
   TestNextQueries,
   TestIdentifierResults,
+  TestRedirection,
   TestExtraParams
 } from './';
 
@@ -250,6 +251,11 @@ const routes = [
     name: 'IdentifierResults',
     component: TestIdentifierResults
   },
+  {
+    path: '/redirection',
+    name: 'Redirection',
+    component: TestRedirection
+  },
   {
     path: '/snippet-config-extraparams',
     name: 'SnippetConfigExtraparams',

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

@@ -3,3 +3,4 @@ export { default as TestSortList } from './test-sort-list.vue';
 export { default as TestSortPickerList } from './test-sort-picker-list.vue';
 export { default as TestSpellcheck } from './test-spellcheck.vue';
 export { default as TestPartialResultsList } from './test-partial-results-list.vue';
+export { default as TestRedirection } from './test-redirection.vue';

packages/_vue3-migration-test/src/x-modules/search/components/test-redirection.vue

@@ -0,0 +1,34 @@
+<template>
+  <SearchInput />
+  <Redirection
+    #default="{ redirection, redirect, abortRedirect }"
+    class="redirection-container"
+    :delayInSeconds="5"
+  >
+    <p>Your search matches a special place in our website. You are being redirected to:</p>
+    <a @click="redirect" :href="redirection.url" data-test="redirection-link">
+      {{ redirection.url }}
+    </a>
+    <div>
+      <button @click="abortRedirect">No, I'll stay here</button>
+      <button @click="redirect">Yes, redirect me</button>
+    </div>
+  </Redirection>
+</template>
+
+<script setup>
+  import Redirection from '../../../../../x-components/src/x-modules/search/components/redirection.vue';
+  import SearchInput from '../../../../../x-components/src/x-modules/search-box/components/search-input.vue';
+</script>
+
+<style>
+  .redirection-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    background-color: antiquewhite;
+    width: fit-content;
+    padding: 0 10px 10px 10px;
+    margin-top: 15px;
+  }
+</style>

packages/x-components/src/x-modules/search/components/__tests__/redirection.spec.ts

@@ -1,11 +1,11 @@
 import { DeepPartial } from '@empathyco/x-utils';
 import Vuex, { Store } from 'vuex';
 import { Redirection as RedirectionModel } from '@empathyco/x-types';
-import { createLocalVue, Wrapper, mount } from '@vue/test-utils';
+import { createLocalVue, mount } from '@vue/test-utils';
 import { createRedirectionStub } from '../../../../__stubs__/redirections-stubs.factory';
 import { getDataTestSelector, installNewXPlugin } from '../../../../__tests__/utils';
 import { getXComponentXModuleName, isXComponent } from '../../../../components/x-component.utils';
-import { XPlugin } from '../../../../plugins';
+import { XPlugin } from '../../../../plugins/x-plugin';
 import { RootXStoreState } from '../../../../store/store.types';
 import { WirePayload } from '../../../../wiring/wiring.types';
 import Redirection from '../redirection.vue';
@@ -27,13 +27,12 @@ function renderRedirection({
   redirections = stubRedirections,
   mode = 'auto',
   delayInSeconds = 1
-}: RenderRedirectionOptions = {}): RenderRedirectionAPI {
+} = {}) {
   const localVue = createLocalVue();
   localVue.use(Vuex);
   const store = new Store<DeepPartial<RootXStoreState>>({});
   installNewXPlugin({ store }, localVue);
 
-  XPlugin.resetInstance();
   resetXSearchStateWith(store, { redirections });
   const wrapper = mount(
     {
@@ -54,14 +53,22 @@ function renderRedirection({
     }
   );
 
+  const onUserAbortedARedirection = jest.fn();
+  XPlugin.bus.on('UserClickedAbortARedirection', true).subscribe(onUserAbortedARedirection);
+
+  const onUserClickedARedirection = jest.fn();
+  XPlugin.bus.on('UserClickedARedirection', true).subscribe(onUserClickedARedirection);
+
   return {
     wrapper: wrapper.findComponent(Redirection),
     acceptRedirection() {
       wrapper.find(getDataTestSelector('redirection-accept')).element.click();
     },
     abortRedirection() {
       wrapper.find(getDataTestSelector('redirection-abort')).element.click();
-    }
+    },
+    onUserClickedARedirection,
+    onUserAbortedARedirection
   };
 }
 
@@ -116,18 +123,17 @@ describe('testing Redirection component', () => {
 
   //eslint-disable-next-line max-len
   it('redirects and emits the `UserClickedARedirection` event in manual mode when the user click the button', () => {
-    const { wrapper, acceptRedirection } = renderRedirection({ mode: 'manual' });
-    const onUserClickedARedirection = jest.fn();
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const { onUserClickedARedirection, acceptRedirection } = renderRedirection({ mode: 'manual' });
 
-    wrapper.vm.$x.on('UserClickedARedirection', true).subscribe(onUserClickedARedirection);
     acceptRedirection();
 
     expect(onUserClickedARedirection).toHaveBeenCalledTimes(1);
     expect(onUserClickedARedirection).toHaveBeenCalledWith<[WirePayload<RedirectionModel>]>({
       eventPayload: stubRedirections[0],
       metadata: {
         moduleName: 'search',
-        location: undefined,
+        location: 'none',
         replaceable: true
       }
     });
@@ -137,10 +143,7 @@ describe('testing Redirection component', () => {
 
   //eslint-disable-next-line max-len
   it("doesn't redirect and doesn't emit the event `UserClickedARedirection` in manual when the user doesn't click the button", () => {
-    const { wrapper } = renderRedirection({ mode: 'manual' });
-    const onUserClickedARedirection = jest.fn();
-
-    wrapper.vm.$x.on('UserClickedARedirection', true).subscribe(onUserClickedARedirection);
+    const { onUserClickedARedirection } = renderRedirection({ mode: 'manual' });
 
     jest.runAllTicks();
 
@@ -150,10 +153,8 @@ describe('testing Redirection component', () => {
 
   //eslint-disable-next-line max-len
   it('redirects and emits the `UserClickedARedirection` event in auto mode and 0 seconds of delay', () => {
-    const { wrapper } = renderRedirection({ delayInSeconds: 0 });
-    const onUserClickedARedirection = jest.fn();
+    const { onUserClickedARedirection } = renderRedirection({ delayInSeconds: 0 });
 
-    wrapper.vm.$x.on('UserClickedARedirection', true).subscribe(onUserClickedARedirection);
     // The delay 0 runs so fast the we need to force the test to simulate a wait.
     jest.advanceTimersByTime(1);
 
@@ -162,7 +163,7 @@ describe('testing Redirection component', () => {
       eventPayload: stubRedirections[0],
       metadata: {
         moduleName: 'search',
-        location: undefined,
+        location: 'none',
         replaceable: true
       }
     });
@@ -171,12 +172,10 @@ describe('testing Redirection component', () => {
   });
 
   it('emits the redirection event `UserClickedAbortARedirection`', () => {
-    const { wrapper, abortRedirection } = renderRedirection();
-    const onUserClickedARedirection = jest.fn();
-    const onUserAbortedARedirection = jest.fn();
+    // eslint-disable-next-line @typescript-eslint/unbound-method
+    const { onUserClickedARedirection, onUserAbortedARedirection, abortRedirection } =
+      renderRedirection();
 
-    wrapper.vm.$x.on('UserClickedARedirection', true).subscribe(onUserClickedARedirection);
-    wrapper.vm.$x.on('UserClickedAbortARedirection', true).subscribe(onUserAbortedARedirection);
     abortRedirection();
     jest.runAllTicks();
 
@@ -187,35 +186,12 @@ describe('testing Redirection component', () => {
 
   //eslint-disable-next-line max-len
   it("doesn't redirect and doesn't emit the `UserClickedARedirection` event if there is a new query accepted", () => {
-    const { wrapper } = renderRedirection();
-    const onUserClickedARedirection = jest.fn();
-
-    wrapper.vm.$x.on('UserClickedARedirection', true).subscribe(onUserClickedARedirection);
-    wrapper.vm.$x.emit('UserAcceptedAQuery', 'lego');
+    const { onUserClickedARedirection } = renderRedirection();
+    XPlugin.bus.emit('UserAcceptedAQuery', 'lego');
 
     jest.runAllTicks();
 
     expect(onUserClickedARedirection).not.toHaveBeenCalled();
     expect(spy).not.toHaveBeenCalled();
   });
 });
-
-interface RenderRedirectionOptions {
-  /** The redirection mode. */
-  mode?: 'auto' | 'manual';
-  /** The redirection delay in seconds. */
-  delayInSeconds?: number;
-  /** The template to be rendered. */
-  template?: string;
-  /** List of redirections to be rendered. */
-  redirections?: RedirectionModel[];
-}
-
-interface RenderRedirectionAPI {
-  /** The wrapper of the container element.*/
-  wrapper: Wrapper<Vue>;
-  /** Helper method to accept a redirection. */
-  acceptRedirection: () => void;
-  /** Helper method to abort a redirection. */
-  abortRedirection: () => void;
-}