carbon-react 104.34.0 → 104.36.0

package/esm/components/multi-step-wizard/step/__spec__.js

@@ -0,0 +1,399 @@
+import React from "react";
+import TestUtils from "react-dom/test-utils";
+import Step from "./step";
+import Button from "./../../button";
+import { shallow, mount } from "enzyme";
+describe("Step", () => {
+  let instance,
+      stepContext,
+      stepNumber = 1,
+      spyNextHandler = jasmine.createSpy("nextHandler"),
+      spyBackHandler = jasmine.createSpy("backHandler"),
+      spyBeforeSubmitValidation = null,
+      spySubmitHandler = jasmine.createSpy("submitHandler"),
+      spyOnNext = jasmine.createSpy("onNext"),
+      spyOnBack = jasmine.createSpy("onBack"),
+      spyNext = jasmine.createSpy("next"),
+      spyBack = jasmine.createSpy("back"),
+      spyComplete = jasmine.createSpy("complete"),
+      enableInactiveSteps = false,
+      currentStep = 1,
+      completed = false,
+      totalSteps = 3;
+  beforeEach(() => {
+    stepContext = {
+      wizard: {
+        nextHandler: spyNextHandler,
+        backHandler: spyBackHandler,
+        beforeSubmitValidation: spyBeforeSubmitValidation,
+        submitHandler: spySubmitHandler,
+        enableInactiveSteps: enableInactiveSteps,
+        currentStep: currentStep,
+        completed: completed,
+        next: spyNext,
+        back: spyBack,
+        complete: spyComplete,
+        totalSteps: totalSteps
+      }
+    };
+    instance = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Step, {
+      stepNumber: stepNumber
+    }, "Demo Step"));
+    instance.context = stepContext;
+  });
+  describe("handleOnSubmit", () => {
+    describe("when beforeSubmitValidation props is not null", () => {
+      beforeEach(() => {
+        spyBeforeSubmitValidation = jasmine.createSpy("beforeSubmitValidation");
+        instance.context.wizard.beforeSubmitValidation = spyBeforeSubmitValidation;
+      });
+      describe("when beforeSubmitValidation props does not returns true", () => {
+        beforeEach(() => {
+          spyBeforeSubmitValidation.and.returnValue(false);
+        });
+        it("does not call the parent wizard to complete and submit", () => {
+          instance.handleOnSubmit();
+          expect(spyComplete).not.toHaveBeenCalled();
+        });
+        it("does not call submitHandler of parent wizard", () => {
+          instance.handleOnSubmit();
+          expect(spySubmitHandler).not.toHaveBeenCalled();
+        });
+      });
+      describe("when beforeSubmitValidation props returns true", () => {
+        beforeEach(() => {
+          spyBeforeSubmitValidation.and.returnValue(true);
+        });
+        it("calls the parent wizard to complete", () => {
+          instance.handleOnSubmit();
+          expect(spyComplete).toHaveBeenCalled();
+        });
+        it("calls submitHandler of parent wizard", () => {
+          instance.handleOnSubmit();
+          expect(spySubmitHandler).toHaveBeenCalled();
+        });
+      });
+    });
+    describe("when beforeSubmitValidation props is null", () => {
+      beforeEach(() => {
+        spyBeforeSubmitValidation = null;
+        instance.context.wizard.beforeSubmitValidation = spyBeforeSubmitValidation;
+      });
+      it("calls the parent wizard to complete", () => {
+        instance.handleOnSubmit();
+        expect(spyComplete).toHaveBeenCalled();
+      });
+      it("calls submitHandler of parent wizard", () => {
+        instance.handleOnSubmit();
+        expect(spySubmitHandler).toHaveBeenCalled();
+      });
+    });
+  });
+  describe("handleOnNext", () => {
+    describe("when onNext props is not null", () => {
+      it("calls the onNext props", () => {
+        instance = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Step, {
+          stepNumber: 1,
+          onNext: spyOnNext
+        }, "Demo Step"));
+        instance.context = stepContext;
+        instance.handleOnNext();
+        expect(spyOnNext).toHaveBeenCalled();
+        expect(spyNext).not.toHaveBeenCalled();
+      });
+    });
+    describe("when onNext props is null", () => {
+      it("calls the parent wizard to step forward", () => {
+        instance.handleOnNext();
+        expect(spyNext).toHaveBeenCalled();
+      });
+    });
+  });
+  describe("handleOnBack", () => {
+    describe("when onBack props is not null", () => {
+      it("calls the onBack props", () => {
+        instance = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Step, {
+          stepNumber: 1,
+          onBack: spyOnBack
+        }, "Demo Step"));
+        instance.context = stepContext;
+        instance.handleOnBack();
+        expect(spyOnBack).toHaveBeenCalled();
+        expect(spyBack).not.toHaveBeenCalled();
+      });
+    });
+    describe("when onBack props is null", () => {
+      it("calls the parent wizard to step backward", () => {
+        instance.handleOnBack();
+        expect(spyBack).toHaveBeenCalled();
+      });
+    });
+  });
+  describe("wizard", () => {
+    it("returns the parent wizard", () => {
+      expect(instance.wizard).toEqual(stepContext.wizard);
+    });
+  });
+  describe("currentStepNumber", () => {
+    it("returns the current step number", () => {
+      expect(instance.currentStepNumber).toEqual(stepNumber);
+    });
+  });
+  describe("isFirstStep", () => {
+    describe("when at the first step", () => {
+      it("returns true", () => {
+        expect(instance.isFirstStep).toBeTruthy();
+      });
+    });
+    describe("when not at the first step", () => {
+      it("returns false", () => {
+        instance = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Step, {
+          stepNumber: 2
+        }, "Demo Step"));
+        instance.context = stepContext;
+        expect(instance.isFirstStep).toBeFalsy();
+      });
+    });
+  });
+  describe("isLastStep", () => {
+    describe("when at the last step", () => {
+      it("returns true", () => {
+        instance = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Step, {
+          stepNumber: 3
+        }, "Demo Step"));
+        instance.context = stepContext;
+        expect(instance.isLastStep).toBeTruthy();
+      });
+    });
+    describe("when not at the first step", () => {
+      it("returns false", () => {
+        expect(instance.isLastStep).toBeFalsy();
+      });
+    });
+  });
+  describe("stepDisabled", () => {
+    describe("when inactive step is enabled", () => {
+      it("returns false", () => {
+        stepContext.wizard.enableInactiveSteps = true;
+        expect(instance.stepDisabled).toBeFalsy();
+      });
+    });
+    describe("when step number is equal to current step", () => {
+      it("returns false", () => {
+        expect(instance.stepDisabled).toBeFalsy();
+      });
+    });
+    describe("when step number is not equal to current step", () => {
+      it("returns true", () => {
+        instance = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Step, {
+          stepNumber: 2
+        }, "Demo Step"));
+        instance.context = stepContext;
+        expect(instance.stepDisabled).toBeTruthy();
+      });
+    });
+    describe("when step is enabled", () => {
+      it("returns false", () => {
+        instance = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Step, {
+          stepNumber: 1,
+          enabled: true
+        }, "Demo Step"));
+        instance.context = stepContext;
+        expect(instance.stepDisabled).toBeFalsy();
+      });
+    });
+  });
+  describe("stepProcessed", () => {
+    describe("when at the last step", () => {
+      it("returns parent wizard completion status", () => {
+        instance = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Step, {
+          stepNumber: 3
+        }, "Demo Step"));
+        instance.context = stepContext;
+        expect(instance.stepProcessed).toEqual(completed);
+      });
+    });
+    describe("when not at the last step", () => {
+      describe("when step number is less than to current step", () => {
+        it("returns true", () => {
+          stepContext.wizard.currentStep = 2;
+          expect(instance.stepProcessed).toBeTruthy();
+        });
+      });
+      describe("when step number is not less than to current step", () => {
+        it("returns false", () => {
+          expect(instance.stepProcessed).toBeFalsy();
+        });
+      });
+    });
+  });
+  describe("stepsCompleted", () => {
+    it("returns parent wizard completion status", () => {
+      expect(instance.stepsCompleted).toEqual(completed);
+    });
+  });
+  describe("buttonHTML", () => {
+    describe("when defaultButton props is true", () => {
+      describe("when at the last step", () => {
+        it("returns the Submit and Back buttons", () => {
+          instance = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Step, {
+            stepNumber: 3
+          }, "Demo Step"));
+          instance.context = stepContext;
+          let buttons = instance.buttonHTML.props.children,
+              nextButton = buttons[0],
+              submitButton = buttons[1],
+              backButton = buttons[2],
+              extraButtons = buttons[3];
+          expect(nextButton).toBeUndefined();
+          expect(submitButton).toBeDefined();
+          expect(backButton).toBeDefined();
+          expect(extraButtons).toEqual([]);
+        });
+      });
+      describe("when not at the last step and not at the first step", () => {
+        it("returns the Next and Back buttons", () => {
+          instance = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Step, {
+            stepNumber: 2
+          }, "Demo Step"));
+          instance.context = stepContext;
+          let buttons = instance.buttonHTML.props.children,
+              nextButton = buttons[0],
+              submitButton = buttons[1],
+              backButton = buttons[2],
+              extraButtons = buttons[3];
+          expect(nextButton).toBeDefined();
+          expect(submitButton).toBeUndefined();
+          expect(backButton).toBeDefined();
+          expect(extraButtons).toEqual([]);
+        });
+      });
+      describe("when at the first step", () => {
+        it("returns the Next button", () => {
+          let buttons = instance.buttonHTML.props.children,
+              nextButton = buttons[0],
+              submitButton = buttons[1],
+              backButton = buttons[2],
+              extraButtons = buttons[3];
+          expect(nextButton).toBeDefined();
+          expect(submitButton).toBeUndefined();
+          expect(backButton).toBeUndefined();
+          expect(extraButtons).toEqual([]);
+        });
+      });
+    });
+    describe("when defaultButton props is false", () => {
+      it("returns the Extra buttons", () => {
+        instance = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Step, {
+          stepNumber: 2,
+          defaultButton: false,
+          extraButtons: [/*#__PURE__*/React.createElement(Button, null, "Extra Buttons")]
+        }, "Demo Step"));
+        instance.context = stepContext;
+        let extraButton = instance.buttonHTML[0],
+            extraButtonText = extraButton.props.children.props.children;
+        expect(extraButtonText).toEqual("Extra Buttons");
+      });
+    });
+  });
+  describe("indicatorHTML", () => {
+    describe("when the step is not processed", () => {
+      it("returns the step number", () => {
+        let indicator = instance.indicatorHTML;
+        expect(indicator.props.children).toEqual(stepNumber);
+      });
+    });
+    describe("when the step is processed", () => {
+      it("returns the step number", () => {
+        stepContext.wizard.currentStep = 2;
+        let indicator = instance.indicatorHTML;
+        expect(indicator.props.type).toEqual("white-tick");
+      });
+    });
+  });
+  describe("indicatorStatus", () => {
+    describe("when the step is not processed", () => {
+      it("returns pending status", () => {
+        let status = instance.indicatorStatus;
+        expect(status).toEqual("pending");
+      });
+    });
+    describe("when the step is processed", () => {
+      it("returns processed status", () => {
+        stepContext.wizard.currentStep = 2;
+        let status = instance.indicatorStatus;
+        expect(status).toEqual("processed");
+      });
+    });
+  });
+  describe("mainClasses", () => {
+    it("adds a className based on the step number", () => {
+      expect(instance.mainClasses).toContain("multi-step-wizard-step-1");
+    });
+    it("adds a className based on the step progress", () => {
+      expect(instance.mainClasses).toContain("multi-step-wizard-step-1");
+    });
+    it("adds a className if the step is the last step", () => {
+      instance = TestUtils.renderIntoDocument( /*#__PURE__*/React.createElement(Step, {
+        stepNumber: 3
+      }, "Demo Step"));
+      instance.context = stepContext;
+      expect(instance.mainClasses).toContain("multi-step-wizard-step-final");
+    });
+  });
+  describe("render", () => {
+    it("renders a div if parent wizard is not available", () => {
+      let div = TestUtils.scryRenderedDOMComponentsWithTag(instance, "div")[0];
+      expect(div.className).toEqual("multi-step-wizard-step--none");
+    });
+  });
+  describe("component tags", () => {
+    describe("button tags", () => {
+      describe("next button", () => {
+        let wrapper = mount( /*#__PURE__*/React.createElement(Step, {
+          stepNumber: 1
+        }, "Demo Step"), {
+          context: {
+            wizard: {
+              totalSteps: 3
+            }
+          }
+        });
+        it("includes correct tags for the button", () => {
+          let next = wrapper.find("[data-element='next']");
+          expect(next.exists()).toBe(true);
+        });
+      });
+      describe("back button", () => {
+        let wrapper = mount( /*#__PURE__*/React.createElement(Step, {
+          stepNumber: 2
+        }, "Demo Step"), {
+          context: {
+            wizard: {
+              totalSteps: 3
+            }
+          }
+        });
+        it("includes correct tags for the button", () => {
+          let back = wrapper.find("[data-element='back']");
+          expect(back.exists()).toBe(true);
+        });
+      });
+      describe("submit button", () => {
+        let wrapper = mount( /*#__PURE__*/React.createElement(Step, {
+          stepNumber: 3
+        }, "Demo Step"), {
+          context: {
+            wizard: {
+              totalSteps: 3
+            }
+          }
+        });
+        it("includes correct tags for the button", () => {
+          let submit = wrapper.find("[data-element='submit']");
+          expect(submit.exists()).toBe(true);
+        });
+      });
+    });
+  });
+});

package/esm/components/multi-step-wizard/step/package.json

@@ -0,0 +1,4 @@
+{
+  "name": "step",
+  "main": "./step.js"
+}

package/esm/components/multi-step-wizard/step/step.d.ts

@@ -0,0 +1,160 @@
+export default Step;
+/**
+ * A Step widget.
+ * This widget is part of MultiStepWizard and it is a wrapper for a step element that is passed to MultiStepWizard.
+ *
+ * == How to use a Step Widget in a component:
+ *  See MultiStepWizard widget
+ *
+ * @class Step
+ * @constructor
+ */
+declare class Step extends React.Component<any, any, any> {
+    constructor(props: any);
+    constructor(props: any, context: any);
+    /**
+     * Completes the step's wizard and triggers the custom submit event handler of the step's wizard
+     *
+     * @method handleOnSubmit
+     * @return {void}
+     */
+    handleOnSubmit: (ev: any) => void;
+    /**
+     * Triggers the custom next event handler of the step's wizard
+     *
+     * @method handleOnNext
+     * @return {void}
+     */
+    handleOnNext: (ev: any) => void;
+    /**
+     * Triggers the custom back event handler of the step's wizard
+     *
+     * @method handleOnBack
+     * @return {void}
+     */
+    handleOnBack: (ev: any) => void;
+    /**
+     * Gets the step's wizard
+     *
+     * @method wizard
+     * @return {Object}
+     */
+    get wizard(): Object;
+    /**
+     * Gets the current step number
+     *
+     * @method currentStepNumber
+     * @return {Number}
+     */
+    get currentStepNumber(): number;
+    /**
+     * Checks if the step is the first step
+     *
+     * @method isFirstStep
+     * @return {Boolean}
+     */
+    get isFirstStep(): boolean;
+    /**
+     * Checks if the step is the last step
+     *
+     * @method isLastStep
+     * @return {Boolean}
+     */
+    get isLastStep(): boolean;
+    /**
+     * Checks if step component should be disabled.
+     *
+     * @method stepDisabled
+     * @return {Boolean}
+     */
+    get stepDisabled(): boolean;
+    /**
+     * Checks if step has been processed.
+     *
+     * @method stepProcessed
+     * @return {Boolean}
+     */
+    get stepProcessed(): boolean;
+    /**
+     * Checks if all steps are completed
+     *
+     * @method stepsCompleted
+     * @return {Boolean}
+     */
+    get stepsCompleted(): boolean;
+    /**
+     * Returns the computed HTML for the step.
+     *
+     * @method stepHTML
+     * @return {Object} JSX
+     */
+    get stepHTML(): Object;
+    /**
+     * Returns the computed HTML for the buttons.
+     *
+     * @method buttonHTML
+     * @return {Object} JSX
+     */
+    get buttonHTML(): Object;
+    /**
+     * Returns the computed HTML for the step indicator.
+     *
+     * @method indicatorHTML
+     * @return {Object} JSX
+     */
+    get indicatorHTML(): Object;
+    /**
+     * Returns the step indicator status.
+     *
+     * @method indicatorStatus
+     * @return {Boolean}
+     */
+    get indicatorStatus(): boolean;
+    /**
+     * Returns the computed HTML for the extra buttons.
+     *
+     * @method extraButtonHTML
+     * @return {Object} JSX
+     */
+    get extraButtonHTML(): Object;
+    /**
+     * Main class getter
+     *
+     * @method mainClasses
+     * @return {String}
+     */
+    get mainClasses(): string;
+}
+declare namespace Step {
+    namespace propTypes {
+        const stepNumber: number;
+        const defaultButton: boolean;
+        const onNext: Function;
+        const onBack: Function;
+        const extraButtons: any[];
+        const enabled: boolean;
+        const className: string;
+        const children: Node;
+    }
+    namespace defaultProps {
+        const children_1: null;
+        export { children_1 as children };
+        const className_1: string;
+        export { className_1 as className };
+        const defaultButton_1: boolean;
+        export { defaultButton_1 as defaultButton };
+        const enabled_1: boolean;
+        export { enabled_1 as enabled };
+        const extraButtons_1: never[];
+        export { extraButtons_1 as extraButtons };
+        const onBack_1: null;
+        export { onBack_1 as onBack };
+        const onNext_1: null;
+        export { onNext_1 as onNext };
+    }
+    namespace contextTypes {
+        const wizard: PropTypes.Requireable<object>;
+    }
+}
+import React from "react";
+import PropTypes from "prop-types";