@octopusdeploy/design-system-components
Version:
The design systems component library.
66 lines (65 loc) • 3.77 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const testing_library_1 = require("@octopusdeploy/testing-library");
const react_1 = require("@testing-library/react");
const vitest_1 = require("vitest");
const Carousel_1 = require("../Carousel");
(0, vitest_1.describe)("<Carousel />", () => {
(0, vitest_1.it)("starts at the initial slide", () => {
const carousel = renderCarousel(1);
const carouselElement = carousel.getCarousel();
carouselElement.getVisibleSlide().shouldContain("heading", "Slide Two");
});
(0, vitest_1.it)("defaults to the first slide if initial slide is out of bounds", () => {
const carousel = renderCarousel(carouselslides.length + 1);
const carouselElement = carousel.getCarousel();
carouselElement.getVisibleSlide().shouldContain("heading", "Slide One");
});
(0, vitest_1.it)("on next slide click it changes to next slide", async () => {
const carousel = renderCarousel();
const carouselElement = carousel.getCarousel();
carouselElement.getVisibleSlide().shouldContain("heading", "Slide One");
await carouselElement.getControls().getControlButton("Next").click();
carouselElement.getVisibleSlide().shouldContain("heading", "Slide Two");
});
(0, vitest_1.it)("on previous slide click it changes to previous slide", async () => {
const carousel = renderCarousel(1);
const carouselElement = carousel.getCarousel();
carouselElement.getVisibleSlide().shouldContain("heading", "Slide Two");
await carouselElement.getControls().getControlButton("Previous").click();
carouselElement.getVisibleSlide().shouldContain("heading", "Slide One");
});
(0, vitest_1.it)("previous slide button is disabled one when active slide is first", () => {
const carousel = renderCarousel();
const carouselElement = carousel.getCarousel();
carouselElement.getControls().getControlButton("Previous").assertIsDisabled();
});
(0, vitest_1.it)("next slide button is disabled one when active slide is last", () => {
const carousel = renderCarousel(carouselslides.length - 1);
const carouselElement = carousel.getCarousel();
carouselElement.getControls().getControlButton("Next").assertIsDisabled();
});
(0, vitest_1.it)("creates slide buttons for the total amount of carousel slides", () => {
const carousel = renderCarousel(carouselslides.length - 1);
const carouselElement = carousel.getCarousel();
(0, vitest_1.expect)(carouselElement.getControls().getSlideButtons()).toHaveLength(carouselslides.length);
});
(0, vitest_1.it)("clicking on slide dot jumps to that slide", async () => {
const carousel = renderCarousel(1);
const carouselElement = carousel.getCarousel();
carouselElement.getVisibleSlide().shouldContain("heading", "Slide Two");
await carouselElement.getControls().getSlideButtonByIndex(2).click();
carouselElement.getVisibleSlide().shouldContain("heading", "Slide Three");
});
});
const carouselslides = [(0, jsx_runtime_1.jsx)("h1", { children: "Slide One" }, 1), (0, jsx_runtime_1.jsx)("h1", { children: "Slide Two" }, 2), (0, jsx_runtime_1.jsx)("h1", { children: "Slide Three" }, 3)];
function renderCarousel(initialslide = 0) {
(0, react_1.render)((0, jsx_runtime_1.jsx)(Carousel_1.Carousel, { slides: carouselslides, initialSlide: initialslide, accessibleName: "test carousel" }));
return getCarouselInteractions();
}
function getCarouselInteractions() {
return {
getCarousel: () => testing_library_1.domQueries.getCarousel("test carousel"),
};
}