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

Optimizely's Component Library.

"use strict";

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

var _enzyme = require("enzyme");

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

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

var getTestSection = function getTestSection(component, testSection) {
  return component.find("[data-test-section=\"".concat(testSection, "\"]"));
};

describe("components/NavBar", function () {
  var component;
  var handlerObj;
  describe("When Navbar is Open", function () {
    beforeEach(function () {
      handlerObj = {
        accountSwitcherHandlerSpy: function accountSwitcherHandlerSpy() {
          return null;
        },
        onEmulateClickSpy: function onEmulateClickSpy() {
          return null;
        },
        SecondaryLinkClickSpy: function SecondaryLinkClickSpy() {
          return null;
        },
        PrimaryLinkClickSpy: function PrimaryLinkClickSpy() {
          return null;
        }
      };
      spyOn(handlerObj, "accountSwitcherHandlerSpy");
      spyOn(handlerObj, "onEmulateClickSpy");
      spyOn(handlerObj, "SecondaryLinkClickSpy");
      spyOn(handlerObj, "PrimaryLinkClickSpy");
      component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
        isOpen: true,
        logoUrl: "#",
        title: "Test Project",
        badgeText: "WEB",
        badgeColor: "draft",
        homeUrl: "http://optimizely.com",
        trialContent: _react["default"].createElement("div", {
          className: "push-double--bottom push-double--left",
          "data-test-section": "trial-content-section"
        }, _react["default"].createElement("b", null, "5"), " days")
      }, _react["default"].createElement(_index["default"].PrimaryLink, {
        iconName: "projects",
        type: "pushstate",
        linkLabel: "Projects",
        testSection: "projects",
        onClick: handlerObj.PrimaryLinkClickSpy
      }), _react["default"].createElement(_index["default"].SecondaryLink, {
        onClick: handlerObj.SecondaryLinkClickSpy,
        iconName: "feedback",
        type: "link",
        linkLabel: "Feedback",
        testSection: "feedback"
      }), _react["default"].createElement(_index["default"].CurrentUserMenu, {
        showEmulate: true,
        onEmulateClick: handlerObj.onEmulateClickSpy,
        accountSwitcherItems: [{
          text: "Account 1",
          url: "#",
          description: "Account 1 Description",
          isCurrent: false
        }, {
          text: "Account 2",
          url: "#",
          description: "Account 2 Description",
          isCurrent: true
        }, {
          text: "Account 3",
          url: "#",
          description: "Account 3 Description",
          isCurrent: false
        }],
        accountSwitcherHandler: handlerObj.accountSwitcherHandlerSpy,
        userName: "Hassan Khalid",
        accountSettingsUrl: "#",
        profileUrl: "#",
        logoutUrl: "#",
        profileAvatarUrl: "https://app.optimizely.com/dist/static/img/profile-default-3da996cf8eaf436eb2f8f059bc277241.svg"
      })));
    });
    afterEach(function () {
      component.unmount();
    });
    it("should generate the correct class names when the Nav width is changed", function () {
      expect(component.find(".root-nav--open").length).toBe(1);
      component.setProps({
        isOpen: false
      });
      expect(component.find(".root-nav--open").length).toBe(0);
    });
    it("should show Projects Primary link", function () {
      expect(getTestSection(component, "projects-internal-link").length).toBe(1);
    });
    it("should show Feedback Secondary link", function () {
      expect(getTestSection(component, "feedback-external-link").length).toBe(1);
    });
    it("should show correct project name", function () {
      expect(getTestSection(component, "project-name").text()).toBe("Test Project");
    });
    it("should show correct project badge", function () {
      expect(getTestSection(component, "project-badge").text()).toBe("WEB");
    });
    it("should display trial content section", function () {
      expect(getTestSection(component, "trial-content-section").length).toBe(1);
    });
    it("should display Current User name", function () {
      expect(getTestSection(component, "nav-bar-user-name").length).toBe(1);
    });
    it("should display Emulate when showEmulate prop is true", function () {
      expect(getTestSection(component, "nav-bar-close-emulate").length).toBe(1);
    });
  });
  describe("When Navbar is Collapsed", function () {
    beforeEach(function () {
      handlerObj = {
        accountSwitcherHandlerSpy: function accountSwitcherHandlerSpy() {
          return null;
        },
        onEmulateClickSpy: function onEmulateClickSpy() {
          return null;
        },
        SecondaryLinkClickSpy: function SecondaryLinkClickSpy() {
          return null;
        },
        PrimaryLinkClickSpy: function PrimaryLinkClickSpy() {
          return null;
        }
      };
      spyOn(handlerObj, "accountSwitcherHandlerSpy");
      spyOn(handlerObj, "onEmulateClickSpy");
      spyOn(handlerObj, "SecondaryLinkClickSpy");
      spyOn(handlerObj, "PrimaryLinkClickSpy");
      component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
        isOpen: false,
        logoUrl: "#",
        title: "Test Project",
        badgeText: "WEB",
        badgeColor: "draft",
        homeUrl: "http://optimizely.com",
        trialContent: _react["default"].createElement("div", {
          className: "push-double--bottom push-double--left",
          "data-test-section": "trial-content-section"
        }, _react["default"].createElement("b", null, "5"), " days")
      }, _react["default"].createElement(_index["default"].PrimaryLink, {
        iconName: "projects",
        type: "pushstate",
        linkLabel: "Projects",
        testSection: "projects",
        onClick: handlerObj.PrimaryLinkClickSpy
      }), _react["default"].createElement(_index["default"].SecondaryLink, {
        onClick: handlerObj.SecondaryLinkClickSpy,
        iconName: "feedback",
        type: "link",
        linkLabel: "Feedback",
        testSection: "feedback"
      }), _react["default"].createElement(_index["default"].CurrentUserMenu, {
        showEmulate: true,
        onEmulateClick: handlerObj.onEmulateClickSpy,
        accountSwitcherItems: [{
          text: "Account 1",
          url: "#",
          description: "Account 1 Description",
          isCurrent: false
        }, {
          text: "Account 2",
          url: "#",
          description: "Account 2 Description",
          isCurrent: true
        }, {
          text: "Account 3",
          url: "#",
          description: "Account 3 Description",
          isCurrent: false
        }],
        accountSwitcherHandler: handlerObj.accountSwitcherHandlerSpy,
        userName: "Hassan Khalid",
        accountSettingsUrl: "#",
        profileUrl: "#",
        logoutUrl: "#",
        profileAvatarUrl: "https://app.optimizely.com/dist/static/img/profile-default-3da996cf8eaf436eb2f8f059bc277241.svg"
      })));
    });
    afterEach(function () {
      component.unmount();
    });
    it("should not display user name", function () {
      expect(getTestSection(component, "nav-bar-user-name").length).toBe(0);
    });
    it("should display trial content section", function () {
      expect(getTestSection(component, "trial-content-section").length).toBe(1);
    });
    it("should display popover when profile avatar image is clicked", function () {
      getTestSection(component, "account-switcher-popover").simulate("click");
      expect(getTestSection(component, "navbar-account-switcher-popover-content").length).toBe(1);
    });
    it("should display list of accounts in popover", function () {
      getTestSection(component, "account-switcher-popover").simulate("click");
      expect(getTestSection(component, "switch-account-row").length).toBe(3);
    });
    it("should display Emulate when showEmulate prop is true", function () {
      getTestSection(component, "account-switcher-popover").simulate("click");
      expect(getTestSection(component, "nav-bar-close-emulate").length).toBe(1);
    });
  });
  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"
      });
    });
  });
  describe("When icon is present", function () {
    it("should render the icon wrapper", function () {
      var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
        logoUrl: "#"
      }, "Text"));
      expect(component.find(".root-nav__logo").exists()).toBeTruthy();
    });
  });
  describe("When icon is not present", function () {
    it("should not render the icon wrapper", function () {
      var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
        logoUrl: ""
      }, "Text"));
      expect(component.find(".root-nav__logo").exists()).toBeFalsy();
    });
  });
});