@olenbetong/appframe-ds 1.6.0 → 1.7.0

package/src/input/NumberInput.test.tsx

@@ -1,212 +1,212 @@
-import { fireEvent, render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { useState } from "react";
-import { describe, expect, it, vi } from "vitest";
-
-import { NumberInput, type NumberInputProps } from "./NumberInput.js";
-
-function Controlled({
-	initial = null,
-	onChange,
-	...props
-}: Partial<Omit<NumberInputProps, "value" | "onChange">> & {
-	initial?: number | null;
-	onChange?: (value: number | null) => void;
-}) {
-	let [value, setValue] = useState<number | null>(initial);
-
-	return (
-		<NumberInput
-			label="Hours"
-			{...props}
-			value={value}
-			onChange={(next) => {
-				setValue(next);
-				onChange?.(next);
-			}}
-		/>
-	);
-}
-
-describe("NumberInput", () => {
-	it("shows the value formatted with the fraction digits, in nb-NO without a session", () => {
-		render(<Controlled initial={8} />);
-
-		expect(screen.getByLabelText("Hours")).toHaveValue("8,00");
-	});
-
-	it("formats in the culture given", () => {
-		render(<Controlled initial={1234.5} culture="en-GB" />);
-
-		expect(screen.getByLabelText("Hours")).toHaveValue("1,234.50");
-	});
-
-	it("reads a period as the decimal separator for a Norwegian user too", async () => {
-		let onChange = vi.fn();
-		let user = userEvent.setup();
-		render(<Controlled initial={null} culture="nb-NO" onChange={onChange} />);
-
-		let input = screen.getByLabelText("Hours");
-		await user.type(input, "1.5");
-		expect(onChange).toHaveBeenLastCalledWith(1.5);
-
-		await user.tab();
-		expect(input).toHaveValue("1,50");
-	});
-
-	it("shows an empty input for null", () => {
-		render(<Controlled initial={null} />);
-
-		expect(screen.getByLabelText("Hours")).toHaveValue("");
-	});
-
-	it("parses typed text with either decimal separator", async () => {
-		let onChange = vi.fn();
-		let user = userEvent.setup();
-		render(<Controlled initial={null} onChange={onChange} />);
-
-		let input = screen.getByLabelText("Hours");
-		await user.type(input, "1,5");
-		expect(onChange).toHaveBeenLastCalledWith(1.5);
-		expect(input).toHaveValue("1,5");
-
-		await user.clear(input);
-		await user.type(input, "2.25");
-		expect(onChange).toHaveBeenLastCalledWith(2.25);
-	});
-
-	it("reports null when cleared and nothing while the text is incomplete", async () => {
-		let onChange = vi.fn();
-		let user = userEvent.setup();
-		render(<Controlled initial={3} onChange={onChange} />);
-
-		let input = screen.getByLabelText("Hours");
-		await user.clear(input);
-		expect(onChange).toHaveBeenLastCalledWith(null);
-
-		onChange.mockClear();
-		await user.type(input, "-");
-		expect(onChange).not.toHaveBeenCalled();
-	});
-
-	it("formats the value again on blur", async () => {
-		let user = userEvent.setup();
-		render(<Controlled initial={null} />);
-
-		let input = screen.getByLabelText("Hours");
-		await user.type(input, "1,5");
-		await user.tab();
-
-		expect(input).toHaveValue("1,50");
-	});
-
-	it("steps with the buttons, rounding to the fraction digits", async () => {
-		let onChange = vi.fn();
-		let user = userEvent.setup();
-		render(<Controlled initial={0.1} step={0.2} onChange={onChange} />);
-
-		await user.click(screen.getByRole("button", { name: "Increase value" }));
-		expect(onChange).toHaveBeenLastCalledWith(0.3);
-
-		await user.click(screen.getByRole("button", { name: "Decrease value" }));
-		await user.click(screen.getByRole("button", { name: "Decrease value" }));
-		expect(onChange).toHaveBeenLastCalledWith(-0.1);
-	});
-
-	it("steps from zero when empty", async () => {
-		let onChange = vi.fn();
-		let user = userEvent.setup();
-		render(<Controlled initial={null} step={0.25} onChange={onChange} />);
-
-		await user.click(screen.getByRole("button", { name: "Increase value" }));
-		expect(onChange).toHaveBeenLastCalledWith(0.25);
-	});
-
-	it("steps with the arrow keys and keeps the text selected", async () => {
-		let onChange = vi.fn();
-		let user = userEvent.setup();
-		render(<Controlled initial={1} onChange={onChange} />);
-
-		let input = screen.getByLabelText("Hours") as HTMLInputElement;
-		await user.click(input);
-		await user.keyboard("{ArrowUp}{ArrowUp}{ArrowDown}");
-
-		expect(onChange).toHaveBeenLastCalledWith(2);
-		expect(input).toHaveValue("2,00");
-	});
-
-	it("clamps typed and stepped values to min and max", async () => {
-		let onChange = vi.fn();
-		let user = userEvent.setup();
-		render(<Controlled initial={23} min={0} max={24} onChange={onChange} />);
-
-		let input = screen.getByLabelText("Hours");
-		await user.click(screen.getByRole("button", { name: "Increase value" }));
-		expect(onChange).toHaveBeenLastCalledWith(24);
-		expect(screen.getByRole("button", { name: "Increase value" })).toBeDisabled();
-
-		await user.clear(input);
-		await user.type(input, "30");
-		expect(onChange).toHaveBeenLastCalledWith(24);
-		expect(input).toHaveValue("24,00");
-
-		await user.clear(input);
-		await user.type(input, "-5");
-		expect(onChange).toHaveBeenLastCalledWith(0);
-	});
-
-	it("hides the steppers when read only, disabled or asked to", () => {
-		let { rerender } = render(<Controlled initial={1} readOnly />);
-		expect(screen.queryByRole("button")).toBeNull();
-
-		rerender(<Controlled initial={1} disabled />);
-		expect(screen.queryByRole("button")).toBeNull();
-
-		rerender(<Controlled initial={1} hideSteppers />);
-		expect(screen.queryByRole("button")).toBeNull();
-
-		rerender(<Controlled initial={1} />);
-		expect(screen.getAllByRole("button")).toHaveLength(2);
-	});
-
-	it("does not step a read only input from the keyboard", () => {
-		let onChange = vi.fn();
-		render(<Controlled initial={1} readOnly onChange={onChange} />);
-
-		fireEvent.keyDown(screen.getByLabelText("Hours"), { key: "ArrowUp" });
-		expect(onChange).not.toHaveBeenCalled();
-	});
-
-	it("shows the description and the error, and marks the input invalid", () => {
-		render(<Controlled initial={1} description="Including overtime" error="Too many hours" />);
-
-		expect(screen.getByText("Including overtime")).toBeInTheDocument();
-		expect(screen.getByText("Too many hours")).toBeInTheDocument();
-		expect(screen.getByLabelText("Hours")).toHaveAttribute("aria-invalid", "true");
-	});
-
-	it("shows a value changed from the outside while focused", async () => {
-		function Resettable() {
-			let [value, setValue] = useState<number | null>(5);
-			return (
-				<>
-					<NumberInput label="Hours" value={value} onChange={setValue} />
-					<button type="button" onClick={() => setValue(0)}>
-						Reset
-					</button>
-				</>
-			);
-		}
-
-		let user = userEvent.setup();
-		render(<Resettable />);
-
-		let input = screen.getByLabelText("Hours");
-		await user.click(input);
-		await user.keyboard("7");
-		expect(input).toHaveValue("7");
-
-		fireEvent.click(screen.getByRole("button", { name: "Reset" }));
-		expect(input).toHaveValue("0,00");
-	});
-});
+import { fireEvent, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { useState } from "react";
+import { describe, expect, it, vi } from "vitest";
+
+import { NumberInput, type NumberInputProps } from "./NumberInput.js";
+
+function Controlled({
+	initial = null,
+	onChange,
+	...props
+}: Partial<Omit<NumberInputProps, "value" | "onChange">> & {
+	initial?: number | null;
+	onChange?: (value: number | null) => void;
+}) {
+	let [value, setValue] = useState<number | null>(initial);
+
+	return (
+		<NumberInput
+			label="Hours"
+			{...props}
+			value={value}
+			onChange={(next) => {
+				setValue(next);
+				onChange?.(next);
+			}}
+		/>
+	);
+}
+
+describe("NumberInput", () => {
+	it("shows the value formatted with the fraction digits, in nb-NO without a session", () => {
+		render(<Controlled initial={8} />);
+
+		expect(screen.getByLabelText("Hours")).toHaveValue("8,00");
+	});
+
+	it("formats in the culture given", () => {
+		render(<Controlled initial={1234.5} culture="en-GB" />);
+
+		expect(screen.getByLabelText("Hours")).toHaveValue("1,234.50");
+	});
+
+	it("reads a period as the decimal separator for a Norwegian user too", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={null} culture="nb-NO" onChange={onChange} />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.type(input, "1.5");
+		expect(onChange).toHaveBeenLastCalledWith(1.5);
+
+		await user.tab();
+		expect(input).toHaveValue("1,50");
+	});
+
+	it("shows an empty input for null", () => {
+		render(<Controlled initial={null} />);
+
+		expect(screen.getByLabelText("Hours")).toHaveValue("");
+	});
+
+	it("parses typed text with either decimal separator", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={null} onChange={onChange} />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.type(input, "1,5");
+		expect(onChange).toHaveBeenLastCalledWith(1.5);
+		expect(input).toHaveValue("1,5");
+
+		await user.clear(input);
+		await user.type(input, "2.25");
+		expect(onChange).toHaveBeenLastCalledWith(2.25);
+	});
+
+	it("reports null when cleared and nothing while the text is incomplete", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={3} onChange={onChange} />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.clear(input);
+		expect(onChange).toHaveBeenLastCalledWith(null);
+
+		onChange.mockClear();
+		await user.type(input, "-");
+		expect(onChange).not.toHaveBeenCalled();
+	});
+
+	it("formats the value again on blur", async () => {
+		let user = userEvent.setup();
+		render(<Controlled initial={null} />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.type(input, "1,5");
+		await user.tab();
+
+		expect(input).toHaveValue("1,50");
+	});
+
+	it("steps with the buttons, rounding to the fraction digits", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={0.1} step={0.2} onChange={onChange} />);
+
+		await user.click(screen.getByRole("button", { name: "Increase value" }));
+		expect(onChange).toHaveBeenLastCalledWith(0.3);
+
+		await user.click(screen.getByRole("button", { name: "Decrease value" }));
+		await user.click(screen.getByRole("button", { name: "Decrease value" }));
+		expect(onChange).toHaveBeenLastCalledWith(-0.1);
+	});
+
+	it("steps from zero when empty", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={null} step={0.25} onChange={onChange} />);
+
+		await user.click(screen.getByRole("button", { name: "Increase value" }));
+		expect(onChange).toHaveBeenLastCalledWith(0.25);
+	});
+
+	it("steps with the arrow keys and keeps the text selected", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={1} onChange={onChange} />);
+
+		let input = screen.getByLabelText("Hours") as HTMLInputElement;
+		await user.click(input);
+		await user.keyboard("{ArrowUp}{ArrowUp}{ArrowDown}");
+
+		expect(onChange).toHaveBeenLastCalledWith(2);
+		expect(input).toHaveValue("2,00");
+	});
+
+	it("clamps typed and stepped values to min and max", async () => {
+		let onChange = vi.fn();
+		let user = userEvent.setup();
+		render(<Controlled initial={23} min={0} max={24} onChange={onChange} />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.click(screen.getByRole("button", { name: "Increase value" }));
+		expect(onChange).toHaveBeenLastCalledWith(24);
+		expect(screen.getByRole("button", { name: "Increase value" })).toBeDisabled();
+
+		await user.clear(input);
+		await user.type(input, "30");
+		expect(onChange).toHaveBeenLastCalledWith(24);
+		expect(input).toHaveValue("24,00");
+
+		await user.clear(input);
+		await user.type(input, "-5");
+		expect(onChange).toHaveBeenLastCalledWith(0);
+	});
+
+	it("hides the steppers when read only, disabled or asked to", () => {
+		let { rerender } = render(<Controlled initial={1} readOnly />);
+		expect(screen.queryByRole("button")).toBeNull();
+
+		rerender(<Controlled initial={1} disabled />);
+		expect(screen.queryByRole("button")).toBeNull();
+
+		rerender(<Controlled initial={1} hideSteppers />);
+		expect(screen.queryByRole("button")).toBeNull();
+
+		rerender(<Controlled initial={1} />);
+		expect(screen.getAllByRole("button")).toHaveLength(2);
+	});
+
+	it("does not step a read only input from the keyboard", () => {
+		let onChange = vi.fn();
+		render(<Controlled initial={1} readOnly onChange={onChange} />);
+
+		fireEvent.keyDown(screen.getByLabelText("Hours"), { key: "ArrowUp" });
+		expect(onChange).not.toHaveBeenCalled();
+	});
+
+	it("shows the description and the error, and marks the input invalid", () => {
+		render(<Controlled initial={1} description="Including overtime" error="Too many hours" />);
+
+		expect(screen.getByText("Including overtime")).toBeInTheDocument();
+		expect(screen.getByText("Too many hours")).toBeInTheDocument();
+		expect(screen.getByLabelText("Hours")).toHaveAttribute("aria-invalid", "true");
+	});
+
+	it("shows a value changed from the outside while focused", async () => {
+		function Resettable() {
+			let [value, setValue] = useState<number | null>(5);
+			return (
+				<>
+					<NumberInput label="Hours" value={value} onChange={setValue} />
+					<button type="button" onClick={() => setValue(0)}>
+						Reset
+					</button>
+				</>
+			);
+		}
+
+		let user = userEvent.setup();
+		render(<Resettable />);
+
+		let input = screen.getByLabelText("Hours");
+		await user.click(input);
+		await user.keyboard("7");
+		expect(input).toHaveValue("7");
+
+		fireEvent.click(screen.getByRole("button", { name: "Reset" }));
+		expect(input).toHaveValue("0,00");
+	});
+});