@gravity-ui/data-source/build/cjs/react/components/DataInfiniteLoader/__tests__/DataInfiniteLoader.test.js

A wrapper around data fetching

"use strict";

var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@testing-library/react");
var _DataInfiniteLoader = require("../DataInfiniteLoader");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
var MockLoadingView = function MockLoadingView() {
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    "data-testid": "loading-view",
    children: "Loading..."
  });
};
var MockErrorView = function MockErrorView(_ref) {
  var error = _ref.error,
    action = _ref.action;
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
    "data-testid": "error-view",
    children: [error ? "Error: ".concat(error.message) : 'No error', action ? /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
      "data-testid": "error-action",
      onClick: action.handler,
      children: action.children || 'Retry'
    }) : null]
  });
};
var MockMoreView = function MockMoreView(_ref2) {
  var isLoading = _ref2.isLoading,
    onClick = _ref2.onClick;
  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
    "data-testid": "more-view",
    children: isLoading ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
      "data-testid": "more-view-loading",
      children: "Loading more..."
    }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("button", {
      "data-testid": "more-view-button",
      onClick: onClick,
      children: "Load more"
    })
  });
};
describe('DataInfiniteLoader', function () {
  var renderDataInfiniteLoader = function renderDataInfiniteLoader() {
    var props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
    var fetchNextPage = jest.fn();
    var defaultProps = {
      status: 'success',
      error: null,
      hasNextPage: true,
      fetchNextPage: fetchNextPage,
      isFetchingNextPage: false,
      LoadingView: MockLoadingView,
      ErrorView: MockErrorView,
      MoreView: MockMoreView,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        "data-testid": "content",
        children: "Content"
      })
    };
    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_DataInfiniteLoader.DataInfiniteLoader, (0, _objectSpread2.default)((0, _objectSpread2.default)({}, defaultProps), props)))), {}, {
      fetchNextPage: fetchNextPage
    });
  };
  it('should render children and MoreView when status is success and hasNextPage is true', function () {
    renderDataInfiniteLoader({
      status: 'success',
      hasNextPage: true
    });
    expect(_react2.screen.getByTestId('content')).toBeInTheDocument();
    expect(_react2.screen.getByTestId('more-view')).toBeInTheDocument();
    expect(_react2.screen.queryByTestId('loading-view')).not.toBeInTheDocument();
    expect(_react2.screen.queryByTestId('error-view')).not.toBeInTheDocument();
  });
  it('should render only children when status is success and hasNextPage is false', function () {
    renderDataInfiniteLoader({
      status: 'success',
      hasNextPage: false
    });
    expect(_react2.screen.getByTestId('content')).toBeInTheDocument();
    expect(_react2.screen.queryByTestId('more-view')).not.toBeInTheDocument();
    expect(_react2.screen.queryByTestId('loading-view')).not.toBeInTheDocument();
    expect(_react2.screen.queryByTestId('error-view')).not.toBeInTheDocument();
  });
  it('should render LoadingView when status is loading', function () {
    renderDataInfiniteLoader({
      status: 'loading'
    });
    expect(_react2.screen.getByTestId('loading-view')).toBeInTheDocument();
    expect(_react2.screen.queryByTestId('content')).not.toBeInTheDocument();
    expect(_react2.screen.queryByTestId('more-view')).not.toBeInTheDocument();
    expect(_react2.screen.queryByTestId('error-view')).not.toBeInTheDocument();
  });
  it('should render ErrorView when status is error', function () {
    var error = new Error('Test error');
    renderDataInfiniteLoader({
      status: 'error',
      error: error
    });
    expect(_react2.screen.getByTestId('error-view')).toBeInTheDocument();
    expect(_react2.screen.queryByTestId('content')).not.toBeInTheDocument();
    expect(_react2.screen.queryByTestId('more-view')).not.toBeInTheDocument();
    expect(_react2.screen.queryByTestId('loading-view')).not.toBeInTheDocument();
    expect(_react2.screen.getByText(/Test error/)).toBeInTheDocument();
  });
  it('should call fetchNextPage when clicking on load more button', function () {
    var _renderDataInfiniteLo = renderDataInfiniteLoader({
        status: 'success',
        hasNextPage: true,
        isFetchingNextPage: false
      }),
      fetchNextPage = _renderDataInfiniteLo.fetchNextPage;
    _react2.fireEvent.click(_react2.screen.getByTestId('more-view-button'));
    expect(fetchNextPage).toHaveBeenCalledTimes(1);
  });
  it('should show loading state in MoreView when isFetchingNextPage is true', function () {
    renderDataInfiniteLoader({
      status: 'success',
      hasNextPage: true,
      isFetchingNextPage: true
    });
    expect(_react2.screen.getByTestId('more-view-loading')).toBeInTheDocument();
    expect(_react2.screen.queryByTestId('more-view-button')).not.toBeInTheDocument();
  });
  it('should pass errorAction to ErrorView', function () {
    var error = new Error('Test error');
    var errorAction = jest.fn();
    renderDataInfiniteLoader({
      status: 'error',
      error: error,
      errorAction: errorAction
    });
    expect(_react2.screen.getByTestId('error-action')).toBeInTheDocument();
  });
  it('should pass errorAction with custom children to ErrorView', function () {
    var error = new Error('Test error');
    var errorAction = {
      handler: jest.fn(),
      children: 'Custom action'
    };
    renderDataInfiniteLoader({
      status: 'error',
      error: error,
      errorAction: errorAction
    });
    expect(_react2.screen.getByText('Custom action')).toBeInTheDocument();
  });
  it('should pass loadingViewProps to LoadingView', function () {
    var LoadingView = jest.fn(MockLoadingView);
    var loadingViewProps = {
      customProp: 'test'
    };
    renderDataInfiniteLoader({
      status: 'loading',
      LoadingView: LoadingView,
      loadingViewProps: loadingViewProps
    });
    expect(LoadingView).toHaveBeenCalledWith(expect.objectContaining(loadingViewProps), undefined);
  });
  it('should pass errorViewProps to ErrorView', function () {
    var ErrorView = jest.fn(MockErrorView);
    var errorViewProps = {
      customProp: 'test'
    };
    var error = new Error('Test error');
    renderDataInfiniteLoader({
      status: 'error',
      error: error,
      ErrorView: ErrorView,
      errorViewProps: errorViewProps
    });
    expect(ErrorView).toHaveBeenCalledWith(expect.objectContaining(errorViewProps), undefined);
  });
  it('should pass moreViewProps to MoreView', function () {
    var MoreView = jest.fn(MockMoreView);
    var moreViewProps = {
      customProp: 'test'
    };
    renderDataInfiniteLoader({
      status: 'success',
      hasNextPage: true,
      MoreView: MoreView,
      moreViewProps: moreViewProps
    });
    expect(MoreView).toHaveBeenCalledWith(expect.objectContaining(moreViewProps), undefined);
  });
});
// #sourceMappingURL=DataInfiniteLoader.test.js.map