Untitled

import { mount } from "@vue/test-utils";
import Single from "ss-vue/pages/App/Surveys/Design/questions/render/singleTextbox.vue";

describe("single textbox component", () => {
  test("renders an input with the size set to question's width", () => {
    const question = {
      id: 17101339,
      date_created: "2022-09-28T11:30:09.733",
      title: "single",
      type: "open_ended",
      sub_type: "single",
      position: 2,
      number: 2,
      skip_logic: 0,
      properties: {
        required: false,
        required_error_message: "This question requires an answer",
        validation_error_message: "The answer is in an invalid format.",
        hide_question: false,
        skip_numbering: false,
        css_class: "",
        width: "100%",
        default_answer: "",
      },
      answer_choices: {
        choices: [
          {
            id: 134572290,
            title: " ",
            position: 1,
            type: "SingleTextbox",
            properties: {
              required: false,
              hide_choice: false,
              score: 0,
              width: 25,
              height: 0,
            },
          },
        ],
      },
    };
    const wrapper = mount(Single, {
      props: { question },
    });
    const a = wrapper.find("input");
    expect(a.attributes().size).toBe(
      question.answer_choices.choices[0].properties.width.toString()
    );
  });
  test("renders question.title", () => {
    const question = {
      id: 17101339,
      date_created: "2022-09-28T11:30:09.733",
      title: "single",
      type: "open_ended",
      sub_type: "single",
      position: 2,
      number: 2,
      skip_logic: 0,
      properties: {
        required: false,
        required_error_message: "This question requires an answer",
        validation_error_message: "The answer is in an invalid format.",
        hide_question: false,
        skip_numbering: false,
        css_class: "",
        width: "100%",
        default_answer: "",
      },
      answer_choices: {
        choices: [
          {
            id: 134572290,
            title: " ",
            position: 1,
            type: "SingleTextbox",
            properties: {
              required: false,
              hide_choice: false,
              score: 0,
              width: 25,
              height: 0,
            },
          },
        ],
      },
    };
    const wrapper = mount(Single, {
      props: { question },
    });
    expect(wrapper.text()).toContain(question.title);
  });
  test("renders question.number", () => {
    const question = {
      id: 17101339,
      date_created: "2022-09-28T11:30:09.733",
      title: "single",
      type: "open_ended",
      sub_type: "single",
      position: 2,
      number: 3,
      skip_logic: 0,
      properties: {
        required: false,
        required_error_message: "This question requires an answer",
        validation_error_message: "The answer is in an invalid format.",
        hide_question: false,
        skip_numbering: false,
        css_class: "",
        width: "100%",
        default_answer: "",
      },
      answer_choices: {
        choices: [
          {
            id: 134572290,
            title: " ",
            position: 1,
            type: "SingleTextbox",
            properties: {
              required: false,
              hide_choice: false,
              score: 0,
              width: 25,
              height: 0,
            },
          },
        ],
      },
    };
    const wrapper = mount(Single, {
      props: { question },
    });
    expect(wrapper.text()).toContain(question.number.toString());
  });
  test("doesn't render question.number when question.skip_numbering is true", () => {
    const question = {
      id: 17101339,
      date_created: "2022-09-28T11:30:09.733",
      title: "single",
      type: "open_ended",
      sub_type: "single",
      position: 2,
      number: 2,
      skip_logic: 0,
      properties: {
        required: false,
        required_error_message: "This question requires an answer",
        validation_error_message: "The answer is in an invalid format.",
        hide_question: false,
        skip_numbering: true,
        css_class: "",
        width: "100%",
        default_answer: "",
      },
      answer_choices: {
        choices: [
          {
            id: 134572290,
            title: " ",
            position: 1,
            type: "SingleTextbox",
            properties: {
              required: false,
              hide_choice: false,
              score: 0,
              width: 25,
              height: 0,
            },
          },
        ],
      },
    };
    const wrapper = mount(Single, {
      props: { question },
    });
    expect(wrapper.text()).not.toContain(question.number.toString());
  });
  test("doesn't render asterisk when question.properties.required is false", () => {
    const question = {
      id: 17101339,
      date_created: "2022-09-28T11:30:09.733",
      title: "single",
      type: "open_ended",
      sub_type: "single",
      position: 2,
      number: 2,
      skip_logic: 0,
      properties: {
        required: false,
        required_error_message: "This question requires an answer",
        validation_error_message: "The answer is in an invalid format.",
        hide_question: false,
        skip_numbering: false,
        css_class: "",
        width: "100%",
        default_answer: "",
      },
      answer_choices: {
        choices: [
          {
            id: 134572290,
            title: " ",
            position: 1,
            type: "SingleTextbox",
            properties: {
              required: false,
              hide_choice: false,
              score: 0,
              width: 25,
              height: 0,
            },
          },
        ],
      },
    };
    const wrapper = mount(Single, {
      props: { question },
    });
    expect(wrapper.text()).not.toContain("*");
  });
  test("renders asterisk when question.properties.required is true", () => {
    const question = {
      id: 17101339,
      date_created: "2022-09-28T11:30:09.733",
      title: "single",
      type: "open_ended",
      sub_type: "single",
      position: 2,
      number: 2,
      skip_logic: 0,
      properties: {
        required: true,
        required_error_message: "This question requires an answer",
        validation_error_message: "The answer is in an invalid format.",
        hide_question: false,
        skip_numbering: false,
        css_class: "",
        width: "100%",
        default_answer: "",
      },
      answer_choices: {
        choices: [
          {
            id: 134572290,
            title: " ",
            position: 1,
            type: "SingleTextbox",
            properties: {
              required: false,
              hide_choice: false,
              score: 0,
              width: 25,
              height: 0,
            },
          },
        ],
      },
    };
    const wrapper = mount(Single, {
      props: { question },
    });
    console.log('wrapper.text()', wrapper.text());
    expect(wrapper.text()).toContain("*");
  });
});