LaconicNetwork/vega-frontend-monorepo
3
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

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

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

96
libs/orders/src/lib/components/order-list-manager/order-list-manager.spec.tsx
View File

@ -19,56 +19,58 @@ const generateJsx = () => {
);
};
it('Renders a loading state while awaiting orders', async () => {
jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
data: [],
loading: true,
error: undefined,
flush: jest.fn(),
reload: jest.fn(),
load: jest.fn(),
totalCount: 0,
describe('OrderListManager', () => {
it('should render a loading state while awaiting orders', async () => {
jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
data: [],
loading: true,
error: undefined,
flush: jest.fn(),
reload: jest.fn(),
load: jest.fn(),
totalCount: 0,
});
await act(async () => {
render(generateJsx());
});
expect(screen.getByText('Loading...')).toBeInTheDocument();
});
await act(async () => {
render(generateJsx());
});
expect(screen.getByText('Loading...')).toBeInTheDocument();
});
it('Renders an error state', async () => {
const errorMsg = 'Oops! An Error';
jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
data: [],
loading: false,
error: new Error(errorMsg),
flush: jest.fn(),
reload: jest.fn(),
load: jest.fn(),
totalCount: undefined,
it('should render an error state', async () => {
const errorMsg = 'Oops! An Error';
jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
data: null,
loading: false,
error: new Error(errorMsg),
flush: jest.fn(),
reload: jest.fn(),
load: jest.fn(),
totalCount: undefined,
});
await act(async () => {
render(generateJsx());
});
expect(
screen.getByText(`Something went wrong: ${errorMsg}`)
).toBeInTheDocument();
});
await act(async () => {
render(generateJsx());
});
expect(
screen.getByText(`Something went wrong: ${errorMsg}`)
).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
// avoid warnings about padding refs
orderListMock.OrderListTable = forwardRef(() => <div>OrderList</div>);
jest.spyOn(useDataProviderHook, 'useDataProvider').mockReturnValue({
data: [{ id: '1' } as OrderFieldsFragment],
loading: false,
error: undefined,
flush: jest.fn(),
reload: jest.fn(),
load: jest.fn(),
totalCount: undefined,
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({
data: [{ id: '1' } as OrderFieldsFragment],
loading: false,
error: undefined,
flush: jest.fn(),
reload: jest.fn(),
load: jest.fn(),
totalCount: undefined,
});
await act(async () => {
render(generateJsx());
});
expect(await screen.findByText('OrderList')).toBeInTheDocument();
});
await act(async () => {
render(generateJsx());
});
expect(await screen.findByText('OrderList')).toBeInTheDocument();
});

18
libs/ui-toolkit/src/components/async-renderer/async-renderer.tsx
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,13 +27,16 @@ export function AsyncRenderer<T = object>({
render,
}: AsyncRendererProps<T>) {
if (error) {
return (
<Splash>
{errorMessage
? errorMessage
: t(`Something went wrong: ${error.message}`)}
</Splash>
);
Sentry.captureException(`Error rendering data: ${error.message}`);
if (!data) {
return (
<Splash>
{errorMessage
? errorMessage
: t(`Something went wrong: ${error.message}`)}
</Splash>
);
}
}
if (loading) {