@gravity-ui/data-source
Version:
A wrapper around data fetching
184 lines • 6.88 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import React from 'react';
import { fireEvent, render, screen } from '@testing-library/react';
import { DataInfiniteLoader } from '../DataInfiniteLoader';
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var MockLoadingView = function MockLoadingView() {
return /*#__PURE__*/_jsx("div", {
"data-testid": "loading-view",
children: "Loading..."
});
};
var MockErrorView = function MockErrorView(_ref) {
var error = _ref.error,
action = _ref.action;
return /*#__PURE__*/_jsxs("div", {
"data-testid": "error-view",
children: [error ? "Error: ".concat(error.message) : 'No error', action ? /*#__PURE__*/_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__*/_jsx("div", {
"data-testid": "more-view",
children: isLoading ? /*#__PURE__*/_jsx("span", {
"data-testid": "more-view-loading",
children: "Loading more..."
}) : /*#__PURE__*/_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__*/_jsx("div", {
"data-testid": "content",
children: "Content"
})
};
return _objectSpread(_objectSpread({}, render(/*#__PURE__*/_jsx(DataInfiniteLoader, _objectSpread(_objectSpread({}, 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(screen.getByTestId('content')).toBeInTheDocument();
expect(screen.getByTestId('more-view')).toBeInTheDocument();
expect(screen.queryByTestId('loading-view')).not.toBeInTheDocument();
expect(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(screen.getByTestId('content')).toBeInTheDocument();
expect(screen.queryByTestId('more-view')).not.toBeInTheDocument();
expect(screen.queryByTestId('loading-view')).not.toBeInTheDocument();
expect(screen.queryByTestId('error-view')).not.toBeInTheDocument();
});
it('should render LoadingView when status is loading', function () {
renderDataInfiniteLoader({
status: 'loading'
});
expect(screen.getByTestId('loading-view')).toBeInTheDocument();
expect(screen.queryByTestId('content')).not.toBeInTheDocument();
expect(screen.queryByTestId('more-view')).not.toBeInTheDocument();
expect(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(screen.getByTestId('error-view')).toBeInTheDocument();
expect(screen.queryByTestId('content')).not.toBeInTheDocument();
expect(screen.queryByTestId('more-view')).not.toBeInTheDocument();
expect(screen.queryByTestId('loading-view')).not.toBeInTheDocument();
expect(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;
fireEvent.click(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(screen.getByTestId('more-view-loading')).toBeInTheDocument();
expect(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(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(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