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

The smallest react flux and Fast hook alternative

import _asyncToGenerator from "reshow-runtime/es/helpers/asyncToGenerator";
//@ts-check

import * as React from "react";

/**
 * @typedef {import("mocha")}
 */

import { expect } from "chai";
import { act, render, waitFor, cleanIt } from "reshow-unit";
import useImmutable from "../useImmutable.mjs";
import { Map } from "../ImmutableStore.mjs";
import { jsx as _jsx } from "react/jsx-runtime";
describe("useImmutable Test", function () {
  afterEach(function () {
    return cleanIt();
  });
  it("basic test", function () {
    var Comp = function Comp() {
      var [state] = useImmutable({
        foo: "bar"
      });
      return /*#__PURE__*/_jsx("div", {
        children: state.get("foo")
      });
    };
    var wrap = render(/*#__PURE__*/_jsx(Comp, {}));
    expect(wrap.html()).to.equal("<div>bar</div>");
  });
  it("test basic set", /*#__PURE__*/_asyncToGenerator(function* () {
    var gSet;
    var Comp = function Comp() {
      var [state, setState] = useImmutable({
        foo: "bar"
      });
      gSet = setState;
      return /*#__PURE__*/_jsx("div", {
        children: state.get("foo")
      });
    };
    var wrap = render(/*#__PURE__*/_jsx(Comp, {}));
    expect(wrap.html()).to.equal("<div>bar</div>");
    yield act(function () {
      return gSet({
        foo: "bar1"
      });
    }, 5);
    expect(wrap.html()).to.equal("<div>bar1</div>");
  }));
  it("test set empty", /*#__PURE__*/_asyncToGenerator(function* () {
    var gSet;
    var Comp = function Comp() {
      var [state, setState] = useImmutable({
        foo: "bar"
      });
      gSet = setState;
      return /*#__PURE__*/_jsx("div", {
        children: state.get("foo")
      });
    };
    var wrap = render(/*#__PURE__*/_jsx(Comp, {}));
    expect(wrap.html()).to.equal("<div>bar</div>");
    yield act(function () {
      return gSet();
    }, 5);
    expect(wrap.html()).to.equal("<div>bar</div>");
  }));
  [Map(), {}].forEach(function (v) {
    it("test set empty with '" + v + "'", /*#__PURE__*/_asyncToGenerator(function* () {
      var gSet;
      var gState = {};
      var Comp = function Comp() {
        var [state, setState] = useImmutable({
          foo: "bar"
        });
        gSet = setState;
        gState = state;
        return /*#__PURE__*/_jsx("div", {
          children: state.get("foo")
        });
      };
      var wrap = render(/*#__PURE__*/_jsx(Comp, {}));
      expect(wrap.html()).to.equal("<div>bar</div>");
      yield act(function () {
        return gSet(v);
      }, 5);
      expect(gState.toJS()).to.deep.equal({
        foo: "bar"
      });
      expect(wrap.html()).to.equal("<div>bar</div>");
    }));
  });
  it("test with empty string", /*#__PURE__*/_asyncToGenerator(function* () {
    var gSet;
    var gState = {};
    var Comp = function Comp() {
      var [state, setState] = useImmutable({
        foo: "bar"
      });
      gSet = setState;
      gState = state;
      return /*#__PURE__*/_jsx("div", {
        children: state.get("foo")
      });
    };
    var wrap = render(/*#__PURE__*/_jsx(Comp, {}));
    expect(wrap.html()).to.equal("<div>bar</div>");
    yield act(function () {
      return gSet("");
    }, 5);
    expect(gState.toJS()).to.deep.equal({
      foo: "bar",
      type: ""
    });
    expect(wrap.html()).to.equal("<div>bar</div>");
  }));

  /**
   * dispatch will change string to type,
   * so it will store to key of type.
   */
  it("test string will set to type", /*#__PURE__*/_asyncToGenerator(function* () {
    var gSet;
    var gState = {};
    var Comp = function Comp() {
      var [state, setState] = useImmutable({
        foo: "bar"
      });
      gSet = setState;
      gState = state;
      return /*#__PURE__*/_jsx("div", {
        children: state.get("foo")
      });
    };
    var wrap = render(/*#__PURE__*/_jsx(Comp, {}));
    expect(wrap.html()).to.equal("<div>bar</div>");
    expect(gState.get("type")).to.be.undefined;
    yield act(function () {
      return gSet("foo");
    }, 5);
    expect(wrap.html()).to.equal("<div>bar</div>");
    yield waitFor(function () {
      return expect(gState.get("type")).to.equal("foo");
    });
  }));

  /**
   * In this case, sting could not merge with map,
   * will return original state.
   */
  it("test string with callback function", /*#__PURE__*/_asyncToGenerator(function* () {
    var gSet;
    var gState = {};
    var Comp = function Comp() {
      var [state, setState] = useImmutable({
        foo: "bar"
      });
      gSet = setState;
      gState = state;
      return /*#__PURE__*/_jsx("div", {
        children: state.get("foo")
      });
    };
    var wrap = render(/*#__PURE__*/_jsx(Comp, {}));
    expect(wrap.html()).to.equal("<div>bar</div>");
    expect(gState.get("type")).to.be.undefined;
    yield act(function () {
      return gSet(function () {
        return "foo";
      });
    }, 5);
    expect(wrap.html()).to.equal("<div>bar</div>");
    expect(gState.toJS()).to.deep.equal({
      type: "foo",
      foo: "bar"
    });
  }));
  [{
    init: Map({
      foo: "bar"
    }),
    set: Map({
      foo: "barbar"
    }),
    desc: "Map"
  }, {
    init: function init() {
      return Map({
        foo: "bar"
      });
    },
    set: function set() {
      return Map({
        foo: "barbar"
      });
    },
    desc: "Function and Map"
  }].forEach(function (v) {
    it("test set with " + v.desc, /*#__PURE__*/_asyncToGenerator(function* () {
      var gSet;
      var Comp = function Comp() {
        var [state, setState] = useImmutable(v.init);
        gSet = setState;
        return /*#__PURE__*/_jsx("div", {
          children: state.get("foo")
        });
      };
      var wrap = render(/*#__PURE__*/_jsx(Comp, {}));
      expect(wrap.html()).to.equal("<div>bar</div>");
      yield act(function () {
        return gSet(v.set);
      }, 5);
      expect(wrap.html()).to.equal("<div>barbar</div>");
    }));
  });
});