diff --git a/src/controls/NumberControl.test.tsx b/src/controls/NumberControl.test.tsx index 7987566..8d16f6b 100644 --- a/src/controls/NumberControl.test.tsx +++ b/src/controls/NumberControl.test.tsx @@ -10,6 +10,10 @@ import { numberMagnitudeUISchema, numberTheNumberSchema, numberTheNumberUISchema, + numberHumiditySchema, + numberPercentageUISchema, + numberTemperatureSchema, + numberTemperatureUISchema, numberUISchemaWithRule, } from "../testSchemas/numberSchema" @@ -44,6 +48,7 @@ describe("NumberControl", () => { }) it.each([[0], [100]])("renders default value of %s when no data is provided", (defaultValue: number) => { + // create a new schema with a default value set const { properties, ...rest } = numberMagnitudeSchema properties.magnitude = { ...properties.magnitude, ...{ default: defaultValue }} render({ @@ -92,11 +97,67 @@ describe("NumberControl", () => { expect(screen.getByRole("slider")).not.toBeNull() expect(screen.getByRole("slider")).toHaveAttribute("aria-valuenow", "1") }) - it("hides slider when min max values are not present", () => { + + it("doesn't show slider when min max values are not present", () => { render({ schema: numberMagnitudeSchema, uischema: numberMagnitudeUISchema, }) expect(screen.queryByRole("slider")).toBeNull() }) +}) + +it ("renders slider and input box when number of steps is greater than threshold", () => { + const data = { basisPoints: 1 } + render({ + data: data, + schema: numberBasisPointsSchema, // 10,000 steps created by multipleOf + uischema: numberBasisPointsUISchema, + }) + expect(screen.getByRole("slider")) + expect(screen.getByRole("spinbutton")) +}) + +it ("renders slider without input box when number of steps is less than threshold", () => { + const data = { basisPoints: 1 } + render({ + data: data, + schema: numberHumiditySchema, // 100 steps + uischema: numberPercentageUISchema, + }) + expect(screen.getByRole("slider")) + expect(screen.queryByRole("spinbutton")).toBeNull() +}) + +it ("shows error message onBlur when field is required and empty", async () => { + render({ + schema: numberTheNumberSchema, + uischema: numberTheNumberUISchema, + }) + const input = screen.getByRole("spinbutton") + await userEvent.clear(input) + await userEvent.tab() + expect(await screen.findByText("The Number is required")).not.toBeNull() +}) + +it ("shows units in text control if set in UI schema", async () => { + render({ + schema: numberTemperatureSchema, + uischema: numberTemperatureUISchema, + }) + expect(await screen.findByText("°F")).not.toBeNull() +}) + +it ("shows units in tooltip if set in UI schema", async () => { + render({ + schema: numberHumiditySchema, + uischema: numberPercentageUISchema, + }) + // we are using a schema that doesn't have the text input, + // so we can be sure the units are showing up in the tooltip + expect(screen.queryByRole("spinbutton")).toBeNull() + const slider = screen.getByRole("slider") + expect(screen.queryByText("0%")).toBeNull() + await userEvent.hover(slider) + expect(await screen.findByText("0%")).not.toBeNull() }) \ No newline at end of file diff --git a/src/testSchemas/numberSchema.ts b/src/testSchemas/numberSchema.ts index 6804573..11ce28d 100644 --- a/src/testSchemas/numberSchema.ts +++ b/src/testSchemas/numberSchema.ts @@ -153,7 +153,6 @@ export const numberWeightUISchema = { ], } satisfies UISchema - export const numberBasisPointsUISchema = { type: "VerticalLayout", elements: [