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

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

describe("Labels", () => {
  it("can generate labels using a custom label key", () => {
    const Select = selectWithProps({
      options: [{ name: "Foo" }],
      label: "name",
      value: { name: "Foo" }
    });
    expect(Select.find(".vs__selected").text()).toBe("Foo");
  });

  it("will console.warn when options contain objects without a valid label key", async () => {
    const spy = jest.spyOn(console, "warn").mockImplementation(() => {});
    const Select = selectWithProps({
      options: [{}]
    });

    Select.vm.open = true;
    await Select.vm.$nextTick();

    expect(spy).toHaveBeenCalledWith(
      '[vue-select warn]: Label key "option.label" does not exist in options object {}.' +
        "\nhttps://vue-select.org/api/props.html#getoptionlabel"
    );
  });

  it("should display a placeholder if the value is empty", () => {
    const Select = shallowMount(VueSelect, {
      propsData: {
        options: ["one"]
      },
      attrs: {
        placeholder: "foo"
      }
    });

    expect(Select.vm.searchPlaceholder).toEqual("foo");
    Select.vm.$data._value = "one";
    expect(Select.vm.searchPlaceholder).not.toBeDefined();
  });

  describe("getOptionLabel", () => {
    it("will return undefined if the option lacks the label key", () => {
      const getOptionLabel = VueSelect.props.getOptionLabel.default.bind({
        label: "label"
      });
      expect(getOptionLabel({ name: "vue" })).toEqual(undefined);
    });

    it("will return a string value for a valid key", () => {
      const getOptionLabel = VueSelect.props.getOptionLabel.default.bind({
        label: "label"
      });
      expect(getOptionLabel({ label: "vue" })).toEqual("vue");
    });

    /**
     * this test fails because of a bug where Vue executes the default contents
     * of a slot, even if it is implemented by the consumer.
     * @see https://github.com/vuejs/vue/issues/10224
     * @see https://github.com/vuejs/vue/pull/10229
     */
    xit("will not call getOptionLabel if both scoped option slots are used and a filter is provided", () => {
      const spy = spyOn(VueSelect.props.getOptionLabel, "default");
      const Select = shallowMount(VueSelect, {
        propsData: {
          options: [{ name: "one" }],
          filter: () => {}
        },
        scopedSlots: {
          option: '<span class="option">{{ props.name }}</span>',
          "selected-option": '<span class="selected">{{ props.name }}</span>'
        }
      });

      Select.vm.select({ name: "one" });

      expect(spy).toHaveBeenCalledTimes(0);
      expect(Select.find(".selected").exists()).toBeTruthy();
    });
  });
});