errors.test and queries.test work

rosskevin · Dec 13, 2017 · 2d50050 · 2d50050
1 parent e4f3c79
commit 2d50050
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 64 deletions.
diff --git a/src/types.ts b/src/types.ts
@@ -69,14 +69,21 @@ export interface OptionProps<
   mutate?: MutationFunc<TResult, TVariables>;
 }
 
+// allow usage individually for simple components
+export interface DataProps<TResult, TVariables = OperationVariables> {
+  data?: QueryProps<TVariables> & Partial<TResult>;
+}
+
+// allow usage individually for simple components
+export interface MutateProps<TResult, TVariables = OperationVariables> {
+  mutate?: MutationFunc<TResult, TVariables>;
+}
+
 export type ChildProps<
   TProps,
   TResult,
   TVariables = OperationVariables
-> = TProps & {
-  data?: QueryProps<TVariables> & Partial<TResult>;
-  mutate?: MutationFunc<TResult, TVariables>;
-};
+> = TProps & DataProps<TResult, TVariables> & MutateProps<TResult, TVariables>;
 
 export type NamedProps<TProps, R> = TProps & {
   ownProps: R;

diff --git a/test/react-web/client/graphql/queries/errors.test.tsx b/test/react-web/client/graphql/queries/errors.test.tsx
@@ -40,7 +40,7 @@ describe('[queries] errors', () => {
     });
 
     class ErrorBoundary extends React.Component {
-      componentDidCatch(e, info) {
+      componentDidCatch(e) {
         expect(e.message).toMatch(/bar is not a function/);
         done();
       }
@@ -375,7 +375,7 @@ describe('[queries] errors', () => {
     let count = 0;
     @graphql(query, { options: { notifyOnNetworkStatusChange: true } })
     class Container extends React.Component<any, any> {
-      componentWillReceiveProps = props => {
+      componentWillReceiveProps(props) {
         try {
           switch (count++) {
             case 0:
@@ -392,18 +392,20 @@ describe('[queries] errors', () => {
               expect(props.data.allPeople).toEqualWithoutSymbol(data.allPeople);
               done();
               break;
+            default:
+              throw new Error('Unexpected fall through');
           }
         } catch (e) {
           done.fail(e);
         }
-      };
+      }
 
       render() {
         return null;
       }
     }
 
-    const wrapper = renderer.create(
+    renderer.create(
       <ApolloProvider client={client}>
         <Container />
       </ApolloProvider>,

diff --git a/test/react-web/client/graphql/queries/index.test.tsx b/test/react-web/client/graphql/queries/index.test.tsx
@@ -1,37 +1,13 @@
 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 } from 'enzyme';
 import gql from 'graphql-tag';
-import ApolloClient, { ApolloError, ObservableQuery } from 'apollo-client';
+import ApolloClient from 'apollo-client';
 import { InMemoryCache as Cache } from 'apollo-cache-inmemory';
-import { connect } from 'react-redux';
-import { withState } from 'recompose';
 import { mockSingleLink } from '../../../../../src/test-utils';
-import { ApolloProvider, graphql, ChildProps } from '../../../../../src';
-import { DocumentType } from '../../../../../src/parser';
+import { ApolloProvider, graphql, DataProps } from '../../../../../src';
 import '../../../../setup/toEqualWithoutSymbol';
 
-declare function require(name: string);
-
-// XXX: this is also defined in apollo-client
-// I'm not sure why mocha doesn't provide something like this, you can't
-// always use promises
-const wrap = (done: Function, cb: (...args: any[]) => any) => (
-  ...args: any[]
-) => {
-  try {
-    return cb(...args);
-  } catch (e) {
-    done(e);
-  }
-};
-
-function wait(ms) {
-  return new Promise(resolve => setTimeout(() => resolve(), ms));
-}
-
 describe('queries', () => {
   let error;
   beforeEach(() => {
@@ -63,18 +39,19 @@ describe('queries', () => {
       cache: new Cache({ addTypename: false }),
     });
 
-    type ResultData = {
+    interface Data {
       allPeople?: {
         people: { name: string }[];
       };
-    };
+    }
 
-    const ContainerWithData = graphql<ResultData>(query)(({ data }) => {
-      // tslint:disable-line
-      expect(data).toBeTruthy();
-      expect(data.loading).toBe(true);
-      return null;
-    });
+    const ContainerWithData = graphql<any, Data>(query)(
+      ({ data }: DataProps<Data>) => {
+        expect(data).toBeTruthy();
+        expect(data.loading).toBe(true);
+        return null;
+      },
+    );
 
     const output = renderer.create(
       <ApolloProvider client={client}>
@@ -94,11 +71,11 @@ describe('queries', () => {
         }
       }
     `;
-    const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } };
+
     const variables = { first: 1 };
     const link = mockSingleLink({
       request: { query, variables },
-      result: { data },
+      result: { data: { allPeople: { people: [{ name: 'Luke Skywalker' }] } } },
     });
     const client = new ApolloClient({
       link,
@@ -107,29 +84,25 @@ describe('queries', () => {
 
     // Ensure variable types work correctly here
 
-    type TResult = {
+    interface Data {
       allPeople: {
         people: {
           name: string;
         };
       };
-    };
+    }
 
-    type TVariables = {
+    interface Variables {
       first: number;
-    };
+    }
 
-    const ContainerWithData = graphql<
-      TResult,
-      {},
-      ChildProps<{}, TResult>,
-      TVariables
-    >(query)(({ data }) => {
-      // tslint:disable-line
-      expect(data).toBeTruthy();
-      expect(data.variables).toEqual(variables);
-      return null;
-    });
+    const ContainerWithData = graphql<any, Data, Variables>(query)(
+      ({ data }: DataProps<Data, Variables>) => {
+        expect(data).toBeTruthy();
+        expect(data.variables).toEqual(variables);
+        return null;
+      },
+    );
 
     renderer.create(
       <ApolloProvider client={client}>
@@ -442,7 +415,7 @@ describe('queries', () => {
     });
     const Container = graphql(query)(() => null);
     class ErrorBoundary extends React.Component {
-      componentDidCatch(e, info) {
+      componentDidCatch(e) {
         expect(e.name).toMatch(/Invariant Violation/);
         expect(e.message).toMatch(/The operation 'people'/);
         done();
@@ -570,13 +543,13 @@ describe('queries', () => {
     });
 
     @graphql(query)
-    class Container extends React.Component<any, any> {
-      componentWillReceiveProps(props) {
+    class Container extends React.Component<any> {
+      componentWillReceiveProps() {
         const queries = client.queryManager.queryStore.getStore();
         const queryIds = Object.keys(queries);
         expect(queryIds.length).toEqual(1);
-        const query = queries[queryIds[0]];
-        expect(query.metadata).toEqual({
+        const queryFirst = queries[queryIds[0]];
+        expect(queryFirst.metadata).toEqual({
           reactComponent: {
             displayName: 'Apollo(Container)',
           },

diff --git a/wait.ts b/wait.ts
@@ -0,0 +1,3 @@
+export default function wait(ms) {
+  return new Promise(resolve => setTimeout(() => resolve(), ms));
+}