From 708a098cedf9d6c817554c22b806d19d21741b4d Mon Sep 17 00:00:00 2001 From: Matthew Russell Date: Fri, 19 May 2023 16:41:13 -0700 Subject: [PATCH] test: update tests to provide mock query result --- .../proposals-list/proposal-list.spec.tsx | 134 +++++++++++------- .../proposals-data-provider/proposals.mock.ts | 14 +- 2 files changed, 93 insertions(+), 55 deletions(-) diff --git a/libs/proposals/src/components/proposals-list/proposal-list.spec.tsx b/libs/proposals/src/components/proposals-list/proposal-list.spec.tsx index 512d971f5..5bef72d3c 100644 --- a/libs/proposals/src/components/proposals-list/proposal-list.spec.tsx +++ b/libs/proposals/src/components/proposals-list/proposal-list.spec.tsx @@ -5,57 +5,74 @@ import { waitFor, getAllByRole, } from '@testing-library/react'; +import merge from 'lodash/merge'; +import type { MockedResponse } from '@apollo/client/testing'; import { MockedProvider } from '@apollo/client/testing'; import { ProposalsList } from './proposals-list'; -import type { ProposalListFieldsFragment } from '../../lib/proposals-data-provider'; import * as Types from '@vegaprotocol/types'; - -const votesMock = { - yes: { - totalTokens: '5000', - }, - no: { - totalTokens: '2000', - }, -}; -let marketsProposalMock: ProposalListFieldsFragment[] | null = [ - { - id: 'id-1', - state: Types.ProposalState.STATE_OPEN, - votes: { ...votesMock }, - }, - { - id: 'id-2', - state: Types.ProposalState.STATE_PASSED, - votes: { ...votesMock }, - }, - { - id: 'id-3', - state: Types.ProposalState.STATE_WAITING_FOR_NODE_VOTE, - votes: { ...votesMock }, - }, -] as ProposalListFieldsFragment[]; - -const useDataProvider = () => { - return { - data: marketsProposalMock, - loading: false, - error: false, - }; -}; -jest.mock('@vegaprotocol/data-provider', () => ({ - ...jest.requireActual('@vegaprotocol/data-provider'), - useDataProvider: jest.fn(() => useDataProvider()), -})); +import { createProposalListFieldsFragment } from '../../lib/proposals-data-provider/proposals.mock'; +import type { ProposalsListQuery } from '../../lib'; +import { ProposalsListDocument } from '../../lib'; +import type { PartialDeep } from 'type-fest'; describe('ProposalsList', () => { - beforeEach(() => { - jest.clearAllMocks(); - }); + const createProposalsMock = (override?: PartialDeep) => { + const defaultProposalEdges = [ + { + __typename: 'ProposalEdge' as const, + node: createProposalListFieldsFragment({ + id: 'id-1', + state: Types.ProposalState.STATE_OPEN, + }), + }, + { + __typename: 'ProposalEdge' as const, + node: createProposalListFieldsFragment({ + id: 'id-2', + state: Types.ProposalState.STATE_PASSED, + }), + }, + { + __typename: 'ProposalEdge' as const, + node: createProposalListFieldsFragment({ + id: 'id-3', + state: Types.ProposalState.STATE_WAITING_FOR_NODE_VOTE, + }), + }, + ]; + const data = merge( + { + proposalsConnection: { + __typename: 'ProposalsConnection' as const, + edges: defaultProposalEdges, + }, + }, + override + ); + + const mock: MockedResponse = { + request: { + query: ProposalsListDocument, + variables: { + proposalType: Types.ProposalType.TYPE_NEW_MARKET, + }, + }, + result: { + data, + }, + }; + + return mock; + }; it('should be properly rendered', async () => { + const mock = createProposalsMock(); await act(() => { - render(, { wrapper: MockedProvider }); + render( + + + + ); }); const container = document.querySelector('.ag-center-cols-container'); await waitFor(() => { @@ -65,15 +82,25 @@ describe('ProposalsList', () => { }); it('some of states should be filtered out', async () => { - marketsProposalMock = [ - { - ...(marketsProposalMock as ProposalListFieldsFragment[])[0], - state: Types.ProposalState.STATE_ENACTED, + const mock = createProposalsMock({ + proposalsConnection: { + edges: [ + { + __typename: 'ProposalEdge', + node: createProposalListFieldsFragment({ + id: 'id-1', + state: Types.ProposalState.STATE_ENACTED, + }), + }, + ], }, - ...(marketsProposalMock as ProposalListFieldsFragment[]).slice(1), - ]; + }); await act(() => { - render(, { wrapper: MockedProvider }); + render( + + + + ); }); const container = document.querySelector('.ag-center-cols-container'); await waitFor(() => { @@ -83,9 +110,12 @@ describe('ProposalsList', () => { }); it('empty response should causes no data message display', async () => { - marketsProposalMock = null; await act(() => { - render(, { wrapper: MockedProvider }); + render( + + + + ); }); const container = document.querySelector('.ag-center-cols-container'); await waitFor(() => { diff --git a/libs/proposals/src/lib/proposals-data-provider/proposals.mock.ts b/libs/proposals/src/lib/proposals-data-provider/proposals.mock.ts index ebbd1b9ca..e2fea532f 100644 --- a/libs/proposals/src/lib/proposals-data-provider/proposals.mock.ts +++ b/libs/proposals/src/lib/proposals-data-provider/proposals.mock.ts @@ -11,6 +11,7 @@ export const proposalListQuery = ( ): ProposalsListQuery => { const defaultResult: ProposalsListQuery = { proposalsConnection: { + __typename: 'ProposalsConnection', edges: proposalListFields.map((node) => ({ __typename: 'ProposalEdge', node, @@ -104,8 +105,10 @@ export const marketUpdateProposal: ProposalListFieldsFragment = { }, }; -const proposalListFields: ProposalListFieldsFragment[] = [ - { +export const createProposalListFieldsFragment = ( + override?: PartialDeep +): ProposalListFieldsFragment => { + const defaultProposal: ProposalListFieldsFragment = { id: 'e9ec6d5c46a7e7bcabf9ba7a893fa5a5eeeec08b731f06f7a6eb7bf0e605b829', reference: 'injected_at_runtime', state: Schema.ProposalState.STATE_OPEN, @@ -194,7 +197,12 @@ const proposalListFields: ProposalListFieldsFragment[] = [ __typename: 'ProposalTerms', }, __typename: 'Proposal', - }, + }; + return merge(defaultProposal, override); +}; + +const proposalListFields: ProposalListFieldsFragment[] = [ + createProposalListFieldsFragment(), { id: '1cd1deb532b97fbeb9262fe94499ecec5835e60ae564b7c5af530c90a13c29cb', reference: 'injected_at_runtime',