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

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 to new value on when radio button selected", async () => {
    // Act
    const wrapper = shallowMount(buttonQuestion);
    await wrapper.setProps({
      answers: ["2022", "2021", "2020"],
      isMultiSelect: false
    });
    const val = {isChecked: true, buttonId: "2021", }
    wrapper.vm.handleCheckedChanged(val);
    // Assert
    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2021"]]);
  });
});

describe("buttonQuestion.vue", () => {
  it("Should add values to array on checkbox click", async () => {
    // Act
    const wrapper = shallowMount(buttonQuestion);
    await wrapper.setProps({
      modelValue: ["2022", "2021", "2020"],
      isMultiSelect: true
    });
    const val = {isChecked: true, buttonId: "2019", }
    wrapper.vm.handleCheckedChanged(val);
    // Assert
    expect(wrapper.emitted()["update:modelValue"][0]).toEqual([["2022", "2021", "2020", "2019"]]);
  });
});