@carbon/ibm-cloud-cognitive-cdai/lib/components/IdeCreate/ide-create.test.js

Carbon for Cloud & Cognitive CD&AI UI components

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _react = _interopRequireDefault(require("react"));
var _testUtils = require("react-dom/test-utils");
var _enzyme = require("enzyme");
var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16"));
var _ideCreate = _interopRequireDefault(require("./ide-create"));
var _ideCreateStep = _interopRequireDefault(require("./ide-create-step"));
var _carbonComponents = require("carbon-components");
//
// 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.
//

var prefix = _carbonComponents.settings.prefix;
(0, _enzyme.configure)({
  adapter: new _enzymeAdapterReact.default()
});
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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, props, /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, null), /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, props, /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, null), /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, (0, _extends2.default)({}, props, {
    stepNextDisabled: true
  }), /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, null), /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, props, /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, null), /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, (0, _extends2.default)({}, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, props, /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, props, /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, null), /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, (0, _extends2.default)({}, props, {
    formActionDisabled: true
  }), /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, null), /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, props, /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, propsWithCallback, /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, props));
  var instance = wrapper.instance();
  (0, _testUtils.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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, props));
  var instance = wrapper.instance();
  (0, _testUtils.act)(function () {
    global.window.dispatchEvent(new Event('scroll'));
  });
  expect(instance.state.fixedHeader).toBe(false);
  testTopOffset = -1;
  (0, _testUtils.act)(function () {
    global.window.dispatchEvent(new Event('scroll'));
  });
  expect(instance.state.fixedHeader).toBe(true);
  testTopOffset = -100;
  (0, _testUtils.act)(function () {
    global.window.dispatchEvent(new Event('scroll'));
  });
  expect(instance.state.fixedHeader).toBe(true);
  testTopOffset = 100;
  (0, _testUtils.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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, (0, _extends2.default)({}, props, {
    subTitleFixedOnly: true
  })));
  var instance = wrapper.instance();
  (0, _testUtils.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;
  (0, _testUtils.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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, props, /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, {
    label: "one"
  }), /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, {
    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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, props, /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, null), /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, {
    label: "one"
  }), /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, {
    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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, (0, _extends2.default)({}, props, {
    usePreCheck: false
  }), /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, null), /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, 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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, props, /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, null), /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, {
    label: "one"
  }), /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, {
    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 = (0, _enzyme.mount)(/*#__PURE__*/_react.default.createElement(_ideCreate.default, props, /*#__PURE__*/_react.default.createElement(_ideCreateStep.default, {
      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();
    }
  }
});