DigitalConsumer.FixMyGlass/src/common-components/textbox-question/textbox-question.spec.js

import { shallowMount } from "@vue/test-utils";
import textboxQuestion from "./textbox-question";

// Mock CMS content
const questionText = "Question Text";
const mockMixin = {
  methods: {
    getCmsContent: jest.fn().mockImplementation(()=> {
      return questionText;
    })
  }
}
const maska = jest.fn();

describe("textboxQuestion.vue", () => {

  it("Should render a text input", async () => {
    // Arrange   
    const wrapper = shallowMount(textboxQuestion, {
      global: {
        directives: {
          maska: maska,
        }
      },
      mixins: [mockMixin]
    });

    wrapper.getCmsContent = jest.fn();

    // Act
    const input = wrapper.find("input");

    // Assert
    expect(input.exists()).toBe(true);

  });

  it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => {
    // Arrange
    const wrapper = shallowMount(textboxQuestion, {
      global: {
        directives: {
          maska: maska,
        }
      },
      mixins: [mockMixin]
    });

    // Act
    const label = wrapper.find("label");

    // Assert
    expect(label.text()).toContain(questionText);

  }); 
  
  it("Should render the 'questionText' data value with '⁠' after the first character of each word in the label text when disableAutoFill is true.", async () => {
    // Arrange
    const wrapper = shallowMount(textboxQuestion, {
      global: {
        directives: {
          maska: maska,
        }
      },
      propsData: {
        disableAutoFill: true,
      },
      mixins: [mockMixin]
    });

    // Mock CMS content ...
    // Trust me, the below instance of the string "Q⁠uestion Text" actually has the ⁠ in it. You just can't see it
    // Don't believe me? Copy and paste it into Google. Then inspect the search field element in Dev Tools, 
    // you will see "Q⁠uestion T⁠ext"
    const expectedQuestionText = "Q⁠uestion T⁠ext"; 

    // Act
    const label = wrapper.find("label");

    // Assert
    expect(label.text()).toContain(expectedQuestionText);

  });
  
  it("Should return input id as the id of the input field", async () => {
    // Arrange
    const wrapper = shallowMount(textboxQuestion, {
      global: {
        directives: {
          maska: maska,
        }
      },
      propsData: {
        inputId: "input ID",
      },
      mixins: [mockMixin]
    });

    // Act
    const input = wrapper.find("input");

    // Assert
    expect(input.attributes().id).toEqual("input ID");

  });
  
  it("Should render the 'questionText' data value as the aria-label attribute.", async () => {

    // Arrange
    const wrapper = shallowMount(textboxQuestion, {
      global: {
        directives: {
          maska: maska,
        }
      },
      mixins: [mockMixin]
    });

    // Act
    const label = wrapper.find("label");

    // Assert
    expect(label.attributes("aria-label")).toContain(questionText);

  });

  it("Should return aria-disabled state as disabled", async () => {
    // Arrange
    const wrapper = shallowMount(textboxQuestion, {
      global: {
        directives: {
          maska: maska,
        }
      },
      propsData: {
        isDisabled: true,
      },
      mixins: [mockMixin]
    });

    // Assert
    const input = wrapper.find("input");

    // Expect
    expect(input.attributes("aria-disabled")).toEqual("true");

  });

  it("Should emit new value when modelValue is changed", async () => {
    // Act
    const wrapper = shallowMount(textboxQuestion, {
      global: {
        directives: {
          maska: maska,
        }
      },
      propsData: {
        modelValue: "val",
      },
      mixins: [mockMixin]
    });

    await wrapper.find("input").setValue("val2");

    // Assert
    expect(wrapper.emitted()).toHaveProperty('change')

  });

  it("Should call this.handleChange with new value when the value is changed and the new value is valid", async () => {
    // Arrange
    const wrapper = shallowMount(textboxQuestion, {
      global: {
        directives: {
          maska: maska,
        }
      },
      propsData: {
        options: {},
        modelValue: "foo",
      },
      mixins: [mockMixin]
    });

    wrapper.vm.handleChange = jest.fn().mockImplementation(() => {});
    wrapper.vm.validate = jest.fn().mockImplementation(() => {
      return true;
    });

    // Act
    wrapper.vm.$options.watch.value.call(wrapper.vm, "bar");

    // Assert
    expect(wrapper.vm.handleChange).toHaveBeenCalled;

  });  

});