feat: Additional NumberControl tests (#23)

* Port over existing code

* Fix typing errors

* Exclude .ts files from prodution build

* Exclude all files with .test. from prod build

* Add untracked file

* Remove unused file

* Move tests to another branch

* Push trivial change

* Revert omit change

* Remove NumericControlProps and use cast

* Add existing tests

* Revert "Add existing tests"

This reverts commit 3c671dd.

* Add existing tests

* Data can be something other than Record<string, unknown>

* Update to new registry pattern

* Remove unused schemas

* Deleted stories from other branch

* Fix test

* Pass min, max, step, and controls to InputNumber also

* Only show percentage addonAfter if isPercentage

* Only show percentage addonAfter if isPercentage

* Fix marginLeft on pure number slider

* Update tooltip logic for non-percentages on slider

* Update logic to fill functionality gaps

* Add logic for required asterisk

* Fix tooltips

* Use new schemas in tests

* Update tests to use new schemas

* Update value default logic

* Add tests for conditional input box on slider

* Add tests for conditional input box on slider

* Add test for onBlur

* Add tests for slider units

* Fix merge conflict

* Revert test render changes

* Revert test render changes

* Remove act and leverage userEvent instead of input.blur

* Remove act impor

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: [