Merge pull request #10235 from rak-phillip/chore/10104-labeledInput-c…

…omposable-tests

Write tests for `useCompactInput` and `useLabeledFormElement`

shell/composables/useCompactInput.test.ts

@@ -0,0 +1,36 @@
+import { ref } from 'vue';
+import { useCompactInput } from './useCompactInput';
+
+describe('useCompactInput', () => {
+  it('should compute isCompact correctly when compact is explicitly set', () => {
+    const props = ref({
+      compact:  true,
+      label:    'Test Label',
+      labelKey: 'testLabel',
+    });
+
+    const { isCompact } = useCompactInput(props.value);
+
+    expect(isCompact.value).toBe(true);
+
+    // When compact is explicitly set to false, isCompact should be false
+    props.value.compact = false;
+    expect(isCompact.value).toBe(false);
+  });
+
+  it('should compute isCompact correctly when compact is not explicitly set', () => {
+    const props = ref({
+      label:    '',
+      labelKey: '',
+    });
+
+    const { isCompact } = useCompactInput(props.value);
+
+    // When there is no label and labelKey is also not present, isCompact should be true
+    expect(isCompact.value).toBe(true);
+
+    // When label is present, isCompact should be false
+    props.value.label = 'Updated Label';
+    expect(isCompact.value).toBe(false);
+  });
+});

shell/composables/useCompactInput.ts

@@ -1,7 +1,7 @@
 import { computed, ComputedRef } from 'vue';
 
 interface CompactInputProps {
-  compact?: boolean;
+  compact?: boolean | null;
   label?: string;
   labelKey?: string;
 }
@@ -13,7 +13,7 @@ interface UseCompactInput {
 export const useCompactInput = (props: CompactInputProps): UseCompactInput => {
   const isCompact = computed(() => {
     // Compact if explicitly set - otherwise compact if there is no label
-    return props.compact !== null ? !!props.compact : !(props.label || props.labelKey);
+    return (props.compact !== null && props.compact !== undefined) ? !!props.compact : !(props.label || props.labelKey);
   });
 
   return { isCompact };

shell/composables/useLabeledFormElement.test.ts

@@ -0,0 +1,135 @@
+import { ref } from 'vue';
+import { useLabeledFormElement } from './useLabeledFormElement';
+
+describe('useLabeledFormElement', () => {
+  it('should set raised to true when focused', () => {
+    const props = {
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    };
+
+    const emit = jest.fn();
+    const { onFocusLabeled, onBlurLabeled, raised } = useLabeledFormElement(props, emit);
+
+    onFocusLabeled();
+    expect(raised.value).toBe(true);
+
+    onBlurLabeled();
+    expect(raised.value).toBe(false);
+  });
+
+  it('should set focused to true when focused', () => {
+    const props = {
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    };
+
+    const emit = jest.fn();
+    const { onFocusLabeled, onBlurLabeled, focused } = useLabeledFormElement(props, emit);
+
+    onFocusLabeled();
+    expect(focused.value).toBe(true);
+
+    onBlurLabeled();
+    expect(focused.value).toBe(false);
+  });
+
+  it('should set blurred to current timestamp when blurred', () => {
+    const props = {
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    };
+
+    const emit = jest.fn();
+    const { onBlurLabeled, blurred } = useLabeledFormElement(props, emit);
+
+    onBlurLabeled();
+    expect(blurred.value).toBeTruthy();
+  });
+
+  it('should compute isDisabled correctly', () => {
+    const props = ref({
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    });
+
+    const emit = jest.fn();
+    const { isDisabled } = useLabeledFormElement(props.value, emit);
+
+    expect(isDisabled.value).toBe(false);
+
+    props.value.disabled = true;
+    expect(isDisabled.value).toBe(true);
+
+    props.value.mode = 'view';
+    expect(isDisabled.value).toBe(true);
+  });
+
+  it('should compute validationMessage correctly for required field', () => {
+    const props = ref({
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [
+        (value: string[]) => (value.length < 5 ? 'This field is required' : undefined),
+      ],
+    });
+
+    const emit = jest.fn();
+    const { validationMessage, onBlurLabeled } = useLabeledFormElement(props.value, emit);
+
+    onBlurLabeled();
+    expect(validationMessage.value).toBe('This field is required');
+  });
+
+  it('should compute validationMessage correctly for custom rules', () => {
+    const props = ref({
+      mode:     'edit',
+      value:    'test',
+      required: false,
+      disabled: false,
+      rules:    [
+        (value: string[]) => (value.length < 5 ? 'Value must be at least 5 characters long' : undefined),
+        (value: string[]) => (value.includes('test') ? 'Value cannot contain the word "test"' : undefined),
+      ],
+    });
+
+    const emit = jest.fn();
+    const { validationMessage, onBlurLabeled } = useLabeledFormElement(props.value, emit);
+
+    onBlurLabeled();
+    expect(validationMessage.value).toBe('Value must be at least 5 characters long, Value cannot contain the word "test"');
+  });
+
+  it('should compute requiredField correctly', () => {
+    const props = ref({
+      mode:     'edit',
+      value:    '',
+      required: true,
+      disabled: false,
+      rules:    [],
+    });
+
+    const emit = jest.fn();
+    const { requiredField } = useLabeledFormElement(props.value, emit);
+
+    expect(requiredField.value).toBe(true);
+
+    // When the field is not required, requiredField should be false
+    props.value.required = false;
+    expect(requiredField.value).toBe(false);
+  });
+});