fix(trading): update async renderer on error (#2842)

This commit is contained in:
m.ray 2023-02-03 11:52:10 -05:00 committed by GitHub
parent 7f1e47d7fd
commit 44d6d931d5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 60 additions and 54 deletions

View File

@ -19,7 +19,8 @@ const generateJsx = () => {
);
};
it('Renders a loading state while awaiting orders', async () => {
describe('OrderListManager', () => {
it('should render a loading state while awaiting orders', async () => {
jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
data: [],
loading: true,
@ -35,10 +36,10 @@ it('Renders a loading state while awaiting orders', async () => {
expect(screen.getByText('Loading...')).toBeInTheDocument();
});
it('Renders an error state', async () => {
it('should render an error state', async () => {
const errorMsg = 'Oops! An Error';
jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
data: [],
data: null,
loading: false,
error: new Error(errorMsg),
flush: jest.fn(),
@ -54,8 +55,8 @@ it('Renders an error state', async () => {
).toBeInTheDocument();
});
it('Renders the order list if orders provided', async () => {
// @ts-ignore Orderlist is read only but we need to override with the forwardref to
it('should render the order list if orders provided', async () => {
// @ts-ignore OrderList is read only but we need to override with the forwardRef to
// avoid warnings about padding refs
orderListMock.OrderListTable = forwardRef(() => <div>OrderList</div>);
jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
@ -72,3 +73,4 @@ it('Renders the order list if orders provided', async () => {
});
expect(await screen.findByText('OrderList')).toBeInTheDocument();
});
});

View File

@ -1,6 +1,7 @@
import { Splash } from '../splash';
import type { ReactNode } from 'react';
import { t } from '@vegaprotocol/react-helpers';
import * as Sentry from '@sentry/react';
interface AsyncRendererProps<T> {
loading: boolean;
@ -26,6 +27,8 @@ export function AsyncRenderer<T = object>({
render,
}: AsyncRendererProps<T>) {
if (error) {
Sentry.captureException(`Error rendering data: ${error.message}`);
if (!data) {
return (
<Splash>
{errorMessage
@ -34,6 +37,7 @@ export function AsyncRenderer<T = object>({
</Splash>
);
}
}
if (loading) {
return <Splash>{loadingMessage ? loadingMessage : t('Loading...')}</Splash>;