diff --git a/src/utilities/testing/mocking/__tests__/mockSubscriptionLink.test.tsx b/src/utilities/testing/mocking/__tests__/mockSubscriptionLink.test.tsx new file mode 100644 index 00000000000..1189cae9e18 --- /dev/null +++ b/src/utilities/testing/mocking/__tests__/mockSubscriptionLink.test.tsx @@ -0,0 +1,72 @@ +import { render, cleanup, wait } from '@testing-library/react'; +import gql from 'graphql-tag'; + +import { MockSubscriptionLink } from '../mockSubscriptionLink'; +import { ApolloClient } from '../../../../ApolloClient'; +import { InMemoryCache as Cache } from '../../../../cache/inmemory/inMemoryCache'; +import { requireReactLazily } from '../../../../react/react'; +import { ApolloProvider } from '../../../../react/context/ApolloProvider'; +import { useSubscription } from '../../../../react/hooks/useSubscription'; + +const React = requireReactLazily(); + +describe('mockSubscriptionLink', () => { + it('should work with multiple subscribers to the same mock websocket', () => { + const subscription = gql` + subscription { + car { + make + } + } + `; + + const link = new MockSubscriptionLink(); + const client = new ApolloClient({ + link, + cache: new Cache({ addTypename: false }) + }); + + let renderCountA = 0; + const ComponentA = () => { + useSubscription(subscription); + renderCountA += 1; + return null; + }; + + let renderCountB = 0; + const ComponentB = () => { + const { loading, data, error } = useSubscription(subscription); + renderCountB += 1; + return null; + }; + + const results = ['Audi', 'BMW', 'Mercedes', 'Hyundai'].map(make => ({ + result: { data: { car: { make } } } + })); + + const Component = () => { + const [index, setIndex] = React.useState(0); + React.useEffect(() => { + if (index >= results.length) return; + link.simulateResult(results[index]); + setIndex(index + 1); + }, [index]); + return null; + }; + + render( + +
+ + + +
+
+ ); + + return wait(() => { + expect(renderCountA).toBe(results.length + 1); + expect(renderCountB).toBe(results.length + 1); + }, { timeout: 1000 }); + }); +});