fix(OperatorSelection): ignore leading zeroes (#141)

js/components/operatorSignIn/attestation.tsx

@@ -3,6 +3,7 @@ import { reload } from "../../browser";
 import { lookupDisplayName } from "../../hooks/useEmployees";
 import { Employee } from "../../models/employee";
 import { className } from "../../util/dom";
+import { removeLeadingZero } from "../../util/string";
 import { useSignInText } from "./text";
 import { ReactElement, useEffect, useState } from "react";
 
@@ -157,8 +158,9 @@ export const SignaturePrompt = ({
           className="fs-mask w-full"
           inputMode="numeric"
           defaultValue={defaultValue}
+          // Do not set `value`- we are transforming below!
           onChange={(evt) => {
-            onChange(evt.target.value);
+            onChange(removeLeadingZero(evt.target.value));
           }}
           required
         />

js/components/operatorSignIn/operatorSelection.tsx

@@ -1,6 +1,7 @@
 import { fetchEmployeeByBadgeSerial } from "../../hooks/useEmployees";
 import { useNfc } from "../../hooks/useNfc";
 import { className } from "../../util/dom";
+import { removeLeadingZero } from "../../util/string";
 import { BadgeEntry } from "./types";
 import { ReactElement, useEffect, useId, useState } from "react";
 
@@ -51,8 +52,12 @@ export const OperatorSelection = ({
         className="fs-mask h-10"
         id={inputId}
         inputMode="numeric"
+        // Do not set `value`- we are transforming below!
         onChange={(evt) => {
-          setBadgeEntry({ number: evt.target.value, method: "manual" });
+          setBadgeEntry({
+            number: removeLeadingZero(evt.target.value),
+            method: "manual",
+          });
         }}
       />
       <button

js/test/components/operatorSignIn/attestation.test.tsx

@@ -116,6 +116,26 @@ describe("Attestation", () => {
     expect(onComplete).toHaveBeenCalledOnce();
   });
 
+  test("valid attestation with leading zero", async () => {
+    const onComplete = jest.fn();
+    const view = render(
+      <Attestation
+        badge="123"
+        prefill={false}
+        onComplete={onComplete}
+        loading={false}
+        employees={EMPLOYEES}
+      />,
+    );
+    await userEvent.type(view.getByRole("textbox"), "0123");
+    expect(view.getByText("Looks good!")).toBeInTheDocument();
+
+    await userEvent.click(
+      view.getByRole("button", { name: "Complete Fit for Duty Check" }),
+    );
+    expect(onComplete).toHaveBeenCalledOnce();
+  });
+
   test("invalid attestation", async () => {
     const user = userEvent.setup({ advanceTimers: jest.advanceTimersByTime });
     jest.useFakeTimers();

js/test/components/operatorSignIn/operatorSelection.test.tsx

@@ -86,6 +86,28 @@ describe("OperatorSelection", () => {
     });
   });
 
+  test("trims leading zeros from typed operator badge", async () => {
+    const onOK = jest.fn();
+    const view = render(
+      <OperatorSelection
+        onOK={onOK}
+        onBadgeLookupError={jest.fn()}
+        onNfcScanError={jest.fn()}
+        nfcSupported={true}
+      />,
+    );
+
+    const textField = view.getByRole("textbox");
+    const button = view.getByRole("button");
+    await userEvent.type(textField, "0123");
+    await userEvent.click(button);
+
+    expect(onOK).toHaveBeenCalledExactlyOnceWith({
+      number: "123",
+      method: "manual",
+    });
+  });
+
   test("executes onOK on successful badge tap", async () => {
     const onOK = jest.fn();
     const onBadgeLookupError = jest.fn();

js/util/string.ts

@@ -0,0 +1,3 @@
+export const removeLeadingZero = (str: string) => {
+  return str.replace(/^0+/, "");
+};