(WrappedComponent: React.ComponentType
) { export function calculateVariablesFromProps( operation: IDocumentDefinition, props: TProps, - graphQLDisplayName: string, - wrapperName: string, ) { let variables: OperationVariables = {}; for (let { variable, type } of operation.variables) { @@ -30,19 +28,10 @@ export function calculateVariablesFromProps( continue; } - // allow optional props + // Allow optional props if (type.kind !== 'NonNullType') { variables[variableName] = null; - continue; } - - if (operation.type === DocumentType.Mutation) return; - invariant( - typeof variableProp !== 'undefined', - `The operation '${operation.name}' wrapping '${wrapperName}' ` + - `is expecting a variable: '${variable.name.value}' but it was not found in the props ` + - `passed to '${graphQLDisplayName}'`, - ); } return variables; } diff --git a/src/index.ts b/src/index.ts index e3a56bb6fa..feebc688d7 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,2 +1,30 @@ -export * from './browser'; +export { default as ApolloConsumer } from './ApolloConsumer'; +export * from './ApolloConsumer'; + +export { default as ApolloProvider } from './ApolloProvider'; +export * from './ApolloProvider'; + +export { default as Query } from './Query'; +export * from './Query'; + +export { default as Mutation } from './Mutation'; +export * from './Mutation'; + +export { default as Subscription } from './Subscriptions'; +export * from './Subscriptions'; + +export { graphql } from './graphql'; +export { withQuery } from './query-hoc'; +export { withMutation } from './mutation-hoc'; +export { withSubscription } from './subscription-hoc'; + +export { default as withApollo } from './withApollo'; +export * from './withApollo'; + +export * from './getDataFromTree'; +export { default as getDataFromTree } from './getDataFromTree'; export { renderToStringWithData } from './renderToStringWithData'; + +export * from './types'; + +export { compose } from './utils/flowRight'; diff --git a/src/mutation-hoc.tsx b/src/mutation-hoc.tsx index 46c26894e3..bb6f09f12b 100644 --- a/src/mutation-hoc.tsx +++ b/src/mutation-hoc.tsx @@ -51,8 +51,6 @@ export function withMutation< opts.variables = calculateVariablesFromProps( operation, props, - graphQLDisplayName, - getDisplayName(WrappedComponent), ); } diff --git a/src/parser.ts b/src/parser.ts index 2279cc1ed4..eff87464bd 100644 --- a/src/parser.ts +++ b/src/parser.ts @@ -5,7 +5,7 @@ import { OperationDefinitionNode, } from 'graphql'; -const invariant = require('invariant'); +import { invariant } from 'ts-invariant'; export enum DocumentType { Query, diff --git a/src/query-hoc.tsx b/src/query-hoc.tsx index 46692c1601..99c1cc0993 100644 --- a/src/query-hoc.tsx +++ b/src/query-hoc.tsx @@ -61,8 +61,6 @@ export function withQuery< opts.variables = calculateVariablesFromProps( operation, props, - graphQLDisplayName, - getDisplayName(WrappedComponent), ); } return ( diff --git a/src/queryRecycler.ts b/src/queryRecycler.ts index 4c2d50424a..fee49ed04e 100644 --- a/src/queryRecycler.ts +++ b/src/queryRecycler.ts @@ -2,7 +2,7 @@ import { ObservableQuery } from 'apollo-client'; import { ZenObservable } from 'zen-observable-ts'; import { QueryOpts } from './types'; -const shallowEqual = require('fbjs/lib/shallowEqual'); +import shallowEqual from './utils/shallowEqual'; // XXX move this logic to ObservableQuery / QueryManager in apollo-client diff --git a/src/subscription-hoc.tsx b/src/subscription-hoc.tsx index 5ad59d7cca..e7f24d6c1d 100644 --- a/src/subscription-hoc.tsx +++ b/src/subscription-hoc.tsx @@ -67,8 +67,6 @@ export function withSubscription< opts.variables = calculateVariablesFromProps( operation, props, - graphQLDisplayName, - getDisplayName(WrappedComponent), ); } return ( diff --git a/src/test-links.ts b/src/test-links.ts index 9195a7add5..1ebe30bbf8 100644 --- a/src/test-links.ts +++ b/src/test-links.ts @@ -8,7 +8,10 @@ import { } from 'apollo-link'; import { print } from 'graphql/language/printer'; -import { addTypenameToDocument } from 'apollo-utilities'; +import { + addTypenameToDocument, + removeClientSetsFromDocument, +} from 'apollo-utilities'; const isEqual = require('lodash.isequal'); type ResultFunction = () => T; @@ -152,11 +155,10 @@ export class MockSubscriptionLink extends ApolloLink { } function requestToKey(request: GraphQLRequest, addTypename: Boolean): string { + const query = removeClientSetsFromDocument(request.query); const queryString = - request.query && print(addTypename ? addTypenameToDocument(request.query) : request.query); - + query && print(addTypename ? addTypenameToDocument(query) : query); const requestKey = { query: queryString }; - return JSON.stringify(requestKey); } diff --git a/src/test-utils.tsx b/src/test-utils.tsx index b4580b1176..53df07d48e 100644 --- a/src/test-utils.tsx +++ b/src/test-utils.tsx @@ -1,6 +1,6 @@ import * as React from 'react'; import ApolloClient from 'apollo-client'; -import { DefaultOptions } from 'apollo-client/ApolloClient'; +import { DefaultOptions } from 'apollo-client'; import { InMemoryCache as Cache } from 'apollo-cache-inmemory'; import { ApolloProvider } from './index'; diff --git a/src/utils/flowRight.ts b/src/utils/flowRight.ts new file mode 100644 index 0000000000..d3f52a3c9d --- /dev/null +++ b/src/utils/flowRight.ts @@ -0,0 +1,11 @@ +export function compose(...funcs: Function[]) { + const functions = funcs.reverse(); + return function (...args: any[]) { + const [firstFunction, ...restFunctions] = functions + let result = firstFunction.apply(null, args); + restFunctions.forEach((fnc) => { + result = fnc.call(null, result) + }); + return result; + } +} diff --git a/src/utils/shallowEqual.ts b/src/utils/shallowEqual.ts new file mode 100644 index 0000000000..b35dd0fb5a --- /dev/null +++ b/src/utils/shallowEqual.ts @@ -0,0 +1,32 @@ +const { hasOwnProperty } = Object.prototype; + +function is(x: any, y: any) { + if (x === y) { + return x !== 0 || y !== 0 || 1 / x === 1 / y; + } + return x !== x && y !== y; +} + +function isObject(obj: any): obj is { [key: string]: any } { + return obj !== null && typeof obj === "object"; +} + +export default function shallowEqual(objA: any, objB: any) { + if (is(objA, objB)) { + return true; + } + + if (!isObject(objA) || !isObject(objB)) { + return false; + } + + const keys = Object.keys(objA); + + if (keys.length !== Object.keys(objB).length) { + return false; + } + + return keys.every( + key => hasOwnProperty.call(objB, key) && is(objA[key], objB[key]), + ); +} diff --git a/src/withApollo.tsx b/src/withApollo.tsx index 362fb639c7..c2d0757573 100644 --- a/src/withApollo.tsx +++ b/src/withApollo.tsx @@ -4,7 +4,7 @@ import ApolloConsumer from './ApolloConsumer'; import { ApolloClient } from 'apollo-client'; import hoistNonReactStatics from 'hoist-non-react-statics'; -const invariant = require('invariant'); +import { invariant } from 'ts-invariant'; function getDisplayName(WrappedComponent: React.ComponentType) { return WrappedComponent.displayName || WrappedComponent.name || 'Component'; diff --git a/test-examples.sh b/test-examples.sh deleted file mode 100644 index 916a4a512e..0000000000 --- a/test-examples.sh +++ /dev/null @@ -1,17 +0,0 @@ -cd examples - -cd base - -npm install - -npm t - -cd ../ - -cd components - -npm install - -npm t - -cd ../../ \ No newline at end of file diff --git a/test/client/Mutation.test.tsx b/test/client/Mutation.test.tsx index 23c72fb203..2ed26d26a3 100644 --- a/test/client/Mutation.test.tsx +++ b/test/client/Mutation.test.tsx @@ -1521,7 +1521,7 @@ describe('after it has been unmounted', () => { setTimeout(() => { if (!success) done.fail('timeout passed'); - }, 200); + }, 500); }); it('calls the onError prop if the mutation encounters an error', done => { diff --git a/test/client/Query.test.tsx b/test/client/Query.test.tsx index 46693f33c4..34fbc26edd 100644 --- a/test/client/Query.test.tsx +++ b/test/client/Query.test.tsx @@ -348,8 +348,7 @@ describe('Query component', () => { }); it('startPolling', done => { - jest.useFakeTimers(); - expect.assertions(4); + expect.assertions(3); const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; const data2 = { allPeople: { people: [{ name: 'Han Solo' }] } }; @@ -373,8 +372,7 @@ describe('Query component', () => { let count = 0; let isPolling = false; - const POLL_INTERVAL = 30; - const POLL_COUNT = 3; + const POLL_INTERVAL = 5; const Component = () => ( @@ -386,6 +384,7 @@ describe('Query component', () => { isPolling = true; result.startPolling(POLL_INTERVAL); } + catchAsyncError(done, () => { if (count === 0) { expect(stripSymbols(result.data)).toEqual(data1); @@ -393,6 +392,8 @@ describe('Query component', () => { expect(stripSymbols(result.data)).toEqual(data2); } else if (count === 2) { expect(stripSymbols(result.data)).toEqual(data3); + } else if (count === 3) { + done(); } }); @@ -407,17 +408,9 @@ describe('Query component', () => { , ); - - jest.runTimersToTime(POLL_INTERVAL * POLL_COUNT); - - catchAsyncError(done, () => { - expect(count).toBe(POLL_COUNT); - done(); - }); }); it('stopPolling', done => { - jest.useFakeTimers(); expect.assertions(3); const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; @@ -440,7 +433,7 @@ describe('Query component', () => { ]; const POLL_COUNT = 2; - const POLL_INTERVAL = 30; + const POLL_INTERVAL = 5; let count = 0; const Component = () => ( @@ -454,6 +447,10 @@ describe('Query component', () => { } else if (count === 1) { expect(stripSymbols(result.data)).toEqual(data2); result.stopPolling(); + setTimeout(() => { + expect(count).toBe(POLL_COUNT); + done(); + }, 10); } count++; return null; @@ -466,13 +463,6 @@ describe('Query component', () => { , ); - - jest.runTimersToTime(POLL_INTERVAL * POLL_COUNT); - - catchAsyncError(done, () => { - expect(count).toBe(POLL_COUNT); - done(); - }); }); it('updateQuery', done => { @@ -630,7 +620,6 @@ describe('Query component', () => { }); it('pollInterval', done => { - jest.useFakeTimers(); expect.assertions(4); const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; @@ -668,6 +657,9 @@ describe('Query component', () => { expect(stripSymbols(result.data)).toEqual(data2); } else if (count === 2) { expect(stripSymbols(result.data)).toEqual(data3); + } else { + expect(count).toBe(POLL_COUNT); + done(); } count++; return null; @@ -680,13 +672,6 @@ describe('Query component', () => { , ); - - jest.runTimersToTime(POLL_INTERVAL * POLL_COUNT); - - catchAsyncError(done, () => { - expect(count).toBe(POLL_COUNT); - done(); - }); }); it('skip', done => { diff --git a/test/client/getDataFromTree.test.tsx b/test/client/getDataFromTree.test.tsx index 2f10c74312..f562be8414 100644 --- a/test/client/getDataFromTree.test.tsx +++ b/test/client/getDataFromTree.test.tsx @@ -6,12 +6,12 @@ import { graphql, Query, ApolloProvider, - walkTree, getDataFromTree, getMarkupFromTree, DataValue, ChildProps, } from '../../src'; +import { walkTree } from "../../src/walkTree"; import gql from 'graphql-tag'; const times = require('lodash.times'); import { InMemoryCache as Cache } from 'apollo-cache-inmemory'; diff --git a/test/client/graphql/queries/index.test.tsx b/test/client/graphql/queries/index.test.tsx index 637dfcc287..b84791288b 100644 --- a/test/client/graphql/queries/index.test.tsx +++ b/test/client/graphql/queries/index.test.tsx @@ -484,56 +484,6 @@ describe('queries', () => { expect(errorCaught).toBeNull(); }); - // note this should log an error in the console until they are all cleaned up with react 16 - it("errors if the passed props don't contain the needed variables", done => { - const query: DocumentNode = gql` - query people($first: Int!) { - allPeople(first: $first) { - people { - name - } - } - } - `; - const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; - type Data = typeof data; - - const variables = { first: 1 }; - type Vars = typeof variables; - - const link = mockSingleLink({ - request: { query, variables }, - result: { data }, - }); - const client = new ApolloClient({ - link, - cache: new Cache({ addTypename: false }), - }); - - interface WrongProps { - frst: number; - } - const Container = graphql(query)(() => null); - class ErrorBoundary extends React.Component { - componentDidCatch(e: Error) { - expect(e.name).toMatch(/Invariant Violation/); - expect(e.message).toMatch(/The operation 'people'/); - done(); - } - - render() { - return this.props.children; - } - } - renderer.create( - - - - - , - ); - }); - // context it('allows context through updates', done => { const query: DocumentNode = gql` diff --git a/test/client/graphql/queries/lifecycle.test.tsx b/test/client/graphql/queries/lifecycle.test.tsx index 67ccbb3a4d..b244ce6827 100644 --- a/test/client/graphql/queries/lifecycle.test.tsx +++ b/test/client/graphql/queries/lifecycle.test.tsx @@ -442,42 +442,31 @@ describe('[queries] lifecycle', () => { } `; const link1 = mockSingleLink( + // Data for "Load 1" below { request: { query }, result: { data: { a: 1, b: 2, c: 3 } }, }, - { - request: { query }, - result: { data: { a: 1, b: 2, c: 3 } }, - }, + // Data for "Load 2" below { request: { query }, result: { data: { a: 1, b: 2, c: 3 } }, }, ); const link2 = mockSingleLink( + // Data for "Load 3" below { request: { query }, result: { data: { a: 4, b: 5, c: 6 } }, }, - { - request: { query }, - result: { data: { a: 4, b: 5, c: 6 } }, - }, + // Data for "Load 4" below { request: { query }, result: { data: { a: 4, b: 5, c: 6 } }, }, ); const link3 = mockSingleLink( - { - request: { query }, - result: { data: { a: 7, b: 8, c: 9 } }, - }, - { - request: { query }, - result: { data: { a: 7, b: 8, c: 9 } }, - }, + // Data for "Load 5" below { request: { query }, result: { data: { a: 7, b: 8, c: 9 } }, @@ -543,15 +532,26 @@ describe('[queries] lifecycle', () => { renderer.create(); + // Load 1 await wait(1); + + // Load 2 refetchQuery!(); await wait(1); + + // Load 3 switchClient!(client2); await wait(1); + + // Load 4 refetchQuery!(); await wait(1); + + // Load 5 switchClient!(client3); await wait(1); + + // Load 6 switchClient!(client1); await wait(1); switchClient!(client2); @@ -560,18 +560,41 @@ describe('[queries] lifecycle', () => { await wait(1); expect(renders).toEqual([ - { loading: true }, + // Load 1 + { loading: true, a: undefined, b: undefined, c: undefined }, { loading: false, a: 1, b: 2, c: 3 }, + + // Load 2 { loading: true, a: 1, b: 2, c: 3 }, { loading: false, a: 1, b: 2, c: 3 }, - { loading: true }, + + // Load 3 + { loading: true,a: undefined, b: undefined, c: undefined }, { loading: false, a: 4, b: 5, c: 6 }, + + // Load 4 { loading: true, a: 4, b: 5, c: 6 }, { loading: false, a: 4, b: 5, c: 6 }, - { loading: true }, + + // Load 5 + { loading: true, a: undefined, b: undefined, c: undefined }, { loading: false, a: 7, b: 8, c: 9 }, + + // Load 6 + + // The first render is caused by the component having its state updated + // when switching the client. The 2nd and 3rd renders are caused by the + // component re-subscribing to get data from Apollo Client. { loading: false, a: 1, b: 2, c: 3 }, + { loading: false, a: 1, b: 2, c: 3 }, + { loading: false, a: 1, b: 2, c: 3 }, + + { loading: false, a: 4, b: 5, c: 6 }, { loading: false, a: 4, b: 5, c: 6 }, + { loading: false, a: 4, b: 5, c: 6 }, + + { loading: false, a: 7, b: 8, c: 9 }, + { loading: false, a: 7, b: 8, c: 9 }, { loading: false, a: 7, b: 8, c: 9 }, ]); }); diff --git a/test/client/graphql/queries/polling.test.tsx b/test/client/graphql/queries/polling.test.tsx index 8e7e6b1f76..e595c5b15a 100644 --- a/test/client/graphql/queries/polling.test.tsx +++ b/test/client/graphql/queries/polling.test.tsx @@ -19,9 +19,9 @@ describe('[queries] polling', () => { }); // polling it('allows a polling query to be created', done => { - jest.useFakeTimers(); + expect.assertions(4); - const POLL_INTERVAL = 250; + const POLL_INTERVAL = 5; const POLL_COUNT = 4; const query: DocumentNode = gql` query people { @@ -52,6 +52,10 @@ describe('[queries] polling', () => { }), })(() => { count++; + expect(true).toBe(true); + if (count === 4) { + done(); + } return null; }); @@ -60,17 +64,6 @@ describe('[queries] polling', () => { , ); - - jest.runTimersToTime(POLL_INTERVAL * POLL_COUNT); - - try { - expect(count).toEqual(POLL_COUNT); - done(); - } catch (e) { - done.fail(e); - } finally { - (wrapper as any).unmount(); - } }); it('exposes stopPolling as part of the props api', done => { diff --git a/test/client/graphql/shared-operations.test.tsx b/test/client/graphql/shared-operations.test.tsx index 51777c4cc6..d7307b649e 100644 --- a/test/client/graphql/shared-operations.test.tsx +++ b/test/client/graphql/shared-operations.test.tsx @@ -6,10 +6,9 @@ import { InMemoryCache as Cache } from 'apollo-cache-inmemory'; import { ApolloLink } from 'apollo-link'; import * as TestUtils from 'react-dom/test-utils'; import { DocumentNode } from 'graphql'; -const compose = require('lodash.flowright'); import { mockSingleLink } from '../../../src/test-utils'; -import { ApolloProvider, ChildProps, DataValue, graphql, withApollo } from '../../../src'; +import { compose, ApolloProvider, ChildProps, DataValue, graphql, withApollo } from '../../../src'; describe('shared operations', () => { describe('withApollo', () => { diff --git a/test/client/utils/flowRight.test.tsx b/test/client/utils/flowRight.test.tsx new file mode 100644 index 0000000000..4cc311470a --- /dev/null +++ b/test/client/utils/flowRight.test.tsx @@ -0,0 +1,11 @@ +import { compose } from '../../../src'; + +describe('compose', () => { + it('Should reverse execute the array of functions', () => { + const add = (x: number, y: number) => x + y; + const square = (x: number) => x * x; + const flow = compose(square, add); + const result = flow(2, 2); + expect(result).toBe(16); + }); +}) diff --git a/tsconfig.cjs.json b/tsconfig.cjs.json new file mode 100644 index 0000000000..bbdaa2a628 --- /dev/null +++ b/tsconfig.cjs.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig", + "compilerOptions": { + "module": "commonjs", + }, +} diff --git a/tsconfig.json b/tsconfig.json index 0adffdd7e9..a56a721d72 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,6 +6,7 @@ "lib": ["es2015", "esnext.asynciterable", "dom"], "module": "es2015", "moduleResolution": "node", + "importHelpers": true, "noUnusedParameters": true, "outDir": "lib", "pretty": true, @@ -15,6 +16,6 @@ "target": "es5", "esModuleInterop": true }, - "include": ["./typings/**/*", "./src/**/*", "./test/**/*"], + "include": ["./src/**/*"], "exclude": ["./node_modules", "./dist", "./lib"] } diff --git a/typings/fbjs_lib_shallow-equal.d.ts b/typings/fbjs_lib_shallow-equal.d.ts deleted file mode 100644 index 6a711e0cd0..0000000000 --- a/typings/fbjs_lib_shallow-equal.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -declare module 'fbjs/lib/shallowEqual' { - function shallowEqual(a: any, b: any): boolean; - - export default shallowEqual; -}
) { return WrappedComponent.displayName || WrappedComponent.name || 'Component'; diff --git a/test-examples.sh b/test-examples.sh deleted file mode 100644 index 916a4a512e..0000000000 --- a/test-examples.sh +++ /dev/null @@ -1,17 +0,0 @@ -cd examples - -cd base - -npm install - -npm t - -cd ../ - -cd components - -npm install - -npm t - -cd ../../ \ No newline at end of file diff --git a/test/client/Mutation.test.tsx b/test/client/Mutation.test.tsx index 23c72fb203..2ed26d26a3 100644 --- a/test/client/Mutation.test.tsx +++ b/test/client/Mutation.test.tsx @@ -1521,7 +1521,7 @@ describe('after it has been unmounted', () => { setTimeout(() => { if (!success) done.fail('timeout passed'); - }, 200); + }, 500); }); it('calls the onError prop if the mutation encounters an error', done => { diff --git a/test/client/Query.test.tsx b/test/client/Query.test.tsx index 46693f33c4..34fbc26edd 100644 --- a/test/client/Query.test.tsx +++ b/test/client/Query.test.tsx @@ -348,8 +348,7 @@ describe('Query component', () => { }); it('startPolling', done => { - jest.useFakeTimers(); - expect.assertions(4); + expect.assertions(3); const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; const data2 = { allPeople: { people: [{ name: 'Han Solo' }] } }; @@ -373,8 +372,7 @@ describe('Query component', () => { let count = 0; let isPolling = false; - const POLL_INTERVAL = 30; - const POLL_COUNT = 3; + const POLL_INTERVAL = 5; const Component = () => ( @@ -386,6 +384,7 @@ describe('Query component', () => { isPolling = true; result.startPolling(POLL_INTERVAL); } + catchAsyncError(done, () => { if (count === 0) { expect(stripSymbols(result.data)).toEqual(data1); @@ -393,6 +392,8 @@ describe('Query component', () => { expect(stripSymbols(result.data)).toEqual(data2); } else if (count === 2) { expect(stripSymbols(result.data)).toEqual(data3); + } else if (count === 3) { + done(); } }); @@ -407,17 +408,9 @@ describe('Query component', () => { , ); - - jest.runTimersToTime(POLL_INTERVAL * POLL_COUNT); - - catchAsyncError(done, () => { - expect(count).toBe(POLL_COUNT); - done(); - }); }); it('stopPolling', done => { - jest.useFakeTimers(); expect.assertions(3); const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; @@ -440,7 +433,7 @@ describe('Query component', () => { ]; const POLL_COUNT = 2; - const POLL_INTERVAL = 30; + const POLL_INTERVAL = 5; let count = 0; const Component = () => ( @@ -454,6 +447,10 @@ describe('Query component', () => { } else if (count === 1) { expect(stripSymbols(result.data)).toEqual(data2); result.stopPolling(); + setTimeout(() => { + expect(count).toBe(POLL_COUNT); + done(); + }, 10); } count++; return null; @@ -466,13 +463,6 @@ describe('Query component', () => { , ); - - jest.runTimersToTime(POLL_INTERVAL * POLL_COUNT); - - catchAsyncError(done, () => { - expect(count).toBe(POLL_COUNT); - done(); - }); }); it('updateQuery', done => { @@ -630,7 +620,6 @@ describe('Query component', () => { }); it('pollInterval', done => { - jest.useFakeTimers(); expect.assertions(4); const data1 = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; @@ -668,6 +657,9 @@ describe('Query component', () => { expect(stripSymbols(result.data)).toEqual(data2); } else if (count === 2) { expect(stripSymbols(result.data)).toEqual(data3); + } else { + expect(count).toBe(POLL_COUNT); + done(); } count++; return null; @@ -680,13 +672,6 @@ describe('Query component', () => { , ); - - jest.runTimersToTime(POLL_INTERVAL * POLL_COUNT); - - catchAsyncError(done, () => { - expect(count).toBe(POLL_COUNT); - done(); - }); }); it('skip', done => { diff --git a/test/client/getDataFromTree.test.tsx b/test/client/getDataFromTree.test.tsx index 2f10c74312..f562be8414 100644 --- a/test/client/getDataFromTree.test.tsx +++ b/test/client/getDataFromTree.test.tsx @@ -6,12 +6,12 @@ import { graphql, Query, ApolloProvider, - walkTree, getDataFromTree, getMarkupFromTree, DataValue, ChildProps, } from '../../src'; +import { walkTree } from "../../src/walkTree"; import gql from 'graphql-tag'; const times = require('lodash.times'); import { InMemoryCache as Cache } from 'apollo-cache-inmemory'; diff --git a/test/client/graphql/queries/index.test.tsx b/test/client/graphql/queries/index.test.tsx index 637dfcc287..b84791288b 100644 --- a/test/client/graphql/queries/index.test.tsx +++ b/test/client/graphql/queries/index.test.tsx @@ -484,56 +484,6 @@ describe('queries', () => { expect(errorCaught).toBeNull(); }); - // note this should log an error in the console until they are all cleaned up with react 16 - it("errors if the passed props don't contain the needed variables", done => { - const query: DocumentNode = gql` - query people($first: Int!) { - allPeople(first: $first) { - people { - name - } - } - } - `; - const data = { allPeople: { people: [{ name: 'Luke Skywalker' }] } }; - type Data = typeof data; - - const variables = { first: 1 }; - type Vars = typeof variables; - - const link = mockSingleLink({ - request: { query, variables }, - result: { data }, - }); - const client = new ApolloClient({ - link, - cache: new Cache({ addTypename: false }), - }); - - interface WrongProps { - frst: number; - } - const Container = graphql(query)(() => null); - class ErrorBoundary extends React.Component { - componentDidCatch(e: Error) { - expect(e.name).toMatch(/Invariant Violation/); - expect(e.message).toMatch(/The operation 'people'/); - done(); - } - - render() { - return this.props.children; - } - } - renderer.create( - - - - - , - ); - }); - // context it('allows context through updates', done => { const query: DocumentNode = gql` diff --git a/test/client/graphql/queries/lifecycle.test.tsx b/test/client/graphql/queries/lifecycle.test.tsx index 67ccbb3a4d..b244ce6827 100644 --- a/test/client/graphql/queries/lifecycle.test.tsx +++ b/test/client/graphql/queries/lifecycle.test.tsx @@ -442,42 +442,31 @@ describe('[queries] lifecycle', () => { } `; const link1 = mockSingleLink( + // Data for "Load 1" below { request: { query }, result: { data: { a: 1, b: 2, c: 3 } }, }, - { - request: { query }, - result: { data: { a: 1, b: 2, c: 3 } }, - }, + // Data for "Load 2" below { request: { query }, result: { data: { a: 1, b: 2, c: 3 } }, }, ); const link2 = mockSingleLink( + // Data for "Load 3" below { request: { query }, result: { data: { a: 4, b: 5, c: 6 } }, }, - { - request: { query }, - result: { data: { a: 4, b: 5, c: 6 } }, - }, + // Data for "Load 4" below { request: { query }, result: { data: { a: 4, b: 5, c: 6 } }, }, ); const link3 = mockSingleLink( - { - request: { query }, - result: { data: { a: 7, b: 8, c: 9 } }, - }, - { - request: { query }, - result: { data: { a: 7, b: 8, c: 9 } }, - }, + // Data for "Load 5" below { request: { query }, result: { data: { a: 7, b: 8, c: 9 } }, @@ -543,15 +532,26 @@ describe('[queries] lifecycle', () => { renderer.create(); + // Load 1 await wait(1); + + // Load 2 refetchQuery!(); await wait(1); + + // Load 3 switchClient!(client2); await wait(1); + + // Load 4 refetchQuery!(); await wait(1); + + // Load 5 switchClient!(client3); await wait(1); + + // Load 6 switchClient!(client1); await wait(1); switchClient!(client2); @@ -560,18 +560,41 @@ describe('[queries] lifecycle', () => { await wait(1); expect(renders).toEqual([ - { loading: true }, + // Load 1 + { loading: true, a: undefined, b: undefined, c: undefined }, { loading: false, a: 1, b: 2, c: 3 }, + + // Load 2 { loading: true, a: 1, b: 2, c: 3 }, { loading: false, a: 1, b: 2, c: 3 }, - { loading: true }, + + // Load 3 + { loading: true,a: undefined, b: undefined, c: undefined }, { loading: false, a: 4, b: 5, c: 6 }, + + // Load 4 { loading: true, a: 4, b: 5, c: 6 }, { loading: false, a: 4, b: 5, c: 6 }, - { loading: true }, + + // Load 5 + { loading: true, a: undefined, b: undefined, c: undefined }, { loading: false, a: 7, b: 8, c: 9 }, + + // Load 6 + + // The first render is caused by the component having its state updated + // when switching the client. The 2nd and 3rd renders are caused by the + // component re-subscribing to get data from Apollo Client. { loading: false, a: 1, b: 2, c: 3 }, + { loading: false, a: 1, b: 2, c: 3 }, + { loading: false, a: 1, b: 2, c: 3 }, + + { loading: false, a: 4, b: 5, c: 6 }, { loading: false, a: 4, b: 5, c: 6 }, + { loading: false, a: 4, b: 5, c: 6 }, + + { loading: false, a: 7, b: 8, c: 9 }, + { loading: false, a: 7, b: 8, c: 9 }, { loading: false, a: 7, b: 8, c: 9 }, ]); }); diff --git a/test/client/graphql/queries/polling.test.tsx b/test/client/graphql/queries/polling.test.tsx index 8e7e6b1f76..e595c5b15a 100644 --- a/test/client/graphql/queries/polling.test.tsx +++ b/test/client/graphql/queries/polling.test.tsx @@ -19,9 +19,9 @@ describe('[queries] polling', () => { }); // polling it('allows a polling query to be created', done => { - jest.useFakeTimers(); + expect.assertions(4); - const POLL_INTERVAL = 250; + const POLL_INTERVAL = 5; const POLL_COUNT = 4; const query: DocumentNode = gql` query people { @@ -52,6 +52,10 @@ describe('[queries] polling', () => { }), })(() => { count++; + expect(true).toBe(true); + if (count === 4) { + done(); + } return null; }); @@ -60,17 +64,6 @@ describe('[queries] polling', () => { , ); - - jest.runTimersToTime(POLL_INTERVAL * POLL_COUNT); - - try { - expect(count).toEqual(POLL_COUNT); - done(); - } catch (e) { - done.fail(e); - } finally { - (wrapper as any).unmount(); - } }); it('exposes stopPolling as part of the props api', done => { diff --git a/test/client/graphql/shared-operations.test.tsx b/test/client/graphql/shared-operations.test.tsx index 51777c4cc6..d7307b649e 100644 --- a/test/client/graphql/shared-operations.test.tsx +++ b/test/client/graphql/shared-operations.test.tsx @@ -6,10 +6,9 @@ import { InMemoryCache as Cache } from 'apollo-cache-inmemory'; import { ApolloLink } from 'apollo-link'; import * as TestUtils from 'react-dom/test-utils'; import { DocumentNode } from 'graphql'; -const compose = require('lodash.flowright'); import { mockSingleLink } from '../../../src/test-utils'; -import { ApolloProvider, ChildProps, DataValue, graphql, withApollo } from '../../../src'; +import { compose, ApolloProvider, ChildProps, DataValue, graphql, withApollo } from '../../../src'; describe('shared operations', () => { describe('withApollo', () => { diff --git a/test/client/utils/flowRight.test.tsx b/test/client/utils/flowRight.test.tsx new file mode 100644 index 0000000000..4cc311470a --- /dev/null +++ b/test/client/utils/flowRight.test.tsx @@ -0,0 +1,11 @@ +import { compose } from '../../../src'; + +describe('compose', () => { + it('Should reverse execute the array of functions', () => { + const add = (x: number, y: number) => x + y; + const square = (x: number) => x * x; + const flow = compose(square, add); + const result = flow(2, 2); + expect(result).toBe(16); + }); +}) diff --git a/tsconfig.cjs.json b/tsconfig.cjs.json new file mode 100644 index 0000000000..bbdaa2a628 --- /dev/null +++ b/tsconfig.cjs.json @@ -0,0 +1,6 @@ +{ + "extends": "./tsconfig", + "compilerOptions": { + "module": "commonjs", + }, +} diff --git a/tsconfig.json b/tsconfig.json index 0adffdd7e9..a56a721d72 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -6,6 +6,7 @@ "lib": ["es2015", "esnext.asynciterable", "dom"], "module": "es2015", "moduleResolution": "node", + "importHelpers": true, "noUnusedParameters": true, "outDir": "lib", "pretty": true, @@ -15,6 +16,6 @@ "target": "es5", "esModuleInterop": true }, - "include": ["./typings/**/*", "./src/**/*", "./test/**/*"], + "include": ["./src/**/*"], "exclude": ["./node_modules", "./dist", "./lib"] } diff --git a/typings/fbjs_lib_shallow-equal.d.ts b/typings/fbjs_lib_shallow-equal.d.ts deleted file mode 100644 index 6a711e0cd0..0000000000 --- a/typings/fbjs_lib_shallow-equal.d.ts +++ /dev/null @@ -1,5 +0,0 @@ -declare module 'fbjs/lib/shallowEqual' { - function shallowEqual(a: any, b: any): boolean; - - export default shallowEqual; -}