@enact/limestone 1.3.0

package/WizardPanels/tests/WizardPanels-specs.js

@@ -0,0 +1,713 @@
+"use strict";
+
+var _spotlight = _interopRequireDefault(require("@enact/spotlight"));
+require("@testing-library/jest-dom");
+var _react = require("@testing-library/react");
+var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
+var _ = require("../");
+var _jsxRuntime = require("react/jsx-runtime");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
+function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
+function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
+describe('WizardPanels Specs', function () {
+  test('should have title in `Header`', function () {
+    var title = 'WizardPanel title';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.WizardPanels, {
+      title: title,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})
+    }));
+    var expected = 'heading title';
+    var actual = _react.screen.getByText(title).parentElement.parentElement;
+    expect(actual).toHaveClass(expected);
+  });
+  test('should have title overridden by title set in `View`', function () {
+    var wizardTitle = 'WizardPanel title';
+    var viewTitle = 'View title';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.WizardPanels, {
+      title: wizardTitle,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        title: viewTitle
+      })
+    }));
+    var headerTitle = _react.screen.queryByText(viewTitle);
+    expect(headerTitle).toBeInTheDocument();
+    expect(headerTitle.parentElement.parentElement).toHaveClass('title');
+  });
+  test('should have subtitle from `View`', function () {
+    var viewSubtitle = 'View subtitle';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.WizardPanels, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        subtitle: viewSubtitle
+      })
+    }));
+    var expected = 'subtitle';
+    var headerSubtitle = _react.screen.getByText(viewSubtitle);
+    expect(headerSubtitle.parentElement.parentElement).toHaveClass(expected);
+  });
+  test('should have View buttons rendered in footer', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.WizardPanels, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("footer", {
+          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            children: "Button 1"
+          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
+            children: "Button 2"
+          })]
+        })
+      })
+    }));
+    var buttons = _react.screen.getAllByRole('button');
+    var prevButtonContainer = buttons[0].parentElement;
+    var nextButtonContainer = buttons[1].parentElement;
+    var expected = 2;
+    var actual = buttons.length;
+    expect(actual).toBe(expected);
+    expect(prevButtonContainer).toHaveClass('footer');
+    expect(nextButtonContainer).toHaveClass('footer');
+  });
+  test('should have View contents rendered in `.content`', function () {
+    var contentText = 'content';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.WizardPanels, {
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: contentText
+      })
+    }));
+    var expected = 'content';
+    var actual = _react.screen.getByText(contentText).parentElement.parentElement;
+    expect(actual).toHaveClass(expected);
+  });
+  test('should not hide next button on the last view when `nextButton` prop is added on the last Panel', /*#__PURE__*/_asyncToGenerator(function* () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: 2,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        nextButton: true,
+        children: "Last"
+      })]
+    }));
+    var expected = 'Next';
+    var actual = _react.screen.getAllByRole('button')[1];
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toHaveAttribute('aria-label', expected);
+    });
+  }));
+  test('should hide next button on the last view', function () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: 2,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Last!"
+      })]
+    }));
+    var buttons = _react.screen.getAllByRole('button');
+    var expected = 1;
+    var actual = buttons.length;
+    expect(actual).toBe(expected);
+    expect(buttons[0]).not.toHaveAttribute('aria-label', 'Next');
+  });
+  test('should hide previous button on the first view', /*#__PURE__*/_asyncToGenerator(function* () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Last!"
+      })]
+    }));
+    var buttons = _react.screen.getAllByRole('button');
+    var expected = 1;
+    var actual = buttons.length;
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toBe(expected);
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(buttons[0]).not.toHaveAttribute('aria-label', 'Previous');
+    });
+  }));
+  test('should show next button on the first view', /*#__PURE__*/_asyncToGenerator(function* () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Last!"
+      })]
+    }));
+    var nextButton = _react.screen.getByLabelText('Next');
+    yield (0, _react.waitFor)(function () {
+      expect(nextButton).toBeInTheDocument();
+    });
+  }));
+  test('should not hide previous button on the first view when `prevButton` prop is added on the first Panel', /*#__PURE__*/_asyncToGenerator(function* () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: 0,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        prevButton: true,
+        children: "Panel 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 3"
+      })]
+    }));
+    var prevButton = _react.screen.getByLabelText('Previous');
+    yield (0, _react.waitFor)(function () {
+      expect(prevButton).toBeInTheDocument();
+    });
+  }));
+  test('should hide next nextButton on all the panels with `nextButtonVisibility` set to never', /*#__PURE__*/_asyncToGenerator(function* () {
+    var _render = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+        index: 2,
+        nextButtonVisibility: "never",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "Panel 1"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "Panel 2"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "Panel 3"
+        })]
+      })),
+      rerender = _render.rerender;
+    var panel3Buttons = _react.screen.getAllByRole('button');
+    yield (0, _react.waitFor)(function () {
+      expect(panel3Buttons.length).toBe(1);
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(panel3Buttons[0]).not.toHaveAttribute('aria-label', 'Next');
+    });
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: 1,
+      nextButtonVisibility: "never",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 3"
+      })]
+    }));
+    var panel2Buttons = _react.screen.getAllByRole('button');
+    yield (0, _react.waitFor)(function () {
+      expect(panel2Buttons.length).toBe(1);
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(panel2Buttons[0]).not.toHaveAttribute('aria-label', 'Next');
+    });
+  }));
+  test('should hide previous button on all the panels with `prevButtonVisibility` set to never', /*#__PURE__*/_asyncToGenerator(function* () {
+    var _render2 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+        index: 0,
+        prevButtonVisibility: "never",
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "Panel 1"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "Panel 2"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "Panel 3"
+        })]
+      })),
+      rerender = _render2.rerender;
+    var panel1Buttons = _react.screen.getAllByRole('button');
+    yield (0, _react.waitFor)(function () {
+      expect(panel1Buttons.length).toBe(1);
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(panel1Buttons[0]).not.toHaveAttribute('aria-label', 'Previous');
+    });
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: 1,
+      prevButtonVisibility: "never",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 3"
+      })]
+    }));
+    var panel2Buttons = _react.screen.getAllByRole('button');
+    yield (0, _react.waitFor)(function () {
+      expect(panel2Buttons.length).toBe(1);
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(panel2Buttons[0]).not.toHaveAttribute('aria-label', 'Previous');
+    });
+  }));
+  test('should hide previous button on the second Panel when panel overrides', /*#__PURE__*/_asyncToGenerator(function* () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      defaultIndex: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        prevButton: false,
+        children: "Panel 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 3"
+      })]
+    }));
+    var buttons = _react.screen.getAllByRole('button');
+    var expected = 1;
+    var actual = buttons.length;
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toBe(expected);
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(buttons[0]).not.toHaveAttribute('aria-label', 'Previous');
+    });
+  }));
+  test('should show previous button on the first view when `prevButtonVisibility` prop is set to always', /*#__PURE__*/_asyncToGenerator(function* () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: 0,
+      prevButtonVisibility: "always",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 3"
+      })]
+    }));
+    var buttons = _react.screen.getAllByRole('button');
+    var expected = 2;
+    var actual = buttons.length;
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toBe(expected);
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(buttons[0]).toHaveAttribute('aria-label', 'Previous');
+    });
+  }));
+  test('should hide previous button on the first view when `prevButtonVisibility` prop is set to always and panel overrides', /*#__PURE__*/_asyncToGenerator(function* () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: 0,
+      prevButtonVisibility: "always",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        prevButton: false,
+        children: "Panel 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 3"
+      })]
+    }));
+    var buttons = _react.screen.getAllByRole('button');
+    var expected = 1;
+    var actual = buttons.length;
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toBe(expected);
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(buttons[0]).not.toHaveAttribute('aria-label', 'Previous');
+    });
+  }));
+  test('should show next button on the last view when `nextButtonVisibility` prop is set to always', /*#__PURE__*/_asyncToGenerator(function* () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: 2,
+      nextButtonVisibility: "always",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 3"
+      })]
+    }));
+    var buttons = _react.screen.getAllByRole('button');
+    var expected = 2;
+    var actual = buttons.length;
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toBe(expected);
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(buttons[1]).toHaveAttribute('aria-label', 'Next');
+    });
+  }));
+  test('should hide next button on the last view when `nextButtonVisibility` prop is set to always and panel overrides', /*#__PURE__*/_asyncToGenerator(function* () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: 2,
+      nextButtonVisibility: "always",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 1"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "Panel 2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        nextButton: false,
+        children: "Panel 3"
+      })]
+    }));
+    var buttons = _react.screen.getAllByRole('button');
+    var expected = 1;
+    var actual = buttons.length;
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toBe(expected);
+    });
+    yield (0, _react.waitFor)(function () {
+      expect(buttons[0]).not.toHaveAttribute('aria-label', 'Next');
+    });
+  }));
+  test('should fire `onWillTransition` with target index and type in pointer mode', /*#__PURE__*/_asyncToGenerator(function* () {
+    var spy = jest.fn();
+    var index = 0;
+    var _render3 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+        index: index,
+        onWillTransition: spy,
+        noAnimation: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "I got contents"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "I got contents2"
+        })]
+      })),
+      rerender = _render3.rerender;
+    spy.mockClear();
+    index++;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: index,
+      onWillTransition: spy,
+      noAnimation: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents2"
+      })]
+    }));
+    var expected = {
+      index: index,
+      type: 'onWillTransition'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+  test('should fire `onWillTransition` with target index and type in 5-way mode', /*#__PURE__*/_asyncToGenerator(function* () {
+    _spotlight["default"].setPointerMode(false);
+    var spy = jest.fn();
+    var index = 0;
+    var _render4 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+        index: index,
+        onWillTransition: spy,
+        noAnimation: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "I got contents"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "I got contents2"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "I got contents3"
+        })]
+      })),
+      rerender = _render4.rerender;
+    spy.mockClear();
+    var nextButton = _react.screen.getByLabelText('Next');
+    _spotlight["default"].focus(nextButton);
+    index++;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: index,
+      onWillTransition: spy,
+      noAnimation: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents2"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents3"
+      })]
+    }));
+    var expected = {
+      index: index,
+      type: 'onWillTransition'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+  test('should fire `onTransition` with target index and type', /*#__PURE__*/_asyncToGenerator(function* () {
+    var spy = jest.fn();
+    var index = 0;
+    var _render5 = (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+        index: index,
+        onTransition: spy,
+        noAnimation: true,
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "I got contents"
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+          children: "I got contents2"
+        })]
+      })),
+      rerender = _render5.rerender;
+    spy.mockClear();
+    index++;
+    rerender(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: index,
+      onTransition: spy,
+      noAnimation: true,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "I got contents2"
+      })]
+    }));
+    var expected = {
+      index: index,
+      type: 'onTransition'
+    };
+    var actual = spy.mock.calls.length && spy.mock.calls[0][0];
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+  test('should advance on next click', /*#__PURE__*/_asyncToGenerator(function* () {
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
+    }));
+    var nextButton = _react.screen.getByLabelText('Next');
+    yield user.click(nextButton);
+    yield (0, _react.waitFor)(function () {
+      var actual = _react.screen.getByText('2');
+      expect(actual).toHaveClass('current');
+    });
+  }));
+  test('should fire `onNextClick` and `onChange` with type when go to the next panel', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var handleNextClick = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: 1,
+      onChange: handleChange,
+      onNextClick: handleNextClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
+    }));
+    var nextButton = _react.screen.getByLabelText('Next');
+    var expected = {
+      type: 'onNextClick'
+    };
+    yield user.click(nextButton);
+    yield (0, _react.waitFor)(function () {
+      expect(handleChange).toHaveBeenCalledWith({
+        index: 2,
+        type: 'onChange'
+      });
+    });
+    yield (0, _react.waitFor)(function () {
+      var actual = handleNextClick.mock.calls.length && handleNextClick.mock.calls[0][0];
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+  test('should go back on prev click', /*#__PURE__*/_asyncToGenerator(function* () {
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      defaultIndex: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
+    }));
+    var prevButton = _react.screen.getByLabelText('Previous');
+    yield user.click(prevButton);
+    yield (0, _react.waitFor)(function () {
+      var actual = _react.screen.getByText('1');
+      expect(actual).toHaveClass('current');
+    });
+  }));
+  test('should fire `onPrevClick` and `onChange` with type when go to the previous panel', /*#__PURE__*/_asyncToGenerator(function* () {
+    var handleChange = jest.fn();
+    var handlePrevClick = jest.fn();
+    var user = _userEvent["default"].setup();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: 2,
+      onChange: handleChange,
+      onPrevClick: handlePrevClick,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
+    }));
+    var prevButton = _react.screen.getByLabelText('Previous');
+    var expected = {
+      type: 'onPrevClick'
+    };
+    yield user.click(prevButton);
+    yield (0, _react.waitFor)(function () {
+      expect(handleChange).toHaveBeenCalledWith({
+        index: 1,
+        type: 'onChange'
+      });
+    });
+    yield (0, _react.waitFor)(function () {
+      var actual = handlePrevClick.mock.calls.length && handlePrevClick.mock.calls[0][0];
+      expect(actual).toMatchObject(expected);
+    });
+  }));
+  test('should go back on back key', /*#__PURE__*/_asyncToGenerator(function* () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      defaultIndex: 1,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "test"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
+    }));
+    _react.fireEvent.keyUp(_react.screen.getByText('test'), {
+      keyCode: 27
+    });
+    yield (0, _react.waitFor)(function () {
+      var actual = _react.screen.getByText('1');
+      expect(actual).toHaveClass('current');
+    });
+  }));
+  test('should go back on back key when prevButtonVisibility set to show never', /*#__PURE__*/_asyncToGenerator(function* () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      defaultIndex: 1,
+      prevButtonVisibility: "never",
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "test"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
+    }));
+    _react.fireEvent.keyUp(_react.screen.getByText('test'), {
+      keyCode: 27
+    });
+    yield (0, _react.waitFor)(function () {
+      var actual = _react.screen.getByText('1');
+      expect(actual).toHaveClass('current');
+    });
+  }));
+  test('should go back on back key when onBack does not call preventDefault', /*#__PURE__*/_asyncToGenerator(function* () {
+    var spy = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      defaultIndex: 1,
+      onBack: spy,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "test"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
+    }));
+    _react.fireEvent.keyUp(_react.screen.getByText('test'), {
+      keyCode: 27
+    });
+    yield (0, _react.waitFor)(function () {
+      var actual = _react.screen.getByText('1');
+      expect(actual).toHaveClass('current');
+    });
+    yield (0, _react.waitFor)(function () {
+      var expected = {
+        type: 'onBack',
+        stopPropagation: expect.any(Function)
+      };
+      expect(spy).toHaveBeenCalledWith(expect.objectContaining(expected));
+    });
+  }));
+  test('should not go back on back key when onBack calls preventDefault', /*#__PURE__*/_asyncToGenerator(function* () {
+    var spy = jest.fn(function (ev) {
+      return ev.preventDefault();
+    });
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      defaultIndex: 1,
+      onBack: spy,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        children: "test"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
+    }));
+    _react.fireEvent.keyUp(_react.screen.getByText('test'), {
+      keyCode: 27
+    });
+    yield (0, _react.waitFor)(function () {
+      var actual = _react.screen.getByText('2');
+      expect(actual).toHaveClass('current');
+    });
+    yield (0, _react.waitFor)(function () {
+      var expected = {
+        type: 'onBack',
+        stopPropagation: expect.any(Function)
+      };
+      expect(spy).toHaveBeenCalledWith(expect.objectContaining(expected));
+    });
+  }));
+  test('should support noAnimation', function () {
+    var viewSubtitle = 'View subtitle';
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.WizardPanels, {
+      noAnimation: true,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {
+        subtitle: viewSubtitle
+      })
+    }));
+
+    // check if animation container exists
+    var notExpected = 'titleContainer';
+    var actual = _react.screen.getByText(viewSubtitle).parentElement;
+    expect(actual).not.toHaveClass(notExpected);
+  });
+  test('should reflect the current index in Steps when "current" is not specified', /*#__PURE__*/_asyncToGenerator(function* () {
+    var index = 1;
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: index,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
+    }));
+    yield (0, _react.waitFor)(function () {
+      var actual = _react.screen.getByText(index + 1);
+      expect(actual).toHaveClass('current');
+    });
+  }));
+  test('should reflect the specified index in Steps when "current" is set', /*#__PURE__*/_asyncToGenerator(function* () {
+    var current = 3;
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: 0,
+      current: current,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
+    }));
+    yield (0, _react.waitFor)(function () {
+      var actual = _react.screen.getByText(current);
+      expect(actual).toHaveClass('current');
+    });
+  }));
+  test('should reflect the total views in Steps when "total" is not specified', /*#__PURE__*/_asyncToGenerator(function* () {
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
+    }));
+    var expected = 5;
+    var actual = _react.screen.getByRole('list').children.length;
+    yield (0, _react.waitFor)(function () {
+      expect(actual).toBe(expected);
+    });
+  }));
+  test('should reflect the specified total in Steps when "total" is set', /*#__PURE__*/_asyncToGenerator(function* () {
+    var total = 3;
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      index: 1,
+      current: 1,
+      total: total,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
+    }));
+    var steps = _react.screen.getByRole('list').children.length;
+    yield (0, _react.waitFor)(function () {
+      expect(steps).toBe(total);
+    });
+  }));
+  test('should reflect the aria-label when "current" is set', /*#__PURE__*/_asyncToGenerator(function* () {
+    var current = 2;
+    var total = 4;
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_.WizardPanels, {
+      current: current,
+      total: total,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})]
+    }));
+    var header = _react.screen.getByRole('region').children[0].children[0];
+    var expected = "Step ".concat(current, " of ").concat(total, " ");
+    yield (0, _react.waitFor)(function () {
+      expect(header).toHaveAttribute('aria-label', expected);
+    });
+  }));
+  test('should return a ref to the root Panel node', function () {
+    var ref = jest.fn();
+    (0, _react.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_.WizardPanels, {
+      ref: ref,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.Panel, {})
+    }));
+    var expected = 'ARTICLE';
+    var actual = ref.mock.calls[0][0].nodeName;
+    expect(actual).toBe(expected);
+  });
+});