chore(2104): make account table ready for change from being empty to full and back (#2302)

* chore: split ag-grid table for make one empty ready for new records

* chore: split ag-grid table for make one empty fix linter issues

* chore: split ag-grid table for make one empty change implnt. Add unit test

* chore: split ag-grid table for make one empty fix failing int test
This commit is contained in:
macqbat 2022-12-02 13:32:54 +01:00 committed by GitHub
parent 3d760b8f15
commit 8639cf0ff6
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 86 additions and 50 deletions

View File

@ -32,7 +32,9 @@ describe('Portfolio page', { tags: '@smoke' }, () => {
cy.wrap($header).should('have.text', headers[i]); cy.wrap($header).should('have.text', headers[i]);
}); });
}); });
cy.get('.ag-center-cols-container .ag-row').should( cy.get(
'[data-testid="tab-ledger-entries"] .ag-center-cols-container .ag-row'
).should(
'have.length', 'have.length',
generateLedgerEntries().ledgerEntries.edges.length generateLedgerEntries().ledgerEntries.edges.length
); );

View File

@ -1,12 +1,23 @@
import { act, render } from '@testing-library/react'; import { act, render, screen, waitFor } from '@testing-library/react';
import { AccountManager } from './accounts-manager';
import * as helpers from '@vegaprotocol/react-helpers'; import * as helpers from '@vegaprotocol/react-helpers';
import type { AccountFields } from './accounts-data-provider';
import { AccountManager } from './accounts-manager';
let mockedUpdate: ({
delta,
data,
}: {
delta?: never;
data: AccountFields[] | null;
}) => boolean;
jest.mock('@vegaprotocol/react-helpers', () => ({ jest.mock('@vegaprotocol/react-helpers', () => ({
...jest.requireActual('@vegaprotocol/react-helpers'), ...jest.requireActual('@vegaprotocol/react-helpers'),
useDataProvider: jest.fn(() => ({ useDataProvider: jest.fn((args) => {
data: [], mockedUpdate = args.update;
})), return {
data: [],
};
}),
})); }));
describe('AccountManager', () => { describe('AccountManager', () => {
@ -24,4 +35,22 @@ describe('AccountManager', () => {
(helpers.useDataProvider as jest.Mock).mock.calls[1][0].variables.partyId (helpers.useDataProvider as jest.Mock).mock.calls[1][0].variables.partyId
).toEqual('partyTwo'); ).toEqual('partyTwo');
}); });
it('update method should return proper result', async () => {
await act(() => {
render(<AccountManager partyId="partyOne" onClickAsset={jest.fn} />);
});
await waitFor(() => {
expect(screen.getByText('No accounts')).toBeInTheDocument();
});
expect(mockedUpdate({ data: [] })).toEqual(true);
expect(
mockedUpdate({ data: [{ party: { id: 't1' } }] as AccountFields[] })
).toEqual(false);
expect(
mockedUpdate({ data: [{ party: { id: 't2' } }] as AccountFields[] })
).toEqual(true);
expect(mockedUpdate({ data: [] })).toEqual(false);
expect(mockedUpdate({ data: [] })).toEqual(true);
});
}); });

View File

@ -1,4 +1,4 @@
import { useDataProvider } from '@vegaprotocol/react-helpers'; import { t, useDataProvider } from '@vegaprotocol/react-helpers';
import { AsyncRenderer } from '@vegaprotocol/ui-toolkit'; import { AsyncRenderer } from '@vegaprotocol/ui-toolkit';
import type { AgGridReact } from 'ag-grid-react'; import type { AgGridReact } from 'ag-grid-react';
import { useRef, useMemo, useCallback, memo } from 'react'; import { useRef, useMemo, useCallback, memo } from 'react';
@ -14,55 +14,60 @@ interface AccountManagerProps {
onClickDeposit?: (assetId?: string) => void; onClickDeposit?: (assetId?: string) => void;
} }
export const AccountManager = memo( export const AccountManager = ({
({ onClickAsset,
onClickAsset, onClickWithdraw,
onClickWithdraw, onClickDeposit,
onClickDeposit, partyId,
partyId, }: AccountManagerProps) => {
}: AccountManagerProps) => { const gridRef = useRef<AgGridReact | null>(null);
const gridRef = useRef<AgGridReact | null>(null); const dataRef = useRef<AccountFields[] | null>(null);
const dataRef = useRef<AccountFields[] | null>(null); const variables = useMemo(() => ({ partyId }), [partyId]);
const variables = useMemo(() => ({ partyId }), [partyId]); const update = useCallback(
const update = useCallback( ({ data }: { data: AccountFields[] | null }) => {
({ data }: { data: AccountFields[] | null }) => { const isEmpty = !dataRef.current?.length;
dataRef.current = data; dataRef.current = data;
gridRef.current?.api?.refreshInfiniteCache(); gridRef.current?.api?.refreshInfiniteCache();
return true; return Boolean((isEmpty && !data?.length) || (!isEmpty && data?.length));
}, },
[gridRef] [gridRef]
); );
const { data, loading, error } = useDataProvider<AccountFields[], never>({ const { data, loading, error } = useDataProvider<AccountFields[], never>({
dataProvider: aggregatedAccountsDataProvider, dataProvider: aggregatedAccountsDataProvider,
update, update,
variables, variables,
}); });
const getRows = async ({ const getRows = useCallback(
successCallback, async ({ successCallback, startRow, endRow }: GetRowsParams) => {
startRow,
endRow,
}: GetRowsParams) => {
const rowsThisBlock = dataRef.current const rowsThisBlock = dataRef.current
? dataRef.current.slice(startRow, endRow) ? dataRef.current.slice(startRow, endRow)
: []; : [];
const lastRow = dataRef.current?.length ?? -1; const lastRow = dataRef.current?.length ?? -1;
successCallback(rowsThisBlock, lastRow); successCallback(rowsThisBlock, lastRow);
}; },
return ( []
<AsyncRenderer data={data || []} error={error} loading={loading}> );
<AccountTable return (
rowModelType={data?.length ? 'infinite' : 'clientSide'} <div className="relative h-full">
rowData={data?.length ? undefined : []} <AccountTable
ref={gridRef} rowModelType="infinite"
datasource={{ getRows }} ref={gridRef}
onClickAsset={onClickAsset} datasource={{ getRows }}
onClickDeposit={onClickDeposit} onClickAsset={onClickAsset}
onClickWithdraw={onClickWithdraw} onClickDeposit={onClickDeposit}
onClickWithdraw={onClickWithdraw}
/>
<div className="pointer-events-none absolute inset-0 top-5">
<AsyncRenderer
data={data?.length ? data : null}
error={error}
loading={loading}
noDataMessage={t('No accounts')}
/> />
</AsyncRenderer> </div>
); </div>
} );
); };
export default memo(AccountManager); export default memo(AccountManager);