optimizely-oui/dist/js/components/SelectDropdown/tests/index.js

Optimizely's Component Library.

"use strict";

var _react = _interopRequireDefault(require("react"));

var _enzyme = require("enzyme");

var _Dropdown = _interopRequireDefault(require("../../Dropdown"));

var _index = _interopRequireDefault(require("../index"));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

describe("components/SelectDropdown", function () {
  var component;
  var onChange;
  var items = [{
    label: "label 1",
    value: "value 1",
    description: "description 1"
  }, {
    label: "label 2",
    value: "value 2",
    description: "description 2"
  }];
  var multiSelectItems = [{
    label: "label 1",
    value: "value 1",
    description: "description 1"
  }, {
    label: "label 2",
    value: "value 2",
    description: "description 2",
    isSelected: true
  }];
  beforeEach(function () {
    onChange = jest.fn();
  });
  it("should render all items in dropdown", function () {
    component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      items: items,
      value: "value 2",
      onChange: onChange
    }));
    var activator = component.find("Button");
    activator.simulate("click");
    var listItems = component.find(_Dropdown["default"].ListItem);
    expect(listItems).toHaveLength(2);
    var item1 = listItems.at(0);
    expect(item1.text()).toContain("label 1");
    expect(item1.text()).toContain("description 1");
    expect(item1.find(_Dropdown["default"].BlockLink).props().isLink).toEqual(true);
    var item2 = listItems.at(1);
    expect(item2.text()).toContain("label 2");
    expect(item2.text()).toContain("description 2");
    expect(item2.find(_Dropdown["default"].BlockLink).props().isLink).toEqual(false);
  });
  it("should call onChange when another item is selected", function () {
    component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      items: items,
      value: "value 2",
      onChange: onChange
    }));
    var activator = component.find("Button");
    activator.simulate("click");
    var listItems = component.find("DropdownBlockLink");
    var item1 = listItems.at(0).find('[data-test-section="dropdown-block-link-value 1"]');
    item1.simulate("click");
    expect(onChange).toHaveBeenCalled();
    expect(onChange).toHaveBeenCalledWith("value 1");
  });
  it("should set the width of the activator", function () {
    component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      items: items,
      value: "value 2",
      onChange: onChange,
      width: "400px"
    }));
    expect(component.find("Dropdown").find("div.oui-dropdown-group__activator").props().style).toEqual({
      width: "400px"
    });
  });
  it("should pass fullWidth prop to Dropdown", function () {
    component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      items: items,
      value: "value 2",
      onChange: onChange,
      fullWidth: true
    }));
    expect(component.find("Dropdown").prop("fullWidth")).toEqual(true);
  });
  it("should set the maxWidth of the activator", function () {
    component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      items: items,
      value: "value 2",
      onChange: onChange,
      maxWidth: "100px"
    }));
    expect(component.find("Dropdown").find("div.oui-dropdown-group__activator").props().style).toEqual({
      maxWidth: "100px",
      width: "100%"
    });
  });
  it("should contain error class", function () {
    component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      items: items,
      value: "value 2",
      onChange: onChange,
      displayError: true
    }));
    expect(component.find(".oui-form-bad-news").length).toBe(1);
  });
  it("should set the width of the content", function () {
    component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      items: items,
      value: "value 2",
      onChange: onChange,
      minDropdownWidth: "400px"
    }));
    var activator = component.find("Button");
    activator.simulate("click");
    expect(component.find("DropdownContents").prop("minWidth")).toEqual("400px");
  });
  it("should not render DropdownContents when isDisabled is true", function () {
    component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      items: items,
      isDisabled: true,
      value: "value 2",
      onChange: onChange
    }));
    var activator = component.find("Button");
    activator.simulate("click");
    expect(component.find("Dropdown").prop("isDisabled")).toEqual(true);
    expect(component.find("DropdownContents").length).toEqual(0);
  });
  it("should display activatorLabel if provided", function () {
    var itemsWithActivatorLabel = [{
      activatorLabel: "Production",
      label: "Production (50%)",
      value: "Production"
    }, {
      activatorLabel: "Staging",
      label: "Staging (100%)",
      value: "Staging"
    }];
    component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      items: itemsWithActivatorLabel,
      value: "Production",
      onChange: onChange
    }));
    var activator = component.find("Button");
    expect(activator.text()).toBe("Production");
  });
  it("should display initialPlaceholder if provided", function () {
    component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      items: items,
      initialPlaceholder: "Select a value...",
      onChange: onChange
    }));
    var activator = component.find("Button");
    expect(activator.text()).toBe("Select a value...");
  });
  it("should display items with checkboxes if isMultiSelect is true", function () {
    component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      isMultiSelect: true,
      items: items,
      initialPlaceholder: "Select a value...",
      onChange: onChange
    }));
    var activator = component.find("Button");
    activator.simulate("click");
    expect(component.find('input[type="checkbox"]').length).toBe(2);
  });
  it("should display items with checked checkboxes if item's isSelected is true", function () {
    component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      isMultiSelect: true,
      items: multiSelectItems,
      initialPlaceholder: "Select a value...",
      onChange: onChange
    }));
    var activator = component.find("Button");
    activator.simulate("click");
    expect(component.find("Checkbox").length).toBe(2);
    expect(component.find("Checkbox").last().prop("checked")).toBe(true);
  });
  it("should add a label when the buttonContent specifies one", function () {
    component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      buttonContent: {
        label: "date",
        content: "test"
      },
      items: items,
      initialPlaceholder: "Select a value...",
      onChange: onChange
    }));
    expect(component.find(".oui-assistive-text").length).toBe(1);
  });
  it("should add a label when label specifies one", function () {
    component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      label: "date",
      items: items,
      initialPlaceholder: "Select a value...",
      onChange: onChange
    }));
    expect(component.find(".oui-label").length).toBe(1);
  });
  it("should add a note when note specifies one", function () {
    component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      note: "You have an error",
      items: items,
      initialPlaceholder: "Select a value...",
      onChange: onChange
    }));
    expect(component.find(".oui-form-note").length).toBe(1);
  });
  describe("links", function () {
    describe("if linkURL and linkText are provided", function () {
      beforeEach(function () {
        component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
          isMultiSelect: true,
          items: [{
            label: "label0",
            value: "value0",
            description: "description0",
            linkURL: "#",
            linkText: "some link"
          }].concat(items),
          initialPlaceholder: "Select a value...",
          onChange: onChange
        }));
        var activator = component.find("Button");
        activator.simulate("click");
      });
      it("should display text and link", function () {
        expect(component.find("DropdownListItem").at(0).find("Link").length).toBe(1);
        expect(component.find("DropdownListItem").at(0).find("Link").text()).toBe("some link");
        expect(component.find("DropdownListItem").at(0).find("Link").props().href).toBe("#");
      });
      it("should not close the dropdown if clicked", function () {
        var link = component.find("DropdownListItem").at(0).find("Link");
        link.simulate("click"); // clicking on the link shouldn't close the dropdown
        // check that the dropdown contents box doesn't close on link click

        var dropdownContents = component.find("DropdownContents");
        expect(dropdownContents.length).toBe(1);
      });
    });
    describe("if linkURL is not provided", function () {
      it("should not display text and link", function () {
        component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
          items: [{
            label: "label0",
            value: "value0",
            description: "description0",
            linkURL: "#"
          }].concat(items),
          initialPlaceholder: "Select a value...",
          onChange: onChange
        }));
        var activator = component.find("Button");
        activator.simulate("click");
        expect(component.find("DropdownListItem").at(0).find("Link").length).toBe(0);
      });
    });
    describe("if linkText is not provided", function () {
      it("should not display text and link", function () {
        component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
          items: [{
            label: "label0",
            value: "value0",
            description: "description0",
            linkText: "some link"
          }].concat(items),
          initialPlaceholder: "Select a value...",
          onChange: onChange
        }));
        var activator = component.find("Button");
        activator.simulate("click");
        expect(component.find("DropdownListItem").at(0).find("Link").length).toBe(0);
      });
    });
  });
  describe("when given a className", function () {
    it("appends it to the input element", function () {
      var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
        className: "extra-class",
        items: items,
        value: "value 2",
        onChange: onChange
      }));
      expect(component.prop("className").includes("extra-class")).toBe(true);
    });
  });
  describe("when given an unknown prop", function () {
    it("passes it to the input element", function () {
      // @ts-ignore: `unknownProps` is not part of any typed interface and therefore a good test value.
      var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
        unknownProp: "some value",
        items: items,
        value: "value 2",
        onChange: onChange
      }));
      expect(component).toHaveProp({
        unknownProp: "some value"
      });
    });
  });
});