optimizely-oui
Version:
Optimizely's Component Library.
249 lines (241 loc) • 10.8 kB
JavaScript
"use strict";
var _react = _interopRequireDefault(require("react"));
var _index = _interopRequireDefault(require("../index"));
var _enzyme = require("enzyme");
var _Dropdown = _interopRequireDefault(require("../../Dropdown"));
var _ButtonIcon = _interopRequireDefault(require("../../ButtonIcon"));
var _Link = _interopRequireDefault(require("../../Link"));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
/* eslint-disable no-console */
describe("components/Tile", function () {
it("should render default, basic tile", function () {
var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
name: "Goose"
}));
expect(component.find(".oui-tile").containsMatchingElement(_react["default"].createElement("p", null, "Goose"))).toBe(true);
});
it("should render a description when provided", function () {
var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
name: "Goose",
description: "Duck"
}));
expect(component.find(".oui-tile").containsMatchingElement(_react["default"].createElement("p", null, "Duck"))).toBe(true);
});
it("should render a button when onTileClick is provided", function () {
var mockClickFunction = jest.fn();
var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
name: "Goose",
description: "Duck",
onTileClick: mockClickFunction
}));
expect(component.find(".oui-button").length).toBe(1);
});
it("should not render a button when onTileClick is not provided", function () {
var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
name: "Goose",
description: "Duck"
}));
expect(component.find(".oui-button").length).toBe(0);
});
it("should call the function passed in for `onTileClick` when the main tile is clicked", function () {
var mockClickFunction = jest.fn();
var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
name: "Alpha",
description: "ID:12345678",
onTileClick: mockClickFunction
}));
component.find("Button").simulate("click");
expect(mockClickFunction).toHaveBeenCalled();
});
it("should call the function passed in for an action item when the button icon is clicked", function () {
var mockClickFunction = jest.fn();
var mockDeleteClick = jest.fn();
var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
name: "Alpha",
description: "ID:12345678",
onTileClick: mockClickFunction,
onDismiss: mockDeleteClick
}));
component.find(".oui-button-icon").simulate("click");
expect(mockClickFunction).not.toHaveBeenCalled();
expect(mockDeleteClick).toHaveBeenCalled();
});
it("should render the corresponding ButtonIcons when functions are passed in", function () {
var mockClickFunction = jest.fn();
var mockDeleteClick = jest.fn();
var mockCopyClick = jest.fn();
var mockEditClick = jest.fn();
console.error = jest.fn();
var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
name: "Alpha",
description: "ID:12345678",
onTileClick: mockClickFunction,
onCopy: mockCopyClick,
onDismiss: mockDeleteClick,
onEdit: mockEditClick,
resultsLink: "http://google.com"
}));
expect(component.find(".oui-button-icon").length).toBe(4);
});
it("should render a results link icon correctly", function () {
var testResultsLink = "http://google.com";
var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
name: "Alpha",
description: "ID:12345678",
resultsLink: testResultsLink
}));
var link = component.find(_Link["default"]);
expect(link.exists()).toBeTruthy();
expect(link.props()).toMatchObject({
href: testResultsLink
});
var buttonIcon = component.find(_ButtonIcon["default"]);
expect(buttonIcon.exists()).toBeTruthy();
expect(buttonIcon.props()).toMatchObject({
iconName: "winner",
size: "medium",
style: "plain",
iconFill: "default",
title: "View Results"
});
});
it("should render the title in monospace when `usesMonospaceTitle` is true", function () {
var mockClickFunction = jest.fn();
var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
name: "Alpha",
description: "ID:12345678",
onTileClick: mockClickFunction,
usesMonospaceName: true
}));
expect(component.find(".monospace").length).toBe(1);
});
it("should not render the drag handle when `isDraggable` is false", function () {
var mockClickFunction = jest.fn();
var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
name: "Alpha",
description: "ID:12345678",
onTileClick: mockClickFunction,
isDraggable: false
}));
expect(component.find(".oui-tile__drag-handle").length).toBe(0);
});
it("should render the drag handle when `isDraggable` is true", function () {
var mockClickFunction = jest.fn();
var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
name: "Alpha",
description: "ID:12345678",
onTileClick: mockClickFunction,
isDraggable: true
}));
expect(component.find(".oui-tile__drag-handle").length).toBe(1);
});
it("should render the error popover when `hasWarning` is true", function () {
var mockClickFunction = jest.fn();
var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
name: "Alpha",
description: "ID:12345678",
onTileClick: mockClickFunction,
warningTitleAndBodyContent: ["Test Warning", " Warning Content"],
testSection: "test-tile"
}));
expect(component.find('[data-test-section="test-tile-warning-popover"]').length).toBe(1);
});
it("should not show the unsaved changes indicator if `warningTitleAndBodyContent` is provided", function () {
var mockClickFunction = jest.fn();
var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
name: "Alpha",
description: "ID:12345678",
onTileClick: mockClickFunction,
testSection: "test-tile",
warningTitleAndBodyContent: ["Test Warning", " Warning Content"],
unsavedChangesText: "You have unsaved changes"
}));
expect(component.find('[data-test-section="test-tile-warning-popover"]').length).toBe(1);
expect(component.find('[data-test-section="test-tile-unsaved-changes-indicator"]').length).toBe(0);
});
it("should NOT render the unsaved changes status indicator when `unsavedChangesText` is not provided", function () {
var mockClickFunction = jest.fn();
var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
name: "Alpha",
description: "ID:12345678",
onTileClick: mockClickFunction,
testSection: "test-tile"
}));
expect(component.find('[data-test-section="test-tile-unsaved-changes-indicator"]').length).toBe(0);
});
it("should NOT render the unsaved changes status indicator when `unsavedChangesText` is an empty string", function () {
var mockClickFunction = jest.fn();
var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
name: "Alpha",
description: "ID:12345678",
onTileClick: mockClickFunction,
testSection: "test-tile",
unsavedChangesText: ""
}));
expect(component.find('[data-test-section="test-tile-unsaved-changes-indicator"]').length).toBe(0);
});
it("should render the unsaved changes status indicator when `unsavedChangesText` is non-empty string", function () {
var mockClickFunction = jest.fn();
var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
name: "Alpha",
description: "ID:12345678",
onTileClick: mockClickFunction,
testSection: "test-tile",
unsavedChangesText: "This has unsaved changes"
}));
expect(component.find('[data-test-section="test-tile-unsaved-changes-indicator"]').length).toBe(1);
expect(component.find("Poptip").props().content).toBe("This has unsaved changes");
});
it("should render a `status` when provided", function () {
var component = (0, _enzyme.shallow)(_react["default"].createElement(_index["default"], {
name: "Goose",
description: "Duck",
status: "Running"
}));
expect(component.find(".oui-tile").containsMatchingElement(_react["default"].createElement("p", null, "Running"))).toBe(true);
});
it("should render a dropdown menu when `dropdownItems` are passed in", function () {
var mockClickFunction = jest.fn();
var mockDropdownAFunction = jest.fn();
var component = (0, _enzyme.mount)(_react["default"].createElement(_index["default"], {
name: "Alpha",
testSection: "test-tile",
description: "ID:12345678",
onTileClick: mockClickFunction,
dropdownItems: [_react["default"].createElement(_Dropdown["default"].ListItem, {
key: 2,
removeBorderTop: true
}, _react["default"].createElement(_Dropdown["default"].BlockLink, {
onClick: mockDropdownAFunction,
testSection: "dropdown-block-link-duplicate"
}, _react["default"].createElement(_Dropdown["default"].BlockLinkText, {
text: "Duplicate"
})))]
}));
expect(component.find(".oui-button-icon").length).toBe(1);
component.find(".oui-button-icon").simulate("click");
expect(component.find(".oui-dropdown").length).toBe(1);
expect(component.find(".oui-dropdown__item").length).toBe(1);
component.find('[data-test-section="dropdown-block-link-duplicate"]').simulate("click");
expect(mockDropdownAFunction).toHaveBeenCalledTimes(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"
}));
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"
}));
expect(component).toHaveProp({
unknownProp: "some value"
});
});
});
});