@netdata/netdata-ui/dist/components/input/use-touched-state.test.js

netdata UI kit

"use strict";

var _testUtilities = require("testUtilities");
var _useTouchedState = require("./use-touched-state");
describe("useTouchedState", function () {
  it("returns initial touched state as false by default", function () {
    var _renderHook = (0, _testUtilities.renderHook)(function () {
        return (0, _useTouchedState.useTouchedState)({});
      }),
      result = _renderHook.result;
    var _result$current = result.current,
      touchedState = _result$current[0];
    expect(touchedState).toBe(false);
  });
  it("returns custom default state", function () {
    var _renderHook2 = (0, _testUtilities.renderHook)(function () {
        return (0, _useTouchedState.useTouchedState)({
          defaultState: true
        });
      }),
      result = _renderHook2.result;
    var _result$current2 = result.current,
      touchedState = _result$current2[0];
    expect(touchedState).toBe(true);
  });
  it("sets touched state to true on first blur", function () {
    var _renderHook3 = (0, _testUtilities.renderHook)(function () {
        return (0, _useTouchedState.useTouchedState)({});
      }),
      result = _renderHook3.result;
    var _result$current3 = result.current,
      handleBlur = _result$current3[1];
    (0, _testUtilities.act)(function () {
      handleBlur({
        type: "blur"
      });
    });
    expect(result.current[0]).toBe(true);
  });
  it("calls onBlur callback when provided", function () {
    var onBlur = jest.fn();
    var _renderHook4 = (0, _testUtilities.renderHook)(function () {
        return (0, _useTouchedState.useTouchedState)({
          onBlur: onBlur
        });
      }),
      result = _renderHook4.result;
    var _result$current4 = result.current,
      handleBlur = _result$current4[1];
    var mockEvent = {
      type: "blur"
    };
    (0, _testUtilities.act)(function () {
      handleBlur(mockEvent);
    });
    expect(onBlur).toHaveBeenCalledWith(mockEvent);
  });
  it("does not update touched state when already touched", function () {
    var onBlur = jest.fn();
    var _renderHook5 = (0, _testUtilities.renderHook)(function () {
        return (0, _useTouchedState.useTouchedState)({
          onBlur: onBlur,
          defaultState: true
        });
      }),
      result = _renderHook5.result;
    var _result$current5 = result.current,
      handleBlur = _result$current5[1];
    (0, _testUtilities.act)(function () {
      handleBlur({
        type: "blur"
      });
    });
    expect(result.current[0]).toBe(true);
    expect(onBlur).toHaveBeenCalledTimes(1);
  });
  it("allows manual control of touched state", function () {
    var _renderHook6 = (0, _testUtilities.renderHook)(function () {
        return (0, _useTouchedState.useTouchedState)({});
      }),
      result = _renderHook6.result;
    var _result$current6 = result.current,
      setTouchedState = _result$current6[2];
    (0, _testUtilities.act)(function () {
      setTouchedState(true);
    });
    expect(result.current[0]).toBe(true);
    (0, _testUtilities.act)(function () {
      setTouchedState(false);
    });
    expect(result.current[0]).toBe(false);
  });
  it("maintains stable function references", function () {
    var _renderHook7 = (0, _testUtilities.renderHook)(function () {
        return (0, _useTouchedState.useTouchedState)({});
      }),
      result = _renderHook7.result,
      rerender = _renderHook7.rerender;
    var _result$current7 = result.current,
      initialHandleBlur = _result$current7[1],
      initialSetTouchedState = _result$current7[2];
    rerender();
    var _result$current8 = result.current,
      newHandleBlur = _result$current8[1],
      newSetTouchedState = _result$current8[2];
    expect(newHandleBlur).toBe(initialHandleBlur);
    expect(newSetTouchedState).toBe(initialSetTouchedState);
  });
  it("updates callback when onBlur dependency changes", function () {
    var onBlur = jest.fn();
    var _renderHook8 = (0, _testUtilities.renderHook)(function (_ref) {
        var onBlur = _ref.onBlur;
        return (0, _useTouchedState.useTouchedState)({
          onBlur: onBlur
        });
      }, {
        initialProps: {
          onBlur: onBlur
        }
      }),
      result = _renderHook8.result,
      rerender = _renderHook8.rerender;
    var newOnBlur = jest.fn();
    rerender({
      onBlur: newOnBlur
    });
    var _result$current9 = result.current,
      handleBlur = _result$current9[1];
    (0, _testUtilities.act)(function () {
      handleBlur({
        type: "blur"
      });
    });
    expect(onBlur).not.toHaveBeenCalled();
    expect(newOnBlur).toHaveBeenCalledTimes(1);
  });
  it("handles multiple blur events correctly", function () {
    var onBlur = jest.fn();
    var _renderHook9 = (0, _testUtilities.renderHook)(function () {
        return (0, _useTouchedState.useTouchedState)({
          onBlur: onBlur
        });
      }),
      result = _renderHook9.result;
    var _result$current10 = result.current,
      handleBlur = _result$current10[1];
    (0, _testUtilities.act)(function () {
      handleBlur({
        type: "blur"
      });
    });
    (0, _testUtilities.act)(function () {
      handleBlur({
        type: "blur"
      });
    });
    expect(result.current[0]).toBe(true);
    expect(onBlur).toHaveBeenCalledTimes(2);
  });
});