@craydel/craydel-autocomplete/src/CraydelAutocomplete.test.js

A custom Vuetify autocomplete component for Craydel.

import {mount} from "@vue/test-utils";
import CraydelAutocomplete from "./CraydelAutocomplete.vue";
import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

const vuetify = new Vuetify();

describe("CraydelAutocomplete.vue", () => {
  let wrapper
  let autocomplete_field

  beforeEach(async () => {
    expect(CraydelAutocomplete).toBeTruthy()

    wrapper = mount(CraydelAutocomplete, {
      propsData: {
        id: 'autocomplete_field',
        items: ['Item 1', 'Item 2', 'Item 3'],
      },
      vuetify,
    })

    autocomplete_field = wrapper.get("#autocomplete_field")

    expect(wrapper.props().id).exist
    expect(wrapper.vm.$data).toHaveProperty('autocomplete_field')
  });

  test("Check CraydelAutocomplete Props", async () => {
    expect(wrapper.props().placeholder).exist
    expect(wrapper.props().placeholder).toBe('Select')

    expect(wrapper.props().items).exist

    expect(wrapper.props().isRequired).exist
    expect(wrapper.props().isRequired).toBeFalsy()

    expect(wrapper.props().requiredError).exist
    expect(wrapper.props().requiredError).toBe('Field is required')

    expect(wrapper.props().multiple).exist
    expect(wrapper.props().multiple).toBeFalsy()

    expect(wrapper.props().selectAll).exist
    expect(wrapper.props().selectAll).toBeFalsy()

    await wrapper.setProps({ noDataText: 'No data text' })
    expect(wrapper.props().noDataText).exist

    await wrapper.setProps({ hint: 'Hint text' })
    expect(wrapper.props().hint).exist

    await wrapper.setProps({ itemText: 'Item 1 Text' })
    expect(wrapper.props().itemText).exist

    await wrapper.setProps({ itemValue: 'Item 1 Value' })
    expect(wrapper.props().itemValue).exist

    await wrapper.setProps({ attach: '.form-group' })
    expect(wrapper.props().attach).exist

    expect(wrapper.props().noValidation).exist
    expect(wrapper.props().noValidation).toBeFalsy()

    expect(wrapper.props().disabled).exist
    expect(wrapper.props().disabled).toBeFalsy()

    expect(wrapper.props().loading).exist
    expect(wrapper.props().loading).toBeFalsy()

    expect(wrapper.props().showAppendItem).exist
    expect(wrapper.props().showAppendItem).toBeFalsy()
  });

  test("Check if required field throws error when you interact with autocomplete field but don't choose an option", async () => {
    await wrapper.setProps({ isRequired: true })
    await autocomplete_field.trigger("blur")


    expect(wrapper.get(".form-field").classes()).toEqual(
      expect.arrayContaining(["error--text"])
    )

    expect(wrapper.get(".v-messages__message").text()).toBe('Field is required')

  });

  test("Check if NOT required field does NOT throw an error when you interact with autocomplete field but don't choose an option", async () => {
    await wrapper.setProps({ isRequired: false })
    await autocomplete_field.trigger("blur")

    expect(wrapper.get(".form-field").classes()).toEqual(
      expect.not.arrayContaining(["error--text"])
    )

    expect(!wrapper.find('.v-messages__message').exists()).toBeTruthy()

  });

  test("Check if required field shows success message when an option is selected", async () => {
    await wrapper.setProps({ isRequired: true })
    await wrapper.setData({ autocomplete_field: 'Item 1' }) // Selecting an option will set the model

    expect(wrapper.get(".form-field").classes()).toEqual(
      expect.arrayContaining(["success--text"])
    )
  });

  test("Check if NOT required field shows success message when an option is selected", async () => {
    await wrapper.setProps({ isRequired: false })
    await wrapper.setData({ autocomplete_field: 'Item 1' }) // Selecting an option will set the model

    expect(wrapper.get(".form-field").classes()).toEqual(
      expect.arrayContaining(["success--text"])
    )
  });

  test("Check if isValid method returns true if autocomplete field IS required and option is selected", async () => {
    await wrapper.setProps({ isRequired: true })
    await wrapper.setData({ autocomplete_field: 'Item 1' }) // Selecting an option will set the model

    const is_valid = wrapper.vm.isValid()

    expect(is_valid).toBe(true)
  });

  test("Check if isValid method returns true if autocomplete field is NOT required and option is selected", async () => {
    await wrapper.setProps({ isRequired: false })
    await wrapper.setData({ autocomplete_field: 'Item 1' }) // Selecting an option will set the model

    const is_valid = wrapper.vm.isValid()

    expect(is_valid).toBe(true)
  });

  test("Check if isValid method returns true if autocomplete field is NOT required and NO option is selected", async () => {
    await wrapper.setProps({ isRequired: false })

    const is_valid = wrapper.vm.isValid()

    expect(is_valid).toBe(true)
  });

  test("Check if isValid method returns false if autocomplete field IS required and NO option is selected", async () => {
    await wrapper.setProps({ isRequired: true })

    const is_valid = wrapper.vm.isValid()

    expect(is_valid).toBe(false)
  });

  test("Check if autoTouch method exists", async () => {
    const spy = vi.spyOn(CraydelAutocomplete.methods, 'autoTouch')
    expect(spy).exist
  });

  test("Check if get method exists", async () => {
    const getSpy = vi.spyOn(CraydelAutocomplete.methods, 'get')
    expect(getSpy).exist
  });

  test("Check if set method exists", async () => {
    const setSpy = vi.spyOn(CraydelAutocomplete.methods, 'set')
    expect(setSpy).exist
  });

  test("Check if hideList method exists", async () => {
    const hideListSpy = vi.spyOn(CraydelAutocomplete.methods, 'hideList')
    expect(hideListSpy).exist
  });

  test("Check if toggle method exists", async () => {
    const toggleSpy = vi.spyOn(CraydelAutocomplete.methods, 'toggle')
    expect(toggleSpy).exist
  });

  test("Check if autocompleteFieldErrors exists", async () => {
    const spy = vi.spyOn(CraydelAutocomplete.computed, 'autocompleteFieldErrors')
    expect(spy).exist
  });

  test("Check if makeFieldConfiguration exists", async () => {
    const spy = vi.spyOn(CraydelAutocomplete.computed, 'makeFieldConfiguration')
    expect(spy).exist
  });

  test("Check if selectAllItems exists", async () => {
    const spy = vi.spyOn(CraydelAutocomplete.computed, 'selectAllItems')
    expect(spy).exist
  });

  test("Check if selectSomeItems exists", async () => {
    const spy = vi.spyOn(CraydelAutocomplete.computed, 'selectSomeItems')
    expect(spy).exist
  });

  test("Check if icon exists", async () => {
    const spy = vi.spyOn(CraydelAutocomplete.computed, 'icon')
    expect(spy).exist
  });

  test("When select is changed, emit method", async () => {
    const emitChangeSpy = vi.spyOn(wrapper.vm, 'emitChange')

    // Trigger change
    await wrapper.get("#autocomplete_field").trigger("change")
    wrapper.vm.emitChange()

    expect(emitChangeSpy).toHaveBeenCalled()
    expect(wrapper.emitted('change')).toBeTruthy()

    emitChangeSpy.mockClear()
  });

  test("When select is keyed down, emit method", async () => {
    const emitKeydownSpy = vi.spyOn(wrapper.vm, 'emitKeydown')

    // Trigger keydown
    await wrapper.get("#autocomplete_field").trigger("keydown")
    wrapper.vm.emitKeydown()

    expect(emitKeydownSpy).toHaveBeenCalled()
    expect(wrapper.emitted('keydown')).toBeTruthy()

    emitKeydownSpy.mockClear()
  });

  test("When select is blurred, emit method", async () => {
    const emitBlurSpy = vi.spyOn(wrapper.vm, 'emitBlur')

    // Trigger change
    await wrapper.get("#autocomplete_field").trigger("blur")
    wrapper.vm.emitBlur()

    expect(emitBlurSpy).toHaveBeenCalled()
    expect(wrapper.emitted('blur')).toBeTruthy()

    emitBlurSpy.mockClear()
  });

});