zarm/lib/utils/__tests__/useMutationObserverRef.test.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));

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

var _react2 = require("@testing-library/react");

var _useMutationObserverRef = _interopRequireDefault(require("../hooks/useMutationObserverRef"));

describe("useMutationObserverRef", function () {
  it("should watch for children change", /*#__PURE__*/(0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
    var id, fn, TestComp, button;
    return _regenerator.default.wrap(function _callee$(_context) {
      while (1) {
        switch (_context.prev = _context.next) {
          case 0:
            id = 1;
            fn = jest.fn();

            TestComp = function TestComp() {
              var _useMutationObserverR = (0, _useMutationObserverRef.default)(function (records) {
                // 重置监听状态
                records.forEach(function (record) {
                  var _Array$from;

                  if (((_Array$from = Array.from(record.addedNodes)) === null || _Array$from === void 0 ? void 0 : _Array$from.length) >= 1) {
                    fn();
                  }
                });
              }),
                  _useMutationObserverR2 = (0, _slicedToArray2.default)(_useMutationObserverR, 2),
                  ref = _useMutationObserverR2[0],
                  setNode = _useMutationObserverR2[1];

              var addTodo = function addTodo() {
                var todo = document.createElement("li");
                id += 1;
                todo.textContent = "todo ".concat(id);
                ref === null || ref === void 0 ? void 0 : ref.appendChild(todo);
              };

              return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("ul", {
                ref: setNode
              }, /*#__PURE__*/_react.default.createElement("li", null, "todo ", id)), /*#__PURE__*/_react.default.createElement("button", {
                onClick: addTodo,
                type: "button"
              }, "Add Todo"));
            };

            (0, _react2.render)( /*#__PURE__*/_react.default.createElement(TestComp, null));
            button = _react2.screen.getByText(/add todo/i);

            _react2.fireEvent.click(button);

            expect(_react2.screen.getAllByRole("listitem")).toHaveLength(2);
            _context.next = 9;
            return (0, _react2.waitFor)(function () {
              expect(fn).toBeCalledTimes(1);
            });

          case 9:
          case "end":
            return _context.stop();
        }
      }
    }, _callee);
  })));
});