react-spatial/components/ResizeHandler/ResizeHandler.test.js

Components to build React map apps.

/* eslint-disable max-classes-per-file */
/* eslint-disable  react/no-multi-comp,react/prefer-stateless-function,react/prop-types */
import React from 'react';
import { configure, mount, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import ResizeObserver from 'resize-observer-polyfill';
import ResizeHandler from './ResizeHandler';

jest.mock('resize-observer-polyfill');

configure({ adapter: new Adapter() });

var Div = /*@__PURE__*/(function (superclass) {
  function Div () {
    superclass.apply(this, arguments);
  }

  if ( superclass ) Div.__proto__ = superclass;
  Div.prototype = Object.create( superclass && superclass.prototype );
  Div.prototype.constructor = Div;

  Div.prototype.render = function render () {
    return React.createElement( 'div', null );
  };

  return Div;
}(React.Component));

var BasicComponent = /*@__PURE__*/(function (superclass) {
  function BasicComponent () {
    superclass.apply(this, arguments);
  }

  if ( superclass ) BasicComponent.__proto__ = superclass;
  BasicComponent.prototype = Object.create( superclass && superclass.prototype );
  BasicComponent.prototype.constructor = BasicComponent;

  BasicComponent.prototype.render = function render () {
    var ref = this.props;
    var onResize = ref.onResize;
    var stylePropHeight = ref.stylePropHeight;
    return (
      React.createElement( 'div', { id: "basic" },
        React.createElement( ResizeHandler, {
          observe: this, onResize: onResize, stylePropHeight: stylePropHeight })
      )
    );
  };

  return BasicComponent;
}(React.Component));

var BasicComponent3 = /*@__PURE__*/(function (superclass) {
  function BasicComponent3 () {
    superclass.apply(this, arguments);
  }

  if ( superclass ) BasicComponent3.__proto__ = superclass;
  BasicComponent3.prototype = Object.create( superclass && superclass.prototype );
  BasicComponent3.prototype.constructor = BasicComponent3;

  BasicComponent3.prototype.render = function render () {
    return (
      React.createElement( 'div', { id: "basic" },
        React.createElement( ResizeHandler, {
          observe: this, maxHeightBrkpts: {
            niedrig: 150,
            hoch: Infinity,
          }, maxWidthBrkpts: {
            schmal: 150,
            breit: Infinity,
          } })
      )
    );
  };

  return BasicComponent3;
}(React.Component));

var StrComponent = /*@__PURE__*/(function (superclass) {
  function StrComponent () {
    superclass.apply(this, arguments);
  }

  if ( superclass ) StrComponent.__proto__ = superclass;
  StrComponent.prototype = Object.create( superclass && superclass.prototype );
  StrComponent.prototype.constructor = StrComponent;

  StrComponent.prototype.render = function render () {
    return (
      React.createElement( 'span', { id: "basic" },
        React.createElement( ResizeHandler, { observe: "#basic" })
      )
    );
  };

  return StrComponent;
}(React.Component));

var ThisComponent = /*@__PURE__*/(function (superclass) {
  function ThisComponent () {
    superclass.apply(this, arguments);
  }

  if ( superclass ) ThisComponent.__proto__ = superclass;
  ThisComponent.prototype = Object.create( superclass && superclass.prototype );
  ThisComponent.prototype.constructor = ThisComponent;

  ThisComponent.prototype.render = function render () {
    return (
      React.createElement( 'div', null,
        React.createElement( ResizeHandler, { observe: this })
      )
    );
  };

  return ThisComponent;
}(React.Component));

var RefComponent = /*@__PURE__*/(function (superclass) {
  function RefComponent(props) {
    superclass.call(this, props);
    this.ref = React.createRef();
  }

  if ( superclass ) RefComponent.__proto__ = superclass;
  RefComponent.prototype = Object.create( superclass && superclass.prototype );
  RefComponent.prototype.constructor = RefComponent;

  RefComponent.prototype.render = function render () {
    return (
      React.createElement( React.Fragment, null,
        React.createElement( Div, { ref: this.ref }),
        React.createElement( ResizeHandler, { observe: this.ref })
      )
    );
  };

  return RefComponent;
}(React.Component));

var CallbackComponent = /*@__PURE__*/(function (superclass) {
  function CallbackComponent(props) {
    superclass.call(this, props);
    this.state = {
      ref: null,
    };
  }

  if ( superclass ) CallbackComponent.__proto__ = superclass;
  CallbackComponent.prototype = Object.create( superclass && superclass.prototype );
  CallbackComponent.prototype.constructor = CallbackComponent;

  CallbackComponent.prototype.render = function render () {
    var this$1 = this;

    var ref$1 = this.state;
    var ref = ref$1.ref;
    return (
      React.createElement( React.Fragment, null,
        React.createElement( 'div', {
          ref: function (node) {
            if (node && !ref) {
              this$1.setState({
                ref: node,
              });
            }
          } }),
        React.createElement( ResizeHandler, { observe: ref })
      )
    );
  };

  return CallbackComponent;
}(React.Component));

var RefNodeComponent = /*@__PURE__*/(function (superclass) {
  function RefNodeComponent(props) {
    superclass.call(this, props);
    this.ref = React.createRef();
  }

  if ( superclass ) RefNodeComponent.__proto__ = superclass;
  RefNodeComponent.prototype = Object.create( superclass && superclass.prototype );
  RefNodeComponent.prototype.constructor = RefNodeComponent;

  RefNodeComponent.prototype.render = function render () {
    return (
      React.createElement( React.Fragment, null,
        React.createElement( 'div', { ref: this.ref }),
        React.createElement( ResizeHandler, { observe: this.ref })
      )
    );
  };

  return RefNodeComponent;
}(React.Component));

// eslint-disable-next-line  react/prefer-stateless-function
var CallbackNodeComponent = /*@__PURE__*/(function (superclass) {
  function CallbackNodeComponent(props) {
    superclass.call(this, props);
    this.state = {
      ref: null,
    };
  }

  if ( superclass ) CallbackNodeComponent.__proto__ = superclass;
  CallbackNodeComponent.prototype = Object.create( superclass && superclass.prototype );
  CallbackNodeComponent.prototype.constructor = CallbackNodeComponent;

  CallbackNodeComponent.prototype.render = function render () {
    var this$1 = this;

    var ref$1 = this.state;
    var ref = ref$1.ref;
    return (
      React.createElement( React.Fragment, null,
        React.createElement( 'div', {
          ref: function (node) {
            if (node && !ref) {
              this$1.setState({
                ref: node,
              });
            }
          } }),
        React.createElement( ResizeHandler, { observe: ref })
      )
    );
  };

  return CallbackNodeComponent;
}(React.Component));

var comps = [
  ThisComponent,
  RefComponent,
  RefNodeComponent,
  CallbackComponent,
  CallbackNodeComponent ];

describe('ResizeHandler', function () {
  describe('when observe property is not set', function () {
    test("doesn't observe", function () {
      var spy = jest.spyOn(ResizeObserver.prototype, 'observe');
      shallow(React.createElement( ResizeHandler, null ));
      expect(spy).not.toHaveBeenCalled();
      spy.mockRestore();
    });

    test('disconnect on unmount', function () {
      var wrapper = shallow(React.createElement( ResizeHandler, null ));
      var spy = jest.spyOn(wrapper.instance().observer, 'disconnect');
      wrapper.unmount();
      expect(spy).toHaveBeenCalledTimes(1);
    });
  });

  describe('when observe property is set', function () {
    test('try t get  an html node from a string on (un)mount', function () {
      var div = document.createElement('div');
      document.querySelectorAll = jest.fn().mockImplementation(function () { return [div]; });
      var spy = jest.spyOn(ResizeObserver.prototype, 'observe');
      var spy2 = jest.spyOn(ResizeObserver.prototype, 'disconnect');
      mount(React.createElement( StrComponent, null ));
      expect(spy).toHaveBeenCalledTimes(1);
      expect(spy.mock.calls[0][0]).toBe(div);
      expect(spy2.mock.calls.length >= 1).toBe(true);
      spy.mockRestore();
      spy2.mockRestore();
      document.querySelectorAll.mockRestore();
    });

    comps.forEach(function (Comp) {
      test(("(un)observes an html node from " + (Comp.name) + " on (un)mount"), function () {
        var spy = jest.spyOn(ResizeObserver.prototype, 'observe');
        var spy2 = jest.spyOn(ResizeObserver.prototype, 'disconnect');
        var wrapper = mount(React.createElement( Comp, null ));
        expect(spy).toHaveBeenCalledTimes(1);
        expect(spy.mock.calls[0][0]).toBeInstanceOf(Element);
        expect(spy2.mock.calls.length >= 1).toBe(true);
        ResizeObserver.prototype.observe.mockRestore();
        spy.mockRestore();
        spy2.mockRestore();
        wrapper.unmount();
      });
    });

    test('set the default css class on resize ', function () {
      var wrapper = mount(React.createElement( BasicComponent, null ));
      var basic = wrapper.getDOMNode();

      // The mock class set the onResize property, we just have to run it to
      // simulate a resize
      ResizeObserver.onResize([
        {
          target: basic,
          contentRect: {
            width: 200,
            height: 200,
          },
        } ]);
      expect(basic.className).toBe('tm-w-xs tm-h-xs');

      ResizeObserver.onResize([
        {
          target: basic,
          contentRect: {
            width: 577,
            height: 577,
          },
        } ]);
      expect(basic.className).toBe('tm-w-s tm-h-s');
      ResizeObserver.onResize([
        {
          target: basic,
          contentRect: {
            width: 769,
            height: 769,
          },
        } ]);
      expect(basic.className).toBe('tm-w-m tm-h-m');
      ResizeObserver.onResize([
        {
          target: basic,
          contentRect: {
            width: 993,
            height: 993,
          },
        } ]);
      expect(basic.className).toBe('tm-w-l tm-h-l');
      ResizeObserver.onResize([
        {
          target: basic,
          contentRect: {
            width: 1201,
            height: 1201,
          },
        } ]);
      expect(basic.className).toBe('tm-w-xl tm-h-xl');
    });

    test('uses user defined breakpoints', function () {
      var wrapper = mount(React.createElement( BasicComponent3, null ));
      var basic = wrapper.getDOMNode();

      // The mock class set the onResize property, we just have to run it to
      // simulate a resize
      ResizeObserver.onResize([
        {
          target: basic,
          contentRect: {
            width: 100,
            height: 100,
          },
        } ]);
      expect(basic.className).toBe('tm-w-schmal tm-h-niedrig');

      ResizeObserver.onResize([
        {
          target: basic,
          contentRect: {
            width: 1000,
            height: 1000,
          },
        } ]);
      expect(basic.className).toBe('tm-w-breit tm-h-hoch');
    });

    test('calls onResize property', function () {
      var fn = jest.fn();
      var wrapper = mount(React.createElement( BasicComponent, { onResize: fn }));
      var basic = wrapper.getDOMNode();

      // The mock class set the onResize property, we just have to run it to
      // simulate a resize
      ResizeObserver.onResize([
        {
          target: basic,
          contentRect: {
            width: 100,
            height: 100,
          },
        } ]);
      expect(fn).toHaveBeenCalledTimes(1);
    });

    test('set a style property on resize', function () {
      var spy = jest.spyOn(document.documentElement.style, 'setProperty');
      var wrapper = mount(React.createElement( BasicComponent, { stylePropHeight: "foo" }));
      var basic = wrapper.getDOMNode();

      // The mock class set the onResize property, we just have to run it to
      // simulate a resize
      ResizeObserver.onResize([
        {
          target: basic,
          contentRect: {
            width: 100,
            height: 100,
          },
        } ]);
      expect(spy).toHaveBeenCalledWith('foo', '7.68px');
    });
  });
});

//# sourceMappingURL=ResizeHandler.test.js.map