@carbon/ibm-cloud-cognitive-cdai
Version:
Carbon for Cloud & Cognitive CD&AI UI components
138 lines (137 loc) • 7.71 kB
JavaScript
import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
//
// 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 { IdeHome } from '.';
import { withCustomSetTabFunc, withCustomSetSectionFunc, withNoTasksOrRenderFunc, withCollapsibleAbility, tasksValidImage, withOneSetToRender } from './test_assets/testProps.js';
import { idAttributeSelector } from '../../component_helpers/IDHelper';
import * as jth from '../../component_helpers/jest_test_helper_functions.js';
import { settings } from 'carbon-components';
var prefix = settings.prefix;
describe('IdeHome unit tests', function () {
var component, unmount;
var mountTestComponent = function mountTestComponent() {
var defaultProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
var test = jth.mountComponent(jth.getJSXForComponent(IdeHome, defaultProps, props));
component = test.component;
unmount = test.unmount;
return test;
};
afterEach(function () {
// if unmount defined, call it to clear up any mounted component
unmount && unmount();
});
it('IdeHome tollerates no props being provided, and renders with defaults', function () {
var testClassNames = {
'IdeHome-Header-Text': ['ide-home-heading-container', "".concat(prefix, "--col-sm-1"), "".concat(prefix, "--col-md-2"), "".concat(prefix, "--col-lg-6"), "".concat(prefix, "--col-xlg-6"), "".concat(prefix, "--col-max-6")],
'IdeHome-Header-Image': ['ide-home-image-container', "".concat(prefix, "--col-sm-3"), "".concat(prefix, "--col-md-6"), "".concat(prefix, "--col-lg-10"), "".concat(prefix, "--col-xlg-10"), "".concat(prefix, "--col-max-10")]
};
mountTestComponent();
expect(component.getElements()).toMatchSnapshot();
var _loop = function _loop() {
var _Object$entries$_i = _slicedToArray(_Object$entries[_i], 2),
id = _Object$entries$_i[0],
classNames = _Object$entries$_i[1];
classNames.map(function (className) {
expect(component.find(idAttributeSelector(id)).hasClass(className)).toEqual(true);
});
};
for (var _i = 0, _Object$entries = Object.entries(testClassNames); _i < _Object$entries.length; _i++) {
_loop();
}
});
it('IdeHome renders user custom content when render function is provided', function () {
var props = withCustomSetTabFunc();
mountTestComponent(null, props);
expect(component.exists(idAttributeSelector('tab1')));
expect(component.exists(idAttributeSelector('tab2')));
});
it('IdeHome renders task image when valid react element is provided', function () {
var props = tasksValidImage();
mountTestComponent(null, props);
expect(component.exists('ide-home-tile-img'));
});
it('IdeHome renders default sets when render function is not provided', function () {
var props = withNoTasksOrRenderFunc();
mountTestComponent(null, props);
expect(component.exists(idAttributeSelector('tab1')));
expect(component.exists(idAttributeSelector('tab2')));
});
it('IdeHome renders sets as sections when multipleSetType prop is `section`', function () {
var props = withCustomSetSectionFunc();
mountTestComponent(null, props);
expect(component.exists(idAttributeSelector('section1')));
expect(component.exists(idAttributeSelector('section2')));
});
it('IdeHome renders just 1 set if 1 provided', function () {
var props = withOneSetToRender();
mountTestComponent(null, props);
expect(component.exists(idAttributeSelector('tab1')));
});
it('IdeHome renders collapsible version of the banner', function () {
var testClassNames = {
'IdeHome-Header-Text': ['ide-home-heading-container', "".concat(prefix, "--col-sm-2"), "".concat(prefix, "--col-md-3"), "".concat(prefix, "--col-lg-6"), "".concat(prefix, "--col-xlg-6"), "".concat(prefix, "--col-max-6")],
'IdeHome-Header-Image': ['ide-home-image-container', "".concat(prefix, "--col-sm-2"), "".concat(prefix, "--col-md-3"), "".concat(prefix, "--col-lg-8"), "".concat(prefix, "--col-xlg-8"), "".concat(prefix, "--col-max-8")],
'IdeHome-header-toggle-container': ['ide-home-header-toggle-container', "".concat(prefix, "--col-sm-1"), "".concat(prefix, "--col-md-2"), "".concat(prefix, "--col-lg-2"), "".concat(prefix, "--col-xlg-2"), "".concat(prefix, "--col-max-2")]
};
var props = withCollapsibleAbility();
mountTestComponent(null, props);
expect(component.exists(idAttributeSelector('IdeHome-header-toggle')));
var _loop2 = function _loop2() {
var _Object$entries2$_i = _slicedToArray(_Object$entries2[_i2], 2),
id = _Object$entries2$_i[0],
classNames = _Object$entries2$_i[1];
classNames.map(function (className) {
expect(component.find(idAttributeSelector(id)).hasClass(className)).toEqual(true);
});
};
for (var _i2 = 0, _Object$entries2 = Object.entries(testClassNames); _i2 < _Object$entries2.length; _i2++) {
_loop2();
}
});
it('renders the collapsed banner when the toggle is pressed', function () {
var testClassNames = {
'IdeHome-Header-Text': ['ide-home-heading-container', "".concat(prefix, "--col-sm-3"), "".concat(prefix, "--col-md-6"), "".concat(prefix, "--col-lg-14"), "".concat(prefix, "--col-xlg-14"), "".concat(prefix, "--col-max-14")],
'IdeHome-header-toggle-container': ['ide-home-header-toggle-container', "".concat(prefix, "--col-sm-1"), "".concat(prefix, "--col-md-2"), "".concat(prefix, "--col-lg-2"), "".concat(prefix, "--col-xlg-2"), "".concat(prefix, "--col-max-2")]
};
var props = withCollapsibleAbility();
props.headerCollapsed = true;
mountTestComponent(null, props);
expect(component.find(idAttributeSelector('IdeHome-Header')).prop('className')).toEqual("collapsed ide-home-header ".concat(prefix, "--row"));
var _loop3 = function _loop3() {
var _Object$entries3$_i = _slicedToArray(_Object$entries3[_i3], 2),
id = _Object$entries3$_i[0],
classNames = _Object$entries3$_i[1];
classNames.map(function (className) {
expect(component.find(idAttributeSelector(id)).hasClass(className)).toEqual(true);
});
};
for (var _i3 = 0, _Object$entries3 = Object.entries(testClassNames); _i3 < _Object$entries3.length; _i3++) {
_loop3();
}
});
it('collapses the banner when the toggle is pressed and calls the callback', function () {
var props = withCollapsibleAbility();
var mockHeaderHandleCollapseFunc = jest.fn();
props.headerHandleCollapseFunc = mockHeaderHandleCollapseFunc;
mountTestComponent(null, props);
expect(component.exists(idAttributeSelector('IdeHome-header-toggle')));
component.find(idAttributeSelector('IdeHome-header-toggle')).simulate('click');
expect(mockHeaderHandleCollapseFunc).toHaveBeenCalled();
});
it('collapses the banner and calls the callback twice when the toggle is pressed twice', function () {
var props = withCollapsibleAbility();
var mockHeaderHandleCollapseFunc = jest.fn();
props.headerHandleCollapseFunc = mockHeaderHandleCollapseFunc;
mountTestComponent(null, props);
expect(component.exists(idAttributeSelector('IdeHome-header-toggle')));
component.find(idAttributeSelector('IdeHome-header-toggle')).simulate('click');
expect(mockHeaderHandleCollapseFunc).toHaveBeenCalled();
component.find(idAttributeSelector('IdeHome-header-toggle')).simulate('click');
expect(mockHeaderHandleCollapseFunc).toHaveBeenCalled();
});
});