@simplybusiness/mobius 6.4.3 → 6.4.5

package/src/components/MaskedField/MaskedField.test.tsx

@@ -1,687 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { MaskedField } from ".";
-import type { ReactMaskOpts } from "react-imask";
-
-const commaSeparatedNumberMask = {
-  mask: Number,
-  thousandsSeparator: ",",
-  scale: 0,
-  signed: false,
-};
-
-const usPhoneNumberMask = {
-  mask: "(000) 000-0000",
-};
-
-const WRAPPER_CLASS_NAME = "mobius-text-field";
-const INPUT_CLASS_NAME = "mobius-text-field__input";
-
-// Helper component for controlled component tests
-const TestComponent = ({
-  value,
-  mask = usPhoneNumberMask,
-  useMaskedValue,
-  label = "Phone Number",
-  ...props
-}: {
-  value: string;
-  mask?: ReactMaskOpts;
-  useMaskedValue?: boolean;
-  label?: string;
-  [key: string]: unknown;
-}) => (
-  <MaskedField
-    mask={mask}
-    label={label}
-    data-testid="masked-field"
-    value={value}
-    useMaskedValue={useMaskedValue}
-    {...props}
-  />
-);
-
-describe("MaskedField", () => {
-  it("should render without errors", () => {
-    render(
-      <MaskedField
-        mask={usPhoneNumberMask}
-        label="Phone Number"
-        data-testid="masked-field"
-      />,
-    );
-    expect(screen.getByTestId("masked-field")).toBeInTheDocument();
-  });
-
-  it("should render with correct base class names", () => {
-    const { container } = render(
-      <MaskedField
-        mask={usPhoneNumberMask}
-        label="Phone Number"
-        data-testid="masked-field"
-      />,
-    );
-
-    expect(container.firstChild).toHaveClass("mobius");
-    expect(container.firstChild).toHaveClass(WRAPPER_CLASS_NAME);
-    expect(screen.getByTestId("masked-field")).toHaveClass("mobius");
-    expect(screen.getByTestId("masked-field")).toHaveClass(INPUT_CLASS_NAME);
-  });
-
-  it("should apply phone number mask correctly", async () => {
-    const user = userEvent.setup();
-
-    render(
-      <MaskedField
-        mask={usPhoneNumberMask}
-        label="Phone Number"
-        data-testid="masked-field"
-      />,
-    );
-
-    const input = screen.getByTestId("masked-field");
-
-    await user.type(input, "1234567890");
-
-    expect(input).toHaveValue("(123) 456-7890");
-  });
-
-  it("should apply comma-separated number mask correctly", async () => {
-    const user = userEvent.setup();
-
-    render(
-      <MaskedField
-        mask={commaSeparatedNumberMask}
-        label="Number"
-        data-testid="masked-field"
-      />,
-    );
-
-    const input = screen.getByTestId("masked-field");
-
-    await user.type(input, "1234567");
-
-    expect(input).toHaveValue("1,234,567");
-  });
-
-  describe("onChange behavior", () => {
-    it("should call onChange with unmasked value by default", async () => {
-      const user = userEvent.setup();
-      const mockOnChange = jest.fn();
-
-      render(
-        <MaskedField
-          mask={usPhoneNumberMask}
-          label="Phone Number"
-          data-testid="masked-field"
-          onChange={mockOnChange}
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-
-      // Type a simple input to test the unmasked value behavior
-      await user.type(input, "12345");
-
-      // Should be called multiple times, check that onChange is called
-      expect(mockOnChange).toHaveBeenCalled();
-
-      // The onChange should provide unmasked value (not masked)
-      const lastCall =
-        mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
-      // Should have numeric digits only (unmasked)
-      expect(lastCall.target.value).toMatch(/^\d+$/);
-      expect(lastCall.target.value).toBe("1234");
-    });
-
-    it("should call onChange with masked value when useMaskedValue is true", async () => {
-      const user = userEvent.setup();
-      const mockOnChange = jest.fn();
-
-      render(
-        <MaskedField
-          mask={usPhoneNumberMask}
-          label="Phone Number"
-          data-testid="masked-field"
-          onChange={mockOnChange}
-          useMaskedValue={true}
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-
-      // Type a simple input to test the masked value behavior
-      await user.type(input, "12345");
-
-      // Should be called multiple times, check that onChange is called
-      expect(mockOnChange).toHaveBeenCalled();
-
-      // The onChange should provide masked value (formatted)
-      const lastCall =
-        mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
-      // Should have formatting characters (masked)
-      expect(lastCall.target.value).toMatch(/^\(\d{3}\) \d+/);
-      expect(lastCall.target.value).toBe("(123) 4");
-    });
-
-    it("should include name in onChange event when provided", async () => {
-      const user = userEvent.setup();
-      const mockOnChange = jest.fn();
-
-      render(
-        <MaskedField
-          mask={usPhoneNumberMask}
-          label="Phone Number"
-          data-testid="masked-field"
-          name="phoneNumber"
-          onChange={mockOnChange}
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-
-      await user.type(input, "123");
-
-      expect(mockOnChange).toHaveBeenLastCalledWith(
-        expect.objectContaining({
-          target: expect.objectContaining({
-            name: "phoneNumber",
-          }),
-          currentTarget: expect.objectContaining({
-            name: "phoneNumber",
-          }),
-        }),
-      );
-    });
-  });
-
-  describe("onBlur behavior", () => {
-    it("should call onBlur with unmasked value by default", async () => {
-      const user = userEvent.setup();
-      const mockOnBlur = jest.fn();
-
-      render(
-        <MaskedField
-          mask={usPhoneNumberMask}
-          label="Phone Number"
-          data-testid="masked-field"
-          onBlur={mockOnBlur}
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-
-      await user.type(input, "1234567890");
-      await user.tab();
-
-      expect(mockOnBlur).toHaveBeenCalledWith(
-        expect.objectContaining({
-          target: expect.objectContaining({
-            value: "1234567890",
-          }),
-        }),
-      );
-    });
-
-    it("should call onBlur with masked value when useMaskedValue is true", async () => {
-      const user = userEvent.setup();
-      const mockOnBlur = jest.fn();
-
-      render(
-        <MaskedField
-          mask={usPhoneNumberMask}
-          label="Phone Number"
-          data-testid="masked-field"
-          onBlur={mockOnBlur}
-          useMaskedValue={true}
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-
-      await user.type(input, "1234567890");
-      await user.tab();
-
-      expect(mockOnBlur).toHaveBeenCalledWith(
-        expect.objectContaining({
-          target: expect.objectContaining({
-            value: "(123) 456-7890",
-          }),
-        }),
-      );
-    });
-
-    it("should include name in onBlur event when provided", async () => {
-      const user = userEvent.setup();
-      const mockOnBlur = jest.fn();
-
-      render(
-        <MaskedField
-          mask={usPhoneNumberMask}
-          label="Phone Number"
-          data-testid="masked-field"
-          name="phoneNumber"
-          onBlur={mockOnBlur}
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-
-      await user.type(input, "123");
-      await user.tab();
-
-      expect(mockOnBlur).toHaveBeenCalledWith(
-        expect.objectContaining({
-          target: expect.objectContaining({
-            name: "phoneNumber",
-          }),
-          currentTarget: expect.objectContaining({
-            name: "phoneNumber",
-          }),
-        }),
-      );
-    });
-
-    it("should not call onBlur when no onBlur handler is provided", async () => {
-      const user = userEvent.setup();
-
-      render(
-        <MaskedField
-          mask={usPhoneNumberMask}
-          label="Phone Number"
-          data-testid="masked-field"
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-
-      await user.type(input, "123");
-
-      // Should not throw an error
-      await user.tab();
-
-      expect(input).not.toHaveFocus();
-    });
-  });
-
-  describe("event consistency", () => {
-    it("should provide consistent event structure for both onChange and onBlur", async () => {
-      const user = userEvent.setup();
-      const mockOnChange = jest.fn();
-      const mockOnBlur = jest.fn();
-
-      render(
-        <MaskedField
-          mask={usPhoneNumberMask}
-          label="Phone Number"
-          data-testid="masked-field"
-          name="phoneNumber"
-          onChange={mockOnChange}
-          onBlur={mockOnBlur}
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-
-      await user.type(input, "123");
-      await user.tab();
-
-      // Both should have consistent event structure with target and currentTarget
-      const changeCall =
-        mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
-      const blurCall = mockOnBlur.mock.calls[0][0];
-
-      expect(changeCall).toHaveProperty("target");
-      expect(changeCall).toHaveProperty("currentTarget");
-      expect(blurCall).toHaveProperty("target");
-      expect(blurCall).toHaveProperty("currentTarget");
-
-      // Both should have the same name property
-      expect(changeCall.target.name).toBe("phoneNumber");
-      expect(changeCall.currentTarget.name).toBe("phoneNumber");
-      expect(blurCall.target.name).toBe("phoneNumber");
-      expect(blurCall.currentTarget.name).toBe("phoneNumber");
-    });
-
-    it("should handle both onChange and onBlur with number masks", async () => {
-      const user = userEvent.setup();
-      const mockOnChange = jest.fn();
-      const mockOnBlur = jest.fn();
-
-      render(
-        <MaskedField
-          mask={commaSeparatedNumberMask}
-          label="Number"
-          data-testid="masked-field"
-          onChange={mockOnChange}
-          onBlur={mockOnBlur}
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-
-      await user.type(input, "1234");
-      await user.tab();
-
-      // onChange should be called with unmasked value during typing (last keystroke)
-      expect(mockOnChange).toHaveBeenCalled();
-      const lastChangeCall =
-        mockOnChange.mock.calls[mockOnChange.mock.calls.length - 1][0];
-      expect(lastChangeCall.target.value).toBe("12");
-
-      // onBlur should provide the complete unmasked value
-      expect(mockOnBlur).toHaveBeenCalled();
-      const blurCall = mockOnBlur.mock.calls[0][0];
-
-      // The blur event should provide the complete unmasked value (numbers only, no comma formatting)
-      expect(typeof blurCall.target.value).toBe("string");
-      expect(blurCall.target.value).toMatch(/^\d+$/); // Should be digits only (unmasked)
-      expect(blurCall.target.value).toBe("1234"); // Complete unmasked value
-
-      // Verify the input shows the formatted (masked) version
-      expect(input).toHaveValue("1,234");
-    });
-  });
-
-  describe("controlled component behavior", () => {
-    it("should accept value prop without errors", () => {
-      // This test verifies that the component can accept a value prop
-      // without throwing errors. The component now properly handles
-      // controlled behavior through useIMask
-      render(
-        <MaskedField
-          mask={usPhoneNumberMask}
-          label="Phone Number"
-          data-testid="masked-field"
-          value="9876543210"
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-      expect(input).toBeInTheDocument();
-    });
-
-    it("should work with defaultValue prop", () => {
-      render(
-        <MaskedField
-          mask={usPhoneNumberMask}
-          label="Phone Number"
-          data-testid="masked-field"
-          defaultValue="1234567890"
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-      expect(input).toHaveValue("(123) 456-7890");
-    });
-
-    it("should update when value prop changes (controlled behavior)", () => {
-      const { rerender } = render(<TestComponent value="1234567890" />);
-
-      const input = screen.getByTestId("masked-field");
-      expect(input).toHaveValue("(123) 456-7890");
-
-      // Change the value prop to simulate server-side update
-      rerender(<TestComponent value="9876543210" />);
-
-      // The input should reflect the new value
-      expect(input).toHaveValue("(987) 654-3210");
-    });
-
-    it("should handle masked value input when useMaskedValue is true", () => {
-      const { rerender } = render(
-        <TestComponent value="(123) 456-7890" useMaskedValue={true} />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-      expect(input).toHaveValue("(123) 456-7890");
-
-      // Change to a different masked value
-      rerender(<TestComponent value="(987) 654-3210" />);
-
-      // The input should reflect the new masked value
-      expect(input).toHaveValue("(987) 654-3210");
-    });
-
-    it("should handle unmasked value input when useMaskedValue is false", () => {
-      const { rerender } = render(
-        <TestComponent value="1234567890" useMaskedValue={false} />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-      expect(input).toHaveValue("(123) 456-7890");
-
-      // Change to a different unmasked value
-      rerender(<TestComponent value="9876543210" />);
-
-      // The input should reflect the new value (displayed as masked)
-      expect(input).toHaveValue("(987) 654-3210");
-    });
-
-    it("should not update when value prop matches current internal state", () => {
-      const setValue = jest.fn();
-
-      // Mock useIMask to spy on setValue calls
-      const originalUseIMask = jest.requireActual("react-imask").useIMask;
-      const reactIMask = jest.requireActual("react-imask");
-      jest.spyOn(reactIMask, "useIMask").mockImplementation((mask, options) => {
-        const result = originalUseIMask(mask, options);
-        return {
-          ...result,
-          setValue: setValue,
-        };
-      });
-
-      const { rerender } = render(<TestComponent value="1234567890" />);
-
-      // Clear any initial setValue calls
-      setValue.mockClear();
-
-      // Re-render with the same value
-      rerender(<TestComponent value="1234567890" />);
-
-      // setValue should not be called since the value hasn't actually changed
-      expect(setValue).not.toHaveBeenCalled();
-
-      // Restore original implementation
-      jest.restoreAllMocks();
-    });
-
-    it("should handle partial phone number updates", () => {
-      const { rerender } = render(<TestComponent value="123" />);
-
-      const input = screen.getByTestId("masked-field");
-      expect(input).toHaveValue("(123");
-
-      // Update to a longer partial number
-      rerender(<TestComponent value="12345" />);
-
-      expect(input).toHaveValue("(123) 45");
-    });
-
-    it("should handle empty value updates", () => {
-      const { rerender } = render(<TestComponent value="1234567890" />);
-
-      const input = screen.getByTestId("masked-field");
-      expect(input).toHaveValue("(123) 456-7890");
-
-      // Clear the value
-      rerender(<TestComponent value="" />);
-
-      expect(input).toHaveValue("");
-    });
-
-    it("should work with number masks and controlled values", () => {
-      const { rerender } = render(
-        <TestComponent
-          value="1234567"
-          mask={commaSeparatedNumberMask}
-          label="Number"
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-      expect(input).toHaveValue("1,234,567");
-
-      // Update to different number
-      rerender(
-        <TestComponent
-          value="9876543"
-          mask={commaSeparatedNumberMask}
-          label="Number"
-        />,
-      );
-
-      expect(input).toHaveValue("9,876,543");
-    });
-  });
-
-  describe("accessibility", () => {
-    it("should forward aria-label correctly", () => {
-      render(
-        <MaskedField
-          mask={usPhoneNumberMask}
-          label="Phone Number"
-          data-testid="masked-field"
-          aria-label="Custom phone number label"
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-      expect(input).toHaveAttribute("aria-label", "Custom phone number label");
-    });
-
-    it("should forward aria-describedby correctly", () => {
-      render(
-        <MaskedField
-          mask={usPhoneNumberMask}
-          label="Phone Number"
-          data-testid="masked-field"
-          aria-describedby="phone-help"
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-      expect(input).toHaveAttribute("aria-describedby", "phone-help");
-    });
-  });
-
-  describe("ref forwarding", () => {
-    it("should forward ref to the input element", () => {
-      let inputRef: HTMLInputElement | null = null;
-
-      render(
-        <MaskedField
-          mask={usPhoneNumberMask}
-          label="Phone Number"
-          data-testid="masked-field"
-          ref={ref => {
-            inputRef = ref;
-          }}
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-      expect(inputRef).toBe(input);
-    });
-
-    it("should work with useRef", () => {
-      const TestComponent = () => {
-        const inputRef = React.useRef<HTMLInputElement>(null);
-
-        return (
-          <MaskedField
-            mask={usPhoneNumberMask}
-            label="Phone Number"
-            data-testid="masked-field"
-            ref={inputRef}
-          />
-        );
-      };
-
-      render(<TestComponent />);
-
-      const input = screen.getByTestId("masked-field");
-      expect(input).toBeInTheDocument();
-    });
-  });
-
-  describe("custom mask configurations", () => {
-    it("should work with custom mask objects", async () => {
-      const user = userEvent.setup();
-      const customMask = {
-        mask: "000-000",
-        definitions: {
-          "0": /[0-9]/,
-        },
-      };
-
-      render(
-        <MaskedField
-          mask={customMask}
-          label="Custom Code"
-          data-testid="masked-field"
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-
-      await user.type(input, "123456");
-
-      expect(input).toHaveValue("123-456");
-    });
-  });
-
-  describe("edge cases", () => {
-    it("should handle empty input gracefully", () => {
-      render(
-        <MaskedField
-          mask={usPhoneNumberMask}
-          label="Phone Number"
-          data-testid="masked-field"
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-      expect(input).toHaveValue("");
-    });
-
-    it("should not call onChange when no onChange handler is provided", async () => {
-      const user = userEvent.setup();
-
-      render(
-        <MaskedField
-          mask={usPhoneNumberMask}
-          label="Phone Number"
-          data-testid="masked-field"
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-
-      // Should not throw an error
-      await user.type(input, "123");
-
-      expect(input).toHaveValue("(123");
-    });
-
-    it("should handle partial input correctly", async () => {
-      const user = userEvent.setup();
-
-      render(
-        <MaskedField
-          mask={usPhoneNumberMask}
-          label="Phone Number"
-          data-testid="masked-field"
-        />,
-      );
-
-      const input = screen.getByTestId("masked-field");
-
-      await user.type(input, "123");
-
-      expect(input).toHaveValue("(123");
-    });
-  });
-});