Merge branch 'main' into play-with-controls

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()
 })

src/testSchemas/numberSchema.ts

@@ -153,7 +153,6 @@ export const numberWeightUISchema = {
   ],
 } satisfies UISchema
 
-
 export const numberBasisPointsUISchema = {
   type: "VerticalLayout",
   elements: [