@carbon/ibm-cloud-cognitive-cdai
Version:
Carbon for Cloud & Cognitive CD&AI UI components
200 lines (199 loc) • 8.62 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
//
// Copyright IBM Corp. 2020, 2020
//
// This source code is licensed under the Apache-2.0 license found in the
// LICENSE file in the root directory of this source tree.
//
import React from 'react';
import { IdeSlideOverPanel } from '../IdeSlideOverPanel';
import { shallow } from 'enzyme';
import { Close16 } from '@carbon/icons-react';
var requiredProps = {
onClose: function onClose() {}
};
describe('IdeSlideOverPanel', function () {
describe('Renders common props as expected', function () {
var wrapper = shallow(/*#__PURE__*/React.createElement(IdeSlideOverPanel, _extends({}, requiredProps, {
className: "extra-class"
}), /*#__PURE__*/React.createElement("div", {
className: "child"
}, "child"), /*#__PURE__*/React.createElement("div", {
className: "child"
}, "child")));
it('Renders children as expected', function () {
expect(wrapper.find('.child').length).toBe(2);
});
it('Should add extra classes via className', function () {
expect(wrapper.hasClass('extra-class')).toBe(true);
});
});
describe('Renders the provided title', function () {
var wrapper = shallow(/*#__PURE__*/React.createElement(IdeSlideOverPanel, _extends({}, requiredProps, {
title: "Foo"
})));
it('Renders a header containing the provided title', function () {
expect(wrapper.find('header').text()).toBe('Foo');
});
});
describe('Honours the open property', function () {
var openWrapper = shallow(/*#__PURE__*/React.createElement(IdeSlideOverPanel, _extends({}, requiredProps, {
open: true
})));
var closedWrapper = shallow(/*#__PURE__*/React.createElement(IdeSlideOverPanel, _extends({}, requiredProps, {
open: false
})));
var defaultWrapper = shallow(/*#__PURE__*/React.createElement(IdeSlideOverPanel, requiredProps));
it('Renders open when open is true', function () {
expect(openWrapper.find('.ide-slide-over-panel--open')).toHaveLength(1);
});
it('Renders closed when open is false', function () {
expect(closedWrapper.find('.ide-slide-over-panel--open')).toHaveLength(0);
});
it('Renders closed by default', function () {
expect(defaultWrapper.find('.ide-slide-over-panel--open')).toHaveLength(0);
});
});
describe('Honours the size property', function () {
var defaultWrapper = shallow(/*#__PURE__*/React.createElement(IdeSlideOverPanel, requiredProps));
var smallWrapper = shallow(/*#__PURE__*/React.createElement(IdeSlideOverPanel, _extends({}, requiredProps, {
size: "small"
})));
var mediumWrapper = shallow(/*#__PURE__*/React.createElement(IdeSlideOverPanel, _extends({}, requiredProps, {
size: "medium"
})));
var largeWrapper = shallow(/*#__PURE__*/React.createElement(IdeSlideOverPanel, _extends({}, requiredProps, {
size: "large"
})));
it('Supports a small size', function () {
expect(smallWrapper.find('.ide-slide-over-panel--small')).toHaveLength(1);
expect(smallWrapper.find('.ide-slide-over-panel--medium')).toHaveLength(0);
expect(smallWrapper.find('.ide-slide-over-panel--large')).toHaveLength(0);
});
it('Supports a medium size', function () {
expect(mediumWrapper.find('.ide-slide-over-panel--small')).toHaveLength(0);
expect(mediumWrapper.find('.ide-slide-over-panel--medium')).toHaveLength(1);
expect(mediumWrapper.find('.ide-slide-over-panel--large')).toHaveLength(0);
});
it('Supports a large size', function () {
expect(largeWrapper.find('.ide-slide-over-panel--small')).toHaveLength(0);
expect(largeWrapper.find('.ide-slide-over-panel--medium')).toHaveLength(0);
expect(largeWrapper.find('.ide-slide-over-panel--large')).toHaveLength(1);
});
it('Defaults to small size', function () {
expect(defaultWrapper.find('.ide-slide-over-panel--small')).toHaveLength(1);
expect(defaultWrapper.find('.ide-slide-over-panel--medium')).toHaveLength(0);
expect(defaultWrapper.find('.ide-slide-over-panel--large')).toHaveLength(0);
});
});
describe('Honours the onClose callback', function () {
var closeSpy = jest.fn();
var wrapper = shallow(/*#__PURE__*/React.createElement(IdeSlideOverPanel, {
onClose: closeSpy
}));
it('Renders a close button', function () {
expect(wrapper.find('.ide-slide-over-panel--close')).toHaveLength(1);
expect(wrapper.find('.ide-slide-over-panel--close').props().renderIcon).toEqual(Close16);
});
it('Triggers onClose when close button is clicked', function () {
var event = {};
wrapper.find('.ide-slide-over-panel--close').props().onClick(event);
expect(closeSpy).toHaveBeenCalledWith(event);
});
});
describe('Honours the overlay with onClose callback', function () {
var closeSpy = jest.fn();
var wrapper = shallow(/*#__PURE__*/React.createElement(IdeSlideOverPanel, {
withOverlay: true,
onClose: closeSpy
}));
it('Renders an overlay', function () {
expect(wrapper.find('.ide-slide-over-overlay')).toHaveLength(1);
});
it('Triggers onClose when overlay background is clicked', function () {
var event = {
key: 'click'
};
wrapper.find('.ide-slide-over-overlay').props().onClick(event);
expect(closeSpy).toHaveBeenCalledWith(event);
});
});
describe('Honours the overlay with onOverlayClose callback', function () {
var closeSpy = jest.fn();
var overlayCloseSpy = jest.fn();
var wrapper = shallow(/*#__PURE__*/React.createElement(IdeSlideOverPanel, {
withOverlay: true,
onOverlayClose: overlayCloseSpy,
onClose: closeSpy
}));
it('Triggers onOverlayClose instead of onClose if provided', function () {
var event = {
key: 'click'
};
wrapper.find('.ide-slide-over-overlay').props().onClick(event);
expect(closeSpy).not.toHaveBeenCalledWith(event);
expect(overlayCloseSpy).toHaveBeenCalledWith(event);
});
});
describe('Renders the controls', function () {
var wrapper = shallow(/*#__PURE__*/React.createElement(IdeSlideOverPanel, _extends({}, requiredProps, {
controls: true,
primaryButtonText: "Primary Button",
secondaryButtonText: "Secondary Button"
})));
describe('primary button', function () {
it('renders primary button', function () {
expect(wrapper.find('.ide-slide-over-panel--primary').text()).toEqual('Primary Button');
expect(wrapper.find('.ide-slide-over-panel--primary').props().kind).toEqual('primary');
});
it('renders primary button as danger, when set', function () {
var wrapper = shallow(/*#__PURE__*/React.createElement(IdeSlideOverPanel, _extends({}, requiredProps, {
danger: true,
controls: true,
primaryButtonText: "Primary Button",
secondaryButtonText: "Secondary Button"
})));
expect(wrapper.find('.ide-slide-over-panel--primary').props().kind).toEqual('danger');
});
});
describe('secondary button', function () {
it('renders secondary button', function () {
expect(wrapper.find('.ide-slide-over-panel--secondary').text()).toEqual('Secondary Button');
expect(wrapper.find('.ide-slide-over-panel--secondary').props().kind).toEqual('secondary');
});
});
});
describe('focusTrapOptions', function () {
it('are merged correctly', function () {
var wrapper = shallow(/*#__PURE__*/React.createElement(IdeSlideOverPanel, _extends({}, requiredProps, {
controls: true,
withOverlay: true,
primaryButtonText: "Primary Button",
secondaryButtonText: "Secondary Button",
focusTrapOptions: {
returnFocusOnDeactivate: true
}
})));
expect(wrapper.find('FocusTrap').prop('focusTrapOptions')).toEqual({
clickOutsideDeactivates: true,
escapeDeactivates: false,
returnFocusOnDeactivate: true
});
});
it('override defaults correctly', function () {
var wrapper = shallow(/*#__PURE__*/React.createElement(IdeSlideOverPanel, _extends({}, requiredProps, {
controls: true,
withOverlay: true,
primaryButtonText: "Primary Button",
secondaryButtonText: "Secondary Button",
focusTrapOptions: {
escapeDeactivates: true
}
})));
expect(wrapper.find('FocusTrap').prop('focusTrapOptions')).toEqual({
clickOutsideDeactivates: true,
escapeDeactivates: true
});
});
});
});