diff --git a/test/react-web/client/graphql/client-option.test.tsx b/test/react-web/client/graphql/client-option.test.tsx new file mode 100644 index 0000000000..12add8c7db --- /dev/null +++ b/test/react-web/client/graphql/client-option.test.tsx @@ -0,0 +1,81 @@ +/// + +import * as React from 'react'; +import * as PropTypes from 'prop-types'; +import * as ReactDOM from 'react-dom'; +import * as renderer from 'react-test-renderer'; +import { mount, shallow } from 'enzyme'; +import gql from 'graphql-tag'; +import ApolloClient, { ApolloError, ObservableQuery } from 'apollo-client'; +import { mockNetworkInterface } from '../../../../src/test-utils'; +import { ApolloProvider, graphql} from '../../../../src'; + +describe('client option', () => { + + it('renders with client from options', () => { + const query = gql`query people { allPeople(first: 1) { people { name } } }`; + const data = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; + const networkInterface = mockNetworkInterface({ request: { query }, result: { data } }); + const client = new ApolloClient({ networkInterface, addTypename: false }); + const config = { + options: { + client, + } + }; + const ContainerWithData = graphql(query, config)((props) => null); + shallow(); + }); + + it('ignores client from context if client from options is present', (done) => { + const query = gql`query people { allPeople(first: 1) { people { name } } }`; + const dataProvider = { allPeople: { people: [ { name: 'Leia Organa Solo' } ] } }; + const networkInterfaceProvider = mockNetworkInterface({ request: { query }, result: { data: dataProvider } }); + const clientProvider = new ApolloClient({ networkInterface: networkInterfaceProvider, addTypename: false }); + const dataOptions = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; + const networkInterfaceOptions = mockNetworkInterface({ request: { query }, result: { data: dataOptions } }); + const clientOptions = new ApolloClient({ networkInterface: networkInterfaceOptions, addTypename: false }); + + const config = { + options: { + client: clientOptions, + } + }; + + class Container extends React.Component { + componentWillReceiveProps({ data }) { // tslint:disable-line + expect(data.loading).toBe(false); // first data + expect(data.allPeople).toMatchObject({ people: [ { name: 'Luke Skywalker' } ] }); + done(); + } + render() { + return null; + } + }; + const ContainerWithData = graphql(query, config)(Container); + renderer.create(); + + }); + it('exposes refetch as part of the props api', (done) => { + const query = gql`query people($first: Int) { allPeople(first: $first) { people { name } } }`; + const variables = { first: 1 }; + const data1 = { allPeople: { people: [ { name: 'Luke Skywalker' } ] } }; + const networkInterface = mockNetworkInterface( + { request: { query, variables }, result: { data: data1 } }, + ); + const client = new ApolloClient({ networkInterface, addTypename: false }); + + let hasRefetched, count = 0; + @graphql(query) + class Container extends React.Component { + componentWillReceiveProps({ data }) { // tslint:disable-line + expect(data.loading).toBe(false); // first data + done(); + } + render() { + return null; + } + }; + + renderer.create(); + }); +});