@carbon/ibm-cloud-cognitive-cdai
Version:
Carbon for Cloud & Cognitive CD&AI UI components
414 lines (410 loc) • 17.1 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 { act } from 'react-dom/test-utils';
import { configure, mount } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import IdeCreate from './ide-create';
import IdeCreateStep from './ide-create-step';
import { settings } from 'carbon-components';
var prefix = settings.prefix;
configure({
adapter: new Adapter()
});
var props = {
pageTitle: 'Test',
buttonTextFormAction: 'Create',
buttonTextFormCancel: 'Cancel',
buttonTextStepNext: 'Next',
buttonTextStepBack: 'Back',
breadCrumbUrl: '/',
usePreCheck: true
};
var propsWithCallback = {
pageTitle: 'Test',
buttonTextFormAction: 'Create',
buttonTextFormCancel: 'Cancel',
buttonTextStepNext: 'Next',
buttonTextStepBack: 'Back',
breadCrumbCallback: jest.fn(),
usePreCheck: true
};
var propsNoCancel = {
pageTitle: 'Test',
buttonTextFormAction: 'Create',
buttonTextStepNext: 'Next',
buttonTextStepBack: 'Back',
usePreCheck: true
};
it('should render correct contents', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props));
expect(wrapper.find('.ide-create-container')).toHaveLength(1);
var secondaryButton = wrapper.find(".".concat(prefix, "--btn--secondary"));
expect(secondaryButton).toHaveLength(1);
var secondaryNode = secondaryButton.getDOMNode();
expect(secondaryNode).toBeDefined();
expect(secondaryNode.textContent).toBe(props.buttonTextFormCancel);
wrapper.unmount();
});
it('should render correct contents with a launch out link', function () {
props.externalLink = true;
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props));
expect(wrapper.find('.ide-create-container')).toHaveLength(1);
var primaryButton = wrapper.find(".".concat(prefix, "--btn--primary"));
expect(primaryButton.props().renderIcon).not.toEqual(null);
wrapper.unmount();
});
it('should render correct contents with no cancel step', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, propsNoCancel));
expect(wrapper.find('.ide-create-container')).toHaveLength(1);
var secondaryButton = wrapper.find(".".concat(prefix, "--btn--secondary"));
expect(secondaryButton).toHaveLength(0);
props.buttonTextStepNext = 'Next';
wrapper.unmount();
});
it('should render correct contents with hidden next button', function () {
props.buttonTextStepNext = '';
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props, /*#__PURE__*/React.createElement(IdeCreateStep, null), /*#__PURE__*/React.createElement(IdeCreateStep, null)));
expect(wrapper.find('.ide-create-container')).toHaveLength(1);
var secondaryButton = wrapper.find(".".concat(prefix, "--btn--secondary"));
expect(secondaryButton).toHaveLength(1);
var secondaryNode = secondaryButton.getDOMNode();
expect(secondaryNode).toBeDefined();
expect(secondaryNode.textContent).toBe(props.buttonTextFormCancel);
props.buttonTextStepNext = 'Next';
wrapper.unmount();
});
it('should move to the next panel', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props, /*#__PURE__*/React.createElement(IdeCreateStep, null), /*#__PURE__*/React.createElement(IdeCreateStep, null)));
var instance = wrapper.instance();
instance.setNextPage();
expect(instance.state.step).toBe(1);
var primaryButton = wrapper.find(".".concat(prefix, "--btn--primary"));
expect(primaryButton).toHaveLength(1);
var primaryNode = primaryButton.getDOMNode();
expect(primaryNode).toBeDefined();
expect(primaryNode.textContent).toBe(props.buttonTextFormAction);
wrapper.unmount();
});
it('should disable the next button when stepNextDisabled is true', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, _extends({}, props, {
stepNextDisabled: true
}), /*#__PURE__*/React.createElement(IdeCreateStep, null), /*#__PURE__*/React.createElement(IdeCreateStep, null)));
var primaryButton = wrapper.find(".".concat(prefix, "--btn--primary"));
expect(primaryButton.props().disabled).toBe(true);
var instance = wrapper.instance();
instance.setNextPage();
expect(instance.state.step).toBe(0);
wrapper.unmount();
});
it('should move to the next panel using internal function', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props, /*#__PURE__*/React.createElement(IdeCreateStep, null), /*#__PURE__*/React.createElement(IdeCreateStep, null)));
var instance = wrapper.instance();
instance._handleNextButton();
expect(instance.state.step).toBe(1);
var primaryButton = wrapper.find(".".concat(prefix, "--btn--primary"));
expect(primaryButton).toHaveLength(1);
var primaryNode = primaryButton.getDOMNode();
expect(primaryNode).toBeDefined();
expect(primaryNode.textContent).toBe(props.buttonTextFormAction);
wrapper.unmount();
});
it('should not move to the next panel using internal function when disabled', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, _extends({}, props, {
stepNextDisabled: true
})));
var instance = wrapper.instance();
instance._handleNextButton();
expect(instance.state.step).toBe(0);
wrapper.unmount();
});
it('should move to the previous panel', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props));
var instance = wrapper.instance();
instance.setNextPage();
expect(instance.state.step).toBe(1);
instance._handleBackButton();
expect(instance.state.step).toBe(0);
var secondaryButton = wrapper.find(".".concat(prefix, "--btn--secondary"));
expect(secondaryButton).toHaveLength(1);
var secondaryNode = secondaryButton.getDOMNode();
expect(secondaryNode).toBeDefined();
expect(secondaryNode.textContent).toBe(props.buttonTextFormCancel);
wrapper.unmount();
});
it('should render single panel for form only', function () {
props.usePreCheck = false;
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props, /*#__PURE__*/React.createElement(IdeCreateStep, null)));
var primaryButton = wrapper.find(".".concat(prefix, "--btn--primary"));
expect(primaryButton).toHaveLength(1);
var primaryNode = primaryButton.getDOMNode();
expect(primaryNode).toBeDefined();
expect(primaryNode.textContent).toBe(props.buttonTextFormAction);
props.usePreCheck = true;
wrapper.unmount();
});
it('should set action button disabled', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props, /*#__PURE__*/React.createElement(IdeCreateStep, null), /*#__PURE__*/React.createElement(IdeCreateStep, null)));
var instance = wrapper.instance();
instance.setNextPage();
instance.setActionButtonDisabled(true);
var primaryButton = wrapper.find(".".concat(prefix, "--btn--primary"));
expect(primaryButton).toHaveLength(1);
var primaryNode = primaryButton.getDOMNode();
expect(primaryNode).toBeDefined();
expect(primaryNode.disabled).toBeTruthy();
wrapper.unmount();
});
it('should set action button disabled when formActionDisabled is true', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, _extends({}, props, {
formActionDisabled: true
}), /*#__PURE__*/React.createElement(IdeCreateStep, null), /*#__PURE__*/React.createElement(IdeCreateStep, null)));
var instance = wrapper.instance();
instance.setNextPage();
var primaryButton = wrapper.find(".".concat(prefix, "--btn--primary"));
expect(primaryButton).toHaveLength(1);
var primaryNode = primaryButton.getDOMNode();
expect(primaryNode).toBeDefined();
expect(primaryNode.disabled).toBeTruthy();
wrapper.setProps({
formActionDisabled: false
});
wrapper.update();
primaryButton = wrapper.find(".".concat(prefix, "--btn--primary"));
expect(primaryButton).toHaveLength(1);
primaryNode = primaryButton.getDOMNode();
expect(primaryNode).toBeDefined();
expect(primaryNode.disabled).toBeFalsy();
wrapper.unmount();
});
it('should have default callback functions', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props));
var instance = wrapper.instance();
expect(instance.props.onFormAction).toBeDefined();
expect(instance.props.onCancel).toBeDefined();
instance.props.onFormAction();
instance.props.onCancel();
wrapper.unmount();
});
it('should call the callback functions', function () {
props.usePreCheck = false;
var onCancel = jest.fn();
props.onCancel = onCancel;
var onFormAction = jest.fn();
props.onFormAction = onFormAction;
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props, /*#__PURE__*/React.createElement(IdeCreateStep, null)));
var primaryButton = wrapper.find(".".concat(prefix, "--btn--primary"));
expect(primaryButton).toHaveLength(1);
primaryButton.simulate('click');
expect(onFormAction).toHaveBeenCalled();
var secondaryButton = wrapper.find(".".concat(prefix, "--btn--secondary"));
expect(secondaryButton).toHaveLength(1);
secondaryButton.simulate('click');
expect(onCancel).toHaveBeenCalledTimes(1);
var breadcrumb = wrapper.find(".".concat(prefix, "--link"));
expect(breadcrumb).toHaveLength(1);
breadcrumb.simulate('click');
expect(onCancel).toHaveBeenCalledTimes(1);
wrapper.setProps({
useCancelOnBreadCrumb: true
});
breadcrumb.simulate('click');
expect(onCancel).toHaveBeenCalledTimes(2);
props.usePreCheck = true;
wrapper.unmount();
});
it('should call consumers callback on breadcrumb is no breadCrumbURL, but defined breadCrumbCallback', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, propsWithCallback, /*#__PURE__*/React.createElement(IdeCreateStep, null)));
var breadcrumb = wrapper.find(".".concat(prefix, "--link"));
expect(breadcrumb).toHaveLength(1);
breadcrumb.simulate('click');
expect(propsWithCallback.breadCrumbCallback).toHaveBeenCalledTimes(1);
wrapper.unmount();
});
it('should respond to scroll', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props));
var instance = wrapper.instance();
act(function () {
global.window.dispatchEvent(new Event('scroll'));
});
expect(instance.state.fixedHeader).toBe(false);
wrapper.unmount();
});
it('should handle scroll beyond top limit', function () {
var getBoundingClientRectBak = Element.prototype.getBoundingClientRect;
var testTopOffset = 0;
/* IdeCreate uses getBoundingClientRect to calculate it's position but since
enzyme doesn't support layout we need to mock it in order to test that the
component reacts to changing top values */
Element.prototype.getBoundingClientRect = jest.fn(function () {
return {
width: 0,
height: 0,
top: testTopOffset,
left: 0,
bottom: 0,
right: 0
};
});
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props));
var instance = wrapper.instance();
act(function () {
global.window.dispatchEvent(new Event('scroll'));
});
expect(instance.state.fixedHeader).toBe(false);
testTopOffset = -1;
act(function () {
global.window.dispatchEvent(new Event('scroll'));
});
expect(instance.state.fixedHeader).toBe(true);
testTopOffset = -100;
act(function () {
global.window.dispatchEvent(new Event('scroll'));
});
expect(instance.state.fixedHeader).toBe(true);
testTopOffset = 100;
act(function () {
global.window.dispatchEvent(new Event('scroll'));
});
expect(instance.state.fixedHeader).toBe(false);
Element.prototype.getBoundingClientRect = getBoundingClientRectBak;
wrapper.unmount();
});
it('should show sub-title', function () {
props.subTitle = 'Sub-title';
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props));
var subTitle = wrapper.find('.ide-create-form-subtitle');
expect(subTitle).toHaveLength(1);
props.subTitle = '';
wrapper.unmount();
});
it('should show sub-title only in fixed', function () {
var getBoundingClientRectBak = Element.prototype.getBoundingClientRect;
var testTopOffset = 0;
/* IdeCreate uses getBoundingClientRect to calculate it's position but since
enzyme doesn't support layout we need to mock it in order to test that the
component reacts to changing top values */
Element.prototype.getBoundingClientRect = jest.fn(function () {
return {
width: 0,
height: 0,
top: testTopOffset,
left: 0,
bottom: 0,
right: 0
};
});
props.subTitle = 'Sub-title';
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, _extends({}, props, {
subTitleFixedOnly: true
})));
var instance = wrapper.instance();
act(function () {
global.window.dispatchEvent(new Event('scroll'));
});
expect(instance.state.fixedHeader).toBe(false);
var subTitle = wrapper.find('.ide-create-form-subtitle');
expect(subTitle).toHaveLength(0);
testTopOffset = -100;
act(function () {
global.window.dispatchEvent(new Event('scroll'));
});
wrapper.update();
subTitle = wrapper.find('.ide-create-form-subtitle');
expect(subTitle).toHaveLength(1);
props.subTitle = '';
Element.prototype.getBoundingClientRect = getBoundingClientRectBak;
wrapper.unmount();
});
it('should show progress indicator when there are multiple steps', function () {
props.usePreCheck = false;
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props, /*#__PURE__*/React.createElement(IdeCreateStep, {
label: "one"
}), /*#__PURE__*/React.createElement(IdeCreateStep, {
label: "two"
})));
var progress = wrapper.find('.ide-create-progress-container');
expect(progress).toHaveLength(1);
var steps = progress.find(".".concat(prefix, "--progress-step"));
expect(steps.length).toEqual(2);
// click on second step
steps.at(1).find('button').simulate('click');
expect(wrapper.instance().state.step).toBe(1);
props.usePreCheck = true;
wrapper.unmount();
});
it('should show progress indicator when there are multiple steps and a pre-check', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props, /*#__PURE__*/React.createElement(IdeCreateStep, null), /*#__PURE__*/React.createElement(IdeCreateStep, {
label: "one"
}), /*#__PURE__*/React.createElement(IdeCreateStep, {
label: "two"
})));
var primaryButton = wrapper.find(".".concat(prefix, "--btn--primary"));
expect(primaryButton).toHaveLength(1);
primaryButton.simulate('click');
var progress = wrapper.find('.ide-create-progress-container');
expect(progress).toHaveLength(1);
var steps = progress.find(".".concat(prefix, "--progress-step"));
expect(steps.length).toEqual(2);
// click on second step
steps.at(1).find('button').simulate('click');
expect(wrapper.instance().state.step).toBe(2);
wrapper.setProps({
disableProgressOnChange: true
});
wrapper.update();
steps.at(0).find('button').simulate('click');
expect(wrapper.instance().state.step).toBe(2);
wrapper.unmount();
});
it('_onProgressChange internal function should not update step when disabled ', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, _extends({}, props, {
usePreCheck: false
}), /*#__PURE__*/React.createElement(IdeCreateStep, null), /*#__PURE__*/React.createElement(IdeCreateStep, null)));
var instance = wrapper.instance();
var stepsDisabled = [false, true];
instance._onProgressChange(1, stepsDisabled);
expect(instance.state.step).toBe(0);
wrapper.unmount();
});
it('should not click on a disabled step when usePreCheck is set', function () {
var wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props, /*#__PURE__*/React.createElement(IdeCreateStep, null), /*#__PURE__*/React.createElement(IdeCreateStep, {
label: "one"
}), /*#__PURE__*/React.createElement(IdeCreateStep, {
label: "two",
disabled: true
})));
var primaryButton = wrapper.find(".".concat(prefix, "--btn--primary"));
expect(primaryButton).toHaveLength(1);
primaryButton.simulate('click');
var progress = wrapper.find('.ide-create-progress-container');
expect(progress).toHaveLength(1);
var steps = progress.find(".".concat(prefix, "--progress-step"));
expect(steps.length).toEqual(2);
// click on second step - disabled
steps.at(1).find('button').simulate('click');
expect(wrapper.instance().state.step).toBe(1);
wrapper.unmount();
});
it('validate no label on pre-check step', function () {
var spy = jest.spyOn(console, 'error').mockImplementation();
var wrapper;
try {
wrapper = mount(/*#__PURE__*/React.createElement(IdeCreate, props, /*#__PURE__*/React.createElement(IdeCreateStep, {
label: "wrong"
})));
} catch (e) {
expect(spy).toBeCalled();
expect(e.message).toEqual('Error: label should not be set on first step when usePreCheck is set');
} finally {
spy.mockRestore(); // Remove mock
if (wrapper) {
wrapper.unmount();
}
}
});