From 01409066dbdba985cc3ff210df11d207ae46f404 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Diego=20A=2E=20Zapata=20H=C3=A4ntsch?= Date: Tue, 23 Apr 2024 22:42:01 -0300 Subject: [PATCH] refactor(v3): move component promises into a factory function. --- .../v3/src/components/autocomplete-input.vue | 9 +-- packages/v3/src/components/circle-shape.vue | 9 +-- packages/v3/src/components/cluster-icon.vue | 9 +-- .../v3/src/components/drawing-manager.vue | 9 +-- packages/v3/src/components/heatmap-layer.vue | 9 +-- packages/v3/src/components/info-window.vue | 9 +-- packages/v3/src/components/kml-layer.vue | 7 +- packages/v3/src/components/map-layer.vue | 7 +- packages/v3/src/components/marker-icon.vue | 9 +-- packages/v3/src/components/polygon-shape.vue | 9 +-- packages/v3/src/components/polyline-shape.vue | 9 +-- .../v3/src/components/rectangle-shape.vue | 9 +-- .../src/components/street-view-panorama.vue | 9 +-- .../composables/component-promise-factory.ts | 18 +++++- .../tests/component-promise-factory.spec.ts | 64 ++++++++++++------- 15 files changed, 95 insertions(+), 100 deletions(-) diff --git a/packages/v3/src/components/autocomplete-input.vue b/packages/v3/src/components/autocomplete-input.vue index 5c3042dc4..b6610f598 100644 --- a/packages/v3/src/components/autocomplete-input.vue +++ b/packages/v3/src/components/autocomplete-input.vue @@ -19,11 +19,10 @@ import { getComponentEventsConfig, getComponentPropsConfig, getPropsValuesWithoutOptionsProp, + useComponentPromiseFactory, useDestroyPromisesOnUnmounted, useGoogleMapsApiPromiseLazy, usePluginOptions, - usePromise, - usePromiseDeferred, } from '@/composables'; import type { IAutoCompleteInputVueComponentProps } from '@/interfaces'; import { $autocompletePromise } from '@/keys'; @@ -95,10 +94,8 @@ const excludedEvents = usePluginOptions()?.excludeEventsOnAllComponents?.(); /******************************************************************************* * PROVIDE ******************************************************************************/ -const autocompletePromiseDeferred = usePromiseDeferred( - props.autocompleteKey || $autocompletePromise, -); -const promise = usePromise(props.autocompleteKey || $autocompletePromise); +const { promiseDeferred: autocompletePromiseDeferred, promise } = + useComponentPromiseFactory(props.autocompleteKey || $autocompletePromise); provide(props.autocompleteKey || $autocompletePromise, promise); /******************************************************************************* diff --git a/packages/v3/src/components/circle-shape.vue b/packages/v3/src/components/circle-shape.vue index f529fbcf0..f768f6f71 100644 --- a/packages/v3/src/components/circle-shape.vue +++ b/packages/v3/src/components/circle-shape.vue @@ -6,10 +6,9 @@ import { getComponentEventsConfig, getComponentPropsConfig, getPropsValuesWithoutOptionsProp, + useComponentPromiseFactory, useDestroyPromisesOnUnmounted, usePluginOptions, - usePromise, - usePromiseDeferred, } from '@/composables'; import type { ICircleShapeVueComponentProps } from '@/interfaces'; import { $circleShapePromise } from '@/keys'; @@ -88,10 +87,8 @@ if (!mapPromise) { /******************************************************************************* * PROVIDE ******************************************************************************/ -const circlePromiseDeferred = usePromiseDeferred( - props.circleKey || $circleShapePromise, -); -const promise = usePromise(props.circleKey || $circleShapePromise); +const { promiseDeferred: circlePromiseDeferred, promise } = + useComponentPromiseFactory(props.circleKey || $circleShapePromise); provide(props.circleKey || $circleShapePromise, promise); /******************************************************************************* diff --git a/packages/v3/src/components/cluster-icon.vue b/packages/v3/src/components/cluster-icon.vue index 395d028bf..e4ddb438f 100644 --- a/packages/v3/src/components/cluster-icon.vue +++ b/packages/v3/src/components/cluster-icon.vue @@ -13,10 +13,9 @@ import { getComponentEventsConfig, getComponentPropsConfig, getPropsValuesWithoutOptionsProp, + useComponentPromiseFactory, useDestroyPromisesOnUnmounted, usePluginOptions, - usePromise, - usePromiseDeferred, } from '@/composables'; import type { IMarkerClusterVueComponentProps } from '@/interfaces'; import { $clusterPromise } from '@/keys'; @@ -86,10 +85,8 @@ if (!mapPromise) { /******************************************************************************* * PROVIDE ******************************************************************************/ -const clusterPromiseDeferred = usePromiseDeferred( - props.clusterKey || $clusterPromise, -); -const promise = usePromise(props.clusterKey || $clusterPromise); +const { promiseDeferred: clusterPromiseDeferred, promise } = + useComponentPromiseFactory(props.clusterKey || $clusterPromise); provide(props?.clusterKey || $clusterPromise, promise); /******************************************************************************* diff --git a/packages/v3/src/components/drawing-manager.vue b/packages/v3/src/components/drawing-manager.vue index 96f6140f5..751cac1b3 100644 --- a/packages/v3/src/components/drawing-manager.vue +++ b/packages/v3/src/components/drawing-manager.vue @@ -16,10 +16,9 @@ import { getComponentEventsConfig, getComponentPropsConfig, getPropsValuesWithoutOptionsProp, + useComponentPromiseFactory, useDestroyPromisesOnUnmounted, usePluginOptions, - usePromise, - usePromiseDeferred, } from '@/composables'; import type { IDrawingManagerVueComponentProps } from '@/interfaces'; import { $drawingManagerPromise } from '@/keys'; @@ -104,10 +103,8 @@ if (!mapPromise) { /******************************************************************************* * PROVIDE ******************************************************************************/ -const drawingPromiseDeferred = usePromiseDeferred( - props.drawingKey || $drawingManagerPromise, -); -const promise = usePromise(props.drawingKey || $drawingManagerPromise); +const { promiseDeferred: drawingPromiseDeferred, promise } = + useComponentPromiseFactory(props.drawingKey || $drawingManagerPromise); provide(props.drawingKey || $drawingManagerPromise, promise); /******************************************************************************* diff --git a/packages/v3/src/components/heatmap-layer.vue b/packages/v3/src/components/heatmap-layer.vue index 5f1d56010..5f261f035 100644 --- a/packages/v3/src/components/heatmap-layer.vue +++ b/packages/v3/src/components/heatmap-layer.vue @@ -6,10 +6,9 @@ import { getComponentEventsConfig, getComponentPropsConfig, getPropsValuesWithoutOptionsProp, + useComponentPromiseFactory, useDestroyPromisesOnUnmounted, usePluginOptions, - usePromise, - usePromiseDeferred, } from '@/composables'; import type { IHeatmapLayerVueComponentProps } from '@/interfaces'; import { $heatmapLayerPromise } from '@/keys'; @@ -76,10 +75,8 @@ if (!mapPromise) { /******************************************************************************* * PROVIDE ******************************************************************************/ -const heatmapLayerPromiseDeferred = usePromiseDeferred( - props.heatmapKey || $heatmapLayerPromise, -); -const promise = usePromise(props.heatmapKey || $heatmapLayerPromise); +const { promiseDeferred: heatmapLayerPromiseDeferred, promise } = + useComponentPromiseFactory(props.heatmapKey || $heatmapLayerPromise); provide(props.heatmapKey || $heatmapLayerPromise, promise); /******************************************************************************* diff --git a/packages/v3/src/components/info-window.vue b/packages/v3/src/components/info-window.vue index 7f82d4cf7..5c7585abb 100644 --- a/packages/v3/src/components/info-window.vue +++ b/packages/v3/src/components/info-window.vue @@ -16,10 +16,9 @@ import { getComponentEventsConfig, getComponentPropsConfig, getPropsValuesWithoutOptionsProp, + useComponentPromiseFactory, useDestroyPromisesOnUnmounted, usePluginOptions, - usePromise, - usePromiseDeferred, } from '@/composables'; import type { IInfoWindowVueComponentProps } from '@/interfaces'; import { $infoWindowPromise } from '@/keys'; @@ -94,10 +93,8 @@ if (!mapPromise) { /******************************************************************************* * PROVIDE ******************************************************************************/ -const infoWindowPromiseDeferred = usePromiseDeferred( - props.infoWindowKey || $infoWindowPromise, -); -const promise = usePromise(props.infoWindowKey || $infoWindowPromise); +const { promiseDeferred: infoWindowPromiseDeferred, promise } = + useComponentPromiseFactory(props.infoWindowKey || $infoWindowPromise); provide(props.infoWindowKey || $infoWindowPromise, promise); /******************************************************************************* diff --git a/packages/v3/src/components/kml-layer.vue b/packages/v3/src/components/kml-layer.vue index b0d421183..07c36366d 100644 --- a/packages/v3/src/components/kml-layer.vue +++ b/packages/v3/src/components/kml-layer.vue @@ -6,10 +6,9 @@ import { getComponentEventsConfig, getComponentPropsConfig, getPropsValuesWithoutOptionsProp, + useComponentPromiseFactory, useDestroyPromisesOnUnmounted, usePluginOptions, - usePromise, - usePromiseDeferred, } from '@/composables'; import type { IKmlLayerVueComponentProps } from '@/interfaces'; import { $kmlLayerPromise } from '@/keys'; @@ -70,8 +69,8 @@ if (!mapPromise) { /******************************************************************************* * PROVIDE ******************************************************************************/ -const kmlPromiseDeferred = usePromiseDeferred(props.kmlKey || $kmlLayerPromise); -const promise = usePromise(props.kmlKey || $kmlLayerPromise); +const { promiseDeferred: kmlPromiseDeferred, promise } = + useComponentPromiseFactory(props.kmlKey || $kmlLayerPromise); provide(props.kmlKey || $kmlLayerPromise, promise); /******************************************************************************* diff --git a/packages/v3/src/components/map-layer.vue b/packages/v3/src/components/map-layer.vue index a249a9992..0320e61fc 100644 --- a/packages/v3/src/components/map-layer.vue +++ b/packages/v3/src/components/map-layer.vue @@ -20,11 +20,10 @@ import { onMountedResizeBusHook, onUnmountedResizeBusHook, twoWayBindingWrapper, + useComponentPromiseFactory, useDestroyPromisesOnUnmounted, useGoogleMapsApiPromiseLazy, usePluginOptions, - usePromise, - usePromiseDeferred, useResizeBus, watchPrimitivePropertiesOnSetup, } from '@/composables'; @@ -176,8 +175,8 @@ const excludedEvents = usePluginOptions()?.excludeEventsOnAllComponents?.(); /******************************************************************************* * PROVIDE ******************************************************************************/ -const mapPromiseDeferred = usePromiseDeferred(defineMapKey() || $mapPromise); -const promise = usePromise(defineMapKey() || $mapPromise); +const { promiseDeferred: mapPromiseDeferred, promise } = + useComponentPromiseFactory(defineMapKey() || $mapPromise); provide(defineMapKey() || $mapPromise, promise); /******************************************************************************* diff --git a/packages/v3/src/components/marker-icon.vue b/packages/v3/src/components/marker-icon.vue index f0a1666e5..1507bd2f0 100644 --- a/packages/v3/src/components/marker-icon.vue +++ b/packages/v3/src/components/marker-icon.vue @@ -6,10 +6,9 @@ import { getComponentEventsConfig, getComponentPropsConfig, getPropsValuesWithoutOptionsProp, + useComponentPromiseFactory, useDestroyPromisesOnUnmounted, usePluginOptions, - usePromise, - usePromiseDeferred, } from '@/composables'; import type { IMarkerIconVueComponentProps } from '@/interfaces'; import { $markerPromise } from '@/keys'; @@ -87,10 +86,8 @@ if (!mapPromise) { /******************************************************************************* * PROVIDE ******************************************************************************/ -const markerPromiseDeferred = usePromiseDeferred( - props.markerKey || $markerPromise, -); -const promise = usePromise(props.markerKey || $markerPromise); +const { promiseDeferred: markerPromiseDeferred, promise } = + useComponentPromiseFactory(props.markerKey || $markerPromise); provide(props.markerKey || $markerPromise, promise); /******************************************************************************* diff --git a/packages/v3/src/components/polygon-shape.vue b/packages/v3/src/components/polygon-shape.vue index 47af9b9da..18b8f8ec2 100644 --- a/packages/v3/src/components/polygon-shape.vue +++ b/packages/v3/src/components/polygon-shape.vue @@ -6,10 +6,9 @@ import { getComponentEventsConfig, getComponentPropsConfig, getPropsValuesWithoutOptionsProp, + useComponentPromiseFactory, useDestroyPromisesOnUnmounted, usePluginOptions, - usePromise, - usePromiseDeferred, useShapesHelpers, } from '@/composables'; import type { IPolygonShapeVueComponentProps } from '@/interfaces'; @@ -98,10 +97,8 @@ if (!mapPromise) { /******************************************************************************* * PROVIDE ******************************************************************************/ -const polygonPromiseDeferred = usePromiseDeferred( - props.polygonKey || $polygonShapePromise, -); -const promise = usePromise(props.polygonKey || $polygonShapePromise); +const { promiseDeferred: polygonPromiseDeferred, promise } = + useComponentPromiseFactory(props.polygonKey || $polygonShapePromise); provide(props.polygonKey || $polygonShapePromise, promise); /******************************************************************************* diff --git a/packages/v3/src/components/polyline-shape.vue b/packages/v3/src/components/polyline-shape.vue index 83acfc230..2a37acbe4 100644 --- a/packages/v3/src/components/polyline-shape.vue +++ b/packages/v3/src/components/polyline-shape.vue @@ -6,10 +6,9 @@ import { getComponentEventsConfig, getComponentPropsConfig, getPropsValuesWithoutOptionsProp, + useComponentPromiseFactory, useDestroyPromisesOnUnmounted, usePluginOptions, - usePromise, - usePromiseDeferred, useShapesHelpers, } from '@/composables'; import type { IPolylineShapeVueComponentProps } from '@/interfaces'; @@ -91,10 +90,8 @@ if (!mapPromise) { /******************************************************************************* * PROVIDE ******************************************************************************/ -const polylinePromiseDeferred = usePromiseDeferred( - props.polylineKey || $polylineShapePromise, -); -const promise = usePromise(props.polylineKey || $polylineShapePromise); +const { promiseDeferred: polylinePromiseDeferred, promise } = + useComponentPromiseFactory(props.polylineKey || $polylineShapePromise); provide(props.polylineKey || $polylineShapePromise, promise); /******************************************************************************* diff --git a/packages/v3/src/components/rectangle-shape.vue b/packages/v3/src/components/rectangle-shape.vue index bcda46091..ab1f42a39 100644 --- a/packages/v3/src/components/rectangle-shape.vue +++ b/packages/v3/src/components/rectangle-shape.vue @@ -6,10 +6,9 @@ import { getComponentEventsConfig, getComponentPropsConfig, getPropsValuesWithoutOptionsProp, + useComponentPromiseFactory, useDestroyPromisesOnUnmounted, usePluginOptions, - usePromise, - usePromiseDeferred, } from '@/composables'; import type { IRectangleShapeVueComponentProps } from '@/interfaces'; import { $rectangleShapePromise } from '@/keys'; @@ -87,10 +86,8 @@ if (!mapPromise) { /******************************************************************************* * PROVIDE ******************************************************************************/ -const rectanglePromiseDeferred = usePromiseDeferred( - props.rectangleKey || $rectangleShapePromise, -); -const promise = usePromise(props.rectangleKey || $rectangleShapePromise); +const { promiseDeferred: rectanglePromiseDeferred, promise } = + useComponentPromiseFactory(props.rectangleKey || $rectangleShapePromise); provide(props.rectangleKey || $rectangleShapePromise, promise); /******************************************************************************* diff --git a/packages/v3/src/components/street-view-panorama.vue b/packages/v3/src/components/street-view-panorama.vue index f742f2970..a94575e89 100644 --- a/packages/v3/src/components/street-view-panorama.vue +++ b/packages/v3/src/components/street-view-panorama.vue @@ -14,11 +14,10 @@ import { getComponentPropsConfig, getPropsValuesWithoutOptionsProp, twoWayBindingWrapper, + useComponentPromiseFactory, useDestroyPromisesOnUnmounted, useGoogleMapsApiPromiseLazy, usePluginOptions, - usePromise, - usePromiseDeferred, useResizeBus, watchPrimitivePropertiesOnSetup, } from '@/composables'; @@ -102,10 +101,8 @@ const excludedEvents = usePluginOptions()?.excludeEventsOnAllComponents?.(); /******************************************************************************* * PROVIDE ******************************************************************************/ -const streetViewPanoramaPromiseDeferred = usePromiseDeferred( - props.streetViewKey || $streetViewPanoramaPromise, -); -const promise = usePromise(props.streetViewKey || $streetViewPanoramaPromise); +const { promiseDeferred: streetViewPanoramaPromiseDeferred, promise } = + useComponentPromiseFactory(props.streetViewKey || $streetViewPanoramaPromise); provide(props.streetViewKey || $streetViewPanoramaPromise, promise); /******************************************************************************* diff --git a/packages/v3/src/composables/component-promise-factory.ts b/packages/v3/src/composables/component-promise-factory.ts index 7e017a7e0..138848a05 100644 --- a/packages/v3/src/composables/component-promise-factory.ts +++ b/packages/v3/src/composables/component-promise-factory.ts @@ -46,7 +46,7 @@ function createPromises( * @internal * @returns {Promise} */ -export function usePromise( +function usePromise( key: string | InjectionKey>, ): Promise { if (!componentPromisesList.has(key)) { @@ -60,7 +60,7 @@ export function usePromise( * @internal * @returns {Promise} */ -export function usePromiseDeferred( +function usePromiseDeferred( key: string | InjectionKey>, ): PromiseDeferred { if (!deferredPromisesList.has(key)) { @@ -70,6 +70,20 @@ export function usePromiseDeferred( return deferredPromisesList.get(key); } +/** + * @internal + * @param {string|InjectionKey>} key + * @returns Object + */ +export function useComponentPromiseFactory( + key: string | InjectionKey>, +): { promiseDeferred: PromiseDeferred; promise: Promise } { + const promiseDeferred = usePromiseDeferred(key); + const promise = usePromise(key); + + return { promiseDeferred, promise }; +} + /** * @internal * @returns {Promise} diff --git a/packages/v3/tests/component-promise-factory.spec.ts b/packages/v3/tests/component-promise-factory.spec.ts index caa35742b..cf697e5fd 100644 --- a/packages/v3/tests/component-promise-factory.spec.ts +++ b/packages/v3/tests/component-promise-factory.spec.ts @@ -1,6 +1,7 @@ import { useCirclePromise, useClusterPromise, + useComponentPromiseFactory, useDestroyPromisesOnUnmounted, useDrawingPromise, useHeatmapLayerPromise, @@ -10,8 +11,6 @@ import { useMarkerPromise, usePolygonPromise, usePolylinePromise, - usePromise, - usePromiseDeferred, useRectanglePromise, useStreetViewPanoramaPromise, } from '../src/composables/component-promise-factory'; @@ -36,7 +35,8 @@ describe('component-promise-factory.ts', () => { it('should create and return a map promise with the default key', () => { // act const promise = useMapPromise(); - const promise2 = usePromise($mapPromise); + const { promise: promise2 } = + useComponentPromiseFactory($mapPromise); // assert expect(promise).instanceOf(Promise); @@ -46,7 +46,9 @@ describe('component-promise-factory.ts', () => { it('should create and return a street view promise with the default key', () => { // act const promise = useStreetViewPanoramaPromise(); - const promise2 = usePromise($streetViewPanoramaPromise); + const { promise: promise2 } = useComponentPromiseFactory( + $streetViewPanoramaPromise, + ); // assert expect(promise).instanceOf(Promise); @@ -56,7 +58,8 @@ describe('component-promise-factory.ts', () => { it('should create and return a circle promise with the default key', () => { // act const promise = useCirclePromise(); - const promise2 = usePromise($circleShapePromise); + const { promise: promise2 } = + useComponentPromiseFactory($circleShapePromise); // assert expect(promise).instanceOf(Promise); @@ -66,7 +69,8 @@ describe('component-promise-factory.ts', () => { it('should create and return a cluster promise with the default key', () => { // act const promise = useClusterPromise(); - const promise2 = usePromise($clusterPromise); + const { promise: promise2 } = + useComponentPromiseFactory($clusterPromise); // assert expect(promise).instanceOf(Promise); @@ -76,7 +80,9 @@ describe('component-promise-factory.ts', () => { it('should create and return a drawing promise with the default key', () => { // act const promise = useDrawingPromise(); - const promise2 = usePromise($drawingManagerPromise); + const { promise: promise2 } = useComponentPromiseFactory( + $drawingManagerPromise, + ); // assert expect(promise).instanceOf(Promise); @@ -86,7 +92,8 @@ describe('component-promise-factory.ts', () => { it('should create and return a heatmap promise with the default key', () => { // act const promise = useHeatmapLayerPromise(); - const promise2 = usePromise($heatmapLayerPromise); + const { promise: promise2 } = + useComponentPromiseFactory($heatmapLayerPromise); // assert expect(promise).instanceOf(Promise); @@ -96,7 +103,8 @@ describe('component-promise-factory.ts', () => { it('should create and return a info window promise with the default key', () => { // act const promise = useInfoWindowPromise(); - const promise2 = usePromise($infoWindowPromise); + const { promise: promise2 } = + useComponentPromiseFactory($infoWindowPromise); // assert expect(promise).instanceOf(Promise); @@ -106,7 +114,8 @@ describe('component-promise-factory.ts', () => { it('should create and return a kml promise with the default key', () => { // act const promise = useKmlPromise(); - const promise2 = usePromise($kmlLayerPromise); + const { promise: promise2 } = + useComponentPromiseFactory($kmlLayerPromise); // assert expect(promise).instanceOf(Promise); @@ -116,7 +125,8 @@ describe('component-promise-factory.ts', () => { it('should create and return a marker promise with the default key', () => { // act const promise = useMarkerPromise(); - const promise2 = usePromise($markerPromise); + const { promise: promise2 } = + useComponentPromiseFactory($markerPromise); // assert expect(promise).instanceOf(Promise); @@ -126,7 +136,8 @@ describe('component-promise-factory.ts', () => { it('should create and return a polygon promise with the default key', () => { // act const promise = usePolygonPromise(); - const promise2 = usePromise($polygonShapePromise); + const { promise: promise2 } = + useComponentPromiseFactory($polygonShapePromise); // assert expect(promise).instanceOf(Promise); @@ -136,7 +147,9 @@ describe('component-promise-factory.ts', () => { it('should create and return a polyline promise with the default key', () => { // act const promise = usePolylinePromise(); - const promise2 = usePromise($polylineShapePromise); + const { promise: promise2 } = useComponentPromiseFactory( + $polylineShapePromise, + ); // assert expect(promise).instanceOf(Promise); @@ -146,7 +159,9 @@ describe('component-promise-factory.ts', () => { it('should create and return a rectangle promise with the default key', () => { // act const promise = useRectanglePromise(); - const promise2 = usePromise($rectangleShapePromise); + const { promise: promise2 } = useComponentPromiseFactory( + $rectangleShapePromise, + ); // assert expect(promise).instanceOf(Promise); @@ -156,7 +171,8 @@ describe('component-promise-factory.ts', () => { it('should create and return a promise with a custom key', () => { // act const promise = useMapPromise('customKey'); - const promise2 = usePromise('customKey'); + const { promise: promise2 } = + useComponentPromiseFactory($mapPromise); // assert expect(promise).instanceOf(Promise); @@ -169,8 +185,8 @@ describe('component-promise-factory.ts', () => { // act const promise = useMapPromise(); - const promise2 = usePromise($mapPromise); - const deferred = usePromiseDeferred($mapPromise); + const { promiseDeferred, promise: promise2 } = + useComponentPromiseFactory($mapPromise); useDestroyPromisesOnUnmounted($mapPromise); // assert @@ -178,7 +194,7 @@ describe('component-promise-factory.ts', () => { expect(promise).toEqual(promise2); // act - deferred.resolve(value); + promiseDeferred.resolve(value); const r = await promise; const r2 = await promise2; @@ -193,12 +209,12 @@ describe('component-promise-factory.ts', () => { // act const promise = useMapPromise('test2'); - const promise2 = usePromise('test2'); - const deferred = usePromiseDeferred('test2'); + const { promiseDeferred, promise: promise2 } = + useComponentPromiseFactory('test2'); useDestroyPromisesOnUnmounted('test2'); // act - deferred.reject(reason); + promiseDeferred.reject(reason); // assert try { @@ -218,9 +234,9 @@ describe('component-promise-factory.ts', () => { const result = 'the result'; // act - const deferred = usePromiseDeferred('deferredKey'); - const promise = usePromise('deferredKey'); - deferred.resolve(result); + const { promiseDeferred, promise } = + useComponentPromiseFactory('deferredKey'); + promiseDeferred.resolve(result); const value = await promise; // assert