import { config, DOMWrapper } from '@vue/test-utils';
import { ComponentPublicInstance } from 'vue';

declare module '@vue/test-utils' {
  interface VueWrapper<VM, T extends ComponentPublicInstance> {
    findByTestId(selector: string): DOMWrapper<HTMLElement>;
    findComponentByTestId<U>(selector: string): VueWrapper<U>;
  }

  interface DOMWrapper<NodeType extends Node> {
    findByTestId(selector: string): DOMWrapper<HTMLElement>;
    findComponentByTestId<U>(selector: string): VueWrapper<U>;
  }
}

const findByTestIdPlugin = (wrapper: any) => {
  function findByTestId(selector: string): DOMWrapper<HTMLElement> {
    const testId = `[data-testid="${selector}"]`;
    return wrapper.find(testId);
  }

  function findComponentByTestId(selector: string) {
    const testId = `[data-testid="${selector}"]`;
    return wrapper.findComponent(testId);
  }

  return { findByTestId, findComponentByTestId };
};

config.plugins.VueWrapper.install(findByTestIdPlugin);
config.plugins.DOMWrapper.install(findByTestIdPlugin);