-
-
Save tb/5bd481e1721fd637e9770cd27fa93048 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