reshow-flux/build/es/__tests__/connectHookMoreTest.mjs

The smallest react flux and Fast hook alternative

import _classCallCheck from "reshow-runtime/es/helpers/classCallCheck";
import _createClass from "reshow-runtime/es/helpers/createClass";
import _possibleConstructorReturn from "reshow-runtime/es/helpers/possibleConstructorReturn";
import _isNativeReflectConstruct from "reshow-runtime/es/helpers/isNativeReflectConstruct";
import _getPrototypeOf from "reshow-runtime/es/helpers/getPrototypeOf";
import _inherits from "reshow-runtime/es/helpers/inherits";
import _defineProperty from "reshow-runtime/es/helpers/defineProperty";
import _objectSpread from "reshow-runtime/es/helpers/objectSpread2";
import _asyncToGenerator from "reshow-runtime/es/helpers/asyncToGenerator";
function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
// @ts-check

import * as React from "react";
var {
  Component
} = React;
import { createReducer } from "reshow-flux-base";
import { expect } from "chai";
import { act, render, screen } from "reshow-unit";
import useConnect from "../useConnect.mjs";
import { jsx as _jsx } from "react/jsx-runtime";
describe("Test Connect hook for more test", function () {
  var reducer;
  beforeEach(function () {
    reducer = createReducer(function (_state, action) {
      return action;
    }, {});
  });
  it("could register with store", /*#__PURE__*/_asyncToGenerator(function* () {
    var [store, dispatch] = reducer;
    var FakeComponent = function FakeComponent(/**@type any*/props) {
      var state = useConnect({
        storeLocator: function storeLocator() {
          return store;
        },
        calculateState: function calculateState() {
          return {
            foo: store.getState().foo
          };
        }
      })(props);
      return /*#__PURE__*/_jsx("div", {
        role: "udom",
        children: state.foo
      });
    };
    render(/*#__PURE__*/_jsx(FakeComponent, {}));
    yield act(function () {
      return dispatch({
        foo: "bar"
      });
    }, 5);
    expect(screen().getByRole("udom").outerHTML).to.equal("<div role=\"udom\">bar</div>");
  }));
  it("could work with dispatcher", /*#__PURE__*/_asyncToGenerator(function* () {
    var _FakeComponent;
    var calculateTimes = 0;
    var wrap;
    var [store, dispatch] = reducer;
    var FakeComponent = function FakeComponent(/**@type any*/props) {
      var state;
      state = useConnect({
        storeLocator: function storeLocator() {
          return store;
        },
        calculateState: function calculateState() {
          var state = store.getState();
          calculateTimes++;
          return {
            aaa: state.aaa
          };
        }
      })(props);
      return /*#__PURE__*/_jsx("div", {
        role: "udom",
        children: state.aaa
      });
    };
    expect(calculateTimes).to.equal(0);
    yield act(function () {
      return wrap = render(_FakeComponent || (_FakeComponent = /*#__PURE__*/_jsx(FakeComponent, {})));
    });
    expect(calculateTimes >= 2).to.be.true; //init and handlchange
    yield act(function () {
      dispatch({
        aaa: "Hello dispatcher!"
      });
    }, 5);
    var dispatchCalculateTimes = calculateTimes;
    expect(dispatchCalculateTimes >= 3).to.be.true;
    expect(screen().getByRole("udom").outerHTML).to.equal("<div role=\"udom\">Hello dispatcher!</div>");
    yield act(function () {
      return wrap.unmount();
    });
    dispatch({
      aaa: "Hello Unmount!"
    });
    expect(calculateTimes).to.equal(dispatchCalculateTimes);
  }));
  it("could work withProps", /*#__PURE__*/_asyncToGenerator(function* () {
    var getStoresProps = null;
    var calculateStateProps = null;
    var [store] = reducer;
    var FakeComponent = function FakeComponent(/**@type any*/props) {
      var state = useConnect({
        storeLocator: function storeLocator(props) {
          getStoresProps = props;
          return store;
        },
        calculateState: function calculateState(_prevState, props) {
          calculateStateProps = _objectSpread({}, props);
          return {
            foo: props.foo
          };
        }
      })(props);
      return /*#__PURE__*/_jsx("div", {
        role: "udom",
        children: state.foo
      });
    };
    var changeFoo;
    var Parent = /*#__PURE__*/function (_Component) {
      function Parent(/**@type any*/props) {
        var _this;
        _classCallCheck(this, Parent);
        _this = _callSuper(this, Parent, [props]);
        _defineProperty(_this, "state", {});
        changeFoo = function changeFoo(/**@type any*/v) {
          // @ts-ignore
          _this.setState({
            foo: v
          });
        };
        return _this;
      }
      _inherits(Parent, _Component);
      return _createClass(Parent, [{
        key: "render",
        value: function render() {
          var foo = null;
          if (this.state && this.state.foo) {
            foo = this.state.foo;
          }
          return /*#__PURE__*/_jsx(FakeComponent, {
            foo: foo,
            renewProps: true
          });
        }
      }]);
    }(Component);
    render(/*#__PURE__*/_jsx(Parent, {}));
    expect(getStoresProps).to.deep.include({
      foo: null
    });
    expect(calculateStateProps).to.deep.include({
      foo: null
    });
    yield act(function () {
      return changeFoo("bar");
    });
    expect(screen().getByRole("udom").outerHTML).to.equal("<div role=\"udom\">bar</div>");
    expect(getStoresProps).to.deep.include({
      foo: "bar"
    });
    expect(calculateStateProps).to.deep.include({
      foo: "bar"
    });
  }));
  it("could work with empty calculateState", function () {
    var [store] = reducer;
    var FakeComponent = function FakeComponent(/**@type any*/props) {
      var state = useConnect({
        storeLocator: function storeLocator() {
          return store;
        },
        calculateState: function calculateState() {
          return {
            foo: null
          };
        }
      })(props);
      return /*#__PURE__*/_jsx("div", {
        role: "udom",
        "data-foo": state.foo,
        "data-bar": props.bar
      });
    };
    render(/*#__PURE__*/_jsx(FakeComponent, {
      bar: "bbb"
    }));
    expect(screen().getByRole("udom").outerHTML).to.equal("<div role=\"udom\" data-bar=\"bbb\"></div>");
  });
});