adilallo
50 lines
1.6 KiB
React
50 lines
1.6 KiB
React
import { describe, test, expect } from "vitest";
|
|
import { screen } from "@testing-library/react";
|
|
import "@testing-library/jest-dom/vitest";
|
|
import { renderWithProviders } from "../utils/test-utils";
|
|
import Scrollbar from "../../app/components/utility/Scrollbar";
|
|
|
|
describe("Scrollbar", () => {
|
|
test("renders children", () => {
|
|
renderWithProviders(
|
|
<Scrollbar>
|
|
<span>Scrollable content</span>
|
|
</Scrollbar>,
|
|
);
|
|
expect(screen.getByText("Scrollable content")).toBeInTheDocument();
|
|
});
|
|
|
|
test("wrapper has scrollbar-design class and overflow-y-auto for default orientation", () => {
|
|
const { container } = renderWithProviders(
|
|
<Scrollbar>
|
|
<div>Content</div>
|
|
</Scrollbar>,
|
|
);
|
|
const wrapper = container.firstChild;
|
|
expect(wrapper).toHaveClass("scrollbar-design");
|
|
expect(wrapper).toHaveClass("overflow-y-auto");
|
|
});
|
|
|
|
test("applies horizontal overflow when orientation is horizontal", () => {
|
|
const { container } = renderWithProviders(
|
|
<Scrollbar orientation="horizontal">
|
|
<div>Content</div>
|
|
</Scrollbar>,
|
|
);
|
|
const wrapper = container.firstChild;
|
|
expect(wrapper).toHaveClass("scrollbar-design");
|
|
expect(wrapper).toHaveClass("overflow-x-auto");
|
|
});
|
|
|
|
test("applies overflow-auto when orientation is both", () => {
|
|
const { container } = renderWithProviders(
|
|
<Scrollbar orientation="both">
|
|
<div>Content</div>
|
|
</Scrollbar>,
|
|
);
|
|
const wrapper = container.firstChild;
|
|
expect(wrapper).toHaveClass("scrollbar-design");
|
|
expect(wrapper).toHaveClass("overflow-auto");
|
|
});
|
|
});
|