Vue Test Matchers to Decouple Your Tests from Vue

vue_test_matchers.ts

import { Wrapper } from "@vue/test-utils"
// https://gist.github.com/mandemeskel/2b109df0ad2665de4c4519f2ddd6d507
import * as VueTestHelpers from "./vue_test_helpers"



export function expectElementNotToBeRequired(
  it_or_page: Wrapper<any>,
  selector?: string,
) {
  if (selector) {
    it_or_page = it_or_page.find(selector)
  }

  expect(it_or_page.props()['required']).toBeFalse()
}


export function expectElementToBeEnabled(
  page: Wrapper<any>, selector: string,
) {
  const elem = page.find(selector)
  expect(elem.exists()).toBeTrue()
  expect(elem.props()['disabled']).toBeFalsy()
}


export function expectElementToBeDisabled(
  page: Wrapper<any>, selector: string,
) {
  const elem = page.find(selector)
  expect(elem.exists()).toBeTrue()
  expect(elem.props()['disabled']).toBeTruthy()
}


export function expectElementToBeRepeated(
  page: Wrapper<any>, selector: string, expected_number: number,
) {
  const results = page.findAll(selector)
  expect(results.length).toEqual(expected_number)
}


export function expectElementToBeRequired(
  page: Wrapper<any>,
  selector: string,
) {
  const elem = page.find(selector)
  expect(elem.props()['required']).toBeTrue()
}


export function expectElementToBeVisible(
  page: Wrapper<any>, selector: string,
) {
  expectItToBeVisible(page, selector)
}


export function expectElementToBeInvisible(
  page: Wrapper<any>, selector: string,
) {
  expectItToNotBeVisible(page, selector)
}


export function expectElementNotToExist(
  page: Wrapper<any>, selector: string,
) {
  const it = page.find(selector)
  expect(it.exists()).toBeFalse()
}


export function expectEventToBeEmitted(
  wrapper: Wrapper<any>,
  event_name: string,
  times?: number,
) {
  expect(wrapper.emitted(event_name)).toBeTruthy()
  if (times)
    expect(wrapper.emitted(event_name)!.length).toEqual(times)
}


export function expectEventToBeEmittedWith(
  wrapper: Wrapper<any>,
  event_name: string,
  event_index: number,
  expected_payload: any,
) {
  expect(wrapper.emitted(event_name)![event_index]).toEqual(
    [expected_payload]
  )
}


export function expectInputValueNotToEq(
  input: Wrapper<any>, value: any,
) {
  const element = input.element as HTMLInputElement
  expect(element.value).not.toEqual(value)
}


export function expectInputValueToEq(
  input: Wrapper<any>, value: any,
) {
  const element = input.element as HTMLInputElement
  expect(element.value).toEqual(value)
}


export function expectItToHaveText(
  page: Wrapper<any>, text: string,
) {
  expect(page.text()).toInclude(text)
}


export function expectSelectToHaveXNumberOfOptions(
  sel: Wrapper<any>, x: number,
) {
  const options = VueTestHelpers.getSelectOptions(sel)
  expect(options.length).toEqual(x)
}


export function expectSelectToHaveOptions(
  sel: Wrapper<any>,
  texts: any[] | { text: any, value: any }[],
  values?: any[],
  config?: { first_option_is_null_option: boolean },
) {
  const options = VueTestHelpers.getSelectOptions(sel)
  let start_index = 0

  if (config && config.first_option_is_null_option)
    start_index = 1

  if (values) {

    let index = start_index

    for (const text of texts) {
      expect(options.at(index).text()).toEqual(text)
      index += 1
    }

    index = start_index

    for (const val of values) {
      expect(options.at(index).attributes()['value']).toEqual(val)
      index += 1
    }

  } else if ('text' in texts[0] && 'value' in texts[0]) {

    let index = start_index

    for (const opt of texts) {
      expect(options.at(index).text()).toEqual(opt.text)
      expect(options.at(index).attributes()['value']).toEqual(
        // null/undefined are rendered as empty strings
        opt.value ?? ''
      )
      index += 1
    }

  } else {

    throw 'Bad input, no values given'

  }
}


export function expectItToBeVisible(
  page: Wrapper<any>, selector: string,
) {
  const it = page.find(selector)
  expect(it.isVisible()).toBeTrue()
}


export function expectItToNotBeVisible(
  page: Wrapper<any>, selector: string,
) {
  const it = page.find(selector)
  expect(it.isVisible()).toBeFalse()
}


export function expectItToBeRequired(
  it_or_page: Wrapper<any>,
  selector?: string,
) {
  if (selector) {
    it_or_page = it_or_page.find(selector)
  }

  expect(it_or_page.props()['required']).toBeTrue()
}