fix: bus handling of a location ref (#1432)

empathyco · Mar 21, 2024 · b980638 · b980638
1 parent b1d92df
commit b980638
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 21 deletions.
diff --git a/packages/x-components/src/composables/__tests__/use-on-display.spec.ts b/packages/x-components/src/composables/__tests__/use-on-display.spec.ts
@@ -2,8 +2,8 @@ import { ref, nextTick } from 'vue';
 import { useElementVisibility } from '@vueuse/core';
 import { TaggingRequest } from '@empathyco/x-types';
 import { useEmitDisplayEvent, useOnDisplay } from '../use-on-display';
-import { use$x } from '../use-$x';
 import { WireMetadata } from '../../wiring';
+import { bus } from '../../plugins/index';
 
 jest.mock('@vueuse/core', () => ({
   useElementVisibility: jest.fn()
@@ -12,14 +12,8 @@ jest.mock('@vueuse/core', () => ({
 const refElementVisibility = ref(false);
 (useElementVisibility as jest.Mock).mockReturnValue(refElementVisibility);
 
-jest.mock('../use-$x', () => ({
-  use$x: jest.fn()
-}));
-
-const $xEmitSpy = jest.fn();
-(use$x as jest.Mock).mockReturnValue({
-  emit: $xEmitSpy
-});
+const emitSpy = jest.fn();
+jest.spyOn(bus, 'emit' as any).mockImplementation(emitSpy);
 
 describe(`testing ${useOnDisplay.name} composable`, () => {
   beforeEach(() => {
@@ -178,8 +172,8 @@ describe(`testing ${useEmitDisplayEvent.name} composable`, () => {
 
     await toggleElementVisibility();
 
-    expect($xEmitSpy).toHaveBeenCalled();
-    expect($xEmitSpy).toHaveBeenCalledWith(
+    expect(emitSpy).toHaveBeenCalled();
+    expect(emitSpy).toHaveBeenCalledWith(
       'TrackableElementDisplayed',
       {
         tagging: {
@@ -203,11 +197,11 @@ describe(`testing ${useEmitDisplayEvent.name} composable`, () => {
 
     await toggleElementVisibility();
 
-    expect($xEmitSpy).toHaveBeenCalled();
-    expect($xEmitSpy).toHaveBeenCalledWith(
+    expect(emitSpy).toHaveBeenCalled();
+    expect(emitSpy).toHaveBeenCalledWith(
       'TrackableElementDisplayed',
       expect.anything(),
-      eventMetadata
+      expect.objectContaining({ ...eventMetadata })
     );
   });
 
@@ -218,7 +212,7 @@ describe(`testing ${useEmitDisplayEvent.name} composable`, () => {
     await toggleElementVisibility();
     await toggleElementVisibility();
 
-    expect($xEmitSpy).toHaveBeenCalledTimes(1);
+    expect(emitSpy).toHaveBeenCalledTimes(1);
   });
 
   it('exposes the current visibility of the element', async () => {
@@ -239,7 +233,7 @@ describe(`testing ${useEmitDisplayEvent.name} composable`, () => {
     unwatchDisplay();
 
     await toggleElementVisibility();
-    expect($xEmitSpy).not.toHaveBeenCalled();
+    expect(emitSpy).not.toHaveBeenCalled();
   });
 });
 

diff --git a/packages/x-components/src/composables/use-on-display.ts b/packages/x-components/src/composables/use-on-display.ts
@@ -2,7 +2,7 @@ import { Ref, watch, WatchStopHandle } from 'vue';
 import { useElementVisibility } from '@vueuse/core';
 import { TaggingRequest } from '@empathyco/x-types';
 import { WireMetadata } from '../wiring';
-import { use$x } from './use-$x';
+import { useXBus } from './use-x-bus';
 
 /**
  * Composable that triggers a callback whenever the provided element appears in the viewport.
@@ -54,12 +54,16 @@ export function useEmitDisplayEvent({
   taggingRequest,
   eventMetadata = {}
 }: UseEmitDisplayEventOptions): UseOnDisplayReturn {
-  const $x = use$x();
+  const bus = useXBus();
 
   const { isElementVisible, unwatchDisplay } = useOnDisplay({
     element,
     callback: () => {
-      $x.emit('TrackableElementDisplayed', { tagging: { display: taggingRequest } }, eventMetadata);
+      bus.emit(
+        'TrackableElementDisplayed',
+        { tagging: { display: taggingRequest } },
+        eventMetadata
+      );
     }
   });
 

diff --git a/packages/x-components/src/composables/use-x-bus.ts b/packages/x-components/src/composables/use-x-bus.ts
@@ -1,11 +1,12 @@
-import Vue, { getCurrentInstance, inject } from 'vue';
+import Vue, { getCurrentInstance, isRef, Ref } from 'vue';
 import { XBus } from '@empathyco/x-bus';
 import { bus } from '../plugins/x-bus';
 import { XEvent, XEventPayload, XEventsTypes } from '../wiring/events.types';
 import { WireMetadata } from '../wiring/wiring.types';
 import { getRootXComponent, getXComponentXModuleName } from '../components/x-component.utils';
 import { FeatureLocation } from '../types/origin';
 import { PropsWithType } from '../utils/types';
+import { useHybridInject } from './use-hybrid-inject';
 
 /**
  * Composable which injects the current location,
@@ -15,7 +16,10 @@ import { PropsWithType } from '../utils/types';
  * @returns An object with the `on` and `emit` functions.
  */
 export function useXBus(): UseXBusAPI {
-  const location = inject<FeatureLocation>('location', 'none');
+  const injectedLocation = useHybridInject<Ref<FeatureLocation> | FeatureLocation>(
+    'location',
+    'none'
+  );
 
   const currentComponent: PrivateExtendedVueComponent | undefined | null =
     getCurrentInstance()?.proxy;
@@ -31,6 +35,8 @@ export function useXBus(): UseXBusAPI {
       payload?: XEventPayload<Event>,
       metadata: Omit<WireMetadata, 'moduleName'> = {}
     ) => {
+      const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation;
+
       bus.emit(event, payload, createWireMetadata(metadata, currentComponent, location));
       currentXComponent?.$emit(event, payload);
     }