This repository has been archived by the owner on May 6, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(apollo): add apollo client and tests
- Loading branch information
Kevin Danikowski
authored and
Kevin Danikowski
committed
Jan 15, 2020
1 parent
1c68116
commit 7aee390
Showing
21 changed files
with
765 additions
and
176 deletions.
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
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
8 changes: 8 additions & 0 deletions
8
templates/default/src/__tests__/pages/__snapshots__/_app.test.jsx.snap
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`App controls the root NextJS app 1`] = ` | ||
| <App | ||
| Component={[Function]} | ||
| pageProps={Object {}} | ||
| /> | ||
| `; |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import React from 'react' | ||
| import App from '../../pages/_app' | ||
|
|
||
| App.displayName = 'App' | ||
|
|
||
| jest.mock('../../utils/apollo', () => ({ | ||
| withApollo: () => async Component => { | ||
| const props = await Component.getInitialProps({ Component }) | ||
|
|
||
| // eslint-disable-next-line | ||
| return <Component {...props} /> | ||
| } | ||
| })) | ||
|
|
||
| const mockComponent = () => { | ||
| return <div>Ok!</div> | ||
| } | ||
|
|
||
| describe('App', () => { | ||
| it('controls the root NextJS app', () => { | ||
| expect(<App Component={mockComponent} pageProps={{}} />).toMatchSnapshot() | ||
| }) | ||
| }) |
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
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
57 changes: 42 additions & 15 deletions
57
templates/default/src/components/atoms/Country/Country.jsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,30 +1,57 @@ | ||
| import React from 'react' | ||
| import { useQuery } from '@apollo/react-hooks' | ||
| import PropTypes from 'prop-types' | ||
| import COUNTRY_QUERY from '../../../graphql/queries/country' | ||
|
|
||
| const Country = ({ name }) => { | ||
| const Country = ({ code }) => { | ||
| const { loading, error, data } = useQuery(COUNTRY_QUERY, { | ||
| variables: { code } | ||
| }) | ||
|
|
||
| if (!code) { | ||
| return ( | ||
| <div data-testid="no-code-div" className="country"> | ||
| No country selected | ||
| </div> | ||
| ) | ||
| } | ||
| if (error) { | ||
| return ( | ||
| <div data-testid="error-div" className="country"> | ||
| Error! | ||
| </div> | ||
| ) | ||
| } | ||
| if (loading) { | ||
| return ( | ||
| <div data-testid="loading-div" className="country"> | ||
| Loading... | ||
| </div> | ||
| ) | ||
| } | ||
| if (data.country) { | ||
| const { name, emoji } = data.country | ||
|
|
||
| return ( | ||
| <div className="country"> | ||
| <div data-testid="country-name">{name}</div> | ||
| <div data-testid="country-emoji">{emoji}</div> | ||
| </div> | ||
| ) | ||
| } | ||
| return ( | ||
| <div className="country"> | ||
| <div data-testid="country-name">{name}</div> | ||
| <style jsx> | ||
| {` | ||
| .country { | ||
| border: dashed 1px gray; | ||
| padding: 10px; | ||
| font-weight: 600; | ||
| font-size: 16px; | ||
| } | ||
| `} | ||
| </style> | ||
| <div data-testid="no-data-div" className="country"> | ||
| No Country Data | ||
| </div> | ||
| ) | ||
| } | ||
|
|
||
| Country.propTypes = { | ||
| name: PropTypes.string | ||
| code: PropTypes.string | ||
| } | ||
|
|
||
| Country.defaultProps = { | ||
| name: '' | ||
| code: '' | ||
| } | ||
|
|
||
| export default Country |
63 changes: 61 additions & 2 deletions
63
templates/default/src/components/atoms/Country/Country.test.jsx
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,13 +1,72 @@ | ||
| import React from 'react' | ||
| import { render } from '@testing-library/react' | ||
| import { useQuery } from '@apollo/react-hooks' | ||
| import Country from '.' | ||
|
|
||
| jest.mock('@apollo/react-hooks') | ||
|
|
||
| describe('Country', () => { | ||
| let mockQueryResponse = {} | ||
|
|
||
| it('should render no country output when no code provided', () => { | ||
| mockQueryResponse = { | ||
| loading: true | ||
| } | ||
| useQuery.mockReturnValue(mockQueryResponse) | ||
| const { getByTestId } = render(<Country />) | ||
|
|
||
| expect(getByTestId('no-code-div').textContent).toBe('No country selected') | ||
| }) | ||
| it('should render error output on error', () => { | ||
| mockQueryResponse = { | ||
| error: { | ||
| graphQLErrors: [] | ||
| } | ||
| } | ||
| useQuery.mockReturnValue(mockQueryResponse) | ||
| const { getByTestId } = render(<Country code="US" />) | ||
|
|
||
| expect(getByTestId('error-div').textContent).toBe('Error!') | ||
| }) | ||
| it('should render loading output when loading', () => { | ||
| mockQueryResponse = { | ||
| loading: true | ||
| } | ||
| useQuery.mockReturnValue(mockQueryResponse) | ||
| const { getByTestId } = render(<Country code="US" />) | ||
|
|
||
| expect(getByTestId('loading-div').textContent).toBe('Loading...') | ||
| }) | ||
|
|
||
| it('should render empty country output when no data', () => { | ||
| mockQueryResponse = { | ||
| loading: false, | ||
| data: {} | ||
| } | ||
| useQuery.mockReturnValue(mockQueryResponse) | ||
| const { getByTestId } = render(<Country code="NONE" />) | ||
|
|
||
| expect(getByTestId('no-data-div').textContent).toBe('No Country Data') | ||
| }) | ||
|
|
||
| it('should render a Country', () => { | ||
| const { asFragment, getByTestId } = render(<Country name="United States" />) | ||
| mockQueryResponse = { | ||
| loading: false, | ||
| data: { | ||
| country: { | ||
| name: 'United States', | ||
| code: 'US', | ||
| emoji: 'E' | ||
| } | ||
| } | ||
| } | ||
| useQuery.mockReturnValue(mockQueryResponse) | ||
| const { asFragment, getByTestId } = render(<Country code="US" />) | ||
| const name = getByTestId('country-name') | ||
| const emoji = getByTestId('country-emoji') | ||
|
|
||
| expect(name.textContent).toBe('United States') | ||
| expect(name.textContent).toBe(mockQueryResponse.data.country.name) | ||
| expect(emoji.textContent).toBe(mockQueryResponse.data.country.emoji) | ||
| expect(asFragment()).toMatchSnapshot() | ||
| }) | ||
| }) |
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
Oops, something went wrong.