From 5b5765ef63257bd6233aa27d3a5e6ac431d71dea Mon Sep 17 00:00:00 2001 From: Ben Date: Tue, 3 Oct 2023 16:16:24 +0100 Subject: [PATCH] chore(trading): add accounts jest test (#4962) --- .../src/integration/trading-accounts.cy.ts | 54 +------------ .../lib/accounts-actions-dropdown.spec.tsx | 75 +++++++++++++++++++ libs/accounts/src/lib/accounts-table.spec.tsx | 7 ++ 3 files changed, 83 insertions(+), 53 deletions(-) create mode 100644 libs/accounts/src/lib/accounts-actions-dropdown.spec.tsx diff --git a/apps/trading-e2e/src/integration/trading-accounts.cy.ts b/apps/trading-e2e/src/integration/trading-accounts.cy.ts index d559dd5d9..dd9412ce6 100644 --- a/apps/trading-e2e/src/integration/trading-accounts.cy.ts +++ b/apps/trading-e2e/src/integration/trading-accounts.cy.ts @@ -11,60 +11,8 @@ describe('accounts', { tags: '@smoke' }, () => { cy.visit('/#/markets/market-0'); }); - it('renders accounts', () => { - // 7001-COLL-001 - // 7001-COLL-002 - // 7001-COLL-003 - // 7001-COLL-004 - // 7001-COLL-005 - // 7001-COLL-006 - // 7001-COLL-007 - // 1003-TRAN-001 - // 7001-COLL-012 - - const tradingAccountRowId = '[row-id="t-0"]'; - cy.getByTestId('Collateral').click(); - - cy.getByTestId('tab-accounts').should('be.visible'); - - cy.getByTestId('tab-accounts') - .get(tradingAccountRowId) - .find('[col-id="asset.symbol"]') - .should('have.text', 'AST0'); - - cy.getByTestId('tab-accounts') - .get(tradingAccountRowId) - .find('[col-id="used"]') - .should('have.text', '1.01' + '1.00%'); - - cy.getByTestId('tab-accounts') - .get(tradingAccountRowId) - .find('[col-id="available"]') - .should('have.text', '100.00'); - - cy.getByTestId('tab-accounts') - .get(tradingAccountRowId) - .find('[col-id="total"]') - .should('have.text', '101.01'); - - cy.getByTestId('tab-accounts') - .get(tradingAccountRowId) - .find('[col-id="accounts-actions"]') - .should('have.text', ''); - - cy.getByTestId('tab-accounts') - .get('[col-id="accounts-actions"]') - .find('[data-testid="dropdown-menu"]') - .eq(1) - .click(); - cy.getByTestId('deposit').should('be.visible'); - cy.getByTestId('withdraw').should('be.visible'); - cy.getByTestId('transfer').should('be.visible'); - cy.getByTestId('breakdown').should('be.visible'); - cy.getByTestId('Collateral').click({ force: true }); - }); - it('should open usage breakdown dialog when clicked on used', () => { + cy.getByTestId('Collateral').click(); // 7001-COLL-009 cy.get('[col-id="used"]').contains('1.01').click(); const headers = ['Market', 'Account type', 'Balance', 'Margin health']; diff --git a/libs/accounts/src/lib/accounts-actions-dropdown.spec.tsx b/libs/accounts/src/lib/accounts-actions-dropdown.spec.tsx new file mode 100644 index 000000000..ab8d3ad94 --- /dev/null +++ b/libs/accounts/src/lib/accounts-actions-dropdown.spec.tsx @@ -0,0 +1,75 @@ +import { render, screen } from '@testing-library/react'; +import '@testing-library/jest-dom/extend-expect'; +import { AccountsActionsDropdown } from './accounts-actions-dropdown'; +import userEvent from '@testing-library/user-event'; + +describe('AccountsActionsDropdown', () => { + let onClickDeposit: jest.Mock; + let onClickWithdraw: jest.Mock; + let onClickBreakdown: jest.Mock; + let onClickTransfer: jest.Mock; + + beforeEach(() => { + onClickDeposit = jest.fn(); + onClickWithdraw = jest.fn(); + onClickBreakdown = jest.fn(); + onClickTransfer = jest.fn(); + }); + + it('should render dropdown items correctly', async () => { + // 7001-COLL-005 + // 7001-COLL-006 + // 1003-TRAN-001 + render( + + ); + + await userEvent.click(screen.getByTestId('icon-kebab')); + + expect(screen.getByTestId('deposit')).toHaveTextContent('Deposit'); + expect(screen.getByTestId('withdraw')).toHaveTextContent('Withdraw'); + expect(screen.getByTestId('transfer')).toHaveTextContent('Transfer'); + expect(screen.getByTestId('breakdown')).toHaveTextContent( + 'View usage breakdown' + ); + expect(screen.getByText('View asset details')).toBeInTheDocument(); + expect(screen.getByText('Copy asset ID')).toBeInTheDocument(); + expect(screen.getByText('View on Etherscan')).toBeInTheDocument(); + }); + + it('should call callback functions on click', async () => { + render( + + ); + + await userEvent.click(screen.getByTestId('icon-kebab')); + await userEvent.click(screen.getByTestId('deposit')); + expect(onClickDeposit).toHaveBeenCalledTimes(1); + + await userEvent.click(screen.getByTestId('icon-kebab')); + await userEvent.click(screen.getByTestId('withdraw')); + expect(onClickWithdraw).toHaveBeenCalledTimes(1); + + await userEvent.click(screen.getByTestId('icon-kebab')); + await userEvent.click(screen.getByTestId('transfer')); + expect(onClickTransfer).toHaveBeenCalledTimes(1); + + await userEvent.click(screen.getByTestId('icon-kebab')); + await userEvent.click(screen.getByTestId('breakdown')); + expect(onClickBreakdown).toHaveBeenCalledTimes(1); + }); +}); diff --git a/libs/accounts/src/lib/accounts-table.spec.tsx b/libs/accounts/src/lib/accounts-table.spec.tsx index c81030d37..3f5051d55 100644 --- a/libs/accounts/src/lib/accounts-table.spec.tsx +++ b/libs/accounts/src/lib/accounts-table.spec.tsx @@ -26,6 +26,13 @@ const singleRowData = [singleRow]; describe('AccountsTable', () => { it('should render correct columns', async () => { + // 7001-COLL-001 + // 7001-COLL-002 + // 7001-COLL-003 + // 7001-COLL-004 + // 7001-COLL-007 + // 1003-TRAN-001 + // 7001-COLL-012 await act(async () => { render(