wix-style-react
Version:
wix-style-react
585 lines (479 loc) • 21.2 kB
JavaScript
;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _enzyme = require('enzyme');
var _testkitSanity = require('../../test/utils/testkit-sanity');
var _Notification = require('./Notification.driver');
var _Notification2 = _interopRequireDefault(_Notification);
var _testkit = require('../../testkit');
var _enzyme2 = require('../../testkit/enzyme');
var _unit = require('../../test/utils/unit');
var _Notification3 = require('./Notification');
var _Notification4 = _interopRequireDefault(_Notification3);
var _Button = require('../Button');
var _Button2 = _interopRequireDefault(_Button);
var _TextLink = require('../TextLink');
var _TextLink2 = _interopRequireDefault(_TextLink);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
var renderNotificationWithProps = function renderNotificationWithProps() {
var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
return _react2.default.createElement(
_Notification4.default,
props,
_react2.default.createElement(
_Notification4.default.TextLabel,
null,
'label'
),
_react2.default.createElement(_Notification4.default.CloseButton, null)
);
};
describe('Notification', function () {
var render = (0, _unit.createRendererWithDriver)(_Notification2.default);
var createDriver = function createDriver(jsx) {
return render(jsx).driver;
};
afterEach(function () {
(0, _unit.cleanup)();
});
describe('Visibility', function () {
it('should verify component exists', function () {
var driver = createDriver(renderNotificationWithProps());
expect(driver.exists()).toBeTruthy();
});
it('should be visible', function () {
var driver = createDriver(renderNotificationWithProps({ show: true }));
expect(driver.visible()).toBeTruthy();
});
it('should not be visible', function () {
var driver = createDriver(renderNotificationWithProps({ show: false }));
expect(driver.visible()).toBeFalsy();
});
});
describe('Themes', function () {
it('should support default theme', function () {
var driver = createDriver(renderNotificationWithProps({ show: true }));
expect(driver.isStandardNotification()).toBeTruthy();
expect(driver.hasTheme('standard')).toBeTruthy();
});
it('should support standard theme', function () {
var driver = createDriver(renderNotificationWithProps({ show: true, theme: 'standard' }));
expect(driver.isStandardNotification()).toBeTruthy();
});
it('should support error theme', function () {
var driver = createDriver(renderNotificationWithProps({ show: true, theme: 'error' }));
expect(driver.isErrorNotification()).toBeTruthy();
});
it('should support success theme', function () {
var driver = createDriver(renderNotificationWithProps({ show: true, theme: 'success' }));
expect(driver.isSuccessNotification()).toBeTruthy();
});
it('should support warning theme', function () {
var driver = createDriver(renderNotificationWithProps({ show: true, theme: 'warning' }));
expect(driver.isWarningNotification()).toBeTruthy();
});
it('should support premium theme', function () {
var driver = createDriver(renderNotificationWithProps({ show: true, theme: 'premium' }));
expect(driver.isPremiumNotification()).toBeTruthy();
});
});
describe('Content', function () {
describe('Label', function () {
it('should show have a text to show', function () {
var labelText = 'Label Text';
var driver = createDriver(_react2.default.createElement(
_Notification4.default,
{ show: true },
_react2.default.createElement(
_Notification4.default.TextLabel,
null,
labelText
),
_react2.default.createElement(_Notification4.default.CloseButton, null)
));
expect(driver.getLabelText()).toEqual(labelText);
});
});
describe('Action Button', function () {
it('should have an action button', function () {
var actionButtonText = 'Action Button Text';
var driver = createDriver(_react2.default.createElement(
_Notification4.default,
{ show: true },
_react2.default.createElement(
_Notification4.default.TextLabel,
null,
'label'
),
_react2.default.createElement(
_Notification4.default.ActionButton,
null,
actionButtonText
),
_react2.default.createElement(_Notification4.default.CloseButton, null)
));
expect(driver.getActionButtonText()).toEqual(actionButtonText);
});
it('should not have an action button', function () {
var driver = createDriver(renderNotificationWithProps({ show: true }));
expect(driver.hasActionButton()).toBeFalsy();
});
it('should call the supplied onClick handler when clicked', function () {
var onClickMock = jest.fn();
var driver = createDriver(_react2.default.createElement(
_Notification4.default,
{ show: true },
_react2.default.createElement(
_Notification4.default.TextLabel,
null,
'label'
),
_react2.default.createElement(
_Notification4.default.ActionButton,
{ onClick: onClickMock },
'action'
),
_react2.default.createElement(_Notification4.default.CloseButton, null)
));
driver.clickOnActionButton();
expect(onClickMock).toBeCalled();
});
});
describe('Close Button', function () {
it('should have a close button (with action button)', function () {
var driver = createDriver(renderNotificationWithProps({ show: true }));
expect(driver.hasCloseButton()).toBeTruthy();
});
it('should have a close button (without action button)', function () {
var driver = createDriver(renderNotificationWithProps({ show: true }));
expect(driver.hasActionButton()).toBeFalsy();
expect(driver.hasCloseButton()).toBeTruthy();
});
});
});
describe('Type', function () {
it('should set default type to global and position relative', function () {
var driver = createDriver(renderNotificationWithProps({ show: true }));
expect(driver.isRelativelyPositioned()).toBeTruthy();
});
it('should set the type to global and position relative', function () {
var driver = createDriver(renderNotificationWithProps({ show: true, type: 'global' }));
expect(driver.isRelativelyPositioned()).toBeTruthy();
});
it('should set the type to local and position absolute', function () {
var driver = createDriver(renderNotificationWithProps({ show: true, type: 'local' }));
expect(driver.isAbsolutePositioned()).toBeTruthy();
});
it('should set the type to sticky and position fixed', function () {
var driver = createDriver(renderNotificationWithProps({ show: true, type: 'sticky' }));
expect(driver.isFixedPositioned()).toBeTruthy();
});
});
describe('Closing - deprecated logic', function () {
var driver = void 0,
rerender = void 0;
beforeEach(function () {
jest.useFakeTimers();
});
describe('Closing when clicking on close button', function () {
beforeEach(function () {
var _render = render(renderNotificationWithProps({ show: true })),
notificationDriver = _render.driver,
notificationRerender = _render.rerender;
notificationDriver.clickOnCloseButton();
driver = notificationDriver;
rerender = notificationRerender;
});
beforeEach(function () {
jest.runAllTimers();
});
it('should close the notification', function () {
expect(driver.visible()).toBeFalsy();
});
it('should allow reopening the notification after closed by close button', function () {
rerender(renderNotificationWithProps({ show: true }));
expect(driver.visible()).toBeTruthy();
});
});
['local', 'sticky', 'global'].forEach(function (type) {
describe('Closing after timeout for ' + type + ' Notification', function () {
var someTimeout = 132;
if (type !== 'global') {
it('should close after default timeout (6s)', function () {
var defaultTimeout = 6000;
driver = createDriver(renderNotificationWithProps({ show: true, type: type }));
jest.runAllTimers();
expect(driver.visible()).toBeFalsy();
expect(setTimeout.mock.calls.find(function (call) {
return call[1] === defaultTimeout;
})).toBeTruthy();
});
} else {
it('should not close after default timeout (6s) for ' + type + ' Notification', function () {
driver = createDriver(renderNotificationWithProps({ show: true, type: type }));
jest.runAllTimers();
expect(driver.visible()).toBeTruthy();
expect(setTimeout).not.toBeCalled();
});
}
it('should close after a given timeout', function () {
driver = createDriver(renderNotificationWithProps({
show: true,
type: type,
timeout: someTimeout
}));
jest.runAllTimers();
expect(driver.visible()).toBeFalsy();
expect(setTimeout.mock.calls.find(function (call) {
return call[1] === someTimeout;
})).toBeTruthy();
});
it('should be able to show notification again after timeout', function () {
var _render2 = render(renderNotificationWithProps({
show: true,
type: type,
timeout: someTimeout
})),
_driver = _render2.driver,
_rerender = _render2.rerender;
jest.runAllTimers();
expect(_driver.visible()).toBeFalsy();
expect(setTimeout.mock.calls.find(function (call) {
return call[1] === someTimeout;
})).toBeTruthy();
jest.clearAllTimers();
_rerender(renderNotificationWithProps({
show: true,
type: type,
timeout: someTimeout
}));
expect(_driver.visible()).toBeTruthy();
});
it('should close after starting from a closed status', function () {
var _render3 = render(renderNotificationWithProps({
show: false,
type: type,
timeout: someTimeout
})),
_driver = _render3.driver,
_rerender = _render3.rerender;
jest.runAllTimers();
expect(_driver.visible()).toBeFalsy();
_rerender(renderNotificationWithProps({
show: true,
type: type,
timeout: someTimeout
}));
expect(_driver.visible()).toBeTruthy();
jest.runAllTimers();
expect(_driver.visible()).toBeFalsy();
expect(setTimeout.mock.calls.find(function (call) {
return call[1] === someTimeout;
})).toBeTruthy();
});
}, 'Closing after timeout for ' + type + ' Notification');
});
afterEach(function () {
jest.clearAllTimers();
});
});
describe('Closing - with upgrade prop', function () {
beforeEach(function () {
jest.useFakeTimers();
});
describe('Closing when clicking on close button', function () {
it('should close the notification', function () {
var _render4 = render(renderNotificationWithProps({ show: true, upgrade: true })),
driver = _render4.driver;
driver.clickOnCloseButton();
jest.runAllTimers(); // for animations
expect(driver.visible()).toBeFalsy();
});
it('should allow reopening the notification after closed by close button', function () {
var _render5 = render(renderNotificationWithProps({ show: true, upgrade: true })),
driver = _render5.driver,
rerender = _render5.rerender;
driver.clickOnCloseButton();
jest.runAllTimers(); // for animations
expect(driver.visible()).toBeFalsy();
rerender(renderNotificationWithProps({ show: true, upgrade: true }));
expect(driver.visible()).toBeTruthy();
});
});
describe('AutoHide', function () {
var someTimeout = 132;
var renderNewNotification = function renderNewNotification(props) {
return renderNotificationWithProps(_extends({}, props, { upgrade: true }));
};
it('should keep notification shown regardless of any timers', function () {
var driver = createDriver(renderNewNotification({ show: true }));
jest.runAllTimers();
expect(driver.visible()).toBeTruthy();
expect(setTimeout).not.toBeCalled();
});
it('should auto-hide after a given timeout', function () {
var driver = createDriver(renderNewNotification({
show: true,
autoHideTimeout: someTimeout
}));
expect(driver.visible()).toBeTruthy();
jest.runAllTimers();
expect(driver.visible()).toBeFalsy();
});
it('should be able to show notification again after timeout', function () {
var _render6 = render(renderNewNotification({
show: true,
autoHideTimeout: someTimeout
})),
driver = _render6.driver,
rerender = _render6.rerender;
jest.runAllTimers();
expect(driver.visible()).toBeFalsy();
jest.clearAllTimers();
rerender(renderNewNotification({
show: true,
autoHideTimeout: someTimeout
}));
expect(driver.visible()).toBeTruthy();
});
it('should auto-hide after starting from a closed status', function () {
var _render7 = render(renderNewNotification({
show: false,
autoHideTimeout: someTimeout
})),
driver = _render7.driver,
rerender = _render7.rerender;
jest.runAllTimers();
expect(driver.visible()).toBeFalsy();
rerender(renderNewNotification({
show: true,
autoHideTimeout: someTimeout
}));
expect(driver.visible()).toBeTruthy();
jest.runAllTimers();
expect(driver.visible()).toBeFalsy();
});
});
afterEach(function () {
jest.clearAllTimers();
});
});
describe('Style', function () {
it('should accept a z-index', function () {
var zIndex = 999;
var driver = createDriver(renderNotificationWithProps({ show: true, zIndex: zIndex }));
expect(driver.getZIndex()).toEqual(zIndex);
});
});
describe('testkit', function () {
it('should exist', function () {
var component = renderNotificationWithProps({ show: true });
expect((0, _testkitSanity.isTestkitExists)(component, _testkit.notificationTestkitFactory)).toBeTruthy();
});
});
describe('enzyme testkit', function () {
it('should exist', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var component, enzymeNotificationTestkit, enzymeButtonTestkit;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
component = (0, _enzyme.mount)(_react2.default.createElement(ControlledNotification, null));
enzymeNotificationTestkit = (0, _enzyme2.notificationTestkitFactory)({
wrapper: component,
dataHook: 'notification_dh'
});
enzymeButtonTestkit = (0, _enzyme2.buttonTestkitFactory)({
wrapper: component,
dataHook: 'button_dh'
});
expect(enzymeNotificationTestkit.visible()).toBeFalsy();
expect(enzymeButtonTestkit.exists()).toBeTruthy();
_context.next = 7;
return enzymeButtonTestkit.click();
case 7:
expect(enzymeNotificationTestkit.visible()).toBeTruthy();
case 8:
case 'end':
return _context.stop();
}
}
}, _callee, undefined);
})));
});
describe('Notification.ActionButton', function () {
it('should display a Button when passing by default', function () {
var component = (0, _enzyme.mount)(_react2.default.createElement(
_Notification4.default.ActionButton,
null,
'Action Button'
));
expect(component.find('Button')).toHaveLength(1);
});
it('should display a Button when explicitly required', function () {
var component = (0, _enzyme.mount)(_react2.default.createElement(
_Notification4.default.ActionButton,
{ type: 'button' },
'Action Button'
));
expect(component.find('Button')).toHaveLength(1);
});
it('should display a TextLink explicitly required', function () {
var component = (0, _enzyme.mount)(_react2.default.createElement(
_Notification4.default.ActionButton,
{ type: 'textLink', link: 'some link' },
'Action Button'
));
expect(component.find(_TextLink2.default)).toHaveLength(1);
});
});
});
var ControlledNotification = function (_React$Component) {
_inherits(ControlledNotification, _React$Component);
function ControlledNotification(props) {
_classCallCheck(this, ControlledNotification);
var _this = _possibleConstructorReturn(this, (ControlledNotification.__proto__ || Object.getPrototypeOf(ControlledNotification)).call(this, props));
_this.state = { showNotification: false };
return _this;
}
_createClass(ControlledNotification, [{
key: 'render',
value: function render() {
var _this2 = this;
return _react2.default.createElement(
'div',
null,
_react2.default.createElement(
_Button2.default,
{
dataHook: 'button_dh',
onClick: function onClick() {
return _this2.setState({ showNotification: !_this2.state.showNotification });
}
},
'button'
),
_react2.default.createElement(
_Notification4.default,
{
dataHook: 'notification_dh',
show: this.state.showNotification
},
_react2.default.createElement(
_Notification4.default.TextLabel,
null,
'label'
),
_react2.default.createElement(_Notification4.default.CloseButton, null)
)
);
}
}]);
return ControlledNotification;
}(_react2.default.Component);