/*
* Portions of this file are based on code from react-spectrum.
* Apache License Version 2.0, Copyright 2020 Adobe.
*
* Credits to the React Spectrum team:
* https://github.com/adobe/react-spectrum/blob/99ca82e87ba2d7fdd54f5b49326fd242320b4b51/packages/%40react-aria/spinbutton/test/useSpinButton.test.js
*/
import { fireEvent, render } from "@solidjs/testing-library";
import { vi } from "vitest";
import * as SpinButton from ".";
describe("SpinButton", () => {
it('should have role="spinbutton" and aria props', () => {
const { getByTestId } = render(() => (
));
const el = getByTestId("test");
expect(el).toHaveAttribute("role", "spinbutton");
expect(el).toHaveAttribute("aria-valuenow", "2");
expect(el).toHaveAttribute("aria-valuemin", "1");
expect(el).toHaveAttribute("aria-valuemax", "3");
expect(el).toHaveAttribute("aria-valuetext", "2 items");
expect(el).not.toHaveAttribute("aria-disabled");
expect(el).not.toHaveAttribute("aria-readonly");
});
it("should have aria-disabled if isDisabled is set", () => {
const { getByTestId } = render(() => (
));
const el = getByTestId("test");
expect(el).toHaveAttribute("aria-disabled", "true");
});
it("should have aria-readonly if isReadOnly is set", () => {
const { getByTestId } = render(() => (
));
const el = getByTestId("test");
expect(el).toHaveAttribute("aria-readonly", "true");
});
it("should trigger onIncrement on arrow up", () => {
const onIncrement = vi.fn();
const { getByTestId } = render(() => (
));
const el = getByTestId("test");
fireEvent.keyDown(el, { key: "ArrowUp" });
expect(onIncrement).toHaveBeenCalledTimes(1);
});
it("should trigger onDecrement on arrow down", () => {
const onDecrement = vi.fn();
const { getByTestId } = render(() => (
));
const el = getByTestId("test");
fireEvent.keyDown(el, { key: "ArrowDown" });
expect(onDecrement).toHaveBeenCalledTimes(1);
});
it("should trigger onIncrementPage on page up", () => {
const onIncrementPage = vi.fn();
const { getByTestId } = render(() => (
));
const el = getByTestId("test");
fireEvent.keyDown(el, { key: "PageUp" });
expect(onIncrementPage).toHaveBeenCalledTimes(1);
});
it("should fall back to onIncrement on page up if onIncrementPage is not available", () => {
const onIncrement = vi.fn();
const { getByTestId } = render(() => (
));
const el = getByTestId("test");
fireEvent.keyDown(el, { key: "PageUp" });
expect(onIncrement).toHaveBeenCalledTimes(1);
});
it("should trigger onDecrementPage on page up", () => {
const onDecrementPage = vi.fn();
const { getByTestId } = render(() => (
));
const el = getByTestId("test");
fireEvent.keyDown(el, { key: "PageDown" });
expect(onDecrementPage).toHaveBeenCalledTimes(1);
});
it("should fall back to onDecrement on page up if onDecrementPage is not available", () => {
const onDecrement = vi.fn();
const { getByTestId } = render(() => (
));
const el = getByTestId("test");
fireEvent.keyDown(el, { key: "PageDown" });
expect(onDecrement).toHaveBeenCalledTimes(1);
});
it("should trigger onDecrementToMin on home key", () => {
const onDecrementToMin = vi.fn();
const { getByTestId } = render(() => (
));
const el = getByTestId("test");
fireEvent.keyDown(el, { key: "Home" });
expect(onDecrementToMin).toHaveBeenCalledTimes(1);
});
it("should trigger onIncrementToMax on end key", () => {
const onIncrementToMax = vi.fn();
const { getByTestId } = render(() => (
));
const el = getByTestId("test");
fireEvent.keyDown(el, { key: "End" });
expect(onIncrementToMax).toHaveBeenCalledTimes(1);
});
it("should substitute a minus sign for hyphen in the textValue for negative values", () => {
const { getByTestId } = render(() => (
));
const el = getByTestId("test");
expect(el).toHaveAttribute("aria-valuenow", "-2");
expect(el).toHaveAttribute("aria-valuetext", "\u22122 items");
});
it("should work with string values", () => {
const { getByTestId } = render(() => (
));
const el = getByTestId("test");
expect(el).toHaveAttribute("aria-valuenow", "1,402");
});
});