@teneff/react-debounce/lib/Debounce.spec.js

React Debounce Component

"use strict";

var _react = _interopRequireDefault(require("react"));

var _reactDom = _interopRequireDefault(require("react-dom"));

var _testUtils = require("react-dom/test-utils");

var _ = _interopRequireDefault(require("."));

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

jest.useFakeTimers();
var wrapper;
beforeAll(function () {
  wrapper = document.createElement('div');
});

var _ref = _react.default.createElement("span", null);

describe('<Debounce />', function () {
  var callback = jest.fn();
  afterEach(function () {
    jest.clearAllMocks();
  });
  describe('without delay', function () {
    beforeAll(function () {
      _reactDom.default.render(_react.default.createElement(_.default, {
        callback: callback
      }, function (debounced) {
        return _react.default.createElement("button", {
          type: "button",
          onClick: debounced
        }, "click me");
      }), wrapper);
    });
    it('should render it`s childrend function', function () {
      var button = wrapper.querySelector('button');

      _testUtils.Simulate.click(button);

      expect(setTimeout).toHaveBeenCalledTimes(1);
      jest.runAllTimers();
      expect(callback).toHaveBeenCalledWith(expect.objectContaining({
        type: 'click',
        target: expect.any(Object)
      }));
    });
  });
  describe('when unmounted', function () {
    beforeAll(function () {
      _reactDom.default.render(_react.default.createElement(_.default, {
        callback: callback
      }, function () {
        return _ref;
      }), wrapper);
    });
    it('should not throw errors', function () {
      expect(function () {
        return _reactDom.default.unmountComponentAtNode(wrapper);
      }).not.toThrow();
    });
  });
  describe('with delay', function () {
    beforeAll(function () {
      _reactDom.default.render(_react.default.createElement(_.default, {
        callback: callback,
        delay: 500
      }, function (debounced) {
        return _react.default.createElement("button", {
          type: "button",
          onClick: debounced
        }, "click me");
      }), wrapper);
    });
    describe('when button has been clicked multiple times', function () {
      it('should trigger the callback only once', function () {
        var button = wrapper.querySelector('button');

        _testUtils.Simulate.click(button);

        _testUtils.Simulate.click(button);

        _testUtils.Simulate.click(button);

        _testUtils.Simulate.click(button);

        _testUtils.Simulate.click(button);

        expect(setTimeout).toHaveBeenCalledTimes(5);
        jest.runAllTimers();
        expect(callback).toHaveBeenCalledTimes(1);
        expect(callback).toHaveBeenCalledWith(expect.objectContaining({
          type: 'click',
          target: expect.any(Object)
        }));
      });
    });
  });
  describe('when button is clicked and unmounted', function () {
    beforeAll(function () {
      _reactDom.default.render(_react.default.createElement(_.default, {
        callback: callback,
        delay: 500
      }, function (debounced) {
        return _react.default.createElement("button", {
          type: "button",
          onClick: debounced
        }, "click me");
      }), wrapper);
    });
    it('it should clear the timeout and should not call the callback', function () {
      var button = wrapper.querySelector('button');

      _testUtils.Simulate.click(button);

      expect(setTimeout).toHaveBeenCalledTimes(1);

      _reactDom.default.unmountComponentAtNode(wrapper);

      jest.runAllTimers();
      expect(clearTimeout).toHaveBeenCalled();
      expect(callback).not.toHaveBeenCalled();
    });
  });
});