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

Optimizely's Component Library.

"use strict";

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

var _enzyme = require("enzyme");

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

var _index2 = _interopRequireDefault(require("../../Input/index"));

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

describe("Form Component ", function () {
  it("renders any children passed in", function () {
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      title: "This is a Form"
    }, _react["default"].createElement(_index["default"].Section, null, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_index2["default"], {
      label: "Input label",
      note: "A short description or note about this field.",
      placeholder: "Just a placeholder",
      testSection: "input-1-form-test",
      type: "text"
    })), _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_index2["default"], {
      label: "Input label",
      note: "A short description or note about this field.",
      placeholder: "Just a placeholder",
      testSection: "input-2-form-test",
      type: "text"
    })))));
    expect(component.find('[data-test-section="input-1-form-test"]').length).toBe(1);
    expect(component.find('[data-test-section="input-2-form-test"]').length).toBe(1);
  });
  it("renders a description when passed in", function () {
    var descriptionString = "This is a description";
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      title: "This is a Form",
      description: descriptionString
    }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_index2["default"], {
      label: "Input label",
      note: "A short description or note about this field.",
      placeholder: "Just a placeholder",
      testSection: "input-1-form-test",
      type: "text"
    }))));
    expect(component.find(".oui-form-fields").containsMatchingElement(_react["default"].createElement("p", null, descriptionString))).toBe(true);
  });
  it("should render a popover when helpIcon is clicked", function () {
    var popoverString = "This is a popover string";
    var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
      title: "This is a Form",
      helpIcon: true,
      popoverText: popoverString
    }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_index2["default"], {
      label: "Input label",
      note: "A short description or note about this field.",
      placeholder: "Just a placeholder",
      testSection: "input-1-form-test",
      type: "text"
    }))));
    component.find(".oui-form-fields").find("HelpPopover").simulate("click");
    var popOverContent = component.find("Popover");
    expect(popOverContent.length).toBe(1);
    expect(popOverContent.text()).toContain(popoverString);
  });
  describe("Form section", function () {
    it("renders a description when passed in", function () {
      var descriptionString = "This is a section description";
      var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], null, _react["default"].createElement(_index["default"].Section, {
        testSection: "section-test-section",
        title: "This is a section",
        description: descriptionString
      }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_index2["default"], {
        label: "Input label",
        note: "A short description or note about this field.",
        placeholder: "Just a placeholder",
        testSection: "input-1-form-test",
        type: "text"
      })))));
      expect(component.find('[data-test-section="section-test-section"]').containsMatchingElement(_react["default"].createElement("div", null, descriptionString))).toBe(true);
    });
    it("should render a popover when helpIcon is clicked", function () {
      var popoverString = "This is a popover string";
      var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
        title: "This is a Form"
      }, _react["default"].createElement(_index["default"].Section, {
        testSection: "section-test-section",
        title: "This is a section",
        helpIcon: true,
        popoverText: popoverString
      }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_index2["default"], {
        label: "Input label",
        note: "A short description or note about this field.",
        placeholder: "Just a placeholder",
        testSection: "input-1-form-test",
        type: "text"
      })))));
      component.find('[data-test-section="section-test-section"]').find("HelpPopover").simulate("click");
      var popOverContent = component.find("Popover");
      expect(popOverContent.length).toBe(1);
      expect(popOverContent.text()).toContain(popoverString);
    });
    describe("Form row", function () {
      it("renders any children passed in", function () {
        var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
          title: "This is a Form"
        }, _react["default"].createElement(_index["default"].Section, null, _react["default"].createElement(_index["default"].Row, {
          testSection: "row-test-section"
        }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_index2["default"], {
          label: "Input label",
          note: "A short description or note about this field.",
          placeholder: "Just a placeholder",
          testSection: "input-1-form-test",
          type: "text"
        })), _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_index2["default"], {
          label: "Input label",
          note: "A short description or note about this field.",
          placeholder: "Just a placeholder",
          testSection: "input-2-form-test",
          type: "text"
        }))))));
        expect(component.find('[data-test-section="input-1-form-test"]').length).toBe(1);
        expect(component.find('[data-test-section="input-2-form-test"]').length).toBe(1);
      });
      it("takes up full width when isFullWidth is true", function () {
        var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
          title: "This is a Form"
        }, _react["default"].createElement(_index["default"].Section, null, _react["default"].createElement(_index["default"].Row, {
          isFullWidth: true,
          testSection: "row-test-section"
        }, _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_index2["default"], {
          label: "Input label",
          note: "A short description or note about this field.",
          placeholder: "Just a placeholder",
          testSection: "input-1-form-test",
          type: "text"
        })), _react["default"].createElement(_index["default"].Item, null, _react["default"].createElement(_index2["default"], {
          label: "Input label",
          note: "A short description or note about this field.",
          placeholder: "Just a placeholder",
          testSection: "input-2-form-test",
          type: "text"
        }))))));
        expect(component.find('[data-test-section="row-test-section"]').find(".flex--1").length).toBe(2);
      });
    });
  });
  describe("when given a className", function () {
    it("appends it to the root element", function () {
      var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
        className: "extra-class"
      }, "Text"));
      expect(component.prop("className").includes("extra-class")).toBe(true);
    });
  });
  describe("when given an unknown prop", function () {
    it("passes it to the root 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"
      }, "Text"));
      expect(component).toHaveProp({
        unknownProp: "some value"
      });
    });
  });
});