vue-select/tests/unit/Selecting.spec.js

import { mount, shallowMount } from "@vue/test-utils";
import VueSelect from "../../src/components/Select.vue";
import { mountDefault } from "../helpers";

describe("VS - Selecting Values", () => {
  let defaultProps;

  beforeEach(() => {
    defaultProps = {
      value: "one",
      options: ["one", "two", "three"]
    };
  });

  it("can accept an array with pre-selected values", () => {
    const Select = shallowMount(VueSelect, {
      propsData: defaultProps
    });
    expect(Select.selectedValue).toEqual(Select.value);
  });

  it("can accept an array of objects and pre-selected value (single)", () => {
    const Select = shallowMount(VueSelect, {
      propsData: {
        value: { label: "This is Foo", value: "foo" },
        options: [
          { label: "This is Foo", value: "foo" },
          { label: "This is Bar", value: "bar" }
        ]
      }
    });
    expect(Select.selectedValue).toEqual(Select.value);
  });

  it("can accept an array of objects and pre-selected values (multiple)", () => {
    const Select = shallowMount(VueSelect, {
      propsData: {
        value: [
          { label: "This is Foo", value: "foo" },
          { label: "This is Bar", value: "bar" }
        ],
        options: [
          { label: "This is Foo", value: "foo" },
          { label: "This is Bar", value: "bar" }
        ]
      },
      multiple: true
    });

    expect(Select.selectedValue).toEqual(Select.value);
  });

  it("can select an option on tab", () => {
    const Select = shallowMount(VueSelect, {
      propsData: {
        selectOnTab: true
      }
    });

    const spy = jest.spyOn(Select.vm, "typeAheadSelect");

    Select.find({ ref: "search" }).trigger("keydown.tab");

    expect(spy).toHaveBeenCalledWith();
  });

  it("can deselect a pre-selected object", () => {
    const Select = shallowMount(VueSelect, {
      propsData: {
        multiple: true,
        options: [
          { label: "This is Foo", value: "foo" },
          { label: "This is Bar", value: "bar" }
        ]
      }
    });

    Select.vm.$data._value = [
      { label: "This is Foo", value: "foo" },
      { label: "This is Bar", value: "bar" }
    ];

    Select.vm.deselect({ label: "This is Foo", value: "foo" });
    expect(Select.vm.selectedValue).toEqual([
      { label: "This is Bar", value: "bar" }
    ]);
  });

  it("can deselect a pre-selected string", () => {
    const Select = shallowMount(VueSelect, {
      propsData: {
        multiple: true,
        options: ["foo", "bar"]
      }
    });

    Select.vm.$data._value = "foo";

    Select.vm.deselect("foo");
    expect(Select.vm.selectedValue).toEqual([]);
  });

  it("can deselect an option when multiple is false", () => {
    const Select = shallowMount(VueSelect);

    Select.vm.$data._value = "foo";

    Select.vm.deselect("foo");
    expect(Select.vm.selectedValue).toEqual([]);
  });

  it("can determine if the value prop is empty", () => {
    const Select = shallowMount(VueSelect, {
      propsData: {
        options: ["one", "two", "three"]
      }
    });

    const select = Select.vm;
    expect(select.isValueEmpty).toEqual(true);

    select.select(["one"]);
    expect(select.isValueEmpty).toEqual(false);

    select.select("one");
    expect(select.isValueEmpty).toEqual(false);

    select.select({ label: "foo", value: "foo" });
    expect(select.isValueEmpty).toEqual(false);

    select.select("");
    expect(select.isValueEmpty).toEqual(true);

    select.select(null);
    expect(select.isValueEmpty).toEqual(true);
  });

  it("should reset the selected values when the multiple property changes", () => {
    const Select = shallowMount(VueSelect, {
      propsData: {
        multiple: true,
        options: ["one", "two", "three"]
      }
    });

    Select.setProps({ multiple: false });
    expect(Select.vm.selectedValue).toEqual([]);

    Select.setProps({ multiple: true });
    expect(Select.vm.selectedValue).toEqual([]);
  });

  it("can retain values present in a new array of options", () => {
    const Select = shallowMount(VueSelect, {
      propsData: {
        value: ["one"],
        options: ["one", "two", "three"]
      }
    });

    Select.setProps({ options: ["one", "five", "six"] });
    expect(Select.vm.selectedValue).toEqual(["one"]);
  });

  it("can determine if an object is already selected", () => {
    const Select = shallowMount(VueSelect, {
      propsData: {
        value: [{ label: "one" }],
        options: [{ label: "one" }]
      }
    });

    expect(Select.vm.isOptionSelected({ label: "one" })).toEqual(true);
  });

  it("can use v-model syntax for a two way binding to a parent component", () => {
    const Parent = mount({
      data: () => ({ value: "foo", options: ["foo", "bar", "baz"] }),
      template: `<div><v-select :options="options" v-model="value" /></div>`,
      components: { "v-select": VueSelect }
    });
    const Select = Parent.vm.$children[0];

    expect(Select.value).toEqual("foo");
    expect(Select.selectedValue).toEqual(["foo"]);

    Select.select("bar");
    expect(Parent.vm.value).toEqual("bar");
  });

  it("can check if a string value is selected when the value is an object and multiple is true", () => {
    const Select = shallowMount(VueSelect, {
      propsData: {
        multiple: true,
        value: [{ label: "foo", value: "bar" }]
      }
    });
    expect(Select.vm.isOptionSelected({ label: "foo", value: "bar" })).toEqual(
      true
    );
  });

  it("can select two options with the same label", () => {
    const options = [
      { label: "one", id: 1 },
      { label: "one", id: 2 }
    ];
    const Select = mountDefault({ options, multiple: true });

    Select.vm.select({ label: "one", id: 1 });
    Select.vm.select({ label: "one", id: 2 });

    expect(Select.vm.selectedValue).toEqual(options);
  });

  describe("input Event", () => {
    it("will trigger the input event when the selection changes", () => {
      const Select = shallowMount(VueSelect);
      Select.vm.select("bar");
      expect(Select.emitted("input")[0]).toEqual(["bar"]);
    });

    it("will trigger the input event when the selection changes and multiple is true", () => {
      const Select = shallowMount(VueSelect, {
        propsData: { multiple: true, value: ["foo"], options: ["foo", "bar"] }
      });
      Select.vm.select("bar");
      expect(Select.emitted("input")[0]).toEqual([["foo", "bar"]]);
    });

    it("will not trigger the input event when multiple is true and selection is repeated", () => {
      const Select = shallowMount(VueSelect, {
        propsData: {
          multiple: true,
          value: ["foo ", "bar"],
          options: ["foo", "bar", "baz"]
        }
      });

      Select.vm.select("bar");
      expect(Select.emitted("input")).toBeFalsy();
    });
  });

  describe("option:selecting Event", () => {
    it("will trigger the option:selecting event when an option is selected", () => {
      const Select = shallowMount(VueSelect);
      Select.vm.select("bar");
      expect(Select.emitted("option:selecting")[0]).toEqual(["bar"]);
    });

    it("will trigger the option:selecting event regardless of current value", () => {
      const Select = shallowMount(VueSelect, {
        propsData: { value: ["foo"], options: ["foo", "bar"] }
      });
      Select.vm.select("foo");
      Select.vm.select("bar");
      expect(Select.emitted("option:selecting")).toEqual([["foo"], ["bar"]]);
    });

    it("will trigger the option:selecting event with current selected item when multiple is true", () => {
      const Select = shallowMount(VueSelect, {
        propsData: { multiple: true, value: ["foo"], options: ["foo", "bar"] }
      });
      Select.vm.select("bar");
      expect(Select.emitted("option:selecting")[0]).toEqual(["bar"]);
    });

    it("will trigger the option:selecting event regardless of current value when multiple is true", () => {
      const Select = shallowMount(VueSelect, {
        propsData: {
          multiple: true,
          value: ["foo", "bar"],
          options: ["foo", "bar"]
        }
      });
      Select.vm.select("bar");
      Select.vm.select("bar");
      expect(Select.emitted("option:selecting")).toEqual([["bar"], ["bar"]]);
    });
  });

  describe("option:deselected Event", () => {
    it("will trigger the option:deselected event when an option is deselected", () => {
      const Select = shallowMount(VueSelect, {
        propsData: { value: ["foo"], options: ["foo", "bar"] }
      });
      Select.vm.deselect("foo");
      expect(Select.emitted("option:deselected")[0]).toEqual(["foo"]);
    });

    it("will trigger the option:deselected event regardless of current value", () => {
      const Select = shallowMount(VueSelect, {
        propsData: { value: ["foo"], options: ["foo", "bar"] }
      });
      Select.vm.deselect("foo");
      Select.vm.deselect("bar");
      expect(Select.emitted("option:deselected")).toEqual([["foo"], ["bar"]]);
    });

    it("will trigger the option:selected event with current selected item when multiple is true", () => {
      const Select = shallowMount(VueSelect, {
        propsData: { multiple: true, value: ["foo"], options: ["foo", "bar"] }
      });
      Select.vm.deselect("bar");
      expect(Select.emitted("option:deselected")[0]).toEqual(["bar"]);
    });

    it("will trigger the option:selected event regardless of current value when multiple is true", () => {
      const Select = shallowMount(VueSelect, {
        propsData: {
          multiple: true,
          value: ["foo", "bar"],
          options: ["foo", "bar"]
        }
      });
      Select.vm.deselect("bar");
      Select.vm.deselect("bar");
      expect(Select.emitted("option:deselected")).toEqual([["bar"], ["bar"]]);
    });
  });
});