import { shallowMount } from "@vue/test-utils";
import dropdownQuestion from "./dropdown-question";
import { nextTick } from "vue";
import { maska } from 'maska';

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

  it("Should return aria-disabled state", async () => {
    // Act
    const wrapper = shallowMount(dropdownQuestion, {
      propsData: {
        isDisabled: true,
      },
    });

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

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

  it("Should render a select input", async () => {
    // Act
    const wrapper = shallowMount(dropdownQuestion, {
      propsData: {
        name: "test",
        label: "unit test label",
      },
    });

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

    expect(input.exists()).toBe(true);
  });

  it("Should return input id", async () => {
    // Act
    const wrapper = shallowMount(dropdownQuestion, {
      propsData: {
        inputId: "input ID",
      },
    });

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

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

  it("Should render the 'questionText' data value as the label text when disableAutoFill is false.", async () => {
    // Arrange
    //Mock CMS content
    const questionText = "Question Text";
    const cmsContent = {
      QuestionText: questionText,
    };

    // Act
    const wrapper = shallowMount(dropdownQuestion, {
      global: {
        directives: {
          maska: maska,
        }
      },
    });
    await wrapper.setData({
      questionText: questionText,
    });
    wrapper.vm.initializeComponent(cmsContent);

    // Assert
    expect(wrapper.find("label").text()).toContain(questionText);
    wrapper.unmount();
  });
  
  it("Should render the 'questionText' data value with '⁠' after the first character as the label text when disableAutoFill is true.", async () => {
    // Arrange
    //Mock CMS content
    const originalQuestionText = "Question Text";
    // 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 it and paste it into Google. Then inspect the search field element in Dev Tools, 
    // you will see "Q&uestion Text"
    const expectedQuestionText = "Q⁠uestion Text"; 
    const cmsContent = {
      QuestionText: originalQuestionText,
    };

    // Act
    const wrapper = shallowMount(dropdownQuestion, {
      global: {
        directives: {
          maska: maska,
        }
      },
      propsData: {
        disableAutoFill: true,
      },
    });
    await wrapper.setData({
      questionText: originalQuestionText,
    });
    wrapper.vm.initializeComponent(cmsContent);

    // Assert
    expect(wrapper.vm.$el.children[0].innerHTML).toBe(expectedQuestionText);
    wrapper.unmount();
  });

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

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

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

  });
});