vitest-helpers/src/Helpers.ts

Helpers For Vue-test-utils

import { expect as Expected } from "vitest";
// import type { ExpectStatic } from "vitest";
import type { VueWrapper } from "@vue/test-utils";

class Helpers {
  wrapper: VueWrapper;
  expect: Vi.ExpectStatic;
  constructor(wrapper: VueWrapper, expect = Expected) {
    this.wrapper = wrapper;
    this.expect = expect;
  }

  see(text: string, selector: string | null = null) {
    const wrap = selector ? this.wrapper.find(selector) : this.wrapper;
    this.expect(wrap.html()).toContain(text);
  }

  seeExact(text: string, selector: string | null = null) {
    const wrap = selector ? this.wrapper.find(selector) : this.wrapper;
    this.expect(wrap.text()).toEqual(text);
  }

  doNotSee(text: string, selector: string | null = null) {
    const wrap = selector ? this.wrapper.find(selector) : this.wrapper;
    this.expect(wrap.html()).not.toContain(text);
  }

  doNotSeeExact(text: string, selector: string | null = null) {
    const wrap = selector ? this.wrapper.find(selector) : this.wrapper;
    this.expect(wrap.text()).not.toEqual(text);
  }

  hidden(selector: string) {
    const node = this.find(selector);
    this.expect(node.isVisible()).toBe(false);
  }

  domHas(selector: string) {
    this.expect(this.wrapper.find(selector).exists()).toBe(true);
  }

  domHasNot(selector: string) {
    this.expect(this.wrapper.find(selector).exists()).toBe(false);
  }

  hasAClass(name: string, selector: string | null = null) {
    selector
      ? this.expect(this.find(selector).classes()).toContain(name)
      : this.expect(this.wrapper.classes()).toContain(name);
  }

  doesNotHaveAClass(name: string, selector: string | null = null) {
    selector
      ? this.expect(this.find(selector).classes()).not.toContain(name)
      : this.expect(this.wrapper.classes()).not.toContain(name);
  }

  hasAttribute(attr: string, value: string, selector: string) {
    this.expect(this.find(selector).attributes()[attr]).toBe(value);
  }

  doesNotHaveAttribute(attr: string, value: string, selector: string) {
    this.expect(this.find(selector).attributes()[attr]).not.toBe(value);
  }

  find(selector: string) {
    return this.wrapper.find(selector);
  }

  // input
  type(text: string, input: string, event = "input") {
    const node = this.find(input);
    node.element.value = text;
    node.trigger(event);
  }

  inputValueIs(text: string, selector: string) {
    this.expect(this.find(selector).element.value).toBe(text);
  }

  inputValueIsNot(text: string, selector: string) {
    this.expect(this.find(selector).element.value).not.toBe(text);
  }

  isEmpty(selector: string) {
    // this.inputValueIs('', selector)
    this.expect(this.find(selector).element.value).toBe("");
  }

  // event
  click(selector: string) {
    this.find(selector).trigger("click");
  }

  emitted(event: string) {
    this.expect(this.wrapper.emitted()[event]).toBeTruthy();
  }

  emittedContains(event: string, ...data: [[number | string] | object]) {
    this.emitted(event);
    let elements = this.wrapper.emitted()[event][0];

    data.forEach((element) => {
      if (Array.isArray(element)) {
        const a = elements as [number | string];
        const b = element as [number | string];
        this.checkArray(a, b);
      } else if (element instanceof Object) {
        const a = elements as [object];
        const b = element as prop;
        this.checkObject(a, b);
      } else {
        const a = elements as [number | string];
        const b = element as number | string;
        this.checkData(a, b);
      }
    });
  }

  // Helpers
  checkArray(elements: [number | string], element: [number | string]) {
    return element.forEach((e) => {
      elements.forEach((arr) => {
        this.expect(arr).toContain(e);
      });
    });
  }

  checkObject(elements: [object], element: prop) {
    return elements.forEach((obj) => {
      this.expect(obj).toEqual(this.expect.objectContaining(element));
    });
  }

  checkData(elements: [number | string], element: number | string) {
    return this.expect(elements).toContain(element);
  }
}

type prop = {
  [key: string]: string | number;
};
export default Helpers;