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

Optimizely's Component Library.

"use strict";

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

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

var _enzyme = require("enzyme");

var _enzymeToJson = require("enzyme-to-json");

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

describe("components/Select", function () {
  it("should render correctly when declared with no properties", function () {
    var output = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], null, _react["default"].createElement("option", {
      value: "one"
    }, "This is option one"), _react["default"].createElement("option", {
      value: "two"
    }, "And this is option two")));
    expect((0, _enzymeToJson.shallowToJson)(output)).toMatchSnapshot();
  });
  it("should render correctly when isDisabled prop is declared", function () {
    var output = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
      isDisabled: true
    }, _react["default"].createElement("option", {
      value: "one"
    }, "This is option one"), _react["default"].createElement("option", {
      value: "two"
    }, "And this is option two")));
    expect((0, _enzymeToJson.shallowToJson)(output)).toMatchSnapshot();
  });
  it("should render correctly when a label is supplied", function () {
    var output = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
      isDisabled: false,
      label: "Test Select"
    }, _react["default"].createElement("option", {
      value: "one"
    }, "This is option one"), _react["default"].createElement("option", {
      value: "two"
    }, "And this is option two")));
    expect((0, _enzymeToJson.shallowToJson)(output)).toMatchSnapshot();
  });
  it("should render correctly when isFullWidth is declared", function () {
    var output = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
      isDisabled: false,
      label: "Test Select",
      isFullWidth: true
    }, _react["default"].createElement("option", {
      value: "one"
    }, "This is option one"), _react["default"].createElement("option", {
      value: "two"
    }, "And this is option two")));
    expect((0, _enzymeToJson.shallowToJson)(output)).toMatchSnapshot();
  });
  it("should render correctly when displayError is declared and a note is present", function () {
    var output = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
      isDisabled: false,
      label: "Test Select",
      note: "This field is required",
      displayError: true
    }, _react["default"].createElement("option", {
      value: "one"
    }, "This is option one"), _react["default"].createElement("option", {
      value: "two"
    }, "And this is option two")));
    expect((0, _enzymeToJson.shallowToJson)(output)).toMatchSnapshot();
  });
  it("should call the onChange function passed in", function () {
    var handler = {
      onChange: function onChange(event) {
        return null;
      }
    };
    spyOn(handler, "onChange");
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      onChange: handler.onChange
    }, _react["default"].createElement("option", {
      value: "one"
    }, "This is option one"), _react["default"].createElement("option", {
      value: "two"
    }, "And this is option two")));
    component.simulate("change");
    expect(handler.onChange).toHaveBeenCalled();
  });
  describe("when given a className", function () {
    it("appends it to the select element", function () {
      var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
        className: "extra-class"
      }));
      expect(component.find("select").prop("className").includes("extra-class")).toBe(true);
    });
  });
  describe("when given an unknown prop", function () {
    it("passes it to the select 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"
      }));
      expect(component.find("select")).toHaveProp({
        unknownProp: "some value"
      });
    });
  });
});