Created
November 15, 2016 19:43
-
-
Save jbaxleyiii/b3634aeeab7bdb80ed4119ea5a07ba4a to your computer and use it in GitHub Desktop.
react-apollo testing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import { Component } from "react"; | |
import { print } from "graphql-tag/printer"; | |
import { graphql } from "react-apollo"; | |
import { MockedProvider } from "react-apollo/test-utils"; | |
import { addTypenameToDocument } from "apollo-client/queries/queryTransform"; | |
import { mount } from "enzyme"; | |
import { withSavedPayments, SAVED_ACCTS_QUERY } from "../"; | |
it("has a known query shape", () => { | |
expect(print(SAVED_ACCTS_QUERY)).toMatchSnapshot(); | |
}); | |
describe("graphql integration", () => { | |
// let calls; | |
// beforeEach(() => { | |
// calls = graphql.mock.calls[graphql.mock.calls.length - 1]; | |
// }); | |
// afterEach(() => { | |
// calls = undefined; | |
// }); | |
// it("uses the known query", () => { | |
// expect(calls[0]).toEqual(SAVED_ACCTS_QUERY); | |
// }); | |
// it("has a prop location of `savedPayments`", () => { | |
// expect(calls[1].name).toBe("savedPayments"); | |
// }); | |
// it("passes variables correctly", () => { | |
// const options = calls[1].options; | |
// const calculatedOptions = options(); | |
// expect(calculatedOptions.variables).toEqual({ | |
// cache: false, | |
// }); | |
// }); | |
// it("forceFetches on each load", () => { | |
// const options = calls[1].options; | |
// const calculatedOptions = options(); | |
// expect(calculatedOptions.forceFetch).toBe(true); | |
// }); | |
it("correctly delivers props to child component", (done) => { | |
const query = addTypenameToDocument(SAVED_ACCTS_QUERY); | |
const variables = { cache: false }; | |
const mockedData = { | |
savedPayments: null, | |
}; | |
class Foo extends Component { | |
componentWillReceiveProps({ savedPayments: { loading, savedPayments }}) { | |
expect(loading).toBe(false); | |
expect(savedPayments).toBe(null); | |
done(); | |
} | |
render() { | |
return null; | |
} | |
} | |
const DummyComponent = withSavedPayments(Foo); | |
const wrapper = mount( | |
<MockedProvider mocks={[ | |
{ request: { query, variables }, result: { data: mockedData } } | |
]}> | |
<DummyComponent /> | |
</MockedProvider> | |
); | |
}); | |
it("correctly delivers props to child component", (done) => { | |
const query = addTypenameToDocument(SAVED_ACCTS_QUERY); | |
const variables = { cache: false }; | |
const mockedData = { | |
savedPayments: [], | |
}; | |
class Foo extends Component { | |
componentWillReceiveProps({ savedPayments: { loading, savedPayments }}) { | |
expect(loading).toBe(false); | |
expect(savedPayments).toEqual(mockedData.savedPayments); | |
done(); | |
} | |
render() { | |
return null; | |
} | |
} | |
const DummyComponent = withSavedPayments(Foo); | |
const wrapper = mount( | |
<MockedProvider mocks={[ | |
{ request: { query, variables }, result: { data: mockedData } } | |
]}> | |
<DummyComponent /> | |
</MockedProvider> | |
); | |
}); | |
it("correctly delivers props to child component", (done) => { | |
const query = addTypenameToDocument(SAVED_ACCTS_QUERY); | |
const variables = { cache: false }; | |
const mockedData = { | |
savedPayments: [ | |
{ | |
name: "Gold Card", | |
id: 10, | |
date: "date", | |
__typename: "SavedPayment", | |
payment: { | |
accountNumber: "4111111111111111", | |
paymentType: "Visa", | |
__typename: "Card" | |
} | |
} | |
], | |
}; | |
class Foo extends Component { | |
componentWillReceiveProps({ savedPayments: { loading, savedPayments }}) { | |
expect(loading).toBe(false); | |
expect(savedPayments).toEqual(mockedData.savedPayments); | |
expect(savedPayments).toMatchSnapshot(); | |
done(); | |
} | |
render() { | |
return null; | |
} | |
} | |
const DummyComponent = withSavedPayments(Foo); | |
const wrapper = mount( | |
<MockedProvider mocks={[ | |
{ request: { query, variables }, result: { data: mockedData } } | |
]}> | |
<DummyComponent /> | |
</MockedProvider> | |
); | |
}); | |
}); | |
describe("redux implementation", () => { | |
it("only uses mapStateToProps"); | |
it("correctly formats the shape to include authorized"); | |
it("correctly formats the shape to include savedAccount"); | |
}); | |
describe("CheckoutButtons", () => { | |
it("has a default state"); | |
describe("onClick", () => { | |
it("takes an event"); | |
it("fires an onClick function if provided"); | |
it("can stop execution if onClick tells it to"); | |
it("dispatches setting transactionType"); | |
it("stores savedPayment if it exists"); | |
it("handles a logged in user when input isn't disabled"); | |
it("handles a logged out user"); | |
it("sets the nav to modal"); | |
}); | |
describe("giveAsGuest", () => { | |
it("returns early if disabled"); | |
it("dispatches correct actions"); | |
}); | |
}); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment