diff --git a/packages/x-components/CHANGELOG.md b/packages/x-components/CHANGELOG.md index 853a57a511..20da4aed60 100644 --- a/packages/x-components/CHANGELOG.md +++ b/packages/x-components/CHANGELOG.md @@ -3,6 +3,15 @@ All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines. +## [4.1.0-alpha.36](https://github.com/empathyco/x/compare/@empathyco/x-components@4.1.0-alpha.35...@empathyco/x-components@4.1.0-alpha.36) (2024-03-21) + + +### Bug Fixes + +* bus handling of a location ref (#1432) ([b980638](https://github.com/empathyco/x/commit/b98063826f5657088bb613db1a529a446389ed67)) + + + ## [4.1.0-alpha.35](https://github.com/empathyco/x/compare/@empathyco/x-components@4.1.0-alpha.34...@empathyco/x-components@4.1.0-alpha.35) (2024-03-20) diff --git a/packages/x-components/package.json b/packages/x-components/package.json index 45f9e708c1..41286c5a0b 100644 --- a/packages/x-components/package.json +++ b/packages/x-components/package.json @@ -1,6 +1,6 @@ { "name": "@empathyco/x-components", - "version": "4.1.0-alpha.35", + "version": "4.1.0-alpha.36", "description": "Empathy X Components", "author": "Empathy Systems Corporation S.L.", "license": "Apache-2.0", 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 index 1ff117460a..bb1089160b 100644 --- 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 index e4dd8736ea..e2173c761c 100644 --- 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 index eebe5f6ba2..4f7ac79b01 100644 --- a/packages/x-components/src/composables/use-x-bus.ts +++ b/packages/x-components/src/composables/use-x-bus.ts @@ -1,4 +1,4 @@ -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'; @@ -6,6 +6,7 @@ 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('location', 'none'); + const injectedLocation = useHybridInject | FeatureLocation>( + 'location', + 'none' + ); const currentComponent: PrivateExtendedVueComponent | undefined | null = getCurrentInstance()?.proxy; @@ -31,6 +35,8 @@ export function useXBus(): UseXBusAPI { payload?: XEventPayload, metadata: Omit = {} ) => { + const location = isRef(injectedLocation) ? injectedLocation.value : injectedLocation; + bus.emit(event, payload, createWireMetadata(metadata, currentComponent, location)); currentXComponent?.$emit(event, payload); }