@scrippsproduct/networks-ui-library 1.1.9 → 1.1.10

package/dist/components/Carousel/Carousel.test.js

@@ -0,0 +1,705 @@
+import { jsx as s, jsxs as g, Fragment as m } from "react/jsx-runtime";
+import { v as h, d as u, b as B, a as w, i as r, r as a, g as o, s as i, w as c, f as p } from "../../react.esm-DLSrfVwM.mjs";
+import "../../index-BVxBrkZB.mjs";
+import { Carousel as n } from "./Carousel.js";
+h.mock("./CarouselUtils.class", () => ({
+  default: h.fn().mockImplementation(() => ({
+    determineScrollAction: h.fn(),
+    navigateToIndex: h.fn(),
+    clearTimer: h.fn(),
+    startTimer: h.fn(),
+    handleScrollEnd: h.fn()
+  }))
+}));
+h.mock("../CarouselSlide", () => ({
+  CarouselSlide: ({ slide: l, index: e }) => /* @__PURE__ */ s("li", { "data-testid": `carousel-slide-${e}`, "data-index": e, children: l.ariaLabel }),
+  default: ({ slide: l, index: e }) => /* @__PURE__ */ s("li", { "data-testid": `carousel-slide-${e}`, "data-index": e, children: l.ariaLabel })
+}));
+h.mock("react-feather", () => ({
+  ChevronLeft: () => /* @__PURE__ */ s("span", { "data-testid": "chevron-left", children: "Left" }),
+  ChevronRight: () => /* @__PURE__ */ s("span", { "data-testid": "chevron-right", children: "Right" })
+}));
+h.mock("../../utils/helpers", () => ({
+  classes: (l) => l.filter(Boolean).join(" "),
+  chunkArray: (l, e) => {
+    let t = [];
+    for (let d = 0; d <= Math.floor(e.length / l); d++)
+      e.slice(d * l, l * (d + 1)).length && t.push(e.slice(d * l, l * (d + 1)));
+    return t;
+  }
+}));
+u("Carousel", () => {
+  const l = [
+    { id: 1, props: { title: "Cell 1" }, title: "Cell 1", layout: "default" },
+    { id: 2, props: { title: "Cell 2" }, title: "Cell 2", layout: "default" },
+    { id: 3, props: { title: "Cell 3" }, title: "Cell 3", layout: "default" },
+    { id: 4, props: { title: "Cell 4" }, title: "Cell 4", layout: "default" }
+  ];
+  B(() => {
+    h.clearAllMocks();
+  }), w(() => {
+    h.clearAllTimers();
+  }), u("Basic Rendering", () => {
+    r("should render carousel with basic props", () => {
+      const { container: e } = a(/* @__PURE__ */ s(n, { id: "test-carousel", cells: l })), t = e.querySelector('[role="region"]');
+      o(t).toBeInTheDocument();
+    }), r("should render carousel with correct id", () => {
+      const { container: e } = a(/* @__PURE__ */ s(n, { id: "my-carousel", cells: l })), t = e.querySelector("#carousel-my-carousel");
+      o(t).toBeInTheDocument();
+    }), r("should render carousel with numeric id", () => {
+      const { container: e } = a(/* @__PURE__ */ s(n, { id: 123, cells: l })), t = e.querySelector("#carousel-123");
+      o(t).toBeInTheDocument();
+    }), r("should render with aria-roledescription", () => {
+      const { container: e } = a(/* @__PURE__ */ s(n, { id: "test", cells: l })), t = e.querySelector('[aria-roledescription="carousel"]');
+      o(t).toBeInTheDocument();
+    }), r("should render scroller element", () => {
+      a(/* @__PURE__ */ s(n, { id: "test", cells: l }));
+      const e = i.getByRole("group", { name: "Items Scroller" });
+      o(e).toBeInTheDocument();
+    }), r("should render slides", async () => {
+      a(/* @__PURE__ */ s(n, { id: "test", cells: l })), await c(() => {
+        const e = i.getAllByTestId(/carousel-slide-/);
+        o(e.length).toBeGreaterThan(0);
+      });
+    });
+  }), u("Options - Title", () => {
+    r("should render with aria-label when title is provided", () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(n, { id: "test", cells: l, options: { title: "My Carousel" } })
+      ), t = e.querySelector('[aria-label="My Carousel"]');
+      o(t).toBeInTheDocument();
+    }), r("should handle empty title", () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(n, { id: "test", cells: l, options: { title: "" } })
+      ), t = e.querySelector('[role="region"]');
+      o(t).toBeInTheDocument();
+    });
+  }), u("Options - Controls", () => {
+    r("should render navigation controls when showControls is true", async () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showControls: !0 }
+          }
+        )
+      ), await c(() => {
+        const e = i.getByLabelText("Previous Item"), t = i.getByLabelText("Next Item");
+        o(e).toBeInTheDocument(), o(t).toBeInTheDocument();
+      });
+    }), r("should not render navigation controls when showControls is false", () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showControls: !1 }
+          }
+        )
+      );
+      const e = i.queryByLabelText("Previous Item"), t = i.queryByLabelText("Next Item");
+      o(e).not.toBeInTheDocument(), o(t).not.toBeInTheDocument();
+    }), r("should not render controls when cells length equals cellsPerSlide", () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: [l[0]],
+            options: { showControls: !0, cellsPerSlide: 1 }
+          }
+        )
+      );
+      const e = i.queryByLabelText("Previous Item");
+      o(e).not.toBeInTheDocument();
+    }), r("should render controls with custom arrow size", async () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showControls: !0, controlArrowSize: 64 }
+          }
+        )
+      ), await c(() => {
+        const e = i.getByTestId("chevron-left");
+        o(e).toBeInTheDocument();
+      });
+    });
+  }), u("Options - Pagination", () => {
+    r("should render pagination when showPagination is true", async () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showPagination: !0 }
+          }
+        )
+      );
+      await c(() => {
+        const t = e.querySelector(".carousel-nav");
+        o(t).toBeInTheDocument();
+      });
+    }), r("should not render pagination when showPagination is false", () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showPagination: !1 }
+          }
+        )
+      ), t = e.querySelector(".carousel-nav");
+      o(t).not.toBeInTheDocument();
+    }), r("should not render pagination when there is only one slide", () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: [l[0]],
+            options: { showPagination: !0, cellsPerSlide: 1 }
+          }
+        )
+      ), t = e.querySelector(".carousel-nav");
+      o(t).not.toBeInTheDocument();
+    }), r("should render correct number of pagination items", async () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showPagination: !0, cellsPerSlide: 1 }
+          }
+        )
+      );
+      await c(() => {
+        const t = e.querySelectorAll(".carousel-nav__item");
+        o(t.length).toBe(4);
+      });
+    }), r("should set first pagination item as current", async () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showPagination: !0 }
+          }
+        )
+      );
+      await c(() => {
+        const t = e.querySelector('.carousel-nav__item[data-current="true"]');
+        o(t).toBeInTheDocument();
+      });
+    });
+  }), u("Options - Scrollbar", () => {
+    r("should set scrollbar data attribute when showScrollbar is true", () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showScrollbar: !0 }
+          }
+        )
+      );
+      const e = i.getByRole("group");
+      o(e).toHaveAttribute("data-scrollbar", "true");
+    }), r("should set scrollbar data attribute to false by default", () => {
+      a(/* @__PURE__ */ s(n, { id: "test", cells: l }));
+      const e = i.getByRole("group");
+      o(e).toHaveAttribute("data-scrollbar", "false");
+    });
+  }), u("Options - cellsPerSlide", () => {
+    r("should chunk cells based on cellsPerSlide", async () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { cellsPerSlide: 2 }
+          }
+        )
+      ), await c(() => {
+        const e = i.getAllByTestId(/carousel-slide-/);
+        o(e.length).toBe(2);
+      });
+    }), r("should handle cellsPerSlide of 1", async () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { cellsPerSlide: 1 }
+          }
+        )
+      ), await c(() => {
+        const e = i.getAllByTestId(/carousel-slide-/);
+        o(e.length).toBeGreaterThanOrEqual(4);
+      });
+    });
+  }), u("Options - wrapAround", () => {
+    r("should add duplicate slides when wrapAround is true", async () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { wrapAround: !0, cellsPerSlide: 1 }
+          }
+        )
+      ), await c(() => {
+        const e = i.getAllByTestId(/carousel-slide-/);
+        o(e.length).toBe(6);
+      });
+    }), r("should not add duplicate slides when wrapAround is false", async () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { wrapAround: !1, cellsPerSlide: 1 }
+          }
+        )
+      ), await c(() => {
+        const e = i.getAllByTestId(/carousel-slide-/);
+        o(e.length).toBe(4);
+      });
+    }), r("should not wrap around when cells length equals cellsPerSlide", async () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: [l[0]],
+            options: { wrapAround: !0, cellsPerSlide: 1 }
+          }
+        )
+      ), await c(() => {
+        const e = i.getAllByTestId(/carousel-slide-/);
+        o(e.length).toBe(1);
+      });
+    });
+  }), u("Options - CSS Variables", () => {
+    r("should apply custom slideAspectRatio", () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { slideAspectRatio: "16/9" }
+          }
+        )
+      ), t = e.querySelector('[role="region"]');
+      o(t == null ? void 0 : t.style.getPropertyValue("--_slide-aspect-ratio")).toBe("16/9");
+    }), r("should apply custom cellAspectRatio", () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { cellAspectRatio: "1/1" }
+          }
+        )
+      ), t = e.querySelector('[role="region"]');
+      o(t == null ? void 0 : t.style.getPropertyValue("--_cell-aspect-ratio")).toBe("1/1");
+    }), r("should apply custom gutterSize", () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { gutterSize: 15, wrapAround: !0 }
+          }
+        )
+      ), t = e.querySelector('[role="region"]');
+      o(t == null ? void 0 : t.style.getPropertyValue("--_carousel-gutters")).toBe("15%");
+    }), r("should apply custom slideGap", () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { slideGap: 2 }
+          }
+        )
+      ), t = e.querySelector('[role="region"]');
+      o(t == null ? void 0 : t.style.getPropertyValue("--_slide-gap")).toBe("2rem");
+    }), r("should apply custom controlButtonsOffset", () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { controlButtonsOffset: 20 }
+          }
+        )
+      ), t = e.querySelector('[role="region"]');
+      o(t == null ? void 0 : t.style.getPropertyValue("--_control-btns-offset-x")).toBe("20rem");
+    });
+  }), u("Keyboard Navigation", () => {
+    r("should handle ArrowRight key press", async () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(n, { id: "test", cells: l, options: { showControls: !0 } })
+      ), t = e.querySelector('[role="region"]');
+      await c(() => {
+        o(t).toBeInTheDocument();
+      }), p.keyDown(t, { key: "ArrowRight" }), o(t).toBeInTheDocument();
+    }), r("should handle ArrowLeft key press", async () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(n, { id: "test", cells: l, options: { showControls: !0 } })
+      ), t = e.querySelector('[role="region"]');
+      await c(() => {
+        o(t).toBeInTheDocument();
+      }), p.keyDown(t, { key: "ArrowLeft" }), o(t).toBeInTheDocument();
+    }), r("should not handle other keys", async () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(n, { id: "test", cells: l })
+      ), t = e.querySelector('[role="region"]');
+      await c(() => {
+        o(t).toBeInTheDocument();
+      }), p.keyDown(t, { key: "Enter" }), o(t).toBeInTheDocument();
+    });
+  }), u("Mouse Events", () => {
+    r("should handle mouse enter on scroller", () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { autoplay: !0 }
+          }
+        )
+      );
+      const e = i.getByRole("group");
+      p.mouseEnter(e), o(e).toBeInTheDocument();
+    }), r("should handle mouse leave on scroller", () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { autoplay: !0 }
+          }
+        )
+      );
+      const e = i.getByRole("group");
+      p.mouseLeave(e), o(e).toBeInTheDocument();
+    }), r("should handle mouse enter on control buttons", async () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showControls: !0, autoplay: !0 }
+          }
+        )
+      ), await c(() => {
+        const e = i.getByLabelText("Next Item");
+        p.mouseEnter(e), o(e).toBeInTheDocument();
+      });
+    }), r("should handle mouse leave on control buttons", async () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showControls: !0, autoplay: !0 }
+          }
+        )
+      ), await c(() => {
+        const e = i.getByLabelText("Next Item");
+        p.mouseLeave(e), o(e).toBeInTheDocument();
+      });
+    });
+  }), u("Touch Events", () => {
+    r("should handle touch start on scroller", () => {
+      a(/* @__PURE__ */ s(n, { id: "test", cells: l }));
+      const e = i.getByRole("group");
+      p.touchStart(e), o(e).toBeInTheDocument();
+    });
+  }), u("Control Button Clicks", () => {
+    r("should handle next button click", async () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showControls: !0 }
+          }
+        )
+      ), await c(() => {
+        const e = i.getByLabelText("Next Item");
+        p.click(e), o(e).toBeInTheDocument();
+      });
+    }), r("should handle previous button click", async () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showControls: !0 }
+          }
+        )
+      ), await c(() => {
+        const e = i.getByLabelText("Previous Item");
+        p.click(e), o(e).toBeInTheDocument();
+      });
+    });
+  }), u("Pagination Clicks", () => {
+    r("should handle pagination item click", async () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showPagination: !0 }
+          }
+        )
+      );
+      await c(() => {
+        const t = e.querySelectorAll(".carousel-nav__item");
+        t.length > 1 && p.click(t[1]), o(t.length).toBeGreaterThan(0);
+      });
+    });
+  }), u("Empty and Edge Cases", () => {
+    r("should handle empty cells array", () => {
+      const { container: e } = a(/* @__PURE__ */ s(n, { id: "test", cells: [] })), t = e.querySelector('[role="region"]');
+      o(t).toBeInTheDocument();
+    }), r("should handle single cell", async () => {
+      a(/* @__PURE__ */ s(n, { id: "test", cells: [l[0]] })), await c(() => {
+        const e = i.getAllByTestId(/carousel-slide-/);
+        o(e.length).toBe(1);
+      });
+    }), r("should handle cells without layout property", async () => {
+      a(/* @__PURE__ */ s(n, { id: "test", cells: [
+        { id: 1, props: { title: "Cell 1" } },
+        { id: 2, props: { title: "Cell 2" } }
+      ] })), await c(() => {
+        const t = i.getAllByTestId(/carousel-slide-/);
+        o(t.length).toBeGreaterThan(0);
+      });
+    }), r("should handle missing cell id", async () => {
+      a(/* @__PURE__ */ s(n, { id: "test", cells: [
+        { props: { title: "Cell 1" }, layout: "default" },
+        { props: { title: "Cell 2" }, layout: "default" }
+      ] })), await c(() => {
+        const t = i.getByRole("region");
+        o(t).toBeInTheDocument();
+      });
+    });
+  }), u("Default Options", () => {
+    r("should use default options when not provided", () => {
+      const { container: e } = a(/* @__PURE__ */ s(n, { id: "test", cells: l })), t = e.querySelector('[role="region"]');
+      o(t).toBeInTheDocument();
+    }), r("should merge custom options with defaults", async () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showControls: !0, slideGap: 3 }
+          }
+        )
+      ), await c(() => {
+        const e = i.queryByLabelText("Next Item");
+        o(e).toBeInTheDocument();
+      });
+    });
+  }), u("Accessibility", () => {
+    r("should have proper ARIA attributes", () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(n, { id: "test", cells: l, options: { title: "My Carousel" } })
+      ), t = e.querySelector('[role="region"]');
+      o(t).toHaveAttribute("aria-roledescription", "carousel"), o(t).toHaveAttribute("aria-label", "My Carousel");
+    }), r("should have tabIndex on carousel container", () => {
+      const { container: e } = a(/* @__PURE__ */ s(n, { id: "test", cells: l })), t = e.querySelector('[role="region"]');
+      o(t).toHaveAttribute("tabIndex", "-1");
+    }), r("should have tabIndex on scroller", () => {
+      a(/* @__PURE__ */ s(n, { id: "test", cells: l }));
+      const e = i.getByRole("group");
+      o(e).toHaveAttribute("tabIndex", "0");
+    }), r("should have aria-live on scroller", () => {
+      a(/* @__PURE__ */ s(n, { id: "test", cells: l }));
+      const e = i.getByRole("group");
+      o(e).toHaveAttribute("aria-live", "polite");
+    }), r("should have proper button labels", async () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showControls: !0 }
+          }
+        )
+      ), await c(() => {
+        const e = i.getByLabelText("Previous Item"), t = i.getByLabelText("Next Item");
+        o(e).toHaveAttribute("aria-label", "Previous Item"), o(t).toHaveAttribute("aria-label", "Next Item");
+      });
+    }), r("should have aria-controls on navigation buttons", async () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showControls: !0 }
+          }
+        )
+      ), await c(() => {
+        const e = i.getByLabelText("Previous Item");
+        o(e).toHaveAttribute("aria-controls", "carousel-test");
+      });
+    }), r("should have aria-hidden on icon elements", async () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { showControls: !0 }
+          }
+        )
+      );
+      await c(() => {
+        const t = e.querySelectorAll('i[aria-hidden="true"]');
+        o(t.length).toBeGreaterThan(0), t.forEach((d) => {
+          o(d).toHaveAttribute("aria-hidden", "true");
+        });
+      });
+    });
+  }), u("Responsive Behavior", () => {
+    r("should render without errors on mount", () => {
+      const { container: e } = a(/* @__PURE__ */ s(n, { id: "test", cells: l }));
+      o(e).toBeTruthy();
+    }), r("should handle window resize events", () => {
+      const { container: e } = a(/* @__PURE__ */ s(n, { id: "test", cells: l }));
+      window.dispatchEvent(new Event("resize"));
+      const t = e.querySelector('[role="region"]');
+      o(t).toBeInTheDocument();
+    });
+  }), u("Cleanup", () => {
+    r("should cleanup on unmount", () => {
+      const { unmount: e } = a(/* @__PURE__ */ s(n, { id: "test", cells: l }));
+      o(() => e()).not.toThrow();
+    }), r("should cleanup with autoplay enabled", () => {
+      const { unmount: e } = a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { autoplay: !0 }
+          }
+        )
+      );
+      o(() => e()).not.toThrow();
+    });
+  }), u("variableHeight Option", () => {
+    r("should pass variableHeight to CarouselSlide", async () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: { variableHeight: !0 }
+          }
+        )
+      ), await c(() => {
+        const e = i.getAllByTestId(/carousel-slide-/);
+        o(e.length).toBeGreaterThan(0);
+      });
+    }), r("should default variableHeight to false", async () => {
+      a(/* @__PURE__ */ s(n, { id: "test", cells: l })), await c(() => {
+        const e = i.getAllByTestId(/carousel-slide-/);
+        o(e.length).toBeGreaterThan(0);
+      });
+    });
+  }), u("Multiple Carousels", () => {
+    r("should handle multiple carousels on the same page", async () => {
+      const { container: e } = a(
+        /* @__PURE__ */ g(m, { children: [
+          /* @__PURE__ */ s(n, { id: "carousel-1", cells: l }),
+          /* @__PURE__ */ s(n, { id: "carousel-2", cells: l })
+        ] })
+      );
+      await c(() => {
+        const t = e.querySelector("#carousel-carousel-1"), d = e.querySelector("#carousel-carousel-2");
+        o(t).toBeInTheDocument(), o(d).toBeInTheDocument();
+      });
+    });
+  }), u("Complex Options Combinations", () => {
+    r("should handle multiple options together", async () => {
+      const { container: e } = a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: {
+              showControls: !0,
+              showPagination: !0,
+              showScrollbar: !0,
+              wrapAround: !0,
+              cellsPerSlide: 2,
+              slideAspectRatio: "16/9",
+              slideGap: 2,
+              gutterSize: 15
+            }
+          }
+        )
+      );
+      await c(() => {
+        const t = e.querySelector('[role="region"]'), d = i.queryByLabelText("Previous Item"), y = e.querySelector(".carousel-nav");
+        o(t).toBeInTheDocument(), o(d).toBeInTheDocument(), o(y).toBeInTheDocument();
+      });
+    }), r("should handle autoplay with controls", async () => {
+      a(
+        /* @__PURE__ */ s(
+          n,
+          {
+            id: "test",
+            cells: l,
+            options: {
+              autoplay: !0,
+              autoplayDelay: 2e3,
+              showControls: !0
+            }
+          }
+        )
+      ), await c(() => {
+        const e = i.queryByLabelText("Next Item");
+        o(e).toBeInTheDocument();
+      });
+    });
+  });
+});