import { shallowMount } from "@vue/test-utils";
import buttonQuestion from "@/common-components/button-question/button-question";

describe("buttonQuestion.vue", () => {
  it("Should show overflow classes on fieldset if isOverflowScrollable is true", async () => {
    // Act
    const wrapper = shallowMount(buttonQuestion);
    await wrapper.setProps({
      isOverflowScrollable: true,
    });
    // Assert
    const fieldSet = wrapper.find('fieldset');
    expect(fieldSet.classes()).toContain("overflow-scroll");
  });
});

describe("buttonQuestion.vue", () => {
  it("Fieldset classes should contain row if button type is listCard", async () => {
    // Act
    const wrapper = shallowMount(buttonQuestion);
    await wrapper.setProps({
      buttonType: "listCard",
    });
    // Assert
    const Div = wrapper.find('fieldset div');
    expect(Div.classes()).toContain("row");
  });
});

describe("buttonQuestion.vue", () => {
  it("Fieldset classes should contain d-flex if button type is listButtonHorizontal", async () => {
    // Act
    const wrapper = shallowMount(buttonQuestion);
    await wrapper.setProps({
      buttonType: "listButtonHorizontal",
    });
    // Assert
    const Div = wrapper.find('fieldset div');
    expect(Div.classes()).toContain("d-flex");
  });
});

describe("buttonQuestion.vue", () => {
  it("Should trigger event modelValue change on select", async () => {
    // Act
    const wrapper = shallowMount(buttonQuestion);
    await wrapper.setData({
      modelValueAnswers: ["Windshield"],
      chosenAnswer: "Windshield"
    });
    wrapper.setValue({ answer: wrapper.vm.chosenAnswer });
    await wrapper.vm.$nextTick();
    // Assert
    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([{answer: "Windshield"}]);
  });
});

describe("buttonQuestion.vue", () => {
  it("Should trigger event modelValue change with an array of string values on select if checked is true and multiple options are chosen", async () => {
    // Act
    const wrapper = shallowMount(buttonQuestion);
    await wrapper.setData({
      modelValueAnswers: ["Windshield", "BackDoor"]
    });
    wrapper.vm.handleCheckedChanged(true);
    // Assert
    expect(typeof wrapper.emitted()["update:modelValue"][0]).toEqual('object');
  });
});

describe("buttonQuestion.vue", () => {
  it("Should not trigger event modelValue change on select if checked is false", async () => {
    // Act
    const wrapper = shallowMount(buttonQuestion);
    wrapper.setData({
      modelValueAnswers: ["Front-door"]
    })
    const val = {isChecked : false, buttonId: "Front-door"}
    wrapper.vm.handleCheckedChanged(val);
    // Assert
    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([undefined]);
  });
});