refactor: Add tests cases for DPTrigger component, inject values from root instead duplicating injection

Author: Jasenkoo

src/packages/components/DpInput/useInput.ts

@@ -3,30 +3,28 @@ import { isAfter, isDate, isValid, parse, set } from 'date-fns';
 import { useContext } from '@packages/composables/useContext.ts';
 import { useDefaults } from '@packages/composables/useDefaults.ts';
 import { isValidDate } from '@packages/utils/date.ts';
-import { DpTriggerKey } from '@packages/components/DpTrigger';
 import type { MaybeValue } from '@packages/types';
 import type { DpInputProps, DpInputEmits } from '@packages/components/DpInput';
+import { DpRootKey } from '@packages/components/DpRoot';
 
 export const useInput = (props: DpInputProps, emit: DpInputEmits) => {
     const {
-        inputRef,
         inputValue,
         isMenuOpen,
         rangeEnabled,
         multiDatesEnabled,
         openMenu,
         closeMenu,
-        // setEmptyDate,
-        // mode,
         props: injectedProps,
-    } = useContext(DpTriggerKey, 'DatePickerTrigger');
+    } = useContext(DpRootKey);
 
     const { getDefaultTextInputOptions, getDefaultPattern, getDefaultStartTime } = useDefaults();
 
     const textInputOptions = computed(() => getDefaultTextInputOptions(props.textInput));
 
     const parsedDate = ref<MaybeValue<Date> | MaybeValue<Date>[]>(null);
     const textPasted = ref(false);
+    const inputRef = ref<HTMLElement | null>(null);
 
     const propagateEvent = (emitFn: () => void) => {
         if (props.propagateEvents) {

src/packages/components/DpTrigger/DpTrigger.ts

@@ -1,27 +1,34 @@
-import { type EmitFn, h, type SetupContext } from 'vue';
+import { defineComponent, type EmitFn, type ExtractPropTypes, h, type PropType } from 'vue';
 
 import { emitDef } from '@packages/utils/generic.ts';
 import { useTrigger } from '@packages/components/DpTrigger';
 
+const props = {
+    as: { type: String as PropType<string>, default: 'div' },
+};
+
 const emits = {
     click: emitDef<MouseEvent>,
 };
 
 export type DpTriggerEmits = EmitFn<typeof emits>;
+export type DpTriggerProps = ExtractPropTypes<typeof props>;
 
-export const DpTrigger = {
+export const DpTrigger = defineComponent({
+    props,
     emits,
-    setup(props: any, { slots, emit, attrs }: SetupContext) {
+    setup(props: DpTriggerProps, { slots, emit, attrs }) {
         const { triggerRef, clearValue, inputValue, openMenu } = useTrigger();
 
         const onClick = (ev: MouseEvent) => {
             emit('click', ev);
             openMenu();
         };
 
+        // todo - needs to exposed close, toggle?
         return () =>
-            h('div', { ...attrs, ref: triggerRef, onClick }, [
-                slots.default?.({ clearValue, inputValue: inputValue.value, openMenu }),
+            h(props.as, { ...attrs, ref: triggerRef, onClick }, [
+                slots.default?.({ clearValue, value: inputValue.value, openMenu }),
             ]);
     },
-};
+});

src/packages/components/DpTrigger/__tests__/DpTrigger.spec.ts

@@ -0,0 +1,110 @@
+import { describe, expect, it, vi, afterEach } from 'vitest';
+import { mount } from '@vue/test-utils';
+import { DpTrigger } from '@packages/components/DpTrigger';
+import { ref } from 'vue';
+import { DpRootKey } from '@packages/components/DpRoot';
+
+const useRootContext = () => {
+    const triggerRef = ref(null);
+    const inputValue = ref('value-text');
+    const openMenu = () => {
+        return true;
+    };
+
+    const clearValue = () => {
+        inputValue.value = '';
+    };
+
+    return {
+        triggerRef,
+        inputValue,
+        openMenu,
+        clearValue,
+    };
+};
+
+const getContext = () => {
+    return {
+        provide: {
+            [DpRootKey]: useRootContext(),
+        },
+    };
+};
+
+describe('DpTrigger', () => {
+    afterEach(() => {
+        vi.restoreAllMocks();
+    });
+
+    it('Should render component', () => {
+        const wrapper = mount(DpTrigger, { global: getContext() });
+
+        expect(wrapper.html()).toContain('<div>');
+    });
+
+    it('Should render component as custom HTML tag', () => {
+        const wrapper = mount(DpTrigger, { global: getContext(), props: { as: 'section' } });
+
+        expect(wrapper.html()).toContain('<section>');
+    });
+
+    it('Should fail to mount without root context', () => {
+        expect(() => mount(DpTrigger)).toThrowError();
+    });
+
+    it('Should render value', () => {
+        const wrapper = mount(DpTrigger, {
+            global: getContext(),
+            slots: {
+                default: `
+                    <template #default="{value}">
+                        <button type="button" data-test-id="value">{{value}}</button>
+                    </template>
+                `,
+            },
+        });
+
+        const valueEl = wrapper.find(`[data-test-id="value"]`);
+
+        expect(valueEl.text()).toEqual('value-text');
+    });
+
+    it('Should trigger open menu function', async () => {
+        const context = getContext();
+        const spy = vi.spyOn(context.provide[DpRootKey], 'openMenu');
+
+        const wrapper = mount(DpTrigger, {
+            global: context,
+            slots: {
+                default: `
+                    <template #default="{value}">
+                        <button type="button" data-test-id="value">{{value}}</button>
+                    </template>
+                `,
+            },
+        });
+
+        await wrapper.find(`[data-test-id="value"]`).trigger('click');
+        const emits = wrapper.emitted();
+
+        expect(emits).toHaveProperty('click');
+        expect(spy).toHaveBeenCalledTimes(1);
+    });
+
+    it('Should update render value based on value change', async () => {
+        const wrapper = mount(DpTrigger, {
+            global: getContext(),
+            slots: {
+                default: `
+                    <template #default="{value, clearValue}">
+                        <button type="button" data-test-id="value" @click.stop="clearValue">{{value}}</button>
+                    </template>
+                `,
+            },
+        });
+        await wrapper.find(`[data-test-id="value"]`).trigger('click');
+        const valueEl = wrapper.find(`[data-test-id="value"]`);
+
+        expect(valueEl.text()).toEqual('');
+    });
+});

src/packages/components/DpTrigger/index.ts

@@ -1,2 +1,2 @@
 export { DpTrigger } from './DpTrigger.ts';
-export { useTrigger, DpTriggerKey } from './useTrigger.ts';
+export { useTrigger } from './useTrigger.ts';

src/packages/components/DpTrigger/useTrigger.ts

@@ -1,45 +1,8 @@
-import { type ComputedRef, type InjectionKey, provide, type Ref, ref } from 'vue';
 import { useContext } from '@packages/composables/useContext.ts';
-import { type DpRootProps, DpRootKey } from '@packages/components/DpRoot';
-
-export interface TriggerState {
-    inputRef: Ref<HTMLElement | null>;
-    inputValue: Ref<string>;
-    isMenuOpen: Ref<boolean>;
-    rangeEnabled: ComputedRef<boolean>;
-    multiDatesEnabled: ComputedRef<boolean>;
-    openMenu: () => void;
-    closeMenu: () => void;
-    clearValue: () => void;
-    props: DpRootProps;
-}
-
-export const DpTriggerKey = Symbol('DpTriggerKey') as InjectionKey<TriggerState>;
+import { DpRootKey } from '@packages/components/DpRoot';
 
 export const useTrigger = () => {
-    const {
-        triggerRef,
-        props,
-        inputValue,
-        isMenuOpen,
-        rangeEnabled,
-        multiDatesEnabled,
-        openMenu,
-        clearValue,
-        closeMenu,
-    } = useContext(DpRootKey);
-
-    provide(DpTriggerKey, {
-        inputRef: ref(null),
-        rangeEnabled,
-        multiDatesEnabled,
-        inputValue,
-        isMenuOpen,
-        openMenu,
-        closeMenu,
-        clearValue,
-        props,
-    });
+    const { triggerRef, inputValue, openMenu, clearValue } = useContext(DpRootKey);
 
-    return { triggerRef, injectedProps: props, inputValue, clearValue, openMenu };
+    return { triggerRef, inputValue, clearValue, openMenu };
 };