From 7915ab48772827d9afd4fe5ead70c7f682d0fbb9 Mon Sep 17 00:00:00 2001 From: andt Date: Mon, 25 May 2020 17:20:29 +0700 Subject: [PATCH 1/4] refactor: #1326 use useSelector, useDispatch in client page --- .../__snapshots__/client.test.tsx.snap | 2297 +++++++++++++++++ .../__tests__/__snapshots__/client.tsx.snap | 268 -- .../pages/__tests__/client.test.tsx | 225 ++ .../src/components/pages/__tests__/client.tsx | 261 -- .../src/components/pages/client.tsx | 73 +- .../src/selector/client-app-detail.ts | 4 + .../src/tests/badges/badge-branches.svg | 2 +- .../src/tests/badges/badge-functions.svg | 2 +- .../src/tests/badges/badge-lines.svg | 2 +- .../src/tests/badges/badge-statements.svg | 2 +- 10 files changed, 2561 insertions(+), 575 deletions(-) create mode 100644 packages/marketplace/src/components/pages/__tests__/__snapshots__/client.test.tsx.snap delete mode 100644 packages/marketplace/src/components/pages/__tests__/__snapshots__/client.tsx.snap create mode 100644 packages/marketplace/src/components/pages/__tests__/client.test.tsx delete mode 100644 packages/marketplace/src/components/pages/__tests__/client.tsx diff --git a/packages/marketplace/src/components/pages/__tests__/__snapshots__/client.test.tsx.snap b/packages/marketplace/src/components/pages/__tests__/__snapshots__/client.test.tsx.snap new file mode 100644 index 0000000000..9ce1d5678d --- /dev/null +++ b/packages/marketplace/src/components/pages/__tests__/__snapshots__/client.test.tsx.snap @@ -0,0 +1,2297 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Client should match a snapshot when LOADING false 1`] = ` + + + + + + +
+ + + +
+ +
+
+ +

+ Browse Apps +

+ + +
+ Search +
+ + + +
+ + + + + } + type="text" + > + +
+
+ + + + +
+
+ + + + +
+
+
+
+ + +
+ + + +
+
+ +
+ Filter +
+ + + + +
+
+ +
+ + + + +
+
+
+
+
+
+ +
+ + + + + + + + + + + +`; + +exports[`Client should match a snapshot when LOADING false 2`] = ` + + + + + + +
+ + + +
+ +
+
+ +

+ Browse Apps +

+ + +
+ Search +
+ + + +
+ + + + + } + type="text" + > + +
+
+ + + + +
+
+ + + + +
+
+
+
+ + +
+ + + +
+
+ +
+ Filter +
+ + + + +
+
+ +
+ + + + +
+
+
+
+
+
+ +
+ + + + + + + + + + + +`; + +exports[`Client should match a snapshot when featured apps is empty [] 1`] = ` + + + + + + +
+ + + +
+ +
+
+ +

+ Browse Apps +

+ + +
+ Search +
+ + + +
+ + + + + } + type="text" + > + +
+
+ + + + +
+
+ + + + +
+
+
+
+ + +
+ + + +
+
+ +
+ Filter +
+ + + + +
+
+ +
+ + + +
+ + +
+ +
+ We are sorry, there are no apps listed compatible with your account +
+ + +
+ +
+ +
+ + +
+
+ + + + + + + + + + + +`; + +exports[`Client should match a snapshot when featured apps is undefined 1`] = ` + + + + + + +
+ + + +
+ +
+
+ +

+ Browse Apps +

+ + +
+ Search +
+ + + +
+ + + + + } + type="text" + > + +
+
+ + + + +
+
+ + + + +
+
+
+
+ + +
+ + + +
+
+ +
+ Filter +
+ + + + +
+
+ +
+ + + +
+ + +
+ +
+ We are sorry, there are no apps listed compatible with your account +
+ + +
+ +
+ +
+ + +
+
+ + + + + + + + + + + +`; diff --git a/packages/marketplace/src/components/pages/__tests__/__snapshots__/client.tsx.snap b/packages/marketplace/src/components/pages/__tests__/__snapshots__/client.tsx.snap deleted file mode 100644 index bbfb4f1c4d..0000000000 --- a/packages/marketplace/src/components/pages/__tests__/__snapshots__/client.tsx.snap +++ /dev/null @@ -1,268 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`Client should match a snapshot when LOADING false 1`] = ` - -
- -
- -
-
- - -`; - -exports[`Client should match a snapshot when LOADING true 1`] = ` - -
- - -
- - -`; - -exports[`Client should match a snapshot when featured apps is empty [] 1`] = ` - -
- -
- -
-
- - -`; - -exports[`Client should match a snapshot when featured apps is undefined 1`] = ` - -
- -
- -
-
- - -`; diff --git a/packages/marketplace/src/components/pages/__tests__/client.test.tsx b/packages/marketplace/src/components/pages/__tests__/client.test.tsx new file mode 100644 index 0000000000..91127e1505 --- /dev/null +++ b/packages/marketplace/src/components/pages/__tests__/client.test.tsx @@ -0,0 +1,225 @@ +import * as React from 'react' +import { Provider } from 'react-redux' +import { mount } from 'enzyme' +import { appsDataStub } from '@/sagas/__stubs__/apps' +import { ClientAppSummary } from '@/reducers/client/app-summary' +import { + Client, + handleSetStateViewBrowse, + handleFetchAppDetail, + handleInstallationsSetFormState, + handleAfterClose, + handleOnChange, + handleOnCardClick, + onCardClickParams, +} from '../client' +import { addQuery } from '@/utils/client-url-params' +import { AppSummaryModel } from '@reapit/foundations-ts-definitions' +import { RouteComponentProps, StaticContext } from 'react-router' +import ClientWelcomeMessageModal from '@/components/ui/client-welcome-message' +import { BrowserRouter as Router } from 'react-router-dom' +import configureStore from 'redux-mock-store' +import * as ReactRedux from 'react-redux' +import { MemoryRouter } from 'react-router' +import Routes from '@/constants/routes' +import appState from '@/reducers/__stubs__/app-state' +import { setAppDetailModalStateBrowse } from '@/actions/app-detail-modal' +import { appDetailRequestData } from '@/actions/app-detail' +import { appInstallationsSetFormState } from '@/actions/app-installations' + +const createState = appSummaryState => { + return { + ...appState, + client: { + ...appState.client, + appSummary: { ...appState.client, ...appSummaryState }, + }, + } +} + +describe('Client', () => { + let store + const routerProps = { + match: { + params: { + page: '2', + }, + }, + location: { + search: 'page=1', + }, + } as RouteComponentProps + + beforeEach(() => { + /* mocking store */ + // spyDispatch = jest.spyOn(ReactRedux, 'useDispatch').mockImplementation(() => store.dispatch) + }) + it('should match a snapshot when LOADING false', () => { + const appSummaryState = { + isAppSummaryLoading: false, + } + const mockStore = configureStore() + store = mockStore(createState(appSummaryState)) + expect( + mount( + + + + + , + ), + ).toMatchSnapshot() + }) + + it('should match a snapshot when LOADING false', () => { + const appSummaryState = { + isAppSummaryLoading: true, + } + const mockStore = configureStore() + store = mockStore(createState(appSummaryState)) + expect( + mount( + + + + + , + ), + ).toMatchSnapshot() + }) + + it('should match a snapshot when featured apps is empty []', () => { + const appSummaryState = { + isAppSummaryLoading: false, + data: { + featuredApps: [] as AppSummaryModel[], + apps: appsDataStub, + } as ClientAppSummary, + } + const mockStore = configureStore() + store = mockStore(createState(appSummaryState)) + expect( + mount( + + + + + , + ), + ).toMatchSnapshot() + }) + + it('should match a snapshot when featured apps is undefined', () => { + const appSummaryState = { + isAppSummaryLoading: false, + data: { + featuredApps: undefined, + apps: appsDataStub, + } as ClientAppSummary, + } + const mockStore = configureStore() + store = mockStore(createState(appSummaryState)) + expect( + mount( + + + + + , + ), + ).toMatchSnapshot() + }) + + describe('handleOnChange', () => { + it('should call push correctly', () => { + const mockHistory = { + push: jest.fn(), + } + const fn = handleOnChange(mockHistory) + fn(1) + expect(mockHistory.push).toBeCalledWith(addQuery({ page: 1 })) + }) + }) + + describe('handleAfterClose', () => { + const setVisible = jest.fn() + const fn = handleAfterClose({ setVisible }) + fn() + expect(setVisible).toBeCalledWith(false) + }) + + describe('handleOnCardClick', () => { + it('should run correctly', () => { + const mockProps: onCardClickParams = { + setVisible: jest.fn(), + appDetail: { + authentication: { + loading: false, + code: '200', + }, + error: false, + loading: false, + appDetailData: { + data: appsDataStub.data.data![0], + }, + isStale: true, + }, + setStateViewBrowse: jest.fn(), + fetchAppDetail: jest.fn(), + clientId: 'ABC', + } + const fn = handleOnCardClick(mockProps) + fn({ id: '1' }) + expect(mockProps.setVisible).toBeCalled() + expect(mockProps.fetchAppDetail).toBeCalled() + }) + }) + + describe('show welcome modal when firstLogin', () => { + it('should run correctly', () => { + const appSummaryState = { + isAppSummaryLoading: false, + data: { + featuredApps: [] as AppSummaryModel[], + apps: appsDataStub, + } as ClientAppSummary, + } + const mockStore = configureStore() + store = mockStore(createState(appSummaryState)) + const wrapper = mount( + + + + + , + ) + setTimeout(() => { + expect(wrapper.find()).toEqual(1) + }, 200) + }) + }) + + it('handleSetStateViewBrowse should run correctly', () => { + const dispatch = jest.fn() + const fn = handleSetStateViewBrowse(dispatch) + fn() + expect(dispatch).toBeCalledWith(setAppDetailModalStateBrowse()) + }) + + it('handleFetchAppDetail should run correctly', () => { + const dispatch = jest.fn() + const id = 'id' + const clientId = 'clientId' + const fn = handleFetchAppDetail(dispatch) + fn(id, clientId) + expect(dispatch).toBeCalledWith(appDetailRequestData({ id, clientId })) + }) + + it('handleInstallationsSetFormState should run correctly', () => { + const dispatch = jest.fn() + const formState = 'DONE' + const fn = handleInstallationsSetFormState(dispatch) + fn(formState) + expect(dispatch).toBeCalledWith(appInstallationsSetFormState(formState)) + }) +}) diff --git a/packages/marketplace/src/components/pages/__tests__/client.tsx b/packages/marketplace/src/components/pages/__tests__/client.tsx deleted file mode 100644 index e71f18348f..0000000000 --- a/packages/marketplace/src/components/pages/__tests__/client.tsx +++ /dev/null @@ -1,261 +0,0 @@ -import * as React from 'react' -import { Provider } from 'react-redux' -import { shallow, mount } from 'enzyme' -import { appsDataStub, featuredAppsDataStub } from '@/sagas/__stubs__/apps' -import { ReduxState } from '@/types/core' -import { ClientAppSummary } from '@/reducers/client/app-summary' -import { - Client, - ClientProps, - mapStateToProps, - mapDispatchToProps, - handleAfterClose, - handleOnChange, - handleOnCardClick, - onCardClickParams, -} from '../client' -import { addQuery } from '@/utils/client-url-params' -import { AppSummaryModel } from '@reapit/foundations-ts-definitions' -import { RouteComponentProps, StaticContext } from 'react-router' -import { appDetailDataStub } from '@/sagas/__stubs__/app-detail' -import ClientWelcomeMessageModal from '@/components/ui/client-welcome-message' -import store from '@/core/store' -import { BrowserRouter as Router } from 'react-router-dom' - -const routerProps = { - match: { - params: { - page: '2', - }, - }, - location: { - search: 'page=1', - }, -} as RouteComponentProps - -const props = (loading: boolean): ClientProps => ({ - appSummaryState: { - isAppSummaryLoading: loading, - data: { - featuredApps: featuredAppsDataStub.data, - apps: appsDataStub, - } as ClientAppSummary, - }, - appDetail: { - appDetailData: appDetailDataStub, - loading: false, - error: false, - authentication: { - loading: false, - code: '', - }, - isStale: false, - }, - clientId: '1', - setStateViewBrowse: jest.fn(), - installationsFormState: 'PENDING', - installationsSetFormState: jest.fn(), - fetchAppDetail: jest.fn(), - ...routerProps, -}) - -describe('Client', () => { - it('should match a snapshot when LOADING false', () => { - expect(shallow()).toMatchSnapshot() - }) - - it('should match a snapshot when LOADING true', () => { - expect(shallow()).toMatchSnapshot() - }) - - it('should match a snapshot when featured apps is empty []', () => { - const routerProps = { - match: { - params: { - page: '2', - }, - }, - location: { - search: 'page=1', - }, - } as RouteComponentProps - - const props: ClientProps = { - appSummaryState: { - isAppSummaryLoading: false, - data: { - featuredApps: [] as AppSummaryModel[], - apps: appsDataStub, - } as ClientAppSummary, - }, - appDetail: { - appDetailData: appDetailDataStub, - loading: false, - error: false, - authentication: { - loading: false, - code: '', - }, - isStale: false, - }, - clientId: '1', - installationsFormState: 'PENDING', - setStateViewBrowse: jest.fn(), - installationsSetFormState: jest.fn(), - fetchAppDetail: jest.fn(), - ...routerProps, - } - - expect(shallow()).toMatchSnapshot() - }) - - it('should match a snapshot when featured apps is undefined', () => { - const props: ClientProps = { - appSummaryState: { - isAppSummaryLoading: false, - data: { - featuredApps: undefined, - apps: appsDataStub, - } as ClientAppSummary, - }, - appDetail: { - appDetailData: appDetailDataStub, - loading: false, - error: false, - authentication: { - loading: false, - code: '', - }, - isStale: false, - }, - clientId: '1', - installationsFormState: 'PENDING', - setStateViewBrowse: jest.fn(), - installationsSetFormState: jest.fn(), - fetchAppDetail: jest.fn(), - ...routerProps, - } - - expect(shallow()).toMatchSnapshot() - }) - - describe('mapStateToProps', () => { - it('should return correctly', () => { - const mockState = { - client: { - appSummary: { - data: { - apps: appsDataStub.data, - featuredApps: featuredAppsDataStub.data, - }, - isAppSummaryLoading: false, - error: 'error', - }, - appDetail: { - data: appDetailDataStub.data, - isAppDetailLoading: false, - error: '', - }, - }, - appDetail: { - appDetailData: appDetailDataStub, - error: false, - loading: false, - }, - auth: { - loginSession: { - loginIdentity: { - clientId: 'ABC', - }, - }, - }, - installations: { - formState: 'PENDING', - }, - } as ReduxState - const output = { - appSummaryState: mockState.client.appSummary, - appDetail: mockState.appDetail, - clientId: 'ABC', - installationsFormState: 'PENDING', - } - const result = mapStateToProps(mockState) - expect(result).toEqual(output) - }) - }) - - describe('mapDispatchToProps', () => { - it('should call fetchAppDetail correctly', () => { - const mockDispatch = jest.fn() - const { fetchAppDetail } = mapDispatchToProps(mockDispatch) - fetchAppDetail('123', 'ABC') - expect(mockDispatch).toBeCalled() - }) - it('should call installationsSetFormState correctly', () => { - const mockDispatch = jest.fn() - const { installationsSetFormState } = mapDispatchToProps(mockDispatch) - installationsSetFormState('SUCCESS') - expect(mockDispatch).toBeCalled() - }) - }) - - describe('handleOnChange', () => { - it('should call push correctly', () => { - const mockHistory = { - push: jest.fn(), - } - const fn = handleOnChange(mockHistory) - fn(1) - expect(mockHistory.push).toBeCalledWith(addQuery({ page: 1 })) - }) - }) - - describe('handleAfterClose', () => { - const setVisible = jest.fn() - const fn = handleAfterClose({ setVisible }) - fn() - expect(setVisible).toBeCalledWith(false) - }) - - describe('handleOnCardClick', () => { - it('should run correctly', () => { - const mockProps: onCardClickParams = { - setVisible: jest.fn(), - appDetail: { - authentication: { - loading: false, - code: '200', - }, - error: false, - loading: false, - appDetailData: { - data: appsDataStub.data.data![0], - }, - isStale: true, - }, - setStateViewBrowse: jest.fn(), - fetchAppDetail: jest.fn(), - clientId: 'ABC', - } - const fn = handleOnCardClick(mockProps) - fn({ id: '1' }) - expect(mockProps.setVisible).toBeCalled() - expect(mockProps.fetchAppDetail).toBeCalled() - }) - }) - - describe('show welcome modal when firstLogin', () => { - it('should run correctly', () => { - const wrapper = mount( - - - - - , - ) - setTimeout(() => { - expect(wrapper.find()).toEqual(1) - }, 200) - }) - }) -}) diff --git a/packages/marketplace/src/components/pages/client.tsx b/packages/marketplace/src/components/pages/client.tsx index 2814bd2cc6..8dac5bb4f3 100644 --- a/packages/marketplace/src/components/pages/client.tsx +++ b/packages/marketplace/src/components/pages/client.tsx @@ -1,7 +1,6 @@ import * as React from 'react' -import { connect } from 'react-redux' -import { ReduxState, FormState } from '@/types/core' -import { ClientAppSummaryState } from '@/reducers/client/app-summary' +import { useSelector, useDispatch } from 'react-redux' +import { FormState } from '@/types/core' import { Loader } from '@reapit/elements' import ErrorBoundary from '@/components/hocs/error-boundary' import { withRouter, RouteComponentProps } from 'react-router' @@ -16,19 +15,9 @@ import styles from '@/styles/pages/client.scss?mod' import { appInstallationsSetFormState } from '@/actions/app-installations' import { addQuery, getParamValueFromPath, hasFilterParams } from '@/utils/client-url-params' import { setAppDetailModalStateBrowse } from '@/actions/app-detail-modal' - -export interface ClientMappedActions { - setStateViewBrowse: () => void - fetchAppDetail: (id: string, clientId: string) => void - installationsSetFormState: (formState: FormState) => void -} - -export interface ClientMappedProps { - appSummaryState: ClientAppSummaryState - appDetail: AppDetailState - clientId: string - installationsFormState: FormState -} +import { selectAppDetail } from '@/selector/client-app-detail' +import { selectInstallationFormState } from '@/selector/installations' +import { Dispatch } from 'redux' export const handleAfterClose = ({ setVisible }) => () => setVisible(false) export const handleOnChange = history => (page: number) => { @@ -74,19 +63,32 @@ export const handleInstallationDone = ({ } } -export type ClientProps = ClientMappedActions & ClientMappedProps & RouteComponentProps<{ page?: any }> +export const handleSetStateViewBrowse = (dispatch: Dispatch) => () => { + dispatch(setAppDetailModalStateBrowse()) +} + +export const handleFetchAppDetail = (dispatch: Dispatch) => (id, clientId) => { + dispatch(appDetailRequestData({ id, clientId })) +} + +export const handleInstallationsSetFormState = (dispatch: Dispatch) => (formState: FormState) => { + dispatch(appInstallationsSetFormState(formState)) +} + +export type ClientProps = RouteComponentProps<{ page?: any }> + +export const Client: React.FunctionComponent = ({ history, location }) => { + const dispatch = useDispatch() + + const appSummaryState = useSelector(selectAppSummary) + const appDetail = useSelector(selectAppDetail) + const clientId = useSelector(selectClientId) + const installationsFormState = useSelector(selectInstallationFormState) + + const setStateViewBrowse = handleSetStateViewBrowse(dispatch) + const fetchAppDetail = handleFetchAppDetail(dispatch) + const installationsSetFormState = handleInstallationsSetFormState(dispatch) -export const Client: React.FunctionComponent = ({ - appSummaryState, - history, - location, - fetchAppDetail, - appDetail, - clientId, - setStateViewBrowse, - installationsFormState, - installationsSetFormState, -}) => { const pageNumber = !isNaN(Number(getParamValueFromPath(location.search, 'page'))) && Number(getParamValueFromPath(location.search, 'page')) > 0 @@ -154,17 +156,4 @@ export const Client: React.FunctionComponent = ({ ) } -export const mapStateToProps = (state: ReduxState): ClientMappedProps => ({ - appSummaryState: selectAppSummary(state), - appDetail: state.appDetail, - clientId: selectClientId(state), - installationsFormState: state.installations.formState, -}) - -export const mapDispatchToProps = (dispatch: any): ClientMappedActions => ({ - setStateViewBrowse: () => dispatch(setAppDetailModalStateBrowse()), - fetchAppDetail: (id: string, clientId: string) => dispatch(appDetailRequestData({ id, clientId })), - installationsSetFormState: (formState: FormState) => dispatch(appInstallationsSetFormState(formState)), -}) - -export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Client)) +export default withRouter(Client) diff --git a/packages/marketplace/src/selector/client-app-detail.ts b/packages/marketplace/src/selector/client-app-detail.ts index e08d660f4d..6f4fe1f2bd 100644 --- a/packages/marketplace/src/selector/client-app-detail.ts +++ b/packages/marketplace/src/selector/client-app-detail.ts @@ -15,3 +15,7 @@ export const selectAppDetailAuthentication = (state: ReduxState) => { export const selectAppDetailLoading = (state: ReduxState) => { return state.client.appDetail.isAppDetailLoading } + +export const selectAppDetail = (state: ReduxState) => { + return state.appDetail +} diff --git a/packages/marketplace/src/tests/badges/badge-branches.svg b/packages/marketplace/src/tests/badges/badge-branches.svg index 5e1d914d9c..7164b5bb09 100644 --- a/packages/marketplace/src/tests/badges/badge-branches.svg +++ b/packages/marketplace/src/tests/badges/badge-branches.svg @@ -1 +1 @@ -Coverage:branchesCoverage:branches69.25%69.25% \ No newline at end of file +Coverage:branchesCoverage:branches69.16%69.16% \ No newline at end of file diff --git a/packages/marketplace/src/tests/badges/badge-functions.svg b/packages/marketplace/src/tests/badges/badge-functions.svg index 163abe6863..d2eb5460e3 100644 --- a/packages/marketplace/src/tests/badges/badge-functions.svg +++ b/packages/marketplace/src/tests/badges/badge-functions.svg @@ -1 +1 @@ -Coverage:functionsCoverage:functions76.29%76.29% \ No newline at end of file +Coverage:functionsCoverage:functions77.93%77.93% \ No newline at end of file diff --git a/packages/marketplace/src/tests/badges/badge-lines.svg b/packages/marketplace/src/tests/badges/badge-lines.svg index 394194ca12..56d068d1db 100644 --- a/packages/marketplace/src/tests/badges/badge-lines.svg +++ b/packages/marketplace/src/tests/badges/badge-lines.svg @@ -1 +1 @@ -Coverage:linesCoverage:lines89.73%89.73% \ No newline at end of file +Coverage:linesCoverage:lines90.16%90.16% \ No newline at end of file diff --git a/packages/marketplace/src/tests/badges/badge-statements.svg b/packages/marketplace/src/tests/badges/badge-statements.svg index 7933390fa3..c475b40665 100644 --- a/packages/marketplace/src/tests/badges/badge-statements.svg +++ b/packages/marketplace/src/tests/badges/badge-statements.svg @@ -1 +1 @@ -Coverage:statementsCoverage:statements88.89%88.89% \ No newline at end of file +Coverage:statementsCoverage:statements89.36%89.36% \ No newline at end of file From 7036972d1a4da164e5d26b547025dd4a905dad32 Mon Sep 17 00:00:00 2001 From: andt Date: Tue, 26 May 2020 11:04:25 +0700 Subject: [PATCH 2/4] chore: #1326 use useHistory, useLocation instead withRouter --- .../__snapshots__/client.test.tsx.snap | 60 ++----------------- .../pages/__tests__/client.test.tsx | 21 ++----- .../src/components/pages/client.tsx | 10 ++-- 3 files changed, 14 insertions(+), 77 deletions(-) diff --git a/packages/marketplace/src/components/pages/__tests__/__snapshots__/client.test.tsx.snap b/packages/marketplace/src/components/pages/__tests__/__snapshots__/client.test.tsx.snap index 9ce1d5678d..31c81e6491 100644 --- a/packages/marketplace/src/components/pages/__tests__/__snapshots__/client.test.tsx.snap +++ b/packages/marketplace/src/components/pages/__tests__/__snapshots__/client.test.tsx.snap @@ -55,20 +55,7 @@ exports[`Client should match a snapshot when LOADING false 1`] = ` } } > - + - + - + - + { describe('Client', () => { let store - const routerProps = { - match: { - params: { - page: '2', - }, - }, - location: { - search: 'page=1', - }, - } as RouteComponentProps beforeEach(() => { /* mocking store */ @@ -64,7 +53,7 @@ describe('Client', () => { mount( - + , ), @@ -81,7 +70,7 @@ describe('Client', () => { mount( - + , ), @@ -102,7 +91,7 @@ describe('Client', () => { mount( - + , ), @@ -123,7 +112,7 @@ describe('Client', () => { mount( - + , ), @@ -189,7 +178,7 @@ describe('Client', () => { const wrapper = mount( - + , ) diff --git a/packages/marketplace/src/components/pages/client.tsx b/packages/marketplace/src/components/pages/client.tsx index 8dac5bb4f3..2d0757c795 100644 --- a/packages/marketplace/src/components/pages/client.tsx +++ b/packages/marketplace/src/components/pages/client.tsx @@ -3,7 +3,7 @@ import { useSelector, useDispatch } from 'react-redux' import { FormState } from '@/types/core' import { Loader } from '@reapit/elements' import ErrorBoundary from '@/components/hocs/error-boundary' -import { withRouter, RouteComponentProps } from 'react-router' +import { useHistory, useLocation } from 'react-router' import AppList from '@/components/ui/app-list' import AppSidebar from '@/components/ui/app-sidebar' import { appDetailRequestData } from '@/actions/app-detail' @@ -75,10 +75,10 @@ export const handleInstallationsSetFormState = (dispatch: Dispatch) => (formStat dispatch(appInstallationsSetFormState(formState)) } -export type ClientProps = RouteComponentProps<{ page?: any }> - -export const Client: React.FunctionComponent = ({ history, location }) => { +export const Client: React.FunctionComponent = () => { const dispatch = useDispatch() + const history = useHistory() + const location = useLocation() const appSummaryState = useSelector(selectAppSummary) const appDetail = useSelector(selectAppDetail) @@ -156,4 +156,4 @@ export const Client: React.FunctionComponent = ({ history, location ) } -export default withRouter(Client) +export default Client From eb39075d25d1e06ff46d61dbac419aa6b99d6989 Mon Sep 17 00:00:00 2001 From: andt Date: Tue, 26 May 2020 14:36:23 +0700 Subject: [PATCH 3/4] chore: move page to specific folder --- .../__tests__/__snapshots__/client.test.tsx.snap | 0 .../pages/{ => client}/__tests__/client.test.tsx | 0 .../src/components/pages/{ => client}/client.tsx | 12 +++++------- .../marketplace/src/components/pages/client/index.ts | 2 ++ .../marketplace/src/selector/__tests__/client.ts | 10 +++++++++- .../marketplace/src/selector/client-app-detail.ts | 4 ---- packages/marketplace/src/selector/client.ts | 4 ++++ .../marketplace/src/tests/badges/badge-branches.svg | 2 +- .../marketplace/src/tests/badges/badge-functions.svg | 2 +- .../marketplace/src/tests/badges/badge-lines.svg | 2 +- .../src/tests/badges/badge-statements.svg | 2 +- 11 files changed, 24 insertions(+), 16 deletions(-) rename packages/marketplace/src/components/pages/{ => client}/__tests__/__snapshots__/client.test.tsx.snap (100%) rename packages/marketplace/src/components/pages/{ => client}/__tests__/client.test.tsx (100%) rename packages/marketplace/src/components/pages/{ => client}/client.tsx (93%) create mode 100644 packages/marketplace/src/components/pages/client/index.ts diff --git a/packages/marketplace/src/components/pages/__tests__/__snapshots__/client.test.tsx.snap b/packages/marketplace/src/components/pages/client/__tests__/__snapshots__/client.test.tsx.snap similarity index 100% rename from packages/marketplace/src/components/pages/__tests__/__snapshots__/client.test.tsx.snap rename to packages/marketplace/src/components/pages/client/__tests__/__snapshots__/client.test.tsx.snap diff --git a/packages/marketplace/src/components/pages/__tests__/client.test.tsx b/packages/marketplace/src/components/pages/client/__tests__/client.test.tsx similarity index 100% rename from packages/marketplace/src/components/pages/__tests__/client.test.tsx rename to packages/marketplace/src/components/pages/client/__tests__/client.test.tsx diff --git a/packages/marketplace/src/components/pages/client.tsx b/packages/marketplace/src/components/pages/client/client.tsx similarity index 93% rename from packages/marketplace/src/components/pages/client.tsx rename to packages/marketplace/src/components/pages/client/client.tsx index 2d0757c795..01c228942e 100644 --- a/packages/marketplace/src/components/pages/client.tsx +++ b/packages/marketplace/src/components/pages/client/client.tsx @@ -13,9 +13,9 @@ import { selectClientId, selectAppSummary } from '@/selector/client' import { AppSummaryModel } from '@reapit/foundations-ts-definitions' import styles from '@/styles/pages/client.scss?mod' import { appInstallationsSetFormState } from '@/actions/app-installations' -import { addQuery, getParamValueFromPath, hasFilterParams } from '@/utils/client-url-params' +import { addQuery, hasFilterParams } from '@/utils/client-url-params' import { setAppDetailModalStateBrowse } from '@/actions/app-detail-modal' -import { selectAppDetail } from '@/selector/client-app-detail' +import { selectAppDetail } from '@/selector/client' import { selectInstallationFormState } from '@/selector/installations' import { Dispatch } from 'redux' @@ -89,11 +89,9 @@ export const Client: React.FunctionComponent = () => { const fetchAppDetail = handleFetchAppDetail(dispatch) const installationsSetFormState = handleInstallationsSetFormState(dispatch) - const pageNumber = - !isNaN(Number(getParamValueFromPath(location.search, 'page'))) && - Number(getParamValueFromPath(location.search, 'page')) > 0 - ? Number(getParamValueFromPath(location.search, 'page')) - : 1 + const urlParams = new URLSearchParams(location.search) + const pageNumber = Number(urlParams.get('page')) || 1 + const hasParams = hasFilterParams(location.search) const unfetched = !appSummaryState.data const loading = appSummaryState.isAppSummaryLoading diff --git a/packages/marketplace/src/components/pages/client/index.ts b/packages/marketplace/src/components/pages/client/index.ts new file mode 100644 index 0000000000..f7f6b59060 --- /dev/null +++ b/packages/marketplace/src/components/pages/client/index.ts @@ -0,0 +1,2 @@ +import Client from './client' +export default Client diff --git a/packages/marketplace/src/selector/__tests__/client.ts b/packages/marketplace/src/selector/__tests__/client.ts index 5d3a7c3353..a04941d0f3 100644 --- a/packages/marketplace/src/selector/__tests__/client.ts +++ b/packages/marketplace/src/selector/__tests__/client.ts @@ -1,5 +1,5 @@ import { ReduxState } from '@/types/core' -import { selectClientId, selectLoggedUserEmail, selectFeaturedApps } from '../client' +import { selectClientId, selectLoggedUserEmail, selectFeaturedApps, selectAppDetail } from '../client' import { featuredAppsDataStub } from '@/sagas/__stubs__/apps' describe('selectClientId', () => { @@ -74,4 +74,12 @@ describe('selectFeaturedApps', () => { const result = selectFeaturedApps(input) expect(result).toEqual([]) }) + + it('should run correctly and return {}', () => { + const input = { + appDetail: {}, + } as ReduxState + const result = selectAppDetail(input) + expect(result).toEqual(input.appDetail) + }) }) diff --git a/packages/marketplace/src/selector/client-app-detail.ts b/packages/marketplace/src/selector/client-app-detail.ts index 6f4fe1f2bd..e08d660f4d 100644 --- a/packages/marketplace/src/selector/client-app-detail.ts +++ b/packages/marketplace/src/selector/client-app-detail.ts @@ -15,7 +15,3 @@ export const selectAppDetailAuthentication = (state: ReduxState) => { export const selectAppDetailLoading = (state: ReduxState) => { return state.client.appDetail.isAppDetailLoading } - -export const selectAppDetail = (state: ReduxState) => { - return state.appDetail -} diff --git a/packages/marketplace/src/selector/client.ts b/packages/marketplace/src/selector/client.ts index 90d70e11e7..b8f36d2824 100644 --- a/packages/marketplace/src/selector/client.ts +++ b/packages/marketplace/src/selector/client.ts @@ -15,3 +15,7 @@ export const selectAppSummary = (state: ReduxState) => { export const selectFeaturedApps = (state: ReduxState) => { return state?.client.appSummary.data?.featuredApps || [] } + +export const selectAppDetail = (state: ReduxState) => { + return state.appDetail +} diff --git a/packages/marketplace/src/tests/badges/badge-branches.svg b/packages/marketplace/src/tests/badges/badge-branches.svg index bd173d0493..ed156adad4 100644 --- a/packages/marketplace/src/tests/badges/badge-branches.svg +++ b/packages/marketplace/src/tests/badges/badge-branches.svg @@ -1 +1 @@ -Coverage:branchesCoverage:branches68.99%68.99% +Coverage:branchesCoverage:branches69.17%69.17% \ No newline at end of file diff --git a/packages/marketplace/src/tests/badges/badge-functions.svg b/packages/marketplace/src/tests/badges/badge-functions.svg index 492e50e762..d2eb5460e3 100644 --- a/packages/marketplace/src/tests/badges/badge-functions.svg +++ b/packages/marketplace/src/tests/badges/badge-functions.svg @@ -1 +1 @@ -Coverage:functionsCoverage:functions77.6%77.6% +Coverage:functionsCoverage:functions77.93%77.93% \ No newline at end of file diff --git a/packages/marketplace/src/tests/badges/badge-lines.svg b/packages/marketplace/src/tests/badges/badge-lines.svg index 07fc6a6d34..bda4972144 100644 --- a/packages/marketplace/src/tests/badges/badge-lines.svg +++ b/packages/marketplace/src/tests/badges/badge-lines.svg @@ -1 +1 @@ -Coverage:linesCoverage:lines90.05%90.05% +Coverage:linesCoverage:lines90.14%90.14% \ No newline at end of file diff --git a/packages/marketplace/src/tests/badges/badge-statements.svg b/packages/marketplace/src/tests/badges/badge-statements.svg index b8fbc4d726..cfe4daabfb 100644 --- a/packages/marketplace/src/tests/badges/badge-statements.svg +++ b/packages/marketplace/src/tests/badges/badge-statements.svg @@ -1 +1 @@ -Coverage:statementsCoverage:statements89.23%89.23% +Coverage:statementsCoverage:statements89.33%89.33% \ No newline at end of file From f00e5da418e9aa4cfb1c02dfc94524574429f521 Mon Sep 17 00:00:00 2001 From: andt Date: Tue, 26 May 2020 14:40:17 +0700 Subject: [PATCH 4/4] chore: update var name --- packages/marketplace/src/components/pages/client/client.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/marketplace/src/components/pages/client/client.tsx b/packages/marketplace/src/components/pages/client/client.tsx index 01c228942e..c1dc1e1dd3 100644 --- a/packages/marketplace/src/components/pages/client/client.tsx +++ b/packages/marketplace/src/components/pages/client/client.tsx @@ -90,7 +90,7 @@ export const Client: React.FunctionComponent = () => { const installationsSetFormState = handleInstallationsSetFormState(dispatch) const urlParams = new URLSearchParams(location.search) - const pageNumber = Number(urlParams.get('page')) || 1 + const page = Number(urlParams.get('page')) || 1 const hasParams = hasFilterParams(location.search) const unfetched = !appSummaryState.data @@ -137,11 +137,11 @@ export const Client: React.FunctionComponent = () => { list={apps} loading={loading} onCardClick={handleOnCardClick({ setVisible, setStateViewBrowse, appDetail, fetchAppDetail, clientId })} - infoType={pageNumber > 1 || hasParams ? '' : 'CLIENT_APPS_EMPTY'} + infoType={page > 1 || hasParams ? '' : 'CLIENT_APPS_EMPTY'} pagination={{ totalCount, pageSize, - pageNumber, + pageNumber: page, onChange: handleOnChange(history), }} numOfColumn={3}