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

package/src/tests/executeAdminComponentTest.ts

@@ -0,0 +1,47 @@
+/* eslint-disable no-magic-numbers */
+import {type Component} from 'vue';
+import {afterAll, beforeAll, beforeEach, describe, vi} from 'vitest';
+import {
+  type AdminComponent,
+  type AdminInstance,
+  type AdminView,
+  createAdminConfig,
+  createLogger,
+} from '@myparcel-dev/pdk-admin';
+import {testMap} from './testMap';
+
+export const executeAdminComponentTest = (name: AdminComponent, component: Omit<Component, 'props'>): void => {
+  const componentTest = testMap[name];
+
+  if (!componentTest) {
+    // eslint-disable-next-line no-console
+    console.warn(`No test found for component: ${name}`);
+    return;
+  }
+
+  describe(name, () => {
+    beforeEach(() => {
+      vi.spyOn(console, 'warn').mockImplementation(() => undefined);
+    });
+
+    beforeAll(() => {
+      vi.mock('../usePdkInstance', () => ({
+        usePdkInstance: (): AdminInstance => ({
+          appName: 'test',
+          config: createAdminConfig(),
+          context: {},
+          logger: createLogger('test'),
+          view: 'test' as AdminView,
+        }),
+      }));
+    });
+
+    describe(name, () => {
+      componentTest(component);
+    });
+
+    afterAll(() => {
+      vi.restoreAllMocks();
+    });
+  });
+};

package/src/tests/executePdkComponentTests.ts

@@ -0,0 +1,19 @@
+import {config} from '@vue/test-utils';
+import {doComponentTestSetup} from '@myparcel-dev/pdk-admin/testing';
+import {type AdminComponent, type AdminComponentMap} from '@myparcel-dev/pdk-admin';
+import {wrapperPlugin} from '../helpers/wrapperPlugin';
+import {executeAdminComponentTest} from './executeAdminComponentTest';
+
+export const executePdkComponentTests = (components: Partial<AdminComponentMap> = {}): void => {
+  config.plugins.VueWrapper.install(wrapperPlugin);
+
+  doComponentTestSetup(components);
+
+  Object.entries(components).forEach(([name, component]) => {
+    if (!component) {
+      return;
+    }
+
+    executeAdminComponentTest(name as AdminComponent, component);
+  });
+};

package/src/tests/index.ts

@@ -0,0 +1,3 @@
+export * from './executeAdminComponentTest';
+export * from './executePdkComponentTests';
+export * from './testMap';

package/src/tests/testMap.ts

@@ -0,0 +1,111 @@
+import {type Component} from 'vue';
+import {AdminComponent} from '@myparcel-dev/pdk-admin';
+import {runMultiDateInputTest} from '../components/runMultiDateInputTest';
+import {
+  runBadgeTest,
+  runBoxTest,
+  runButtonTest,
+  runCheckboxGroupTest,
+  runCheckboxInputTest,
+  runCodeEditorTest,
+  runColTest,
+  runCurrencyInputTest,
+  runDropDownButtonTest,
+  runDropOffInputTest,
+  runFormGroupTest,
+  runHeadingTest,
+  runIconTest,
+  runImageTest,
+  runLinkTest,
+  runLoaderTest,
+  runModalTest,
+  runMultiSelectInputTest,
+  runNotificationTest,
+  runNumberInputTest,
+  runPlainWrapperTest,
+  runRadioGroupTest,
+  runRadioInputTest,
+  runRowTest,
+  runSelectInputTest,
+  runSettingsDividerTest,
+  runShippingMethodsInputTest,
+  runTableColTest,
+  runTableRowTest,
+  runTableTest,
+  runTabNavButtonTest,
+  runTextAreaTest,
+  runTextInputTest,
+  runTimeInputTest,
+  runToggleInputTest,
+} from '../components';
+
+export type AdminComponentTest = (component: Omit<Component, 'props'>) => void;
+
+export const testMap: Readonly<Record<AdminComponent, AdminComponentTest>> = Object.freeze({
+  /**
+   * Inputs
+   */
+  [AdminComponent.CheckboxGroup]: runCheckboxGroupTest,
+  [AdminComponent.CheckboxInput]: runCheckboxInputTest,
+  [AdminComponent.CodeEditor]: runCodeEditorTest,
+  [AdminComponent.CurrencyInput]: runCurrencyInputTest,
+  [AdminComponent.DropOffInput]: runDropOffInputTest,
+  [AdminComponent.MultiSelectInput]: runMultiSelectInputTest,
+  [AdminComponent.NumberInput]: runNumberInputTest,
+  [AdminComponent.RadioGroup]: runRadioGroupTest,
+  [AdminComponent.RadioInput]: runRadioInputTest,
+  [AdminComponent.SelectInput]: runSelectInputTest,
+  [AdminComponent.ShippingMethodsInput]: runShippingMethodsInputTest,
+  [AdminComponent.TextArea]: runTextAreaTest,
+  [AdminComponent.TextInput]: runTextInputTest,
+  [AdminComponent.TimeInput]: runTimeInputTest,
+  [AdminComponent.ToggleInput]: runToggleInputTest,
+  [AdminComponent.MultiDateInput]: runMultiDateInputTest,
+  /**
+   * @TODO: fix test for TriStateInput
+   */
+  [AdminComponent.TriStateInput]: () => undefined,
+
+  /**
+   * Plain wrappers
+   */
+  [AdminComponent.ButtonGroup]: runPlainWrapperTest,
+  [AdminComponent.ConceptBoxWrapper]: runPlainWrapperTest,
+  [AdminComponent.PluginSettingsWrapper]: runPlainWrapperTest,
+  [AdminComponent.ShipmentLabelWrapper]: runPlainWrapperTest,
+  [AdminComponent.TabNavButtonWrapper]: runPlainWrapperTest,
+  [AdminComponent.TabNavContentWrapper]: runPlainWrapperTest,
+
+  /**
+   * Layout
+   */
+  [AdminComponent.Box]: runBoxTest,
+  [AdminComponent.Col]: runColTest,
+  [AdminComponent.Row]: runRowTest,
+
+  [AdminComponent.Table]: runTableTest,
+  [AdminComponent.TableCol]: runTableColTest,
+  [AdminComponent.TableRow]: runTableRowTest,
+
+  [AdminComponent.FormGroup]: runFormGroupTest,
+
+  /**
+   * Interactive components
+   */
+  [AdminComponent.Button]: runButtonTest,
+  [AdminComponent.DropdownButton]: runDropDownButtonTest,
+  [AdminComponent.Link]: runLinkTest,
+  [AdminComponent.Modal]: runModalTest,
+  [AdminComponent.TabNavButton]: runTabNavButtonTest,
+
+  /**
+   * Other
+   */
+  [AdminComponent.Badge]: runBadgeTest,
+  [AdminComponent.Heading]: runHeadingTest,
+  [AdminComponent.Icon]: runIconTest,
+  [AdminComponent.Image]: runImageTest,
+  [AdminComponent.Loader]: runLoaderTest,
+  [AdminComponent.Notification]: runNotificationTest,
+  [AdminComponent.SettingsDivider]: runSettingsDividerTest,
+});

package/src/types.ts

@@ -0,0 +1,24 @@
+import {type Component as ComponentType, type Component} from 'vue';
+import {type ComponentMountingOptions} from '@vue/test-utils';
+
+export type ComponentTestOptions = {
+  $slots?: Record<string, unknown>;
+};
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any,@typescript-eslint/ban-types
+export type PartialComponentTest<Args extends unknown[] = unknown[]> = <
+  T extends ComponentTestOptions = ComponentTestOptions,
+>(
+  component: Component,
+  options?: ComponentMountingOptions<T>,
+  ...args: Args
+) => void;
+
+export interface AdditionalOptions {
+  value?: unknown;
+}
+
+export type TestComponentMountingOptions<
+  Component extends ComponentType = ComponentType,
+  Options extends ComponentTestOptions = ComponentTestOptions,
+> = ComponentMountingOptions<Component> & Options;

package/src/vue.shims.d.ts

@@ -0,0 +1,26 @@
+/* eslint-disable import/consistent-type-specifier-style,@typescript-eslint/no-explicit-any,@typescript-eslint/ban-types,@typescript-eslint/naming-convention,no-underscore-dangle */
+
+import type {DOMWrapper} from '@vue/test-utils';
+
+declare module '*.vue' {
+  import type {DefineComponent} from 'vue';
+
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}
+
+declare const __VUE_PROD_DEVTOOLS__: boolean;
+
+declare module '@vue/test-utils' {
+  export class VueWrapper {
+    public findByTestId<K extends keyof HTMLElementTagNameMap>(
+      selector: string | string[],
+    ): DOMWrapper<HTMLElementTagNameMap[K]>;
+
+    public findByTestId<K extends keyof SVGElementTagNameMap>(
+      selector: string | string[],
+    ): DOMWrapper<SVGElementTagNameMap[K]>;
+
+    public findByTestId<T extends Element | Node = Node>(selector: string | string[]): DOMWrapper<T>;
+  }
+}