optimizely-oui
Version:
Optimizely's Component Library.
197 lines (190 loc) • 8.33 kB
JavaScript
"use strict";
var _react = _interopRequireDefault(require("react"));
var _enzyme = require("enzyme");
var _ = _interopRequireDefault(require(".."));
var _Link = _interopRequireDefault(require("../../Link"));
var _Switch = _interopRequireDefault(require("../../Switch"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
describe("ManagerSideNav", function () {
it("should render a default nav", function () {
var component = (0, _enzyme.mount)(_react["default"].createElement(_["default"], null, _react["default"].createElement(_["default"].Header, {
hasBackLink: true,
backLinkHref: "#features",
backLinkText: "Features",
projectName: "CTP Bank - Full Stack",
primaryTitle: "recurring_deposit",
secondaryTitle: "Recurring Deposit"
}), _react["default"].createElement(_["default"].NavList, {
label: "Rules"
}, _react["default"].createElement(_["default"].NavItem, {
isActive: false,
leftContent: _react["default"].createElement(_Link["default"], {
isFullWidth: true,
href: "#variations"
}, "Variations")
}))));
expect(component.find(".sidenav__body").length).toBe(1);
expect(component.find(".sidenav__section").length).toBe(1);
expect(component.find(".sidenav__section__title").length).toBe(1);
});
it("should not render a proper nav when correct children not supplied", function () {
var component = (0, _enzyme.mount)(_react["default"].createElement(_["default"], null, _react["default"].createElement(_["default"].Header, {
hasBackLink: true,
backLinkHref: "#features",
backLinkText: "Features",
projectName: "CTP Bank - Full Stack",
primaryTitle: "recurring_deposit",
secondaryTitle: "Recurring Deposit"
}), _react["default"].createElement(_["default"].NavItem, {
isActive: false,
leftContent: _react["default"].createElement(_Link["default"], {
isFullWidth: true,
href: "#variations"
}, "Variations")
})));
expect(component.find(".sidenav__body").length).toBe(1);
expect(component.find(".sidenav__section").length).toBe(0);
expect(component.find(".nav-list__link").length).toBe(0);
});
describe("Header", function () {
it("should render a back link when hasBackLink is true", function () {
var component = (0, _enzyme.mount)(_react["default"].createElement(_["default"].Header, {
hasBackLink: true,
backLinkHref: "#features",
backLinkText: "Features",
projectName: "CTP Bank - Full Stack",
primaryTitle: "recurring_deposit",
secondaryTitle: "Recurring Deposit"
}));
expect(component.find(".nav-link--back").length).toBe(1);
});
it("should call the back link callback when link is clicked", function () {
var backLinkClickSpy = jest.fn();
var component = (0, _enzyme.mount)(_react["default"].createElement(_["default"].Header, {
hasBackLink: true,
backLinkHref: "#features",
backLinkText: "Features",
backLinkOnClick: backLinkClickSpy,
projectName: "CTP Bank - Full Stack",
primaryTitle: "recurring_deposit",
secondaryTitle: "Recurring Deposit"
}));
component.find(".nav-link--back").simulate("click");
expect(backLinkClickSpy).toHaveBeenCalled();
});
it("should style the title properly when usesMonospaceStyling is true", function () {
var backLinkClickSpy = jest.fn();
var component = (0, _enzyme.mount)(_react["default"].createElement(_["default"].Header, {
hasBackLink: true,
backLinkHref: "#features",
backLinkText: "Features",
backLinkOnClick: backLinkClickSpy,
usesMonospaceStyling: true,
projectName: "CTP Bank - Full Stack",
primaryTitle: "recurring_deposit",
secondaryTitle: "Recurring Deposit"
}));
expect(component.find(".delta").length).toBe(1);
expect(component.find(".monospace").length).toBe(1);
});
it("should render children for any details passed in", function () {
var component = (0, _enzyme.mount)(_react["default"].createElement(_["default"].Header, {
hasBackLink: true,
backLinkHref: "#features",
backLinkText: "Features",
usesMonospaceStyling: true,
projectName: "CTP Bank - Full Stack",
primaryTitle: "recurring_deposit",
secondaryTitle: "Recurring Deposit"
}, _react["default"].createElement(_["default"].HeaderDetails, {
items: [{
label: "Created by",
value: "Sophia Hernandez"
}, {
label: "Edited by",
value: "Sophia Hernandez"
}]
})));
expect(component.find(".sidenav__details").length).toBe(1);
expect(component.find(".sidenav__details__title").length).toBe(2);
expect(component.find(".sidenav__details__item").length).toBe(2);
});
});
describe("NavItem", function () {
it("should render left aligned content when leftContent is passed in", function () {
var component = (0, _enzyme.mount)(_react["default"].createElement(_["default"].NavItem, {
isActive: false,
leftContent: _react["default"].createElement(_Link["default"], {
isFullWidth: true,
href: "#variations"
}, "Variations")
}));
expect(component.find(".nav-list__link").length).toBe(1);
expect(component.find(".link").length).toBe(1);
expect(component.find(".is-active").length).toBe(0);
});
it("should render right aligned content when rightContent is passed in", function () {
var component = (0, _enzyme.mount)(_react["default"].createElement(_["default"].NavItem, {
isActive: false,
testSection: "dev-item",
leftContent: _react["default"].createElement(_Link["default"], {
isFullWidth: true,
href: "#long"
}, _react["default"].createElement("p", {
className: "flush line--tight"
}, "Another environment with a very long name"), _react["default"].createElement("p", {
className: "micro muted flush line--tight"
}, "Environment")),
rightContent: _react["default"].createElement(_Switch["default"], {
ariaLabel: "Turn feature on in Another Environment",
elementId: "long-toggle",
checked: false
})
}));
expect(component.find(".link").length).toBe(1);
expect(component.find(".oui-switch").length).toBe(1);
});
it("should render an active item when isActive is true", function () {
var component = (0, _enzyme.mount)(_react["default"].createElement(_["default"].NavItem, {
isActive: true,
leftContent: _react["default"].createElement(_Link["default"], {
isFullWidth: true,
href: "#variations"
}, "Variations")
}));
expect(component.find(".is-active").length).toBe(1);
});
it("should correctly trigger any actions within the content", function () {
var linkClickSpy = jest.fn();
var component = (0, _enzyme.mount)(_react["default"].createElement(_["default"].NavItem, {
isActive: true,
leftContent: _react["default"].createElement(_Link["default"], {
isFullWidth: true,
onClick: linkClickSpy,
href: "#variations"
}, "Variations")
}));
component.find(".link").simulate("click");
expect(linkClickSpy).toHaveBeenCalled();
});
});
describe("when given a className", function () {
it("appends it to the root element", function () {
var component = (0, _enzyme.shallow)(_react["default"].createElement(_["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(_["default"], {
unknownProp: "some value"
}, "Text"));
expect(component).toHaveProp({
unknownProp: "some value"
});
});
});
});