@decisiv/ui-components 2.0.1-alpha.186 → 2.0.1-alpha.187

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

@@ -0,0 +1,591 @@
+"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('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 _render = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render.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 _render2 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          size: "extraLarge",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render2.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 _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).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 _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).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 _render5 = render(_react.default.createElement(_.default, {
+        title: "Wizard Title",
+        visible: true,
+        activeStep: activeStep,
+        submitButtonProps: {
+          onClick: function onClick() {
+            return null;
+          }
+        },
+        steps: steps
+      })),
+          getByRole = _render5.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 _render6 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          onCancel: onCancelMock,
+          activeStep: activeStep,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render6.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toBeInTheDocument();
+
+        _react2.fireEvent.click((0, _react2.within)(modal).getByText(/cancel/i, {
+          selector: 'button'
+        }));
+
+        expect(onCancelMock).toHaveBeenCalled();
+      });
+    });
+    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 _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();
+        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 _render8 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: steps.length,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render8.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 _render9 = render(_react.default.createElement(_.default, {
+            title: "Wizard Title",
+            visible: true,
+            activeStep: 1,
+            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(/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 _render10 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 2,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render10.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 _render11 = render(_react.default.createElement(_.default, {
+          title: "Wizard Title",
+          visible: true,
+          activeStep: 1,
+          submitButtonProps: {
+            onClick: function onClick() {
+              return null;
+            }
+          },
+          steps: steps
+        })),
+            getByRole = _render11.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 _render12 = render(_react.default.createElement(_.default, {
+            title: "Wizard Title",
+            visible: true,
+            activeStep: 2,
+            submitButtonProps: {
+              onClick: function onClick() {
+                return null;
+              }
+            },
+            steps: steps
+          })),
+              getByRole = _render12.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 _render13 = render(_react.default.createElement(_.default, {
+            title: "Wizard Title",
+            visible: true,
+            activeStep: 1,
+            submitButtonProps: {
+              onClick: submitCallbackMock
+            },
+            steps: steps
+          })),
+              getByRole = _render13.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 _render14 = render(_react.default.createElement(_.default, {
+            title: "Wizard Title",
+            visible: true,
+            activeStep: steps.length,
+            submitButtonProps: {
+              onClick: submitCallbackMock
+            },
+            steps: steps
+          })),
+              getByRole = _render14.getByRole;
+
+          var modal = getByRole('dialog');
+          expect((0, _react2.within)(modal).getByText(/submit/i)).toBeInTheDocument();
+        });
+      });
+    });
+  });
+});

package/lib/components/Wizard/schema.d.ts

@@ -0,0 +1,3 @@
+declare const schema: any;
+export default schema;
+//# sourceMappingURL=schema.d.ts.map

package/lib/components/Wizard/schema.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAsC,CAAC;AA6CnD,eAAe,MAAM,CAAC"}

package/lib/components/Wizard/schema.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactDesc = require("react-desc");
+
+// @ts-ignore no module typings
+var schema = (0, _reactDesc.describe)({
+  displayName: 'Wizard'
+});
+schema.propTypes = {
+  id: _reactDesc.PropTypes.string.description('A unique identifier for the modal.'),
+  size: _reactDesc.PropTypes.oneOf(['normal', 'extraLarge']).description('Define the max width size of the modal').defaultValue('normal'),
+  title: _reactDesc.PropTypes.string.description('The text for rendering in the H2 at the top of the modal').isRequired,
+  onCancel: _reactDesc.PropTypes.func.description('The event handler called to close the modal. This is called by either pressing Esc or clicking the "Cancel" button').isRequired,
+  visible: _reactDesc.PropTypes.bool.description('A boolean value used to control whether the modal is visible or not').defaultValue('false'),
+  zIndex: _reactDesc.PropTypes.number.description('Sets the z-index value for the modal & overlay.'),
+  activeStep: _reactDesc.PropTypes.number.description('The currently active step in the wizard. This has to be handled by the user').isRequired,
+  steps: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({
+    title: _reactDesc.PropTypes.string.isRequired,
+    content: _reactDesc.PropTypes.node.isRequired,
+    previousButtonProps: _reactDesc.PropTypes.shape({
+      onClick: _reactDesc.PropTypes.func.isRequired
+    }),
+    nextButtonProps: _reactDesc.PropTypes.shape({
+      onClick: _reactDesc.PropTypes.func.isRequired
+    })
+  })).description('Define the steps to render in the wizard. For more info on the usage, see the Step Props table below').isRequired,
+  submitButtonProps: _reactDesc.PropTypes.shape({
+    onClick: _reactDesc.PropTypes.func.isRequired
+  }).description('the props to pass to the submit button, this button is rendered by default in the last stesp').isRequired
+};
+var _default = schema;
+exports.default = _default;