From 7667beb7ba7b979043958e9b31106f2a4c778997 Mon Sep 17 00:00:00 2001 From: Rick Clark Date: Wed, 26 Sep 2018 15:35:58 +0100 Subject: [PATCH] Add GetStarted comp and user info query --- cosmos.proxies.js | 4 + src/components/GetStarted/index.fixture.js | 31 +++++-- src/components/GetStarted/index.js | 66 ++++++++++++--- src/components/GetStarted/style.css | 10 +-- src/components/GetStarted/test.js | 99 +++++++++++++++++++++- src/routes/SetupNew/index.js | 4 +- src/routes/SetupNew/test.js | 10 +-- 7 files changed, 194 insertions(+), 30 deletions(-) create mode 100644 cosmos.proxies.js diff --git a/cosmos.proxies.js b/cosmos.proxies.js new file mode 100644 index 0000000..595008c --- /dev/null +++ b/cosmos.proxies.js @@ -0,0 +1,4 @@ +import createBackgroundProxy from 'react-cosmos-background-proxy'; +import createRouterProxy from 'react-cosmos-router-proxy'; + +export default [createBackgroundProxy(), createRouterProxy()]; diff --git a/src/components/GetStarted/index.fixture.js b/src/components/GetStarted/index.fixture.js index 62b6f1c..771f7a6 100644 --- a/src/components/GetStarted/index.fixture.js +++ b/src/components/GetStarted/index.fixture.js @@ -1,26 +1,44 @@ import { GetStarted } from '.'; const baseProps = { - saveGithubToken: () => {}, - setLoadingToken: () => {}, - loadingToken: false, + data: { + viewer: { + login: 'rkclark', + avatarUrl: 'https://avatars2.githubusercontent.com/u/15447744?v=4', + }, + }, + loading: false, + error: null, + refetch: () => {}, + networkStatus: 1, }; export default [ { component: GetStarted, - name: 'Not loading the token', + name: 'With data', + props: { + ...baseProps, + }, + url: '/', + }, + { + component: GetStarted, + name: 'Loading', props: { ...baseProps, + loading: true, }, + url: '/', }, { component: GetStarted, - name: 'Loading the token', + name: 'Refetching', props: { ...baseProps, - loadingToken: true, + networkStatus: 4, }, + url: '/', }, { component: GetStarted, @@ -29,5 +47,6 @@ export default [ ...baseProps, error: 'Borked', }, + url: '/', }, ]; diff --git a/src/components/GetStarted/index.js b/src/components/GetStarted/index.js index ed0a203..8931ae6 100644 --- a/src/components/GetStarted/index.js +++ b/src/components/GetStarted/index.js @@ -1,39 +1,85 @@ /* eslint-disable no-return-assign */ -import React from 'react'; +import React, { Fragment } from 'react'; import PropTypes from 'prop-types'; import gql from 'graphql-tag'; import { Query } from 'react-apollo'; +import { Link } from 'react-router-dom'; +import LoadingMessage from '../LoadingMessage'; +import Error from '../Error'; +import Button from '../Button'; import style from './style.css'; -export function GetStarted({ data }) { - console.log(data); - return
; +export function GetStarted({ data, loading, error, refetch, networkStatus }) { + const renderContent = () => { + if (loading || networkStatus === 4) { + return ; + } + + if (error) { + return ( +
+ + +
+ ); + } + return ( + +

+ Successfully signed in as {data.viewer.login}! +

+

+ Now its time to select the Github repos that you would like to monitor + with Pullp. +

+ + + + + ); + }; + + return
{renderContent()}
; } GetStarted.propTypes = { data: PropTypes.shape({}).isRequired, + loading: PropTypes.bool.isRequired, + error: PropTypes.shape({}), + refetch: PropTypes.func.isRequired, + networkStatus: PropTypes.number.isRequired, }; -// GetStarted.defaultProps = { - -// }; +GetStarted.defaultProps = { + error: null, +}; const GET_CURRENT_USER = gql(` query { viewer { login avatarUrl - url } } `); export default function GetStartedContainer() { return ( - - {({ data, client }) => } + + {props => { + console.log('props are', props); + return ; + }} ); } diff --git a/src/components/GetStarted/style.css b/src/components/GetStarted/style.css index 22b3535..9710ecc 100644 --- a/src/components/GetStarted/style.css +++ b/src/components/GetStarted/style.css @@ -1,21 +1,19 @@ @import "../../css/colors.css"; -@import "../../css/units.css"; -.signInContainer { - text-align: center; +.container { height: 100%; display: flex; flex-direction: column; justify-content: center; + text-align: center; } -.welcome { +.success { font-weight: bold; color: var(--primary-medium); font-size: 1.8rem; - margin-top: 0; } -.begin { +.continue { margin: 3rem auto; } diff --git a/src/components/GetStarted/test.js b/src/components/GetStarted/test.js index 07d8011..e332ae2 100644 --- a/src/components/GetStarted/test.js +++ b/src/components/GetStarted/test.js @@ -1,10 +1,107 @@ import React from 'react'; import { shallow } from 'enzyme'; +import { Link } from 'react-router-dom'; import { GetStarted } from '.'; +import LoadingMessage from '../LoadingMessage'; +import Error from '../Error'; +import Button from '../Button'; describe('', () => { + const defaultProps = { + data: { + viewer: { + login: 'test', + avatarUrl: '/avatar/url', + }, + }, + loading: false, + error: null, + refetch: () => {}, + networkStatus: 1, + }; + it('renders successfully', () => { - const component = shallow(); + const component = shallow(); expect(component.length).toBe(1); }); + + describe('when loading is true', () => { + it('renders a with correct message', () => { + const component = shallow(); + const loadingMessage = component.find(LoadingMessage); + expect(loadingMessage.length).toBe(1); + expect(loadingMessage.props().message).toBe( + 'Loading your Github profile...', + ); + }); + }); + + describe('when network status === 4 (refetching)', () => { + it('renders a with correct message', () => { + const component = shallow( + , + ); + const loadingMessage = component.find(LoadingMessage); + expect(loadingMessage.length).toBe(1); + expect(loadingMessage.props().message).toBe( + 'Loading your Github profile...', + ); + }); + }); + + describe('when error is truthy', () => { + let component; + const refetchMock = jest.fn(); + + beforeAll(() => { + component = shallow( + , + ); + }); + + afterEach(() => { + refetchMock.mockClear(); + }); + + it('renders an with the correct message', () => { + const error = component.find(Error); + expect(error.length).toBe(1); + expect(error.props().message).toBe( + 'Failed to load your Github profile from the Github API. Please try again later.', + ); + }); + + it('renders a retry button', () => { + const button = component.find(Button); + expect(button.length).toBe(1); + expect(button.props().children).toBe('Retry'); + }); + + describe('retry button onClick', () => { + it('calls the refetch function', () => { + expect(refetchMock).not.toHaveBeenCalled(); + const button = component.find(Button); + button.props().onClick(); + expect(refetchMock).toHaveBeenCalled(); + }); + }); + }); + + describe('when data is received', () => { + let component; + + beforeAll(() => { + component = shallow(); + }); + + it('renders an to /app/selectRepos', () => { + const link = component.find(Link); + expect(link.length).toBe(1); + expect(link.props().to).toBe('/app/selectRepos'); + }); + }); }); diff --git a/src/routes/SetupNew/index.js b/src/routes/SetupNew/index.js index 46fc463..a134ebe 100644 --- a/src/routes/SetupNew/index.js +++ b/src/routes/SetupNew/index.js @@ -4,7 +4,7 @@ import { get } from 'lodash'; import gql from 'graphql-tag'; import { Query } from 'react-apollo'; import SignInForm from '../../components/SignInForm'; -import { GetStarted } from '../../components/GetStarted'; +import GetStartedContainer from '../../components/GetStarted'; export const GET_GITHUB_TOKEN_FROM_CACHE = gql` { @@ -61,7 +61,7 @@ export function SetupNew({ data, client }) { error={get(data, 'githubAuth.error')} /> )} - {authToken && } + {authToken && } ); } diff --git a/src/routes/SetupNew/test.js b/src/routes/SetupNew/test.js index dad553c..b12b935 100644 --- a/src/routes/SetupNew/test.js +++ b/src/routes/SetupNew/test.js @@ -3,7 +3,7 @@ import { shallow } from 'enzyme'; import { SetupNew } from './'; import SignInForm from '../../components/SignInForm'; -import { GetStarted } from '../../components/GetStarted'; +import GetStartedContainer from '../../components/GetStarted'; describe('Setup', () => { const defaultProps = { @@ -45,8 +45,8 @@ describe('Setup', () => { expect(props.error).toBe(data.githubAuth.error); }); - it('does not render a component', () => { - expect(component.find(GetStarted).length).toBe(0); + it('does not render a component', () => { + expect(component.find(GetStartedContainer).length).toBe(0); }); describe('saveGithubToken fn passed to as a prop', () => { @@ -119,8 +119,8 @@ describe('Setup', () => { }; const component = shallow(); - it('renders a component', () => { - expect(component.find(GetStarted).length).toBe(1); + it('renders a component', () => { + expect(component.find(GetStartedContainer).length).toBe(1); }); it('does not render a component', () => {