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();
    });
  });
});