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

package/src/TestSuite.ts

@@ -0,0 +1,147 @@
+/* eslint-disable max-lines-per-function */
+import {type Component as ComponentType, ref} from 'vue';
+import {expect, it} from 'vitest';
+import {merge} from 'lodash-unified';
+import {type DOMWrapper, flushPromises, mount, type VueWrapper} from '@vue/test-utils';
+import {type AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type InteractiveElementConfiguration} from '@myparcel-dev/vue-form-builder';
+import {type AdditionalOptions, type ComponentTestOptions, type TestComponentMountingOptions} from './types';
+import {createInputOptions} from './helpers';
+import {runCommonComponentTests, runHasPropTest, runHasSlotTest} from './common';
+
+const UPDATE_EVENT = 'update:modelValue';
+
+export class TestSuite<
+  TestOptions extends ComponentTestOptions = ComponentTestOptions,
+  Component extends ComponentType = ComponentType,
+> {
+  private defaultOptions: TestComponentMountingOptions<Component, TestOptions> | undefined = undefined;
+
+  private readonly component: Component;
+
+  private readonly componentName: AdminComponent | string;
+
+  public constructor(componentName: AdminComponent | string, component: Component) {
+    this.componentName = componentName;
+    this.component = {name: componentName, ...component};
+  }
+
+  public runCommonComponentTests(options?: TestComponentMountingOptions<Component, TestOptions> | undefined): void {
+    runCommonComponentTests(this.component, this.resolveOptions(options));
+  }
+
+  public runHasSlotTest(slot = 'default'): void {
+    runHasSlotTest(this.component, this.resolveOptions(), slot);
+  }
+
+  public runHasPropTest(prop: string, value: unknown = 'value'): void {
+    runHasPropTest(this.component, this.resolveOptions(), prop, value);
+  }
+
+  public runCommonInputTests(additionalOptions: AdditionalOptions = {}): void {
+    const resolvedOptions = this.resolveOptions();
+
+    this.runHasPropTest('element', resolvedOptions?.props?.element);
+
+    it('can be disabled', () => {
+      const wrapper = mount(
+        this.component,
+        merge({}, resolvedOptions, {
+          props: {
+            element: {
+              ...resolvedOptions?.props?.element,
+              isDisabled: ref(true),
+            },
+          },
+        }),
+      );
+
+      const select = this.getSelectWrapper(wrapper);
+      const input = this.getInputWrapper(wrapper);
+
+      if (select.exists()) {
+        expect(select.attributes('disabled')).toBeDefined();
+      }
+
+      if (input.exists()) {
+        expect(input.attributes('disabled')).toBeDefined();
+      }
+    });
+
+    it(`emits ${UPDATE_EVENT} event`, async () => {
+      expect.assertions(2);
+      const wrapper = mount(this.component, resolvedOptions);
+
+      const select = this.getSelectWrapper(wrapper);
+      const input = this.getInputWrapper(wrapper);
+
+      const valueToSet = additionalOptions?.value ?? 'test';
+
+      if (select.exists()) {
+        await select.setValue(valueToSet);
+      }
+
+      if (input.exists()) {
+        await input.setValue(valueToSet);
+      }
+
+      await flushPromises();
+
+      const emitted = wrapper.emitted();
+
+      expect(emitted).toHaveProperty(UPDATE_EVENT);
+      expect(emitted[UPDATE_EVENT]).toHaveLength(1);
+      /** @todo fix this */
+      // expect(emitted[UPDATE_EVENT][0]).toEqual([valueToSet]);
+    });
+  }
+
+  public createInputOptions<T>(
+    modelValue?: T,
+    options?: Partial<InteractiveElementConfiguration>,
+  ): TestComponentMountingOptions<Component, TestOptions> {
+    this.defaultOptions = createInputOptions<T, Component, TestOptions>(modelValue, options);
+
+    return this.resolveOptions();
+  }
+
+  public getInputWrapper<NodeType extends Node>(wrapper: VueWrapper<Component>): DOMWrapper<NodeType> {
+    return this.getElementWrapper('input', wrapper);
+  }
+
+  public getSelectWrapper<NodeType extends Node>(wrapper: VueWrapper<Component>): DOMWrapper<NodeType> {
+    return this.getElementWrapper('select', wrapper);
+  }
+
+  public setOptions(
+    options: TestComponentMountingOptions<Component, TestOptions>,
+  ): TestComponentMountingOptions<Component, TestOptions> {
+    this.defaultOptions = options;
+
+    return this.resolveOptions();
+  }
+
+  private getElementWrapper<NodeType extends Node>(
+    element: string,
+    wrapper: VueWrapper<Component>,
+  ): DOMWrapper<NodeType> {
+    const byComponentName = wrapper.findByTestId(this.componentName);
+
+    return (byComponentName.exists()
+      ? byComponentName?.find(element)
+      : wrapper.find(element)) as unknown as DOMWrapper<NodeType>;
+  }
+
+  private resolveOptions(
+    options?: TestComponentMountingOptions<Component, TestOptions> | undefined,
+  ): TestComponentMountingOptions<Component, TestOptions> {
+    return {
+      ...this.defaultOptions,
+      ...options,
+      props: {
+        ...this.defaultOptions?.props,
+        ...options?.props,
+      },
+    } as TestComponentMountingOptions<Component, TestOptions>;
+  }
+}

package/src/__tests__/__snapshots__/exports.spec.ts.snap

@@ -0,0 +1,177 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`exports > exports from index.ts 1`] = `
+[
+  "ActionButton",
+  "AdminAction",
+  "AdminComponent",
+  "AdminContextKey",
+  "AdminIcon",
+  "AdminInstanceContextKey",
+  "AdminModalKey",
+  "AdminView",
+  "BackendEndpoint",
+  "BulkSelectCheckbox",
+  "ChildProductSettingsView",
+  "FORM_KEYS",
+  "FORM_KEY_ACCOUNT_SETTINGS",
+  "FORM_KEY_CHILD_PRODUCT_SETTINGS",
+  "FORM_KEY_MODAL",
+  "FORM_KEY_MODAL_PRINT_OPTIONS",
+  "FORM_KEY_MODAL_RETURN_OPTIONS",
+  "FORM_KEY_MODAL_SHIPMENT_OPTIONS",
+  "FORM_KEY_PLUGIN_SETTINGS",
+  "FORM_KEY_PRODUCT_SETTINGS",
+  "FormHook",
+  "FrontendEndpoint",
+  "INJECT_ADMIN_INSTANCE",
+  "INJECT_GLOBAL_PDK_ADMIN",
+  "LogLevel",
+  "ModalsView",
+  "NotificationCategory",
+  "NotificationContainer",
+  "NotificationsView",
+  "OrderBoxView",
+  "OrderListItemView",
+  "PackageType",
+  "PdkAdmin",
+  "PlainElement",
+  "PluginSettingsView",
+  "ProductSettingsView",
+  "QUERY_KEY_ORDER",
+  "QUERY_KEY_SHIPMENT",
+  "ResetButton",
+  "ReturnsForm",
+  "ShipmentBarcode",
+  "ShipmentOptionsForm",
+  "ShipmentStatus",
+  "Size",
+  "SortType",
+  "Status",
+  "StatusIndicator",
+  "StopActionHandler",
+  "SubmitButton",
+  "TabNavigation",
+  "TestSuite",
+  "TriState",
+  "Variant",
+  "allAdminComponentNames",
+  "createAdminConfig",
+  "createFormElement",
+  "createHandlerWithParameters",
+  "createLogger",
+  "createMutationHandler",
+  "createOrdersMutationHandler",
+  "createPdkAdmin",
+  "createPdkAdminPlugin",
+  "createQueryHandler",
+  "createShipmentsMutationHandler",
+  "defineAction",
+  "deleteAccountAction",
+  "doMutate",
+  "downloadLogsAction",
+  "executeAction",
+  "executeAdminComponentTest",
+  "executeAfterHandle",
+  "executeBeforeHandle",
+  "executeHandler",
+  "executeNextAction",
+  "executePdkComponentTests",
+  "fetchDynamicContextAction",
+  "fetchPluginSettingsViewContextAction",
+  "generateFieldId",
+  "getActionIdentifier",
+  "modalCloseAction",
+  "modalSubmitFormAction",
+  "openOrPrintPdf",
+  "optionalAdminActionContainerComponentNames",
+  "optionalAdminComponentNames",
+  "optionalAdminPlainWrapperComponentNames",
+  "orderExportAction",
+  "orderExportToShipmentsAction",
+  "orderViewInBackofficeAction",
+  "ordersEditAction",
+  "ordersExportPrintShipmentsAction",
+  "ordersFetchAction",
+  "ordersPrintAction",
+  "ordersUpdateAction",
+  "pluginSettingsUpdateAction",
+  "prefixComponent",
+  "refreshAccountAction",
+  "requiredAdminComponentNames",
+  "resolveFormComponent",
+  "resolveOrderParameters",
+  "resolvePrintParameters",
+  "resolveQuerySuffix",
+  "shipmentActions",
+  "shipmentsDeleteAction",
+  "shipmentsExportReturnAction",
+  "shipmentsPrintAction",
+  "shipmentsUpdateAction",
+  "switchToAcceptanceApiAction",
+  "switchToProductionApiAction",
+  "updateAccountAction",
+  "useActionStore",
+  "useAdminConfig",
+  "useAppInfo",
+  "useCheckboxGroupContext",
+  "useCreateWebhooksMutation",
+  "useDeleteAccountMutation",
+  "useDeleteShipmentsMutation",
+  "useDeleteWebhooksMutation",
+  "useDownloadLogsMutation",
+  "useDropOffInputContext",
+  "useDropdownButtonContext",
+  "useDropdownData",
+  "useElement",
+  "useElementContext",
+  "useElementOptions",
+  "useExportOrdersMutation",
+  "useExportReturnMutation",
+  "useFetchContextQuery",
+  "useFetchOrdersQuery",
+  "useFetchProductsQuery",
+  "useFetchShipmentsQuery",
+  "useFetchWebhooksQuery",
+  "useForm",
+  "useFormBuilder",
+  "useFormatter",
+  "useGlobalContext",
+  "useGlobalPdkAdmin",
+  "useInputWithOptionsContext",
+  "useLanguage",
+  "useLoadMore",
+  "useLogger",
+  "useModalContext",
+  "useModalElementContext",
+  "useModalStore",
+  "useMultiSelectInputContext",
+  "useNotificationStore",
+  "useOrderData",
+  "useOrdersData",
+  "usePdkMutation",
+  "usePrintOrdersMutation",
+  "usePrintShipmentsMutation",
+  "useProductData",
+  "useQueryStore",
+  "useRadioGroupContext",
+  "useSelectInputContext",
+  "useShippingMethodsInputContext",
+  "useStoreQuery",
+  "useSwitchToAcceptanceApiMutation",
+  "useSwitchToProductionApiMutation",
+  "useTableContext",
+  "useToggleInputContext",
+  "useTriStateInputContext",
+  "useUpdateAccountMutation",
+  "useUpdateOrdersMutation",
+  "useUpdatePluginSettingsMutation",
+  "useUpdateProductSettingsMutation",
+  "useUpdateShipmentsMutation",
+  "useWeekdays",
+  "waitForLabelPrompt",
+  "webhooksCreateAction",
+  "webhooksDeleteAction",
+  "webhooksFetchAction",
+]
+`;

package/src/__tests__/exports.spec.ts

@@ -0,0 +1,8 @@
+import {describe, expect, it} from 'vitest';
+import * as index from '../index';
+
+describe('exports', () => {
+  it('exports from index.ts', () => {
+    expect(Object.keys(index).sort()).toMatchSnapshot();
+  });
+});

package/src/common/index.ts

@@ -0,0 +1,4 @@
+export * from './runCommonComponentTests';
+export * from './runCommonInputTests';
+export * from './runHasPropTest';
+export * from './runHasSlotTest';

package/src/common/runCommonComponentTests.ts

@@ -0,0 +1,15 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {expect, it} from 'vitest';
+import {mount} from '@vue/test-utils';
+import {type PartialComponentTest} from '../types';
+
+export const runCommonComponentTests = ((component, options = undefined): void => {
+  it('can be rendered', () => {
+    expect(() => mount(component as any, options as any)).not.toThrow();
+  });
+
+  it('is visible', () => {
+    const wrapper = mount(component as any, options as any);
+    expect(wrapper.isVisible()).toBeTruthy();
+  });
+}) satisfies PartialComponentTest;

package/src/common/runCommonInputTests.ts

@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/no-magic-numbers */
+import {ref} from 'vue';
+import {expect, it} from 'vitest';
+import {merge} from 'lodash-unified';
+import {flushPromises, mount} from '@vue/test-utils';
+import {type AdditionalOptions, type PartialComponentTest} from '../types';
+import {runHasPropTest} from './runHasPropTest';
+
+const UPDATE_EVENT = 'update:modelValue';
+
+// eslint-disable-next-line max-lines-per-function
+export const runCommonInputTests = ((component, options = undefined, additionalOptions: AdditionalOptions = {}) => {
+  runHasPropTest(component, {}, 'element', options?.props?.element);
+
+  it('can be disabled', () => {
+    const wrapper = mount(
+      component,
+      merge({}, options, {
+        props: {
+          element: {
+            ...options?.props?.element,
+            isDisabled: ref(true),
+          },
+        },
+      }),
+    );
+
+    const select = wrapper.find('select');
+    const input = wrapper.find('input');
+
+    if (select.exists()) {
+      expect(select.attributes('disabled')).toBeDefined();
+    }
+
+    if (input.exists()) {
+      expect(input.attributes('disabled')).toBeDefined();
+    }
+  });
+
+  it(`emits ${UPDATE_EVENT} event`, async () => {
+    expect.assertions(2);
+    const wrapper = mount(component, options);
+
+    const select = wrapper.find('select');
+    const input = wrapper.find('input');
+
+    const valueToSet = additionalOptions?.value ?? 'test';
+
+    if (select.exists()) {
+      await select.setValue(valueToSet);
+    }
+
+    if (input.exists()) {
+      await input.setValue(valueToSet);
+    }
+
+    await flushPromises();
+
+    const emitted = wrapper.emitted();
+
+    expect(emitted).toHaveProperty(UPDATE_EVENT);
+    expect(emitted[UPDATE_EVENT]).toHaveLength(1);
+    /** @todo fix this */
+    // expect(emitted[UPDATE_EVENT][0]).toEqual([valueToSet]);
+  });
+}) satisfies PartialComponentTest<[AdditionalOptions]>;

package/src/common/runHasPropTest.ts

@@ -0,0 +1,17 @@
+import {expect, it} from 'vitest';
+import {mount} from '@vue/test-utils';
+import {type PartialComponentTest} from '../types';
+
+export const runHasPropTest = ((component, options, prop, value = 'value') => {
+  it(`has prop ${prop}`, () => {
+    const wrapper = mount(component, {
+      ...options,
+      props: {
+        ...(options?.props as any),
+        [prop]: value,
+      },
+    });
+
+    expect(wrapper.props()).toHaveProperty(prop);
+  });
+}) satisfies PartialComponentTest<[string] | [string, unknown]>;

package/src/common/runHasSlotTest.ts

@@ -0,0 +1,25 @@
+import {expect, it} from 'vitest';
+import {flushPromises, mount} from '@vue/test-utils';
+import {type PartialComponentTest} from '../types';
+
+/**
+ * Checks if the html content passed to the slot exists anywhere in the component.
+ */
+export const runHasSlotTest = ((component, options = undefined, slot = 'default') => {
+  it(`has slot #${slot}`, async () => {
+    expect.assertions(1);
+    const content = `SLOT CONTENT ${Math.ceil(Math.random() * 100)}`;
+
+    const wrapper = mount(component as any, {
+      ...options,
+      slots: {
+        ...(options?.slots as any),
+        [slot]: () => content,
+      },
+    });
+
+    await flushPromises();
+
+    expect(wrapper.element.innerHTML).toContain(content);
+  });
+}) satisfies PartialComponentTest<[] | [string]>;

package/src/components/index.ts

@@ -0,0 +1,36 @@
+export * from './runBadgeTest';
+export * from './runBoxTest';
+export * from './runButtonTest';
+export * from './runCheckboxGroupTest';
+export * from './runCheckboxInputTest';
+export * from './runCodeEditorTest';
+export * from './runColTest';
+export * from './runCurrencyInputTest';
+export * from './runDropDownButtonTest';
+export * from './runDropOffInputTest';
+export * from './runFormGroupTest';
+export * from './runHeadingTest';
+export * from './runIconTest';
+export * from './runImageTest';
+export * from './runLinkTest';
+export * from './runLoaderTest';
+export * from './runModalTest';
+export * from './runMultiSelectInputTest';
+export * from './runNotificationTest';
+export * from './runNumberInputTest';
+export * from './runPlainWrapperTest';
+export * from './runRadioGroupTest';
+export * from './runRadioInputTest';
+export * from './runRowTest';
+export * from './runSelectInputTest';
+export * from './runSettingsDividerTest';
+export * from './runShippingMethodsInputTest';
+export * from './runTabNavButtonTest';
+export * from './runTableColTest';
+export * from './runTableRowTest';
+export * from './runTableTest';
+export * from './runTextAreaTest';
+export * from './runTextInputTest';
+export * from './runTimeInputTest';
+export * from './runToggleInputTest';
+export * from './runTriStateInputTest';

package/src/components/runBadgeTest.ts

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

package/src/components/runBoxTest.ts

@@ -0,0 +1,17 @@
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runBoxTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.Box, component);
+
+  suite.createInputOptions();
+
+  suite.runCommonComponentTests();
+
+  suite.runHasSlotTest('default');
+  suite.runHasSlotTest('header');
+  suite.runHasSlotTest('footer');
+
+  suite.runHasPropTest('loading', true);
+}) satisfies AdminComponentTest;

package/src/components/runButtonTest.ts

@@ -0,0 +1,37 @@
+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 runButtonTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.Button, component);
+
+  suite.runCommonComponentTests();
+
+  it('handles click event', async () => {
+    expect.assertions(1);
+    const wrapper = mount(component);
+    const button = wrapper.find('button');
+
+    button.element.click();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted().click).toHaveLength(1);
+  });
+
+  it('can be disabled', async () => {
+    expect.assertions(2);
+    const wrapper = mount(component, {props: {disabled: true}});
+    const button = wrapper.find('button');
+    expect(button.attributes('disabled')).toBeDefined();
+
+    button.element.click();
+    await wrapper.vm.$nextTick();
+    expect(wrapper.emitted().click).toBeUndefined();
+  });
+
+  it('can display custom content', () => {
+    const wrapper = mount(component, {slots: {default: 'Test'}});
+    expect(wrapper.findAll('*').map((wrapper) => wrapper.text())).toContain('Test');
+  });
+}) satisfies AdminComponentTest;

package/src/components/runCheckboxGroupTest.ts

@@ -0,0 +1,29 @@
+import {AdminComponent, type SelectOption} from '@myparcel-dev/pdk-admin';
+import {type AdminComponentTest} from '../tests';
+import {TestSuite} from '../TestSuite';
+
+export const runCheckboxGroupTest = ((component) => {
+  const suite = new TestSuite(AdminComponent.CheckboxGroup, component);
+
+  suite.createInputOptions(['appel', 'boom'], {
+    props: {
+      options: [
+        {
+          value: 'appel',
+          label: 'Appel',
+        },
+        {
+          value: 'boom',
+          label: 'Boom',
+        },
+        {
+          value: 'citroen',
+          label: 'Citroen',
+        },
+      ] satisfies SelectOption[],
+    },
+  });
+
+  suite.runCommonComponentTests();
+  // TODO: write more tests
+}) satisfies AdminComponentTest;

package/src/components/runCheckboxInputTest.ts

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

package/src/components/runCodeEditorTest.ts

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

package/src/components/runColTest.ts

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

package/src/components/runCurrencyInputTest.ts

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