@decisiv/ui-components 2.0.1-alpha.97 → 2.0.1

package/lib/components/Wizard/index.test.js

@@ -0,0 +1,940 @@
+"use strict";
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _polished = require("polished");
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
+var _ = _interopRequireDefault(require("."));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var StepContent = function StepContent(_ref) {
+  var text = _ref.text;
+  return _react.default.createElement("div", null, text);
+};
+
+var render = function render(ui, options) {
+  return (0, _react2.render)(_react.default.createElement(_ConfigProvider.ConfigProvider, null, ui), _objectSpread({}, options));
+};
+
+describe('Wizard', function () {
+  describe('renderActions', function () {
+    describe('when not provided', function () {
+      it('renders the default action buttons', function () {
+        var steps = [{
+          title: 'First Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 1 Content"
+          }),
+          nextButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          }
+        }, {
+          title: 'Second Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 2 Content"
+          })
+        }, {
+          title: 'Third Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 3 Content"
+          })
+        }];
+
+        var _render = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          onCancel: function onCancel() {
+            return null;
+          },
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/cancel/i, {
+          selector: 'button'
+        })).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/continue/i, {
+          selector: 'button'
+        })).toBeInTheDocument();
+      });
+    });
+    describe('when provided', function () {
+      it('renders the custom action buttons', function () {
+        var steps = [{
+          title: 'First Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 1 Content"
+          })
+        }, {
+          title: 'Second Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 2 Content"
+          })
+        }, {
+          title: 'Third Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 3 Content"
+          })
+        }];
+
+        var _render2 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps,
+          renderActions: function renderActions() {
+            return _react.default.createElement("div", null, "Custom Actions");
+          }
+        })),
+            getByRole = _render2.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/custom actions/i)).toBeInTheDocument();
+      });
+    });
+  });
+  describe('hideBodyTitle', function () {
+    it('hides the content title when hideBodyTitle is true for the step', function () {
+      var steps = [{
+        title: 'First Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 1 Content"
+        }),
+        hideBodyTitle: true
+      }, {
+        title: 'Second Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 2 Content"
+        })
+      }, {
+        title: 'Third Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 3 Content"
+        })
+      }];
+
+      var _render3 = render(_react.default.createElement(_.default, {
+        title: "Wizard Title",
+        visible: true,
+        activeStep: 1,
+        submitButtonProps: {
+          onClick: function onClick() {
+            return null;
+          }
+        },
+        steps: steps
+      })),
+          getByRole = _render3.getByRole;
+
+      var modal = getByRole('dialog');
+      expect(modal).toBeInTheDocument();
+      expect((0, _react2.within)(modal).queryByText(/first step/i, {
+        selector: 'h3'
+      })).not.toBeInTheDocument();
+    });
+  });
+  describe('size', function () {
+    describe('normal / default', function () {
+      it('renders the modal with a max-width of 650px', function () {
+        var steps = [{
+          title: 'First Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 1"
+          })
+        }, {
+          title: 'Second Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 2"
+          })
+        }, {
+          title: 'Third Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 3"
+          })
+        }];
+
+        var _render4 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render4.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toHaveStyle('max-width: 650px');
+      });
+    });
+    describe('extraLarge', function () {
+      it("renders the modal with a max-width of ".concat((0, _polished.rem)(_designTokens.spacing.base * 90)), function () {
+        var steps = [{
+          title: 'First Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 1"
+          })
+        }, {
+          title: 'Second Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 2"
+          })
+        }, {
+          title: 'Third Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 3"
+          })
+        }];
+
+        var _render5 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          size: "extraLarge",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render5.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toHaveStyle("max-width: ".concat((0, _polished.rem)(_designTokens.spacing.base * 90)));
+      });
+    });
+  });
+  it('renders the title of the wizard in an h2 tag', function () {
+    var steps = [{
+      title: 'First Step',
+      content: _react.default.createElement(StepContent, {
+        text: "Step 1"
+      })
+    }, {
+      title: 'Second Step',
+      content: _react.default.createElement(StepContent, {
+        text: "Step 2"
+      })
+    }, {
+      title: 'Third Step',
+      content: _react.default.createElement(StepContent, {
+        text: "Step 3"
+      })
+    }];
+
+    var _render6 = render(_react.default.createElement(_.default, {
+      title: "Wizard Title",
+      visible: true,
+      activeStep: 1,
+      submitButtonProps: {
+        onClick: function onClick() {
+          return null;
+        }
+      },
+      steps: steps
+    })),
+        getByRole = _render6.getByRole;
+
+    var modal = getByRole('dialog');
+    expect(modal).toBeInTheDocument();
+    expect((0, _react2.within)(modal).getByText(/wizard title/i, {
+      selector: 'h2'
+    })).toBeInTheDocument();
+  });
+  describe('step tracker', function () {
+    it('renders all the steps', function () {
+      var steps = [{
+        title: 'First Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 1"
+        })
+      }, {
+        title: 'Second Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 2"
+        })
+      }, {
+        title: 'Third Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 3"
+        })
+      }];
+
+      var _render7 = render(_react.default.createElement(_.default, {
+        title: "Wizard Title",
+        visible: true,
+        activeStep: 1,
+        submitButtonProps: {
+          onClick: function onClick() {
+            return null;
+          }
+        },
+        steps: steps
+      })),
+          getByRole = _render7.getByRole;
+
+      var modal = getByRole('dialog');
+      expect(modal).toBeInTheDocument();
+      steps.forEach(function (_ref2) {
+        var title = _ref2.title;
+        expect((0, _react2.within)(modal).getByText(title, {
+          selector: 'p'
+        })).toBeInTheDocument();
+      });
+    });
+    it('renders the content of the active step', function () {
+      var activeStep = 2;
+      var steps = [{
+        title: 'First Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 1 Content"
+        })
+      }, {
+        title: 'Second Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 2 Content"
+        })
+      }, {
+        title: 'Third Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 3 Content"
+        })
+      }];
+
+      var _render8 = render(_react.default.createElement(_.default, {
+        title: "Wizard Title",
+        visible: true,
+        activeStep: activeStep,
+        submitButtonProps: {
+          onClick: function onClick() {
+            return null;
+          }
+        },
+        steps: steps
+      })),
+          getByRole = _render8.getByRole;
+
+      var modal = getByRole('dialog');
+      expect(modal).toBeInTheDocument();
+      expect((0, _react2.within)(modal).getByText(/step 2 content/i)).toBeInTheDocument();
+    });
+  });
+  describe('step actions', function () {
+    describe('clicking on cancel', function () {
+      var onCancelMock = jest.fn();
+      it('calls the onCancel callback', function () {
+        var activeStep = 1;
+        var steps = [{
+          title: 'First Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 1 Content"
+          })
+        }, {
+          title: 'Second Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 2 Content"
+          })
+        }, {
+          title: 'Third Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 3 Content"
+          })
+        }];
+
+        var _render9 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          onCancel: onCancelMock,
+          activeStep: activeStep,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render9.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+
+        _react2.fireEvent.click((0, _react2.within)(modal).getByText(/cancel/i, {
+          selector: 'button'
+        }));
+
+        expect(onCancelMock).toHaveBeenCalled();
+      });
+    });
+    describe('cancelButtonProps', function () {
+      var steps = [{
+        title: 'First Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 1 Content"
+        })
+      }, {
+        title: 'Second Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 2 Content"
+        })
+      }, {
+        title: 'Third Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 3 Content"
+        })
+      }];
+      it('passes additional props to the cancel button', function () {
+        var _render10 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps,
+          cancelButtonProps: {
+            disabled: true
+          }
+        })),
+            getByRole = _render10.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/cancel/i, {
+          selector: 'button'
+        })).toBeDisabled();
+      });
+      it('allows overriding the cancel button text', function () {
+        var _render11 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps,
+          cancelButtonProps: {
+            text: 'Dismiss'
+          }
+        })),
+            getByRole = _render11.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/dismiss/i, {
+          selector: 'button'
+        })).toBeInTheDocument();
+      });
+      it('allows overriding onClick, replacing onCancel', function () {
+        var onCancelMock = jest.fn();
+        var cancelButtonOnClickMock = jest.fn();
+
+        var _render12 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          onCancel: onCancelMock,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps,
+          cancelButtonProps: {
+            onClick: cancelButtonOnClickMock
+          }
+        })),
+            getByRole = _render12.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+
+        _react2.fireEvent.click((0, _react2.within)(modal).getByText(/cancel/i, {
+          selector: 'button'
+        }));
+
+        expect(cancelButtonOnClickMock).toHaveBeenCalled();
+        expect(onCancelMock).not.toHaveBeenCalled();
+      });
+    });
+    describe('when onCancel is not provided', function () {
+      var steps = [{
+        title: 'First Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 1 Content"
+        })
+      }, {
+        title: 'Second Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 2 Content"
+        })
+      }, {
+        title: 'Third Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 3 Content"
+        })
+      }];
+      it('does not render the Cancel button when neither onCancel nor cancelButtonProps are provided', function () {
+        var _render13 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render13.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).queryByText(/cancel/i, {
+          selector: 'button'
+        })).not.toBeInTheDocument();
+      });
+      it('does not call onCancel when Esc is pressed', function () {
+        var onCancelMock = jest.fn();
+        render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        }));
+
+        _react2.fireEvent.keyDown(document, {
+          key: 'Escape'
+        });
+
+        expect(onCancelMock).not.toHaveBeenCalled();
+      });
+      it('renders the Cancel button (disabled) when cancelButtonProps is provided without onClick', function () {
+        var _render14 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps,
+          cancelButtonProps: {
+            text: 'Cancel'
+          }
+        })),
+            getByRole = _render14.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/cancel/i, {
+          selector: 'button'
+        })).toBeDisabled();
+      });
+    });
+    describe('when only onCancel is provided', function () {
+      var steps = [{
+        title: 'First Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 1 Content"
+        })
+      }, {
+        title: 'Second Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 2 Content"
+        })
+      }, {
+        title: 'Third Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 3 Content"
+        })
+      }];
+      it('renders the Cancel button in an enabled state', function () {
+        var onCancelMock = jest.fn();
+
+        var _render15 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          onCancel: onCancelMock,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render15.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText(/cancel/i, {
+          selector: 'button'
+        })).toBeEnabled();
+      });
+    });
+    describe('Continue action', function () {
+      it('doesnt render the button if nextButtonProps is not provided to the step', function () {
+        var steps = [{
+          title: 'First Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 1 Content"
+          })
+        }, {
+          title: 'Second Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 2 Content"
+          })
+        }, {
+          title: 'Third Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 3 Content"
+          })
+        }];
+
+        var _render16 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render16.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).queryByText(/continue/i, {
+          selector: 'button'
+        })).not.toBeInTheDocument();
+      });
+      it('doesnt render the button if im on the last step', function () {
+        var steps = [{
+          title: 'First Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 1 Content"
+          })
+        }, {
+          title: 'Second Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 2 Content"
+          })
+        }, {
+          title: 'Third Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 3 Content"
+          }),
+          nextButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          }
+        }];
+
+        var _render17 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: steps.length,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render17.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).queryByText(/continue/i, {
+          selector: 'button'
+        })).not.toBeInTheDocument();
+      });
+      describe('clicking on continue', function () {
+        var step1ContinueCallback = jest.fn();
+        var step2ContinueCallback = jest.fn();
+        var step3ContinueCallback = jest.fn();
+        var step1ContinueProps = {
+          onClick: step1ContinueCallback
+        };
+        var steps = [{
+          title: 'First Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 1 Content"
+          }),
+          nextButtonProps: step1ContinueProps
+        }, {
+          title: 'Second Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 2 Content"
+          })
+        }, {
+          title: 'Third Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 3 Content"
+          })
+        }];
+        it('calls the onClick from the continueProps of the active step', function () {
+          var _render18 = render(_react.default.createElement(_.default, {
+            title: "Wizard Title",
+            visible: true,
+            activeStep: 1,
+            submitButtonProps: {
+              onClick: function onClick() {
+                return null;
+              }
+            },
+            steps: steps
+          })),
+              getByRole = _render18.getByRole;
+
+          var modal = getByRole('dialog');
+          expect(modal).toBeInTheDocument();
+
+          _react2.fireEvent.click((0, _react2.within)(modal).getByText(/continue/i, {
+            selector: 'button'
+          }));
+
+          expect(step1ContinueCallback).toHaveBeenCalled();
+          expect(step2ContinueCallback).not.toHaveBeenCalled();
+          expect(step3ContinueCallback).not.toHaveBeenCalled();
+        });
+      });
+    });
+    describe('Back action', function () {
+      it('doesnt render the button if no props are provided to the step', function () {
+        var steps = [{
+          title: 'First Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 1 Content"
+          })
+        }, {
+          title: 'Second Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 2 Content"
+          }),
+          nextButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          }
+        }, {
+          title: 'Third Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 3 Content"
+          })
+        }];
+
+        var _render19 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 2,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render19.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).queryByText(/back/i, {
+          selector: 'button'
+        })).not.toBeInTheDocument();
+      });
+      it('doesnt render the button if im on the first step', function () {
+        var steps = [{
+          title: 'First Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 1 Content"
+          }),
+          previousButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          }
+        }, {
+          title: 'Second Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 2 Content"
+          })
+        }, {
+          title: 'Third Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 3 Content"
+          })
+        }];
+
+        var _render20 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render20.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+        expect((0, _react2.within)(modal).queryByText(/back/i, {
+          selector: 'button'
+        })).not.toBeInTheDocument();
+      });
+      describe('clicking on back', function () {
+        var step2BackCallback = jest.fn();
+        var step3BackCallback = jest.fn();
+        var steps = [{
+          title: 'First Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 1 Content"
+          })
+        }, {
+          title: 'Second Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 2 Content"
+          }),
+          previousButtonProps: {
+            onClick: step2BackCallback
+          }
+        }, {
+          title: 'Third Step',
+          content: _react.default.createElement(StepContent, {
+            text: "Step 3 Content"
+          }),
+          previousButtonProps: {
+            onClick: step3BackCallback
+          }
+        }];
+        it('calls the onClick from the continueProps of the active step', function () {
+          var _render21 = render(_react.default.createElement(_.default, {
+            title: "Wizard Title",
+            visible: true,
+            activeStep: 2,
+            submitButtonProps: {
+              onClick: function onClick() {
+                return null;
+              }
+            },
+            steps: steps
+          })),
+              getByRole = _render21.getByRole;
+
+          var modal = getByRole('dialog');
+          expect(modal).toBeInTheDocument();
+
+          _react2.fireEvent.click((0, _react2.within)(modal).getByText(/back/i, {
+            selector: 'button'
+          }));
+
+          expect(step2BackCallback).toHaveBeenCalled();
+          expect(step3BackCallback).not.toHaveBeenCalled();
+        });
+      });
+    });
+    describe('Submit action', function () {
+      var steps = [{
+        title: 'First Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 1 Content"
+        })
+      }, {
+        title: 'Second Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 2 Content"
+        })
+      }, {
+        title: 'Third Step',
+        content: _react.default.createElement(StepContent, {
+          text: "Step 3 Content"
+        })
+      }];
+      describe('rendering the submit button', function () {
+        it('doesnt render if im not in the last step', function () {
+          var submitCallbackMock = jest.fn();
+
+          var _render22 = render(_react.default.createElement(_.default, {
+            title: "Wizard Title",
+            visible: true,
+            activeStep: 1,
+            submitButtonProps: {
+              onClick: submitCallbackMock
+            },
+            steps: steps
+          })),
+              getByRole = _render22.getByRole;
+
+          var modal = getByRole('dialog');
+          expect((0, _react2.within)(modal).queryByText(/submit/i)).not.toBeInTheDocument();
+        });
+        it('renders if im in the last step', function () {
+          var submitCallbackMock = jest.fn();
+
+          var _render23 = render(_react.default.createElement(_.default, {
+            title: "Wizard Title",
+            visible: true,
+            activeStep: steps.length,
+            submitButtonProps: {
+              onClick: submitCallbackMock
+            },
+            steps: steps
+          })),
+              getByRole = _render23.getByRole;
+
+          var modal = getByRole('dialog');
+          expect((0, _react2.within)(modal).getByText(/submit/i)).toBeInTheDocument();
+        });
+      });
+    });
+  });
+});