From 46c4b9417eb62a3a4b2b342e1bb7712cee463e64 Mon Sep 17 00:00:00 2001 From: macqbat Date: Fri, 12 Aug 2022 10:00:46 +0200 Subject: [PATCH] feat: [console-lite] - market list - refactor filters query, int tests of long market list (#992) * feat: [console-lite] - market list - refactor filters query * feat: [console-lite] - market list - refactor some unit tests * feat: [console-lite] - market list - refactor some unit tests * Update apps/simple-trading-app-e2e/src/integration/market-list.test.ts Co-authored-by: Sam Keen * Update apps/simple-trading-app-e2e/src/integration/market-list.test.ts Co-authored-by: Sam Keen * feat: [console-lite] - after feedbacks * feat: [console-lite] - enlarge loading times * feat: [console-lite] - adjust int test * feat: [console-lite] - adjust int test Co-authored-by: maciek Co-authored-by: Sam Keen --- .../src/integration/market-list.test.ts | 79 +++++- .../src/support/index.ts | 1 + .../src/support/mocks/generate-filters.ts | 84 ------ .../src/support/mocks/generate-markets.ts | 241 ++++++++++-------- apps/simple-trading-app-e2e/tsconfig.json | 2 +- .../__generated__/MarketFilters.ts | 55 ---- .../simple-market-list/data-provider.ts | 19 -- .../simple-market-list.spec.tsx | 25 +- .../simple-market-list/simple-market-list.tsx | 2 +- .../simple-market-toolbar.spec.tsx | 155 ++++++----- .../simple-market-toolbar.tsx | 9 +- .../src/app/hooks/use-markets-filter.ts | 12 +- .../src/app/hooks/use-order-closeout.spec.tsx | 3 - package.json | 1 + yarn.lock | 5 + 15 files changed, 309 insertions(+), 384 deletions(-) delete mode 100644 apps/simple-trading-app-e2e/src/support/mocks/generate-filters.ts delete mode 100644 apps/simple-trading-app/src/app/components/simple-market-list/__generated__/MarketFilters.ts diff --git a/apps/simple-trading-app-e2e/src/integration/market-list.test.ts b/apps/simple-trading-app-e2e/src/integration/market-list.test.ts index 8e43f8283..3b26b2f7b 100644 --- a/apps/simple-trading-app-e2e/src/integration/market-list.test.ts +++ b/apps/simple-trading-app-e2e/src/integration/market-list.test.ts @@ -1,13 +1,14 @@ import { aliasQuery } from '@vegaprotocol/cypress'; -import { generateSimpleMarkets } from '../support/mocks/generate-markets'; -import { generateFilters } from '../support/mocks/generate-filters'; +import { + generateLongListMarkets, + generateSimpleMarkets, +} from '../support/mocks/generate-markets'; describe('market list', () => { describe('simple url', () => { beforeEach(() => { cy.mockGQL((req) => { aliasQuery(req, 'SimpleMarkets', generateSimpleMarkets()); - aliasQuery(req, 'MarketFilters', generateFilters()); }); cy.visit('/markets'); }); @@ -62,7 +63,6 @@ describe('market list', () => { beforeEach(() => { cy.mockGQL((req) => { aliasQuery(req, 'SimpleMarkets', generateSimpleMarkets()); - aliasQuery(req, 'MarketFilters', generateFilters()); }); }); @@ -73,7 +73,7 @@ describe('market list', () => { it('last asset (if exists)', () => { cy.visit('/markets'); - cy.wait('@MarketFilters').then((filters) => { + cy.wait('@SimpleMarkets').then((filters) => { if (filters?.response?.body?.data?.markets?.length) { const asset = filters.response.body.data.markets[0].tradableInstrument.instrument @@ -93,4 +93,73 @@ describe('market list', () => { .should('have.text', 'Future'); }); }); + + describe('long list of results should be handled properly', () => { + it('handles 5000 markets', () => { + cy.viewport(1440, 900); + cy.mockGQL((req) => { + aliasQuery(req, 'SimpleMarkets', generateLongListMarkets(5000)); + }); + performance.mark('start-5k'); + cy.visit('/markets'); + cy.get('.ag-center-cols-container', { timeout: 50000 }).then(() => { + performance.mark('end-5k'); + performance.measure('load-5k', 'start-5k', 'end-5k'); + const measure = performance.getEntriesByName('load-5k')[0]; + expect(measure.duration).lte(20000); + cy.log(`Ag-grid 5k load took ${measure.duration} milliseconds.`); + + cy.get('.ag-root').should('have.attr', 'aria-rowcount', '5001'); + cy.get('.ag-center-cols-container') + .find('[role="row"]') + .its('length') + .then((length) => expect(length).to.be.closeTo(21, 2)); + cy.get('.ag-cell-label-container').eq(4).click(); + for (let i = 0; i < 50; i++) { + cy.get('body').realPress('Tab'); + } + cy.focused().parent('.ag-row').should('have.attr', 'row-index', '49'); + cy.get('.ag-center-cols-container') + .find('[role="row"]') + .its('length') + .then((length) => expect(length).to.be.closeTo(31, 2)); + }); + }); + + it('handles 50000 markets', () => { + cy.viewport(1440, 900); + cy.mockGQL(async (req) => { + aliasQuery(req, 'SimpleMarkets', generateLongListMarkets(50000)); + }); + performance.mark('start-50k'); + cy.visit('/markets'); + cy.get('.w-full.h-full.flex.items-center.justify-center').should( + 'have.text', + 'Loading...' + ); + cy.get('.ag-center-cols-container', { timeout: 100000 }).then(() => { + performance.mark('end-50k'); + performance.measure('load-50k', 'start-50k', 'end-50k'); + const measure = performance.getEntriesByName('load-50k')[0]; + expect(measure.duration).lte(85000); + cy.log(`Ag-grid 50k load took ${measure.duration} milliseconds.`); + + cy.get('.ag-root').should('have.attr', 'aria-rowcount', '50001'); + cy.get('.ag-center-cols-container') + .find('[role="row"]') + .its('length') + .then((length) => expect(length).to.be.closeTo(21, 2)); + + cy.get('.ag-cell-label-container').eq(4).click(); + for (let i = 0; i < 50; i++) { + cy.get('body').realPress('Tab'); + } + cy.focused().parent('.ag-row').should('have.attr', 'row-index', '49'); + cy.get('.ag-center-cols-container') + .find('[role="row"]') + .its('length') + .then((length) => expect(length).to.be.closeTo(31, 2)); + }); + }); + }); }); diff --git a/apps/simple-trading-app-e2e/src/support/index.ts b/apps/simple-trading-app-e2e/src/support/index.ts index bf5cfc74e..4eb76794f 100644 --- a/apps/simple-trading-app-e2e/src/support/index.ts +++ b/apps/simple-trading-app-e2e/src/support/index.ts @@ -14,5 +14,6 @@ // *********************************************************** import '@vegaprotocol/cypress'; +import 'cypress-real-events/support'; // Import commands.js using ES2015 syntax: import './commands'; diff --git a/apps/simple-trading-app-e2e/src/support/mocks/generate-filters.ts b/apps/simple-trading-app-e2e/src/support/mocks/generate-filters.ts deleted file mode 100644 index 23adeb745..000000000 --- a/apps/simple-trading-app-e2e/src/support/mocks/generate-filters.ts +++ /dev/null @@ -1,84 +0,0 @@ -export const generateFilters = () => { - return { - markets: [ - { - tradableInstrument: { - instrument: { - product: { - __typename: 'Future', - settlementAsset: { symbol: 'fDAI', __typename: 'Asset' }, - }, - __typename: 'Instrument', - }, - __typename: 'TradableInstrument', - }, - __typename: 'Market', - }, - { - tradableInstrument: { - instrument: { - product: { - __typename: 'Future', - settlementAsset: { symbol: 'fBTC', __typename: 'Asset' }, - }, - __typename: 'Instrument', - }, - __typename: 'TradableInstrument', - }, - __typename: 'Market', - }, - { - tradableInstrument: { - instrument: { - product: { - __typename: 'Future', - settlementAsset: { symbol: 'fDAI', __typename: 'Asset' }, - }, - __typename: 'Instrument', - }, - __typename: 'TradableInstrument', - }, - __typename: 'Market', - }, - { - tradableInstrument: { - instrument: { - product: { - __typename: 'Future', - settlementAsset: { symbol: 'fDAI', __typename: 'Asset' }, - }, - __typename: 'Instrument', - }, - __typename: 'TradableInstrument', - }, - __typename: 'Market', - }, - { - tradableInstrument: { - instrument: { - product: { - __typename: 'Future', - settlementAsset: { symbol: 'fUSDC', __typename: 'Asset' }, - }, - __typename: 'Instrument', - }, - __typename: 'TradableInstrument', - }, - __typename: 'Market', - }, - { - tradableInstrument: { - instrument: { - product: { - __typename: 'Future', - settlementAsset: { symbol: 'fEURO', __typename: 'Asset' }, - }, - __typename: 'Instrument', - }, - __typename: 'TradableInstrument', - }, - __typename: 'Market', - }, - ], - }; -}; diff --git a/apps/simple-trading-app-e2e/src/support/mocks/generate-markets.ts b/apps/simple-trading-app-e2e/src/support/mocks/generate-markets.ts index 8e80b4afd..f418ae637 100644 --- a/apps/simple-trading-app-e2e/src/support/mocks/generate-markets.ts +++ b/apps/simple-trading-app-e2e/src/support/mocks/generate-markets.ts @@ -1,116 +1,120 @@ +const protoCandles = [ + { open: '9556163', close: '9587028', __typename: 'Candle' }, + { + open: '9587028', + close: '9769899', + __typename: 'Candle', + }, + { open: '9769899', close: '9586292', __typename: 'Candle' }, + { + open: '9586292', + close: '9261774', + __typename: 'Candle', + }, + { open: '9261773', close: '9236369', __typename: 'Candle' }, + { + open: '9236369', + close: '9226070', + __typename: 'Candle', + }, + { open: '9226077', close: '9233252', __typename: 'Candle' }, + { + open: '9249854', + close: '9333038', + __typename: 'Candle', + }, + { open: '9333038', close: '9410371', __typename: 'Candle' }, + { + open: '9410371', + close: '9626249', + __typename: 'Candle', + }, + { open: '9626247', close: '9493253', __typename: 'Candle' }, + { + open: '9493253', + close: '9309054', + __typename: 'Candle', + }, + { open: '9309054', close: '9378428', __typename: 'Candle' }, + { + open: '9378428', + close: '9352996', + __typename: 'Candle', + }, + { open: '9352996', close: '9451142', __typename: 'Candle' }, + { + open: '9451142', + close: '9691070', + __typename: 'Candle', + }, + { open: '9691071', close: '9622031', __typename: 'Candle' }, + { + open: '9622034', + close: '9519285', + __typename: 'Candle', + }, + { open: '9528904', close: '9671275', __typename: 'Candle' }, + { + open: '9671275', + close: '9988454', + __typename: 'Candle', + }, + { open: '9982457', close: '10085537', __typename: 'Candle' }, + { + open: '10085537', + close: '9967390', + __typename: 'Candle', + }, + { open: '9967390', close: '9974844', __typename: 'Candle' }, + { + open: '9974844', + close: '9940706', + __typename: 'Candle', + }, +]; + +const protoMarket = { + id: 'first-btcusd-id', + name: 'AAVEDAI Monthly (30 Jun 2022)', + data: { + market: { + id: 'first-btcusd-id', + state: 'Active', + __typename: 'Market', + }, + __typename: 'MarketData', + }, + tradableInstrument: { + instrument: { + code: 'AAVEDAI.MF21', + metadata: { + tags: [ + 'formerly:2839D9B2329C9E70', + 'base:AAVE', + 'quote:DAI', + 'class:fx/crypto', + 'monthly', + 'sector:defi', + ], + __typename: 'InstrumentMetadata', + }, + product: { + __typename: 'Future', + quoteName: 'DAI', + settlementAsset: { symbol: 'tDAI', __typename: 'Asset' }, + }, + __typename: 'Instrument', + }, + __typename: 'TradableInstrument', + }, + candles: protoCandles, + __typename: 'Market', +}; + export const generateSimpleMarkets = () => { return { markets: [ - { - id: 'first-btcusd-id', - name: 'AAVEDAI Monthly (30 Jun 2022)', - data: { - market: { - id: 'first-btcusd-id', - state: 'Active', - __typename: 'Market', - }, - __typename: 'MarketData', - }, - tradableInstrument: { - instrument: { - code: 'AAVEDAI.MF21', - metadata: { - tags: [ - 'formerly:2839D9B2329C9E70', - 'base:AAVE', - 'quote:DAI', - 'class:fx/crypto', - 'monthly', - 'sector:defi', - ], - __typename: 'InstrumentMetadata', - }, - product: { - __typename: 'Future', - quoteName: 'DAI', - settlementAsset: { symbol: 'tDAI', __typename: 'Asset' }, - }, - __typename: 'Instrument', - }, - __typename: 'TradableInstrument', - }, - candles: [ - { open: '9556163', close: '9587028', __typename: 'Candle' }, - { - open: '9587028', - close: '9769899', - __typename: 'Candle', - }, - { open: '9769899', close: '9586292', __typename: 'Candle' }, - { - open: '9586292', - close: '9261774', - __typename: 'Candle', - }, - { open: '9261773', close: '9236369', __typename: 'Candle' }, - { - open: '9236369', - close: '9226070', - __typename: 'Candle', - }, - { open: '9226077', close: '9233252', __typename: 'Candle' }, - { - open: '9249854', - close: '9333038', - __typename: 'Candle', - }, - { open: '9333038', close: '9410371', __typename: 'Candle' }, - { - open: '9410371', - close: '9626249', - __typename: 'Candle', - }, - { open: '9626247', close: '9493253', __typename: 'Candle' }, - { - open: '9493253', - close: '9309054', - __typename: 'Candle', - }, - { open: '9309054', close: '9378428', __typename: 'Candle' }, - { - open: '9378428', - close: '9352996', - __typename: 'Candle', - }, - { open: '9352996', close: '9451142', __typename: 'Candle' }, - { - open: '9451142', - close: '9691070', - __typename: 'Candle', - }, - { open: '9691071', close: '9622031', __typename: 'Candle' }, - { - open: '9622034', - close: '9519285', - __typename: 'Candle', - }, - { open: '9528904', close: '9671275', __typename: 'Candle' }, - { - open: '9671275', - close: '9988454', - __typename: 'Candle', - }, - { open: '9982457', close: '10085537', __typename: 'Candle' }, - { - open: '10085537', - close: '9967390', - __typename: 'Candle', - }, - { open: '9967390', close: '9974844', __typename: 'Candle' }, - { - open: '9974844', - close: '9940706', - __typename: 'Candle', - }, - ], - __typename: 'Market', - }, + { ...protoMarket }, { id: '57fbaa322e97cfc8bb5f1de048c37e033c41b1ac1906d3aed9960912a067ef5a', name: 'CELUSD (June 2022)', @@ -1067,3 +1071,20 @@ export const generateSimpleMarkets = () => { ], }; }; + +export const generateLongListMarkets = (count: number) => { + const markets = []; + for (let i = 0; i < count; i++) { + const { id, name } = protoMarket; + markets.push({ + ...protoMarket, + id: id + i, + name: name + i, + data: { + ...protoMarket.data, + id: id + i, + }, + }); + } + return { markets }; +}; diff --git a/apps/simple-trading-app-e2e/tsconfig.json b/apps/simple-trading-app-e2e/tsconfig.json index c4f818ecd..3cb24ca8d 100644 --- a/apps/simple-trading-app-e2e/tsconfig.json +++ b/apps/simple-trading-app-e2e/tsconfig.json @@ -4,7 +4,7 @@ "sourceMap": false, "outDir": "../../dist/out-tsc", "allowJs": true, - "types": ["cypress", "node"] + "types": ["cypress", "node", "cypress-real-events"] }, "include": ["src/**/*.ts", "src/**/*.js"] } diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/__generated__/MarketFilters.ts b/apps/simple-trading-app/src/app/components/simple-market-list/__generated__/MarketFilters.ts deleted file mode 100644 index 02d961036..000000000 --- a/apps/simple-trading-app/src/app/components/simple-market-list/__generated__/MarketFilters.ts +++ /dev/null @@ -1,55 +0,0 @@ -/* tslint:disable */ -/* eslint-disable */ -// @generated -// This file was automatically generated and should not be edited. - -// ==================================================== -// GraphQL query operation: MarketFilters -// ==================================================== - -export interface MarketFilters_markets_tradableInstrument_instrument_product_settlementAsset { - __typename: "Asset"; - /** - * The symbol of the asset (e.g: GBP) - */ - symbol: string; -} - -export interface MarketFilters_markets_tradableInstrument_instrument_product { - __typename: "Future"; - /** - * The name of the asset (string) - */ - settlementAsset: MarketFilters_markets_tradableInstrument_instrument_product_settlementAsset; -} - -export interface MarketFilters_markets_tradableInstrument_instrument { - __typename: "Instrument"; - /** - * A reference to or instance of a fully specified product, including all required product parameters for that product (Product union) - */ - product: MarketFilters_markets_tradableInstrument_instrument_product; -} - -export interface MarketFilters_markets_tradableInstrument { - __typename: "TradableInstrument"; - /** - * An instance of or reference to a fully specified instrument. - */ - instrument: MarketFilters_markets_tradableInstrument_instrument; -} - -export interface MarketFilters_markets { - __typename: "Market"; - /** - * An instance of or reference to a tradable instrument. - */ - tradableInstrument: MarketFilters_markets_tradableInstrument; -} - -export interface MarketFilters { - /** - * One or more instruments that are trading on the VEGA network - */ - markets: MarketFilters_markets[] | null; -} diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/data-provider.ts b/apps/simple-trading-app/src/app/components/simple-market-list/data-provider.ts index 7689b9827..95c890260 100644 --- a/apps/simple-trading-app/src/app/components/simple-market-list/data-provider.ts +++ b/apps/simple-trading-app/src/app/components/simple-market-list/data-provider.ts @@ -70,25 +70,6 @@ export const CANDLE_SUB = gql` } `; -export const FILTERS_QUERY = gql` - query MarketFilters { - markets { - tradableInstrument { - instrument { - product { - __typename - ... on Future { - settlementAsset { - symbol - } - } - } - } - } - } - } -`; - const update = ( data: SimpleMarkets_markets[], delta: SimpleMarketDataSub_marketData diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.spec.tsx b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.spec.tsx index c7dbc9eb1..4ca385b64 100644 --- a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.spec.tsx +++ b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.spec.tsx @@ -12,12 +12,11 @@ import type { MockedResponse } from '@apollo/client/testing'; import { BrowserRouter } from 'react-router-dom'; import { MarketState } from '@vegaprotocol/types'; import SimpleMarketList from './simple-market-list'; -import { FILTERS_QUERY, MARKETS_QUERY } from './data-provider'; +import { MARKETS_QUERY } from './data-provider'; import type { SimpleMarkets_markets, SimpleMarkets, } from './__generated__/SimpleMarkets'; -import type { MarketFilters } from './__generated__/MarketFilters'; const mockedNavigate = jest.fn(); @@ -32,15 +31,6 @@ jest.mock('date-fns', () => ({ })); describe('SimpleMarketList', () => { - const filterMock: MockedResponse = { - request: { - query: FILTERS_QUERY, - }, - result: { - data: { markets: [] }, - }, - }; - afterEach(() => { jest.clearAllMocks(); cleanup(); @@ -60,8 +50,7 @@ describe('SimpleMarketList', () => { }; await act(async () => { render( - // @ts-ignore different versions of react types in apollo and app - + , { wrapper: BrowserRouter } @@ -130,8 +119,7 @@ describe('SimpleMarketList', () => { }; await act(async () => { render( - // @ts-ignore different versions of react types in apollo and app - + , { wrapper: BrowserRouter } @@ -143,8 +131,9 @@ describe('SimpleMarketList', () => { document.querySelector('.ag-center-cols-container') ).toBeInTheDocument(); }); - - const container = document.querySelector('.ag-center-cols-container'); - expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2); + await waitFor(() => { + const container = document.querySelector('.ag-center-cols-container'); + expect(getAllByRole(container as HTMLDivElement, 'row')).toHaveLength(2); + }); }); }); diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.tsx b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.tsx index 5c8585a33..0d1f07b51 100644 --- a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.tsx +++ b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-list.tsx @@ -131,7 +131,7 @@ const SimpleMarketList = () => { return (
- + { - const filterMock: MockedResponse = { - request: { - query: FILTERS_QUERY, - }, - result: { - data: filterData as unknown as MarketFilters, - }, - }; - const WrappedCompForTest = () => { const routes = useRoutes([ { path: '/', - element: , + element: ( + + ), }, { path: 'markets', children: [ { path: `:state`, - element: , + element: ( + + ), children: [ { path: `:product`, - element: , + element: ( + + ), children: [ - { path: `:asset`, element: }, + { + path: `:asset`, + element: ( + + ), + }, ], }, ], }, ], - element: , + element: ( + + ), }, ]); const location = useLocation(); @@ -59,74 +66,66 @@ describe('SimpleMarketToolbar', () => { }); it('should be properly rendered', async () => { - act(async () => { - render( - // @ts-ignore different versions of react types in apollo and app - - - , - { wrapper: BrowserRouter } + render( + + + , + { wrapper: BrowserRouter } + ); + await waitFor(() => { + expect(screen.getByText('Future')).toBeInTheDocument(); + }); + fireEvent.click(screen.getByText('Future')); + await waitFor(() => { + expect(screen.getByTestId('market-products-menu').children).toHaveLength( + 3 ); - await waitFor(() => { - expect(screen.getByText('Future')).toBeInTheDocument(); - }); - fireEvent.click(screen.getByText('Future')); - await waitFor(() => { - expect( - screen.getByTestId('market-products-menu').children - ).toHaveLength(3); - expect(screen.getByTestId('market-assets-menu').children).toHaveLength( - 6 - ); - }); - fireEvent.click(screen.getByTestId('state-trigger')); - waitFor(() => { - expect(screen.getByRole('menu')).toBeInTheDocument(); - expect(screen.getByRole('menu').children).toHaveLength(10); - }); + expect(screen.getByTestId('market-assets-menu').children).toHaveLength(6); + }); + fireEvent.click(screen.getByTestId('state-trigger')); + waitFor(() => { + expect(screen.getByRole('menu')).toBeInTheDocument(); + expect(screen.getByRole('menu').children).toHaveLength(10); }); }); it('navigation should work well', async () => { - act(async () => { - render( - // @ts-ignore different versions of react types in apollo and app - - - , - { wrapper: BrowserRouter } + render( + + + , + { wrapper: BrowserRouter } + ); + + await waitFor(() => { + expect(screen.getByText('Future')).toBeInTheDocument(); + }); + fireEvent.click(screen.getByText('Future')); + + await waitFor(() => { + expect(screen.getByTestId('location-display')).toHaveTextContent( + '/markets/Active/Future' ); + }); - await waitFor(() => { - expect(screen.getByText('Future')).toBeInTheDocument(); - }); - fireEvent.click(screen.getByText('Future')); - - await waitFor(() => { - expect(screen.getByTestId('location-display')).toHaveTextContent( - '/markets/Active/Future' - ); - }); - - fireEvent.click( - screen - .getByTestId('market-assets-menu') - .children[5].querySelector('a') as HTMLAnchorElement + fireEvent.click( + screen + .getByTestId('market-assets-menu') + .children[5].querySelector('a') as HTMLAnchorElement + ); + await waitFor(() => { + expect(screen.getByTestId('location-display')).toHaveTextContent( + '/markets/Active/Future/tEURO' ); - await waitFor(() => { - expect(screen.getByTestId('location-display')).toHaveTextContent( - '/markets/Active/Future/tEURO' - ); - }); + }); - fireEvent.click(screen.getByTestId('state-trigger')); - waitFor(() => { - expect(screen.getByRole('menu')).toBeInTheDocument(); - fireEvent.click(screen.getByText('Pending')); - expect(screen.getByTestId('location-display')).toHaveTextContent( - '/markets/Pending/Future/tEURO' - ); - }); + fireEvent.click(screen.getByTestId('state-trigger')); + waitFor(() => { + expect(screen.getByRole('menu')).toBeInTheDocument(); + fireEvent.click(screen.getByText('Pending')); + expect(screen.getByTestId('location-display')).toHaveTextContent( + '/markets/Pending/Future/tEURO' + ); }); }); }); diff --git a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-toolbar.tsx b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-toolbar.tsx index bf3a1fe4d..d12c45dd4 100644 --- a/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-toolbar.tsx +++ b/apps/simple-trading-app/src/app/components/simple-market-list/simple-market-toolbar.tsx @@ -16,11 +16,16 @@ import { } from '@vegaprotocol/ui-toolkit'; import useMarketFiltersData from '../../hooks/use-markets-filter'; import { STATES_FILTER } from './constants'; +import type { SimpleMarkets_markets } from './__generated__/SimpleMarkets'; -const SimpleMarketToolbar = () => { +interface Props { + data: SimpleMarkets_markets[]; +} + +const SimpleMarketToolbar = ({ data }: Props) => { const navigate = useNavigate(); const params = useParams(); - const { products, assetsPerProduct } = useMarketFiltersData(); + const { products, assetsPerProduct } = useMarketFiltersData(data); const [isOpen, setOpen] = useState(false); const [activeNumber, setActiveNumber] = useState( products?.length ? products.indexOf(params.product || '') + 1 : -1 diff --git a/apps/simple-trading-app/src/app/hooks/use-markets-filter.ts b/apps/simple-trading-app/src/app/hooks/use-markets-filter.ts index 7b636e1bb..43fae17d1 100644 --- a/apps/simple-trading-app/src/app/hooks/use-markets-filter.ts +++ b/apps/simple-trading-app/src/app/hooks/use-markets-filter.ts @@ -1,20 +1,16 @@ import { useEffect, useState } from 'react'; -import { useQuery } from '@apollo/client'; -import { FILTERS_QUERY } from '../components/simple-market-list/data-provider'; -import type { MarketFilters } from '../components/simple-market-list/__generated__/MarketFilters'; +import type { SimpleMarkets_markets } from '../components/simple-market-list/__generated__/SimpleMarkets'; -const useMarketFilters = () => { +const useMarketFilters = (data: SimpleMarkets_markets[]) => { const [products, setProducts] = useState([]); const [assetsPerProduct, setAssetsPerProduct] = useState< Record >({}); - const { data } = useQuery(FILTERS_QUERY, { - pollInterval: 5000, - }); + useEffect(() => { const localProducts = new Set(); const localAssetPerProduct: Record> = {}; - data?.markets?.forEach((item) => { + data?.forEach((item) => { const product = item.tradableInstrument.instrument.product.__typename; const asset = item.tradableInstrument.instrument.product.settlementAsset.symbol; diff --git a/apps/simple-trading-app/src/app/hooks/use-order-closeout.spec.tsx b/apps/simple-trading-app/src/app/hooks/use-order-closeout.spec.tsx index d11324f01..a1026fa5f 100644 --- a/apps/simple-trading-app/src/app/hooks/use-order-closeout.spec.tsx +++ b/apps/simple-trading-app/src/app/hooks/use-order-closeout.spec.tsx @@ -54,7 +54,6 @@ describe('useOrderCloseOut Hook', () => { }), { wrapper: ({ children }: { children: React.ReactNode }) => ( - // @ts-ignore different versions of react types in apollo and app {children} ), } @@ -72,7 +71,6 @@ describe('useOrderCloseOut Hook', () => { }), { wrapper: ({ children }: { children: React.ReactNode }) => ( - // @ts-ignore different versions of react types in apollo and app {children} ), } @@ -89,7 +87,6 @@ describe('useOrderCloseOut Hook', () => { }), { wrapper: ({ children }: { children: React.ReactNode }) => ( - // @ts-ignore different versions of react types in apollo and app {children} ), } diff --git a/package.json b/package.json index 478de7516..8909230a9 100644 --- a/package.json +++ b/package.json @@ -133,6 +133,7 @@ "babel-loader": "8.1.0", "cypress": "^10.2.0", "cypress-cucumber-preprocessor": "^4.3.1", + "cypress-real-events": "^1.7.1", "dotenv": "^16.0.1", "eslint": "8.12.0", "eslint-config-next": "12.1.2", diff --git a/yarn.lock b/yarn.lock index 78d54c231..8179aeb82 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10203,6 +10203,11 @@ cypress-cucumber-preprocessor@^4.3.1: minimist "^1.2.5" through "^2.3.8" +cypress-real-events@^1.7.1: + version "1.7.1" + resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.7.1.tgz#8f430d67c29ea4f05b9c5b0311780120cbc9b935" + integrity sha512-/Bg15RgJ0SYsuXc6lPqH08x19z6j2vmhWN4wXfJqm3z8BTAFiK2MvipZPzxT8Z0jJP0q7kuniWrLIvz/i/8lCQ== + cypress@^10.2.0: version "10.4.0" resolved "https://registry.yarnpkg.com/cypress/-/cypress-10.4.0.tgz#bb5b3b6588ad49eff172fecf5778cc0da2980e4e"