@myparcel-dev/pdk-admin-component-tests 1.13.0

package/src/components/runDropDownButtonTest.ts

@@ -0,0 +1,81 @@
+/* eslint-disable no-console */
+import {expect, it, vi} from 'vitest';
+import {type ComponentMountingOptions, mount} from '@vue/test-utils';
+import {AdminComponent, type DropdownButtonProps} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runDropDownButtonTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.DropdownButton, component);
+
+  const action1Handler = vi.fn();
+  const action2Handler = vi.fn();
+  const action3Handler = vi.fn();
+
+  const DEFAULT_OPTIONS = {
+    props: {
+      actions: [
+        {
+          label: 'Action 1',
+          id: 'action1',
+          standalone: true,
+          handler: action1Handler,
+        },
+        {
+          label: 'Action 2',
+          id: 'action2',
+          handler: action2Handler,
+        },
+        {
+          label: 'Action 3',
+          id: 'action3',
+          handler: action3Handler,
+        },
+      ],
+    },
+  } satisfies ComponentMountingOptions<any, DropdownButtonProps>;
+
+  suite.runCommonComponentTests();
+  suite.runCommonComponentTests(DEFAULT_OPTIONS);
+
+  suite.runHasPropTest('actions', DEFAULT_OPTIONS.props.actions);
+  suite.runHasPropTest('disabled', true);
+
+  it('emits click event when standalone action is clicked', async () => {
+    expect.assertions(1);
+    const wrapper = mount(component, DEFAULT_OPTIONS);
+    const button = wrapper.findByTestId([AdminComponent.DropdownButton, 'standalone']);
+    await button.trigger('click');
+
+    expect(wrapper.emitted().click).toHaveLength(1);
+  });
+
+  it('emits click event when dropdown action is clicked', async () => {
+    expect.assertions(1);
+    const wrapper = mount(component, DEFAULT_OPTIONS);
+    const button = wrapper.findByTestId([AdminComponent.DropdownButton, 'item']);
+    await button.trigger('click');
+
+    expect(wrapper.emitted().click).toHaveLength(1);
+  });
+
+  it('can be disabled', async () => {
+    expect.assertions(2);
+    const wrapper = mount(component, {
+      ...DEFAULT_OPTIONS,
+      props: {
+        ...DEFAULT_OPTIONS.props,
+        disabled: true,
+      },
+    });
+
+    const button = wrapper.findByTestId([AdminComponent.DropdownButton, 'button']);
+    expect(button.attributes('disabled')).toBeDefined();
+
+    await button.trigger('click');
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted().click).toBeUndefined();
+  });
+
+  // TODO write more tests
+}) satisfies AdminComponentTest;

package/src/components/runDropOffInputTest.ts

@@ -0,0 +1,32 @@
+import {AdminComponent, type DropOffInputModelValue} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runDropOffInputTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.DropOffInput, component);
+
+  suite.setOptions({
+    dropOffDays: [
+      {
+        date: {date: '', timezone: '', timezone_type: 3},
+        cutoffTime: '12:00',
+        dispatch: true,
+        sameDayCutoffTime: '',
+        weekday: 2,
+      },
+    ],
+    dropOffDaysDeviations: [],
+  } satisfies DropOffInputModelValue);
+
+  suite.runCommonComponentTests();
+  suite.runCommonInputTests({
+    value: {
+      date: {date: '1234', timezone: '', timezone_type: 3},
+      cutoffTime: '15:00',
+      dispatch: true,
+      sameDayCutoffTime: '',
+      weekday: 4,
+    },
+  });
+  // TODO write more tests
+}) satisfies AdminComponentTest;

package/src/components/runFormGroupTest.ts

@@ -0,0 +1,17 @@
+import {AdminComponent, createFormElement} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runFormGroupTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.FormGroup, component);
+
+  suite.setOptions({
+    props: {
+      element: createFormElement({}),
+    },
+  });
+
+  suite.runCommonComponentTests();
+  suite.runHasSlotTest();
+  // TODO write more tests
+}) satisfies AdminComponentTest;

package/src/components/runHeadingTest.ts

@@ -0,0 +1,12 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runHeadingTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.Heading, component);
+
+  suite.runCommonComponentTests();
+
+  suite.runHasSlotTest();
+  suite.runHasPropTest('level', 1);
+}) satisfies AdminComponentTest;

package/src/components/runIconTest.ts

@@ -0,0 +1,16 @@
+import {AdminComponent, AdminIcon} from '@myparcel-dev/pdk-admin';
+import {type PartialComponentTest} from '../types';
+import {TestSuite} from '../TestSuite';
+
+export const runIconTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.Icon, component);
+
+  suite.setOptions({
+    props: {
+      icon: AdminIcon.ArrowUp,
+    },
+  });
+
+  suite.runCommonComponentTests();
+  suite.runHasPropTest('icon');
+}) satisfies PartialComponentTest;

package/src/components/runImageTest.ts

@@ -0,0 +1,22 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runImageTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.Image, component);
+
+  suite.setOptions({
+    props: {
+      src: 'https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png',
+      alt: 'Google Logo',
+    },
+  });
+
+  suite.runCommonComponentTests();
+  suite.runHasPropTest('src');
+  suite.runHasPropTest('alt');
+  suite.runHasPropTest('width');
+  suite.runHasPropTest('height');
+
+  // TODO write more tests
+}) satisfies AdminComponentTest;

package/src/components/runLinkTest.ts

@@ -0,0 +1,12 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runLinkTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.Link, component);
+
+  suite.runCommonComponentTests();
+  suite.runHasSlotTest();
+
+  // TODO write more tests
+}) satisfies AdminComponentTest;

package/src/components/runLoaderTest.ts

@@ -0,0 +1,9 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runLoaderTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.Loader, component);
+
+  suite.runCommonComponentTests();
+}) satisfies AdminComponentTest;

package/src/components/runModalTest.ts

@@ -0,0 +1,28 @@
+import {AdminComponent, AdminModalKey, useModalStore} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runModalTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.Modal, component);
+
+  const modalStore = useModalStore();
+
+  modalStore.$patch({opened: AdminModalKey.ShipmentOptions});
+
+  suite.setOptions({
+    props: {
+      // todo
+      actions: [],
+      modalKey: AdminModalKey.ShipmentOptions,
+      title: 'title',
+    },
+  });
+
+  suite.runCommonComponentTests();
+
+  suite.runHasSlotTest();
+
+  suite.runHasPropTest('modalKey');
+  suite.runHasPropTest('title');
+  suite.runHasPropTest('actions');
+}) satisfies AdminComponentTest;

package/src/components/runMultiDateInputTest.ts

@@ -0,0 +1,10 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runMultiDateInputTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.MultiDateInput, component);
+
+  suite.runCommonComponentTests();
+  // TODO write more tests
+}) satisfies AdminComponentTest;

package/src/components/runMultiSelectInputTest.ts

@@ -0,0 +1,17 @@
+import {AdminComponent, type SelectOption} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+const selectOptions = [
+  {value: 'one', label: 'One'},
+  {value: 'two', label: 'Two'},
+] satisfies SelectOption[];
+
+export const runMultiSelectInputTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.MultiSelectInput, component);
+
+  suite.createInputOptions('two', {props: {options: selectOptions}});
+
+  suite.runCommonComponentTests();
+  suite.runCommonInputTests({value: 'one'});
+}) satisfies AdminComponentTest;

package/src/components/runNotificationTest.ts

@@ -0,0 +1,40 @@
+import {expect, it} from 'vitest';
+import {mount} from '@vue/test-utils';
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runNotificationTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.Notification, component);
+
+  const options = suite.setOptions({
+    props: {
+      notification: {
+        variant: 'error',
+        content: 'This is a plain string',
+      },
+    },
+  });
+
+  suite.runCommonComponentTests();
+
+  it('renders notification with string content', () => {
+    const wrapper = mount(component, options);
+
+    expect(wrapper.findAll('*').map((wrapper) => wrapper.text())).toContain('This is a plain string');
+  });
+
+  it('renders notification with array content', () => {
+    const wrapper = mount(component, {
+      props: {
+        notification: {
+          variant: 'error',
+          content: ['This is a notification', 'With multiple strings'],
+        },
+      },
+    });
+
+    expect(wrapper.findAll('*').map((wrapper) => wrapper.text())).toContain('This is a notification');
+    expect(wrapper.findAll('*').map((wrapper) => wrapper.text())).toContain('With multiple strings');
+  });
+}) satisfies AdminComponentTest;

package/src/components/runNumberInputTest.ts

@@ -0,0 +1,13 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runNumberInputTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.NumberInput, component);
+
+  suite.createInputOptions(24);
+
+  suite.runCommonComponentTests();
+  suite.runCommonInputTests();
+  // TODO write more tests
+}) satisfies AdminComponentTest;

package/src/components/runPlainWrapperTest.ts

@@ -0,0 +1,12 @@
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runPlainWrapperTest = ((component) => {
+  const suite = new TestSuite('PlainWrapper', component);
+
+  suite.runCommonComponentTests();
+
+  suite.runHasSlotTest();
+
+  // TODO write more tests
+}) satisfies AdminComponentTest;

package/src/components/runRadioGroupTest.ts

@@ -0,0 +1,26 @@
+import {AdminComponent, type SelectOption} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runRadioGroupTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.RadioGroup, component);
+
+  suite.createInputOptions('test1', {
+    props: {
+      options: [
+        {
+          label: 'Test1',
+          value: 'test1',
+        },
+        {
+          label: 'Test2',
+          value: 'test2',
+        },
+      ] satisfies SelectOption[],
+    },
+  });
+
+  suite.runCommonComponentTests();
+  suite.runCommonInputTests();
+  // TODO write more tests
+}) satisfies AdminComponentTest;

package/src/components/runRadioInputTest.ts

@@ -0,0 +1,13 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runRadioInputTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.RadioInput, component);
+
+  suite.createInputOptions(true);
+
+  suite.runCommonComponentTests();
+  suite.runCommonInputTests();
+  // TODO write more tests
+}) satisfies AdminComponentTest;

package/src/components/runRowTest.ts

@@ -0,0 +1,11 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runRowTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.Row, component);
+
+  suite.runCommonComponentTests();
+
+  suite.runHasSlotTest();
+}) satisfies AdminComponentTest;

package/src/components/runSelectInputTest.ts

@@ -0,0 +1,30 @@
+import {expect, it} from 'vitest';
+import {mount} from '@vue/test-utils';
+import {AdminComponent, type SelectOption} from '@myparcel-dev/pdk-admin';
+import {type PartialComponentTest} from '../types';
+import {TestSuite} from '../TestSuite';
+
+const selectOptions = [
+  {value: '1', label: 'One'},
+  {value: '2', label: 'Two'},
+] satisfies SelectOption[];
+
+export const runSelectInputTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.SelectInput, component);
+
+  const options = suite.createInputOptions('2', {props: {options: selectOptions}});
+
+  suite.runCommonComponentTests();
+  suite.runCommonInputTests({value: '1'});
+
+  it('sets options from props', () => {
+    const wrapper = mount(component, options);
+
+    expect(
+      wrapper
+        .find('select')
+        .findAll('option')
+        .map((wrapper) => wrapper.element.value),
+    ).toEqual(['1', '2']);
+  });
+}) satisfies PartialComponentTest;

package/src/components/runSettingsDividerTest.ts

@@ -0,0 +1,16 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runSettingsDividerTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.SettingsDivider, component);
+
+  suite.createInputOptions('text', {
+    props: {
+      level: 2,
+      heading: 'test',
+    },
+  });
+
+  suite.runCommonComponentTests();
+}) satisfies AdminComponentTest;

package/src/components/runShippingMethodsInputTest.ts

@@ -0,0 +1,23 @@
+import {AdminComponent, type SelectOption} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+const SELECT_OPTIONS = Object.freeze([
+  {value: '1', label: 'One'},
+  {value: '2', label: 'Two'},
+  {value: '3', label: 'Three'},
+  {value: '4', label: 'Four'},
+  {value: '5', label: 'Five'},
+] satisfies SelectOption[]);
+
+export const runShippingMethodsInputTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.ShippingMethodsInput, component);
+
+  suite.createInputOptions('2', {props: {options: SELECT_OPTIONS}});
+
+  suite.runCommonComponentTests();
+  // TODO: figure out why this throws an undefined import error on AdminComponent
+  // runCommonInputTests(component, options, {value: '1'});
+
+  // TODO add more tests
+}) satisfies AdminComponentTest;

package/src/components/runTabNavButtonTest.ts

@@ -0,0 +1,17 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runTabNavButtonTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.SelectInput, component);
+
+  suite.setOptions({
+    props: {
+      tab: {name: 'tab', label: 'Tab'},
+    },
+  });
+
+  suite.runCommonComponentTests();
+
+  suite.runHasPropTest('active', false);
+}) satisfies AdminComponentTest;

package/src/components/runTableColTest.ts

@@ -0,0 +1,11 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runTableColTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.TableCol, component);
+
+  suite.runCommonComponentTests();
+
+  suite.runHasSlotTest();
+}) satisfies AdminComponentTest;

package/src/components/runTableRowTest.ts

@@ -0,0 +1,11 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runTableRowTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.TableRow, component);
+
+  suite.runCommonComponentTests();
+
+  suite.runHasSlotTest();
+}) satisfies AdminComponentTest;

package/src/components/runTableTest.ts

@@ -0,0 +1,13 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runTableTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.Table, component);
+
+  suite.runCommonComponentTests();
+
+  suite.runHasSlotTest();
+  suite.runHasSlotTest('header');
+  suite.runHasSlotTest('footer');
+}) satisfies AdminComponentTest;

package/src/components/runTextAreaTest.ts

@@ -0,0 +1,12 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runTextAreaTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.SelectInput, component);
+
+  suite.createInputOptions('test');
+
+  suite.runCommonComponentTests();
+  // runCommonInputTests(component, options);
+}) satisfies AdminComponentTest;

package/src/components/runTextInputTest.ts

@@ -0,0 +1,12 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runTextInputTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.SelectInput, component);
+
+  suite.createInputOptions('text');
+
+  suite.runCommonComponentTests();
+  suite.runCommonInputTests();
+}) satisfies AdminComponentTest;

package/src/components/runTimeInputTest.ts

@@ -0,0 +1,13 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runTimeInputTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.TimeInput, component);
+
+  suite.createInputOptions('12:00');
+
+  suite.runCommonComponentTests();
+  suite.runCommonInputTests({value: '13:00'});
+  // TODO write more tests
+}) satisfies AdminComponentTest;

package/src/components/runToggleInputTest.ts

@@ -0,0 +1,16 @@
+import {AdminComponent, createFormElement} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runToggleInputTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.ToggleInput, component);
+
+  suite.setOptions({
+    props: {
+      element: createFormElement({}),
+    },
+  });
+
+  suite.runCommonComponentTests();
+  suite.runCommonInputTests();
+}) satisfies AdminComponentTest;

package/src/components/runTriStateInputTest.ts

@@ -0,0 +1,15 @@
+import {TriState} from '@myparcel-dev/pdk-common';
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runTriStateInputTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.SelectInput, component);
+
+  suite.createInputOptions(TriState.On);
+
+  suite.runCommonComponentTests();
+  suite.runCommonInputTests();
+
+  // TODO: write more tests
+}) satisfies AdminComponentTest;

package/src/helpers/createInputOptions.ts

@@ -0,0 +1,19 @@
+import {type Component as ComponentType} from 'vue';
+import {createFormElement} from '@myparcel-dev/pdk-admin';
+import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
+import {type TestComponentMountingOptions} from '../types';
+
+export const createInputOptions = <
+  T,
+  Component extends ComponentType = ComponentType,
+  Options extends Record<string, unknown> = Record<string, unknown>,
+>(
+  modelValue?: T,
+  options?: Partial<InteractiveElementConfiguration>,
+): TestComponentMountingOptions<Component, Options> =>
+  ({
+    props: {
+      element: createFormElement(options),
+      ...(modelValue === undefined ? {} : {modelValue}),
+    },
+  } as TestComponentMountingOptions<Component, Options>);

package/src/helpers/index.ts

@@ -0,0 +1 @@
+export * from './createInputOptions';

package/src/helpers/wrapperPlugin.ts

@@ -0,0 +1,20 @@
+import {createWrapperError, DOMWrapper, type VueWrapper} from '@vue/test-utils';
+
+export const wrapperPlugin = (wrapper: VueWrapper): Record<string, any> => {
+  const findByTestId = (selector: string | string[]): DOMWrapper<any> => {
+    const resolvedSelector = Array.isArray(selector) ? selector.join('--') : selector;
+
+    const dataSelector = `[data-test-id="${resolvedSelector}"]`;
+    const element = wrapper.element.querySelector(dataSelector);
+
+    if (element) {
+      return new DOMWrapper(element);
+    }
+
+    return createWrapperError('DOMWrapper');
+  };
+
+  return {
+    findByTestId,
+  };
+};

package/src/index.ts

@@ -0,0 +1,5 @@
+export * from '@myparcel-dev/pdk-admin';
+
+export {TestSuite} from './TestSuite';
+
+export {executeAdminComponentTest, executePdkComponentTests} from './tests';

package/src/setup.ts

@@ -0,0 +1,4 @@
+import {config} from '@vue/test-utils';
+import {wrapperPlugin} from './helpers/wrapperPlugin';
+
+config.plugins.VueWrapper.install(wrapperPlugin);