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

Optimizely's Component Library.

"use strict";

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

var _enzyme = require("enzyme");

var _Sidebar = _interopRequireDefault(require("../Sidebar"));

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

describe("components/Sidebar", function () {
  var component;
  var mockSidebarContent;
  var mockWidth;
  beforeEach(function () {
    mockSidebarContent = "mock sidebar content";
    mockWidth = 100;
    component = (0, _enzyme.shallow)(_react["default"].createElement(_Sidebar["default"], {
      width: mockWidth,
      testSection: "oui-sidebar"
    }, _react["default"].createElement("div", {
      "data-test-section": "sidebar-child"
    }, mockSidebarContent)));
  });
  afterEach(function () {
    component.unmount();
  });
  describe("basic rendering", function () {
    it("should render component with default props", function () {
      var sidebarComponent = component.find('[data-test-section="oui-sidebar"]');
      expect(sidebarComponent.exists()).toBe(true);
      expect(sidebarComponent.name()).toBe("div");
      expect(sidebarComponent.hasClass("oui-sidebar")).toEqual(true);
      expect(sidebarComponent.hasClass("oui-sidebar--open-left")).toEqual(false);
      expect(sidebarComponent.hasClass("oui-sidebar--open-right")).toEqual(false);
      expect(sidebarComponent.hasClass("position--absolute")).toEqual(true);
      expect(sidebarComponent.hasClass("height--1-1")).toEqual(true);
      var props = sidebarComponent.props();
      expect(props.style).toHaveProperty("maxWidth", 0);
      expect(props.style).toHaveProperty("width", 0);
      expect(props["data-oui-component"]).toBe(true);
      var childComponent = component.find('[data-test-section="sidebar-child"]');
      expect(childComponent.exists()).toBe(false);
    });
    it("should render children when sidebar is open", function () {
      component.setProps({
        isOpen: true
      });
      var childComponent = component.find('[data-test-section="sidebar-child"]');
      expect(childComponent.exists()).toBe(true);
      expect(childComponent.text()).toEqual(mockSidebarContent);
    });
    it("should add docked class when Sidebar is docked", function () {
      expect(component.find('[data-test-section="oui-sidebar"]').hasClass("position--relative")).toEqual(false);
      component.setProps({
        docked: true
      });
      expect(component.find('[data-test-section="oui-sidebar"]').hasClass("position--relative")).toEqual(true);
    });
    it("should add position:fixed class when Sidebar is sticky and not docked", function () {
      expect(component.find('[data-test-section="oui-sidebar"]').hasClass("position--fixed")).toEqual(false);
      component.setProps({
        sticky: true
      });
      expect(component.find('[data-test-section="oui-sidebar"]').hasClass("position--fixed")).toEqual(true);
      component.setProps({
        sticky: true,
        docked: true
      });
      expect(component.find('[data-test-section="oui-sidebar"]').hasClass("position--fixed")).toEqual(false);
      component.setProps({
        sticky: true,
        docked: false
      });
      expect(component.find('[data-test-section="oui-sidebar"]').hasClass("position--fixed")).toEqual(true);
    });
    it("should add open left props when Sidebar anchor is left", function () {
      component.setProps({
        isOpen: false,
        anchor: "left"
      });
      var closedProps = component.find('[data-test-section="oui-sidebar"]').props();
      expect(closedProps.style).toHaveProperty("left", -1 * mockWidth);
      expect(closedProps.style).not.toHaveProperty("right");
      component.setProps({
        isOpen: true,
        anchor: "left"
      });
      var openProps = component.find('[data-test-section="oui-sidebar"]').props();
      expect(openProps.style).toHaveProperty("left", 0);
      expect(openProps.style).not.toHaveProperty("right");
    });
    it("should add open right class when Sidebar anchor is right", function () {
      component.setProps({
        isOpen: false,
        anchor: "right"
      });
      var closedSidebar = component.find('[data-test-section="oui-sidebar"]');
      expect(closedSidebar.hasClass("visibility--hidden")).toBe(true);
      var closedProps = closedSidebar.props();
      expect(closedProps.style).toHaveProperty("right", 0);
      expect(closedProps.style).not.toHaveProperty("left");
      component.setProps({
        isOpen: true,
        anchor: "right"
      });
      var openSidebar = component.find('[data-test-section="oui-sidebar"]');
      expect(openSidebar.hasClass("visibility--hidden")).not.toBe(true);
      var openProps = openSidebar.props();
      expect(openProps.style).toHaveProperty("right", 0);
      expect(openProps.style).not.toHaveProperty("left");
    });
  });
  describe("resizable sidebar", function () {
    beforeEach(function () {
      component.setProps({
        isResizable: true
      });
    });
    it("should render component with default props", function () {
      var sidebarComponent = component.find('[data-test-section="oui-sidebar"]');
      expect(sidebarComponent.name()).toBe("Resizable");
      expect(sidebarComponent.exists()).toBe(true);
      expect(sidebarComponent.hasClass("oui-sidebar")).toEqual(true);
      expect(sidebarComponent.hasClass("oui-sidebar--open-left")).toEqual(false);
      expect(sidebarComponent.hasClass("oui-sidebar--open-right")).toEqual(false);
      expect(sidebarComponent.hasClass("position--absolute")).toEqual(true);
      expect(sidebarComponent.hasClass("height--1-1")).toEqual(true);
      var props = sidebarComponent.props();
      expect(props.style).toHaveProperty("maxWidth", 0);
      expect(props.style).toHaveProperty("width", 0);
      expect(props["data-oui-component"]).toBe(true);
      var childComponent = component.find('[data-test-section="sidebar-child"]');
      expect(childComponent.exists()).toBe(false);
    });
    it("should render a div instead of resizable component when docked is true", function () {
      component.setProps({
        docked: true
      });
      var sidebarComponent = component.find('[data-test-section="oui-sidebar"]');
      expect(sidebarComponent.name()).toBe("div");
    });
    it("should enable horizontal resize from right when anchor is left", function () {
      component.setProps({
        anchor: "left"
      });
      var sidebarComponent = component.find('[data-test-section="oui-sidebar"]');
      var props = sidebarComponent.props();
      var resizeEnabled = {
        top: false,
        right: true,
        bottom: false,
        left: false,
        topRight: false,
        bottomRight: false,
        bottomLeft: false,
        topLeft: false
      };
      expect(props.enable).toEqual(resizeEnabled);
    });
    it("should enable horizontal resize from left when anchor is right", function () {
      component.setProps({
        anchor: "right"
      });
      var sidebarComponent = component.find('[data-test-section="oui-sidebar"]');
      var props = sidebarComponent.props();
      var resizeEnabled = {
        top: false,
        right: false,
        bottom: false,
        left: true,
        topRight: false,
        bottomRight: false,
        bottomLeft: false,
        topLeft: false
      };
      expect(props.enable).toEqual(resizeEnabled);
    });
    it("should set width in defaultSize prop of resizable component when isOpen is true", function () {
      component.setProps({
        width: 199,
        isOpen: true
      });
      var sidebarComponent = component.find('[data-test-section="oui-sidebar"]');
      var props = sidebarComponent.props();
      var defaultSize = {
        width: 199,
        height: "auto"
      };
      expect(props.defaultSize).toEqual(defaultSize);
    });
    it("should set 0 for width in defaultSize prop of resizable component when isOpen is false", function () {
      component.setProps({
        width: 199,
        isOpen: false
      });
      var sidebarComponent = component.find('[data-test-section="oui-sidebar"]');
      var props = sidebarComponent.props();
      var defaultSize = {
        width: 0,
        height: "auto"
      };
      expect(props.defaultSize).toEqual(defaultSize);
    });
    it("should set minWidth and maxWidth props in resizable component", function () {
      component.setProps({
        minWidth: 99,
        maxWidth: 199
      });
      var sidebarComponent = component.find('[data-test-section="oui-sidebar"]');
      var props = sidebarComponent.props();
      expect(props.minWidth).toEqual(99);
      expect(props.maxWidth).toEqual(199);
    });
  });
  describe("when given a className", function () {
    it("appends it to the root element", function () {
      var component = (0, _enzyme.shallow)(_react["default"].createElement(_Sidebar["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(_Sidebar["default"], {
        unknownProp: "some value"
      }, "Text"));
      expect(component).toHaveProp({
        unknownProp: "some value"
      });
    });
  });
});