From d9bcf325c0d1e9f3e87c9f1794d4feddbf65b0bc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tr=C6=B0=E1=BB=9Dng=20An?= Date: Wed, 27 May 2020 09:46:58 +0700 Subject: [PATCH] refactor: #1326 refactor client installed apps page using new react-redux hooks (#1338) --- .../__snapshots__/installed-apps.tsx.snap | 70 --- .../pages/__tests__/installed-apps.tsx | 79 --- .../installed-apps.test.tsx.snap | 571 ++++++++++++++++++ .../__tests__/installed-apps.test.tsx | 70 +++ .../components/pages/installed-apps/index.ts | 2 + .../{ => installed-apps}/installed-apps.tsx | 32 +- .../src/selector/__tests__/client.ts | 10 +- packages/marketplace/src/selector/client.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 +- 12 files changed, 671 insertions(+), 175 deletions(-) delete mode 100644 packages/marketplace/src/components/pages/__tests__/__snapshots__/installed-apps.tsx.snap delete mode 100644 packages/marketplace/src/components/pages/__tests__/installed-apps.tsx create mode 100644 packages/marketplace/src/components/pages/installed-apps/__tests__/__snapshots__/installed-apps.test.tsx.snap create mode 100644 packages/marketplace/src/components/pages/installed-apps/__tests__/installed-apps.test.tsx create mode 100644 packages/marketplace/src/components/pages/installed-apps/index.ts rename packages/marketplace/src/components/pages/{ => installed-apps}/installed-apps.tsx (59%) diff --git a/packages/marketplace/src/components/pages/__tests__/__snapshots__/installed-apps.tsx.snap b/packages/marketplace/src/components/pages/__tests__/__snapshots__/installed-apps.tsx.snap deleted file mode 100644 index 6ccfca5c8c..0000000000 --- a/packages/marketplace/src/components/pages/__tests__/__snapshots__/installed-apps.tsx.snap +++ /dev/null @@ -1,70 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`InstalledApps should match a snapshot when LOADING false 1`] = ` - - - -`; - -exports[`InstalledApps should match a snapshot when LOADING true 1`] = ``; diff --git a/packages/marketplace/src/components/pages/__tests__/installed-apps.tsx b/packages/marketplace/src/components/pages/__tests__/installed-apps.tsx deleted file mode 100644 index 93bb512a81..0000000000 --- a/packages/marketplace/src/components/pages/__tests__/installed-apps.tsx +++ /dev/null @@ -1,79 +0,0 @@ -import * as React from 'react' -import { shallow } from 'enzyme' -import { appDetailDataStub } from '@/sagas/__stubs__/app-detail' -import { appsDataStub } from '@/sagas/__stubs__/apps' -import { InstalledAppsItem } from '@/reducers/installed-apps' -import routes from '@/constants/routes' -import { - InstalledApps, - InstalledAppsProps, - handleOnChange, - mapStateToProps, - handleOnCardClick, -} from '../installed-apps' -import { ReduxState } from '@/types/core' -import { handleLaunchApp } from '../../../utils/launch-app' - -jest.mock('../../../utils/launch-app') - -const mockProps = (loading: boolean, installedAppsData: InstalledAppsItem | null): InstalledAppsProps => ({ - installedAppsState: { - loading, - installedAppsData, - }, - // @ts-ignore: just pick the needed props for the test - match: { - params: { - page: '2', - }, - }, - history: { - action: 'POP', - block: jest.fn(), - createHref: jest.fn(), - go: jest.fn(), - goBack: jest.fn(), - goForward: jest.fn(), - length: 1, - listen: jest.fn(), - location: { pathname: '/client/installed', search: '', hash: '', state: undefined, key: '' }, - push: jest.fn(), - replace: jest.fn(), - }, -}) - -describe('InstalledApps', () => { - it('should match a snapshot when LOADING false', () => { - expect(shallow()).toMatchSnapshot() - }) - - it('should match a snapshot when LOADING true', () => { - expect(shallow()).toMatchSnapshot() - }) - - it('handleOnChange', () => { - const mockHistory = { - push: jest.fn(), - } - const fn = handleOnChange(mockHistory) - fn(1) - expect(mockHistory.push).toBeCalledWith(`${routes.INSTALLED_APPS}/${1}`) - }) - - it('mapStateToProps', () => { - const mockState = { - installedApps: {}, - } as ReduxState - const result = mapStateToProps(mockState) - const output = { - installedAppsState: {}, - } - expect(result).toEqual(output) - }) - - it('handleOnCardClick should call handleLaunchApp', () => { - handleOnCardClick(appDetailDataStub.data) - expect(handleLaunchApp).toHaveBeenCalledTimes(1) - expect(handleLaunchApp).toHaveBeenCalledWith(appDetailDataStub.data) - }) -}) diff --git a/packages/marketplace/src/components/pages/installed-apps/__tests__/__snapshots__/installed-apps.test.tsx.snap b/packages/marketplace/src/components/pages/installed-apps/__tests__/__snapshots__/installed-apps.test.tsx.snap new file mode 100644 index 0000000000..846b0c95bd --- /dev/null +++ b/packages/marketplace/src/components/pages/installed-apps/__tests__/__snapshots__/installed-apps.test.tsx.snap @@ -0,0 +1,571 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`InstalledApps should match a snapshot when LOADING false 1`] = ` + + + + + + + + +
+ +

+ Installed Apps +

+ + + +
+ +
+ +
+ + } + onClick={[Function]} + subHeading="Pete's Proptech World Ltd" + > +
+
+
+
+
+ test +
+
+
+ +

+ test +

+ + +
+ Pete's Proptech World Ltd +
+ +

+ nXXT2zaK807ysWgy8F0WEhIYRP3TgosAtfuiLtQCImoSx0kynxbIF0nkGHU36Oz13kM3DG0Bcsicr8L6eWFKLBg4axlmiOEWcvwHAbBP9LRvoFkCl58k1wjhOExnpaZItEyOT1AXVKv8PE44aMGtVz +

+
+
+
+
+ +
+ +
+ + +
+ +
+ + } + onClick={[Function]} + subHeading="Pete's Proptech World Ltd" + > +
+
+
+
+
+ asd +
+
+
+ +

+ asd +

+ + +
+ Pete's Proptech World Ltd +
+ +

+ asdQiiAJTmXGxPin7pwUiCsepZWXz1EJS71eGlvgPKH4hpE6J8DRDpzP2kDdOwpQPr4aHCCwWwxBJwzARLa7wMpJh5J61GhmQjLfKZkcDd47L9WEfQYVYAj0DTPJP0BuUMAAg2 +

+
+
+
+
+ +
+ +
+ +
+ + + +
+ + + +
+ +
+ + + + + + + + +`; + +exports[`InstalledApps should match a snapshot when LOADING true 1`] = ` + + + + + +
+
+
+
+
+
+ + + + + +`; diff --git a/packages/marketplace/src/components/pages/installed-apps/__tests__/installed-apps.test.tsx b/packages/marketplace/src/components/pages/installed-apps/__tests__/installed-apps.test.tsx new file mode 100644 index 0000000000..62f3c239db --- /dev/null +++ b/packages/marketplace/src/components/pages/installed-apps/__tests__/installed-apps.test.tsx @@ -0,0 +1,70 @@ +import * as React from 'react' +import { mount } from 'enzyme' +import { appDetailDataStub } from '@/sagas/__stubs__/app-detail' +import { appsDataStub } from '@/sagas/__stubs__/apps' +import routes from '@/constants/routes' +import { InstalledApps, handleOnChange, handleOnCardClick } from '../installed-apps' +import { handleLaunchApp } from '../../../../utils/launch-app' +import configureStore from 'redux-mock-store' +import { Provider } from 'react-redux' +import { MemoryRouter } from 'react-router' +import Routes from '@/constants/routes' +import appState from '@/reducers/__stubs__/app-state' + +jest.mock('../../../../utils/launch-app') + +const createState = loading => { + return { + ...appState, + installedApps: { + loading: loading, + installedAppsData: appsDataStub, + }, + } +} + +describe('InstalledApps', () => { + it('should match a snapshot when LOADING false', () => { + const mockStore = configureStore() + const store = mockStore(createState(false)) + + expect( + mount( + + + + + , + ), + ).toMatchSnapshot() + }) + + it('should match a snapshot when LOADING true', () => { + const mockStore = configureStore() + const store = mockStore(createState(true)) + expect( + mount( + + + + + , + ), + ).toMatchSnapshot() + }) + + it('handleOnChange', () => { + const mockHistory = { + push: jest.fn(), + } + const fn = handleOnChange(mockHistory) + fn(1) + expect(mockHistory.push).toBeCalledWith(`${routes.INSTALLED_APPS}/${1}`) + }) + + it('handleOnCardClick should call handleLaunchApp', () => { + handleOnCardClick(appDetailDataStub.data) + expect(handleLaunchApp).toHaveBeenCalledTimes(1) + expect(handleLaunchApp).toHaveBeenCalledWith(appDetailDataStub.data) + }) +}) diff --git a/packages/marketplace/src/components/pages/installed-apps/index.ts b/packages/marketplace/src/components/pages/installed-apps/index.ts new file mode 100644 index 0000000000..3213722dce --- /dev/null +++ b/packages/marketplace/src/components/pages/installed-apps/index.ts @@ -0,0 +1,2 @@ +import InstalledApps from './installed-apps' +export default InstalledApps diff --git a/packages/marketplace/src/components/pages/installed-apps.tsx b/packages/marketplace/src/components/pages/installed-apps/installed-apps.tsx similarity index 59% rename from packages/marketplace/src/components/pages/installed-apps.tsx rename to packages/marketplace/src/components/pages/installed-apps/installed-apps.tsx index bb2254fd80..ac9000e701 100644 --- a/packages/marketplace/src/components/pages/installed-apps.tsx +++ b/packages/marketplace/src/components/pages/installed-apps/installed-apps.tsx @@ -1,30 +1,26 @@ import * as React from 'react' -import { compose } from 'redux' -import { connect } from 'react-redux' -import { withRouter, RouteComponentProps, Redirect } from 'react-router' -import { ReduxState } from '@/types/core' -import { InstalledAppsState } from '@/reducers/installed-apps' +import { useSelector } from 'react-redux' +import { Redirect, useHistory, useParams } from 'react-router' import { Loader } from '@reapit/elements' import ErrorBoundary from '@/components/hocs/error-boundary' import routes from '@/constants/routes' import InstalledAppList from '@/components/ui/installed-app-list' import { AppSummaryModel } from '@reapit/foundations-ts-definitions' -import { handleLaunchApp } from '../../utils/launch-app' +import { handleLaunchApp } from '@/utils/launch-app' import { getParamsFromPath } from '@/utils/client-url-params' import Routes from '@/constants/routes' - -export interface InstalledAppsMappedProps { - installedAppsState: InstalledAppsState -} - -export type InstalledAppsProps = InstalledAppsMappedProps & RouteComponentProps<{ page?: any }> +import { selectInstalledApps } from '@/selector/client' export const handleOnChange = history => (page: number) => history.push(`${routes.INSTALLED_APPS}/${page}`) export const handleOnCardClick = (app: AppSummaryModel) => handleLaunchApp(app) -export const InstalledApps: React.FC = ({ installedAppsState, match, history }) => { - const pageNumber = match.params && !isNaN(match.params.page) ? Number(match.params.page) : 1 +export const InstalledApps: React.FC = () => { + const history = useHistory() + const installedAppsState = useSelector(selectInstalledApps) + const { page } = useParams() + + const pageNumber = page ? Number(page) : 1 const unfetched = !installedAppsState.installedAppsData const loading = installedAppsState.loading const list = installedAppsState?.installedAppsData?.data?.data || [] @@ -59,10 +55,4 @@ export const InstalledApps: React.FC = ({ installedAppsState ) } -export const mapStateToProps = (state: ReduxState): InstalledAppsMappedProps => ({ - installedAppsState: state.installedApps, -}) -const withRedux = connect(mapStateToProps, null) -const EnhancedInstalledApps = compose(withRouter, withRedux)(InstalledApps) -EnhancedInstalledApps.displayName = 'EnhancedInstalledApps' -export default EnhancedInstalledApps +export default InstalledApps diff --git a/packages/marketplace/src/selector/__tests__/client.ts b/packages/marketplace/src/selector/__tests__/client.ts index 0a0bbb2f20..2fcb457777 100644 --- a/packages/marketplace/src/selector/__tests__/client.ts +++ b/packages/marketplace/src/selector/__tests__/client.ts @@ -9,8 +9,8 @@ import { selectIsWebComponentUpdating, selectIsWebComponentNegotiators, selectAppDetail, + selectInstalledApps, } from '../client' - import { featuredAppsDataStub } from '@/sagas/__stubs__/apps' describe('selectClientId', () => { @@ -86,6 +86,14 @@ describe('selectFeaturedApps', () => { expect(result).toEqual([]) }) + it('should selectInstalledApps run correctly and return true', () => { + const input = { + installedApps: {}, + } as ReduxState + const result = selectInstalledApps(input) + expect(result).toEqual({}) + }) + it('should selectIsWebComponentOpen run correctly and return true', () => { const input = { client: { diff --git a/packages/marketplace/src/selector/client.ts b/packages/marketplace/src/selector/client.ts index 08a6929928..64bb5905fa 100644 --- a/packages/marketplace/src/selector/client.ts +++ b/packages/marketplace/src/selector/client.ts @@ -16,6 +16,10 @@ export const selectFeaturedApps = (state: ReduxState) => { return state?.client.appSummary.data?.featuredApps || [] } +export const selectInstalledApps = (state: ReduxState) => { + return state?.installedApps +} + export const selectIsWebComponentOpen = (state: ReduxState) => { return state?.client.webComponent?.isShowModal } diff --git a/packages/marketplace/src/tests/badges/badge-branches.svg b/packages/marketplace/src/tests/badges/badge-branches.svg index 0f38be5f03..aef91fb6ec 100644 --- a/packages/marketplace/src/tests/badges/badge-branches.svg +++ b/packages/marketplace/src/tests/badges/badge-branches.svg @@ -1 +1 @@ -Coverage:branchesCoverage:branches71.55%71.55% +Coverage:branchesCoverage:branches71.56%71.56% \ 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 52236145f5..f24ba06679 100644 --- a/packages/marketplace/src/tests/badges/badge-functions.svg +++ b/packages/marketplace/src/tests/badges/badge-functions.svg @@ -1 +1 @@ -Coverage:functionsCoverage:functions78.5%78.5% +Coverage:functionsCoverage:functions78.8%78.8% \ 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 180c7054e3..efba3ac894 100644 --- a/packages/marketplace/src/tests/badges/badge-lines.svg +++ b/packages/marketplace/src/tests/badges/badge-lines.svg @@ -1 +1 @@ -Coverage:linesCoverage:lines90.29%90.29% +Coverage:linesCoverage:lines90.43%90.43% \ 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 4ae381034a..f8e0ddd6de 100644 --- a/packages/marketplace/src/tests/badges/badge-statements.svg +++ b/packages/marketplace/src/tests/badges/badge-statements.svg @@ -1 +1 @@ -Coverage:statementsCoverage:statements89.51%89.51% +Coverage:statementsCoverage:statements89.64%89.64% \ No newline at end of file