@netdata/netdata-ui/dist/es6/components/input/use-input-value.test.js

netdata UI kit

import { renderHook, act } from "testUtilities";
import { useInputValue } from "./use-input-value";
describe("useInputValue", function () {
  it("returns initial value", function () {
    var _renderHook = renderHook(function () {
        return useInputValue({
          value: "initial"
        });
      }),
      result = _renderHook.result;
    var _result$current = result.current,
      inputValue = _result$current[0];
    expect(inputValue).toBe("initial");
  });
  it("returns empty string as default value", function () {
    var _renderHook2 = renderHook(function () {
        return useInputValue({});
      }),
      result = _renderHook2.result;
    var _result$current2 = result.current,
      inputValue = _result$current2[0];
    expect(inputValue).toBe("");
  });
  it("returns isDirty as false initially", function () {
    var _renderHook3 = renderHook(function () {
        return useInputValue({});
      }),
      result = _renderHook3.result;
    var _result$current3 = result.current,
      isDirty = _result$current3[3];
    expect(isDirty).toBe(false);
  });
  it("updates value on change", function () {
    var _renderHook4 = renderHook(function () {
        return useInputValue({});
      }),
      result = _renderHook4.result;
    var _result$current4 = result.current,
      handleChange = _result$current4[1];
    var mockEvent = {
      target: {
        value: "new value"
      }
    };
    act(function () {
      handleChange(mockEvent);
    });
    expect(result.current[0]).toBe("new value");
  });
  it("sets isDirty to true after first change", function () {
    var _renderHook5 = renderHook(function () {
        return useInputValue({});
      }),
      result = _renderHook5.result;
    var _result$current5 = result.current,
      handleChange = _result$current5[1];
    var mockEvent = {
      target: {
        value: "changed"
      }
    };
    act(function () {
      handleChange(mockEvent);
    });
    expect(result.current[3]).toBe(true);
  });
  it("calls onChange callback when provided", function () {
    var onChange = jest.fn();
    var _renderHook6 = renderHook(function () {
        return useInputValue({
          onChange: onChange
        });
      }),
      result = _renderHook6.result;
    var _result$current6 = result.current,
      handleChange = _result$current6[1];
    var mockEvent = {
      target: {
        value: "test"
      }
    };
    act(function () {
      handleChange(mockEvent);
    });
    expect(onChange).toHaveBeenCalledWith(mockEvent);
  });
  it("respects maxChars limit", function () {
    var _renderHook7 = renderHook(function () {
        return useInputValue({
          maxChars: 5
        });
      }),
      result = _renderHook7.result;
    var _result$current7 = result.current,
      handleChange = _result$current7[1];
    var mockEvent = {
      target: {
        value: "toolong"
      },
      preventDefault: jest.fn(),
      stopPropagation: jest.fn()
    };
    act(function () {
      handleChange(mockEvent);
    });
    expect(result.current[0]).toBe("");
    expect(mockEvent.preventDefault).toHaveBeenCalled();
    expect(mockEvent.stopPropagation).toHaveBeenCalled();
  });
  it("allows input within maxChars limit", function () {
    var _renderHook8 = renderHook(function () {
        return useInputValue({
          maxChars: 10
        });
      }),
      result = _renderHook8.result;
    var _result$current8 = result.current,
      handleChange = _result$current8[1];
    var mockEvent = {
      target: {
        value: "short"
      }
    };
    act(function () {
      handleChange(mockEvent);
    });
    expect(result.current[0]).toBe("short");
  });
  it("generates maxChars indicator", function () {
    var _renderHook9 = renderHook(function () {
        return useInputValue({
          maxChars: 10
        });
      }),
      result = _renderHook9.result;
    var _result$current9 = result.current,
      handleChange = _result$current9[1],
      maxCharsIndicator = _result$current9[2];
    expect(maxCharsIndicator).toBe("0/10");
    var mockEvent = {
      target: {
        value: "test"
      }
    };
    act(function () {
      handleChange(mockEvent);
    });
    expect(result.current[2]).toBe("4/10");
  });
  it("returns empty maxChars indicator when no limit", function () {
    var _renderHook10 = renderHook(function () {
        return useInputValue({});
      }),
      result = _renderHook10.result;
    var _result$current10 = result.current,
      maxCharsIndicator = _result$current10[2];
    expect(maxCharsIndicator).toBe("");
  });
  it("resets value and dirty state", function () {
    var _renderHook11 = renderHook(function () {
        return useInputValue({});
      }),
      result = _renderHook11.result;
    var _result$current11 = result.current,
      handleChange = _result$current11[1],
      resetValue = _result$current11[4].resetValue;
    var mockEvent = {
      target: {
        value: "test"
      }
    };
    act(function () {
      handleChange(mockEvent);
    });
    expect(result.current[0]).toBe("test");
    expect(result.current[3]).toBe(true);
    act(function () {
      resetValue("reset");
    });
    expect(result.current[0]).toBe("reset");
    expect(result.current[3]).toBe(false);
  });
  it("resets to empty string by default", function () {
    var _renderHook12 = renderHook(function () {
        return useInputValue({
          value: "initial"
        });
      }),
      result = _renderHook12.result;
    var _result$current12 = result.current,
      resetValue = _result$current12[4].resetValue;
    act(function () {
      resetValue();
    });
    expect(result.current[0]).toBe("");
  });
  it("provides setValue helper", function () {
    var _renderHook13 = renderHook(function () {
        return useInputValue({});
      }),
      result = _renderHook13.result;
    var _result$current13 = result.current,
      setValue = _result$current13[4].setValue;
    act(function () {
      setValue("direct set");
    });
    expect(result.current[0]).toBe("direct set");
  });
  it("provides setIsDirty helper", function () {
    var _renderHook14 = renderHook(function () {
        return useInputValue({});
      }),
      result = _renderHook14.result;
    var _result$current14 = result.current,
      setIsDirty = _result$current14[4].setIsDirty;
    act(function () {
      setIsDirty(true);
    });
    expect(result.current[3]).toBe(true);
  });
  it("maintains stable function references", function () {
    var _renderHook15 = renderHook(function () {
        return useInputValue({});
      }),
      result = _renderHook15.result,
      rerender = _renderHook15.rerender;
    var _result$current15 = result.current,
      initialHandleChange = _result$current15[1];
    rerender();
    var _result$current16 = result.current,
      newHandleChange = _result$current16[1];
    expect(newHandleChange).toBe(initialHandleChange);
  });
});