@autoafleveren/ui 1.2.13 → 1.3.3

package/src/modules/components/AppInput/__tests__/app-input.spec.ts

@@ -0,0 +1,255 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import VueDatePicker from '@vuepic/vue-datepicker';
+import { AppInputLabel } from '~/modules/components';
+import InputIconSlot from '../InputIconSlot.vue';
+import { isChoiceInputCheck } from '../choice';
+import AppInput from '../AppInput.vue';
+import Input from '../Input.vue';
+
+import type { VueWrapper, ComponentMountingOptions } from '@vue/test-utils';
+import type { AppInputProps, InputType } from '../index.d';
+
+function createWrapper(
+  props?: Partial<AppInputProps<string>>,
+  slots?: ComponentMountingOptions<typeof AppInput>['slots'],
+  attrs?: Record<string, unknown>,
+// @ts-expect-error doesn't work with generic components yet
+): VueWrapper<InstanceType<typeof AppInput>> {
+  const inputProps = {
+    ...props ?? {},
+    type: props?.type ?? 'text',
+    modelValue: props?.modelValue ?? '',
+  };
+
+  return shallowMount(AppInput, { props: inputProps, attrs, slots });
+}
+
+describe('the AppInput component', () => {
+  it('should not render the optional elements by default', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.findComponent(AppInputLabel).exists()).toBe(false);
+    expect(wrapper.find('[data-test-leading-icon]').exists()).toBe(false);
+    expect(wrapper.find('[data-test-trailing-icon]').exists()).toBe(false);
+    expect(wrapper.find('[data-test-error-message]').exists()).toBe(false);
+  });
+
+  it('can set the label by prop', () => {
+    const label = 'label';
+    const wrapper = createWrapper({ label });
+
+    const labelElement = wrapper.findComponent(AppInputLabel);
+    expect(labelElement.exists()).toBe(true);
+    expect(labelElement.text()).toBe('label');
+    expect(labelElement.props('disabled')).toBe(false);
+    expect(labelElement.props('hasError')).toBe(false);
+  });
+
+  it('can show input slot when custom prop passed', () => {
+    const label = 'label';
+    const wrapper = createWrapper({ label, custom: true }, { input: '<span data-test-input-override></span>' });
+
+    expect(wrapper.find('[data-test-input-override]').exists()).toBe(true);
+  });
+
+  it('can set the label by slot', () => {
+    function testLabel(type: InputType): void {
+      const labelText = 'Test label';
+      // eslint-disable-next-line vitest/no-conditional-in-test, vitest/no-conditional-tests
+      const labelSlotName = isChoiceInputCheck(type) ? 'default' : 'label';
+      const wrapper = createWrapper({ type }, { [labelSlotName]: labelText });
+
+      const normalLabel = wrapper.findComponent(AppInputLabel);
+      expect(normalLabel.exists()).toBe(!isChoiceInputCheck(type));
+
+      const choiceLabel = wrapper.find('[data-test-choice-label]');
+      expect(choiceLabel.exists()).toBe(isChoiceInputCheck(type));
+
+      // eslint-disable-next-line vitest/no-conditional-in-test, vitest/no-conditional-tests
+      const label = isChoiceInputCheck(type) ? choiceLabel : normalLabel;
+      expect(label.text()).toBe(labelText);
+    }
+
+    testLabel('text');
+    testLabel('number');
+    testLabel('checkbox');
+    testLabel('radio');
+  });
+
+  it('can set the leading icon', () => {
+    const leadingIcon = '<span>icon</span>';
+    const wrapper = createWrapper(undefined, { leadingIcon });
+
+    const leadingIconComponent = wrapper.findComponent(InputIconSlot);
+    expect(leadingIconComponent.exists()).toBe(true);
+    expect(leadingIconComponent.props('loading')).toBe(false);
+    expect(leadingIconComponent.element.innerHTML).toBe(leadingIcon);
+  });
+
+  it('can set the trailing icon', () => {
+    const trailingIcon = '<span>icon</span>';
+    const wrapper = createWrapper(undefined, { trailingIcon });
+
+    const trailingIconComponent = wrapper.findComponent(InputIconSlot);
+    expect(trailingIconComponent.exists()).toBe(true);
+    expect(trailingIconComponent.props('loading')).toBe(false);
+    expect(trailingIconComponent.element.innerHTML).toBe(trailingIcon);
+  });
+
+  it('passes the loading prop to the trailing icon', () => {
+    const trailingIcon = '<span>icon</span>';
+    const wrapper = createWrapper(
+      { loading: true },
+      { trailingIcon },
+    );
+
+    const trailingIconComponent = wrapper.findComponent(InputIconSlot);
+    expect(trailingIconComponent.exists()).toBe(true);
+    expect(trailingIconComponent.props('loading')).toBe(true);
+    expect(trailingIconComponent.element.innerHTML).toBe(trailingIcon);
+  });
+
+  it('can set an error message', () => {
+    const errorMessage = 'error message';
+    const wrapper = createWrapper({ hasError: true, errorMessage, errorWrapperClasses: 'error-wrapper-class' });
+
+    const errorMessageElement = wrapper.find('[data-test-error-message]');
+    expect(errorMessageElement.exists()).toBe(true);
+    expect(errorMessageElement.text()).toBe(errorMessage);
+    expect(errorMessageElement.classes('error-wrapper-class')).toBe(true);
+  });
+
+  it('should render the input component with default attributes', () => {
+    const wrapper = createWrapper();
+
+    // @ts-expect-error doesn't work with generic components yet
+    const input = wrapper.findComponent(Input);
+    expect(input.exists()).toBe(true);
+    expect(input.attributes('type')).toBe('text');
+    expect(input.attributes('disabled')).toBe('false');
+    expect(input.attributes('required')).toBe('false');
+    expect(input.attributes('readonly')).toBeUndefined();
+
+    const datePicker = wrapper.findComponent(VueDatePicker);
+    expect(datePicker.exists()).toBe(false);
+  });
+
+  it('should render the input component with type textarea when type is textarea', () => {
+    const wrapper = createWrapper({ type: 'textarea' });
+
+    // @ts-expect-error doesn't work with generic components yet
+    const input = wrapper.findComponent(Input);
+    expect(input.exists()).toBe(true);
+    // @ts-expect-error wrong input wrapper type
+    expect(input.props('type')).toBe('textarea');
+    expect(input.attributes('disabled')).toBe('false');
+    expect(input.attributes('required')).toBe('false');
+    expect(input.attributes('readonly')).toBeUndefined();
+  });
+
+  it('should render the input component with type date when type is datepicker type', () => {
+    const wrapper = createWrapper(
+      { type: 'date' },
+      undefined,
+      { 'min-date': 'custom' },
+    );
+
+    // @ts-expect-error doesn't work with generic components yet
+    const input = wrapper.findComponent(Input);
+    expect(input.exists()).toBe(true);
+    // @ts-expect-error wrong input wrapper type
+    expect(input.props('type')).toBe('date');
+    expect(input.attributes('disabled')).toBe('false');
+    expect(input.attributes('required')).toBe('false');
+    expect(input.attributes('readonly')).toBeUndefined();
+    expect(input.attributes('min-date')).toBe('custom');
+  });
+
+  it('should render the input component with type text when type is license type', () => {
+    const wrapper = createWrapper(
+      { type: 'license' },
+      undefined,
+    );
+
+    // @ts-expect-error doesn't work with generic components yet
+    const input = wrapper.findComponent(Input);
+    expect(input.exists()).toBe(true);
+    // @ts-expect-error wrong input wrapper type
+    expect(input.props('type')).toBe('text');
+    expect(input.attributes('disabled')).toBe('false');
+    expect(input.attributes('required')).toBe('false');
+    expect(input.attributes('readonly')).toBeUndefined();
+  });
+
+  it('should render the input component with type file when type is file  type', () => {
+    const wrapper = createWrapper(
+      { type: 'file' },
+      undefined,
+    );
+
+    // @ts-expect-error doesn't work with generic components yet
+    const input = wrapper.findComponent(Input);
+    expect(input.exists()).toBe(true);
+    // @ts-expect-error wrong input wrapper type
+    expect(input.props('type')).toBe('file');
+  });
+
+  it('should emit on input change', () => {
+    const wrapper = createWrapper();
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+
+    // @ts-expect-error doesn't work with generic components yet
+    const input = wrapper.findComponent(Input);
+
+    // @ts-expect-error Property 'vm' does not exist on type 'WrapperLike'
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    input.vm.$emit('update:modelValue', 'new text');
+
+    expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe('new text');
+  });
+
+  it('can make the input and label disabled', () => {
+    const wrapper = createWrapper({ disabled: true, label: 'label' });
+
+    // @ts-expect-error doesn't work with generic components yet
+    const input = wrapper.findComponent(Input);
+    expect(input.attributes('disabled')).toBe('true');
+    expect(input.attributes('readonly')).toBeUndefined();
+    expect(input.attributes('required')).toBe('false');
+
+    const inputLabel = wrapper.findComponent(AppInputLabel);
+    expect(inputLabel.props('disabled')).toBe(true);
+  });
+
+  it('can make the input readonly', () => {
+    const wrapper = createWrapper({ readonly: true });
+
+    // @ts-expect-error doesn't work with generic components yet
+    const input = wrapper.findComponent(Input);
+    expect(input.attributes('disabled')).toBe('false');
+    expect(input.attributes('readonly')).toBe('');
+    expect(input.attributes('required')).toBe('false');
+  });
+
+  it('can make the input required', () => {
+    const wrapper = createWrapper({ required: true });
+
+    // @ts-expect-error doesn't work with generic components yet
+    const input = wrapper.findComponent(Input);
+    expect(input.attributes('disabled')).toBe('false');
+    expect(input.attributes('readonly')).toBeUndefined();
+    expect(input.attributes('required')).toBe('true');
+  });
+
+  it('should mark label and input red when has error', () => {
+    const wrapper = createWrapper({ hasError: true, label: 'label' });
+
+    const labelElement = wrapper.findComponent(AppInputLabel);
+    expect(labelElement.props('hasError')).toBe(true);
+
+    // @ts-expect-error doesn't work with generic components yet
+    const input = wrapper.findComponent(Input);
+    expect(input.classes('text-error')).toBe(true);
+  });
+});

package/src/modules/components/AppInput/__tests__/file-input.spec.ts

@@ -0,0 +1,48 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { AppButton } from '~components';
+import FileInput from '../FileInput.vue';
+
+import type { VueWrapper } from '@vue/test-utils';
+import type { FileInputProps } from '../index.d';
+
+function createWrapper(
+  props?: Partial<FileInputProps & { accept: string }>,
+  slots?: { default: string },
+): VueWrapper<InstanceType<typeof FileInput>> {
+  return shallowMount(FileInput, {
+    props: {
+      modelValue: [],
+      ...props,
+    },
+    slots,
+  });
+}
+
+describe('the LocationInput component', () => {
+  it('should render the default elements', () => {
+    const wrapper = createWrapper();
+
+    expect(wrapper.find('input').exists()).toBe(true);
+    expect(wrapper.findComponent(AppButton).exists()).toBe(true);
+  });
+
+  it('should pass props and attrs to the input', () => {
+    const wrapper = createWrapper({ accept: 'application/pdf', multiple: true });
+
+    const input = wrapper.find('input');
+    expect(input.exists()).toBe(true);
+    expect(input.attributes('accept')).toBe('application/pdf');
+    expect(input.attributes('multiple')).toBe('');
+  });
+
+  it('should render custom slot when provided', () => {
+    const wrapper = createWrapper({}, { default: '<div data-test-slot></div>' });
+
+    const input = wrapper.find('input');
+    expect(input.exists()).toBe(true);
+
+    expect(wrapper.findComponent(AppButton).exists()).toBe(false);
+    expect(wrapper.find('[data-test-slot]').exists()).toBe(true);
+  });
+});

package/src/modules/components/AppInput/__tests__/input-icon-slot.spec.ts

@@ -0,0 +1,27 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import { AppLoader } from '~/modules/components';
+import InputIconSlot from '../InputIconSlot.vue';
+
+describe('the InputIconSlot component', () => {
+  it('should render the default slot by default', () => {
+    const icon = '<i>Icon</i>';
+    const wrapper = shallowMount(InputIconSlot, {
+      slots: { default: icon },
+    });
+
+    expect(wrapper.element.innerHTML).toBe(icon);
+    expect(wrapper.findComponent(AppLoader).exists()).toBe(false);
+  });
+
+  it('should render the loader when loading is true', () => {
+    const icon = '<i data-test-icon>Icon</i>';
+    const wrapper = shallowMount(InputIconSlot, {
+      props: { loading: true },
+      slots: { default: icon },
+    });
+
+    expect(wrapper.findComponent(AppLoader).exists()).toBe(true);
+    expect(wrapper.find('[data-test-icon]').exists()).toBe(false);
+  });
+});

package/src/modules/components/AppInput/__tests__/input.spec.ts

@@ -0,0 +1,260 @@
+import { describe, it, expect } from 'vitest';
+import { shallowMount } from '@vue/test-utils';
+import Editor from '@tinymce/tinymce-vue';
+import VueDatePicker from '@vuepic/vue-datepicker';
+import LocationInput from '../LocationInput.vue';
+import Input from '../Input.vue';
+
+import type { ComponentMountingOptions, VueWrapper } from '@vue/test-utils';
+import type { InputProps, LocationModelValue } from '../index.d';
+
+function createWrapper<ModelValue>(
+  props?: Partial<InputProps<ModelValue> & { custom?: boolean }>,
+  slots?: ComponentMountingOptions<typeof Input>['slots'],
+  attrs?: Record<string, unknown>,
+// @ts-expect-error doesn't work with generic components yet
+): VueWrapper<InstanceType<typeof Input>> {
+  const defaultModelValue = props?.type === 'location' ? null : '';
+
+  const inputProps = {
+    ...props ?? {},
+    type: props?.type ?? 'text',
+    custom: props?.custom ?? false,
+    modelValue: props?.modelValue ?? defaultModelValue,
+  };
+
+  return shallowMount(Input, { attachTo: document.body, props: inputProps, attrs, slots });
+}
+
+const inputLikeTypes = ['email', 'number', 'search', 'tel', 'text', 'url', 'password', 'checkbox', 'radio'] as const;
+
+describe('the Input component', () => {
+  it('should render an input when type is input type like', () => {
+    inputLikeTypes.forEach(inputType => {
+      const wrapper = createWrapper({ type: inputType });
+
+      const input = wrapper.find('[data-test-input]');
+      expect(input.exists()).toBe(true);
+      expect(input.isVisible()).toBe(true);
+      expect(input.element).toBeInstanceOf(HTMLInputElement);
+      expect(input.attributes('type')).toBe(inputType);
+      expect(input.attributes('required')).toBeUndefined();
+    });
+  });
+
+  it('should not show an input when custom passed', () => {
+    inputLikeTypes.forEach(inputType => {
+      const wrapper = createWrapper({ type: inputType, custom: true });
+
+      const input = wrapper.find('[data-test-input]');
+      expect(input.exists()).toBe(true);
+      expect(input.isVisible()).toBe(false);
+    });
+  });
+
+  it('should pass attributes to the root element correctly', () => {
+    // @ts-expect-error doesn't work with generic components yet
+    let wrapper: VueWrapper<InstanceType<typeof Input>> | null = null;
+
+    inputLikeTypes.forEach(inputType => {
+      wrapper = createWrapper({ type: inputType }, undefined, { required: true });
+      expect(wrapper.find('[data-test-input]').attributes('required')).toBe('');
+    });
+
+    wrapper = createWrapper({ type: 'text' }, undefined, { required: true });
+    expect(wrapper.find('[data-test-input]').attributes('required')).toBe('');
+
+    wrapper = createWrapper({ type: 'textarea' }, undefined, { required: true });
+    expect(wrapper.find('[data-test-textarea]').attributes('required')).toBe('');
+
+    wrapper = createWrapper({ type: 'date' }, undefined, { required: true });
+    expect(wrapper.findComponent(VueDatePicker).attributes('required')).toBe('true');
+
+    wrapper = createWrapper({ type: 'location' }, undefined, { required: true });
+    expect(wrapper.findComponent(LocationInput).attributes('required')).toBe('true');
+  });
+
+  it('should be able to pass a model value to the input', () => {
+    const wrapper = createWrapper({ type: 'text', modelValue: 'Test text' });
+
+    const input = wrapper.find('[data-test-input]');
+    expect((input.element as HTMLInputElement).value).toBe('Test text');
+  });
+
+  it('should emit update:modelValue on input text change', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper({ type: 'text' });
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+
+    const input = wrapper.find('[data-test-input]');
+
+    await input.setValue('new input text');
+
+    expect(wrapper.emitted('update:modelValue')).toBeDefined();
+    expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe('new input text');
+  });
+
+  it('should emit update:modelValue on input number change', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper({ type: 'number' });
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+
+    const input = wrapper.find('[data-test-input]');
+
+    await input.setValue('15');
+
+    expect(wrapper.emitted('update:modelValue')).toBeDefined();
+    expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe(15);
+  });
+
+  it('should emit update:modelValue on input checkbox change', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper({ type: 'checkbox', modelValue: false });
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+
+    const input = wrapper.find('[data-test-input]');
+
+    await input.setValue(true);
+
+    expect(wrapper.emitted('update:modelValue')).toBeDefined();
+    expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe(true);
+  });
+
+  it('should emit update:modelValue on input radio change', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper({ type: 'checkbox', modelValue: false });
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+
+    const input = wrapper.find('[data-test-input]');
+
+    await input.setValue(true);
+
+    expect(wrapper.emitted('update:modelValue')).toBeDefined();
+    expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe(true);
+  });
+
+  it('should render a textarea when type is textarea', () => {
+    const wrapper = createWrapper({ type: 'textarea' });
+
+    const textarea = wrapper.find('[data-test-textarea]');
+    expect(textarea.exists()).toBe(true);
+    expect(textarea.element).toBeInstanceOf(HTMLTextAreaElement);
+  });
+
+  it('should be able to pass a model value to the textarea', () => {
+    const wrapper = createWrapper({ type: 'textarea', modelValue: 'Test text' });
+
+    const textarea = wrapper.find('[data-test-textarea]');
+    expect((textarea.element as HTMLTextAreaElement).value).toBe('Test text');
+  });
+
+  it('should emit update:modelValue on textarea change', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper({ type: 'textarea' });
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+
+    const textarea = wrapper.find('[data-test-textarea]');
+
+    await textarea.setValue('new input text');
+
+    expect(wrapper.emitted('update:modelValue')).toBeDefined();
+    expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe('new input text');
+  });
+
+  it('should render a datepicker with default attributes when type is datepicker type', () => {
+    const wrapper = createWrapper(
+      { type: 'date' },
+      undefined,
+      { 'min-date': 'custom' },
+    );
+
+    const datePickerComponent = wrapper.findComponent(VueDatePicker);
+    expect(datePickerComponent.exists()).toBe(true);
+    expect(datePickerComponent.attributes('disabled')).toBe('false');
+    expect(datePickerComponent.attributes('required')).toBe('false');
+    expect(datePickerComponent.attributes('readonly')).toBeUndefined();
+
+    const inputElement = wrapper.find('input');
+    expect(inputElement.exists()).toBe(false);
+
+    const locationInput = wrapper.findComponent(LocationInput);
+    expect(locationInput.exists()).toBe(false);
+  });
+
+  it('should emit update:modelValue on datepicker type date change', () => {
+    const wrapper = createWrapper({ type: 'date' });
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+
+    const datePickerComponent = wrapper.findComponent(VueDatePicker);
+    datePickerComponent.vm.$emit('update:modelValue', '15-05-2025');
+
+    expect(wrapper.emitted('update:modelValue')).toBeDefined();
+    expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe('15-05-2025');
+  });
+
+  it('should emit update:modelValue on datepicker type time change', () => {
+    const wrapper = createWrapper({ type: 'time' });
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+
+    const datePickerComponent = wrapper.findComponent(VueDatePicker);
+    datePickerComponent.vm.$emit('update:modelValue', '12:00:15');
+
+    expect(wrapper.emitted('update:modelValue')).toBeDefined();
+    expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe('12:00:15');
+  });
+
+  it('should render a location input when type is location', () => {
+    const wrapper = createWrapper({ type: 'location' });
+
+    const locationInputComponent = wrapper.findComponent(LocationInput);
+    expect(locationInputComponent.exists()).toBe(true);
+
+    const inputElement = wrapper.find('input');
+    expect(inputElement.exists()).toBe(false);
+
+    const datePicker = wrapper.findComponent(VueDatePicker);
+    expect(datePicker.exists()).toBe(false);
+  });
+
+  it('should emit update:modelValue on location input change', () => {
+    const wrapper = createWrapper({ type: 'location' });
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+
+    const location: LocationModelValue = {
+      postcode: '7418 AJ',
+      street: 'Zutphenseweg',
+      lat: 52.243_064_6,
+      lng: 6.167_831_3,
+      numberSuffix: '',
+      city: 'Deventer',
+      province: 'OV',
+      number: 6,
+    };
+
+    const locationInputComponent = wrapper.findComponent(LocationInput);
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-call
+    locationInputComponent.vm.$emit('update:modelValue', location);
+
+    expect(wrapper.emitted('update:modelValue')).toBeDefined();
+    expect(wrapper.emitted('update:modelValue')?.[0][0]).toStrictEqual(location);
+  });
+
+  it('should emit update:modelValue on richtText change', async () => {
+    expect.assertions(3);
+
+    const wrapper = createWrapper({ type: 'richText' });
+    expect(wrapper.emitted('update:modelValue')).toBeUndefined();
+
+    const textarea = wrapper.findComponent(Editor);
+
+    await textarea.setValue('new input text');
+
+    expect(wrapper.emitted('update:modelValue')).toBeDefined();
+    expect(wrapper.emitted('update:modelValue')?.[0][0]).toBe('new input text');
+  });
+});