From c0040a44480ac3f74adc006cf85ef26c00313982 Mon Sep 17 00:00:00 2001 From: undefined Date: Wed, 20 May 2020 20:32:52 +0700 Subject: [PATCH 1/8] feat: #1210 ui for developer side standalone --- .../client-app-detail-manage.tsx | 2 +- .../__snapshots__/app-content.test.tsx.snap | 15 - .../client-app-detail.test.tsx.snap | 99 +- .../__test__/app-content.test.tsx | 10 - .../pages/client-app-detail/app-content.tsx | 11 +- .../client-app-detail/client-app-detail.tsx | 10 +- .../__snapshots__/app-content.test.tsx.snap | 7486 +++++++++++++++++ .../__snapshots__/aside.test.tsx.snap | 211 + .../developer-app-detail.test.tsx.snap | 158 +- .../__test__/app-content.test.tsx | 101 + .../__test__/aside.test.tsx | 57 + .../developer-app-detail/app-content.tsx | 131 + .../render-with-header.test.tsx.snap | 12 + .../app-detail/__test__/app-header.text.tsx | 17 + .../__test__/render-with-header.test.tsx | 8 + .../app-detail/__test__/tag.tsx | 8 + .../__snapshots__/app-content.test.tsx.snap | 169 + .../app-content/__test__/app-content.test.tsx | 136 + .../app-detail/app-content/app-content.tsx | 167 + .../app-detail/app-content/index.ts | 2 + .../app-detail}/app-header.tsx | 0 .../app-detail/render-with-header.tsx | 14 + .../developer-app-detail/app-detail/tag.tsx | 4 + .../pages/developer-app-detail/aside.tsx | 114 + .../developer-app-detail.tsx | 40 +- .../app-authentication-detail.tsx.snap | 4 +- .../ui/app-authentication-detail.tsx | 6 +- .../__snapshots__/confirm-uninstall.tsx.snap | 14 +- .../__tests__/confirm-uninstall.tsx | 8 +- .../app-installations-modal.tsx | 10 +- .../app-installations/confirm-uninstall.tsx | 26 +- .../ui/app-installations/installations.tsx | 2 +- .../app-revision-comparision.tsx | 8 +- .../developer-app-revision-modal.test.tsx | 9 +- .../developer-app-revision-modal.tsx | 3 +- .../src/sagas/apps/__test__/apps.test.ts | 16 +- packages/marketplace/src/sagas/apps/apps.ts | 2 + .../marketplace/src/selector/installations.ts | 4 + .../marketplace/src/styles/base/colors.scss | 1 + .../styles/blocks/developer-app-detail.scss | 10 + .../pages/client-app-detail-manage.scss | 20 + .../src/styles/pages/client-app-detail.scss | 14 +- .../styles/pages/developer-app-detail.scss | 62 +- .../utils/__tests__/boolean-to-yes-no.test.ts | 9 + .../src/utils/boolean-to-yes-no.tsx | 7 + .../marketplace/src/utils/route-dispatcher.ts | 12 + 46 files changed, 8914 insertions(+), 315 deletions(-) create mode 100644 packages/marketplace/src/components/pages/developer-app-detail/__test__/__snapshots__/app-content.test.tsx.snap create mode 100644 packages/marketplace/src/components/pages/developer-app-detail/__test__/__snapshots__/aside.test.tsx.snap create mode 100644 packages/marketplace/src/components/pages/developer-app-detail/__test__/app-content.test.tsx create mode 100644 packages/marketplace/src/components/pages/developer-app-detail/__test__/aside.test.tsx create mode 100644 packages/marketplace/src/components/pages/developer-app-detail/app-content.tsx create mode 100644 packages/marketplace/src/components/pages/developer-app-detail/app-detail/__test__/__snapshots__/render-with-header.test.tsx.snap create mode 100644 packages/marketplace/src/components/pages/developer-app-detail/app-detail/__test__/app-header.text.tsx create mode 100644 packages/marketplace/src/components/pages/developer-app-detail/app-detail/__test__/render-with-header.test.tsx create mode 100644 packages/marketplace/src/components/pages/developer-app-detail/app-detail/__test__/tag.tsx create mode 100644 packages/marketplace/src/components/pages/developer-app-detail/app-detail/app-content/__test__/__snapshots__/app-content.test.tsx.snap create mode 100644 packages/marketplace/src/components/pages/developer-app-detail/app-detail/app-content/__test__/app-content.test.tsx create mode 100644 packages/marketplace/src/components/pages/developer-app-detail/app-detail/app-content/app-content.tsx create mode 100644 packages/marketplace/src/components/pages/developer-app-detail/app-detail/app-content/index.ts rename packages/marketplace/src/components/pages/{client-app-detail => developer-app-detail/app-detail}/app-header.tsx (100%) create mode 100644 packages/marketplace/src/components/pages/developer-app-detail/app-detail/render-with-header.tsx create mode 100644 packages/marketplace/src/components/pages/developer-app-detail/app-detail/tag.tsx create mode 100644 packages/marketplace/src/components/pages/developer-app-detail/aside.tsx create mode 100644 packages/marketplace/src/styles/blocks/developer-app-detail.scss create mode 100644 packages/marketplace/src/styles/pages/client-app-detail-manage.scss create mode 100644 packages/marketplace/src/utils/__tests__/boolean-to-yes-no.test.ts create mode 100644 packages/marketplace/src/utils/boolean-to-yes-no.tsx diff --git a/packages/marketplace/src/components/pages/client-app-detail-manage/client-app-detail-manage.tsx b/packages/marketplace/src/components/pages/client-app-detail-manage/client-app-detail-manage.tsx index 436d5b7013..9c4854b89e 100644 --- a/packages/marketplace/src/components/pages/client-app-detail-manage/client-app-detail-manage.tsx +++ b/packages/marketplace/src/components/pages/client-app-detail-manage/client-app-detail-manage.tsx @@ -6,7 +6,7 @@ import AppHeader from '@/components/ui/app-detail/app-header' import AppContent from '@/components/ui/app-detail/app-content' import { Loader, Button } from '@reapit/elements' -import styles from '@/styles/pages/developer-app-detail.scss?mod' +import styles from '@/styles/pages/client-app-detail-manage.scss?mod' import ClientAppUninstallConfirmation from '@/components/ui/client-app-detail/client-app-uninstall-confirmation' export type ClientAppDetailManageProps = {} diff --git a/packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/app-content.test.tsx.snap b/packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/app-content.test.tsx.snap index 8ccf4af89d..c23ad472aa 100644 --- a/packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/app-content.test.tsx.snap +++ b/packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/app-content.test.tsx.snap @@ -82,21 +82,6 @@ exports[`AppContent AppContent - should match snapshot 1`] = ` `; -exports[`AppContent RenderWithHeader - should match snapshot 1`] = ` -
- - test - - some text -
-`; - -exports[`AppContent Tag - should match snapshot 1`] = ` -
- Test -
-`; - exports[`AppContent renderCategory - should match snapshot 1`] = `
`; exports[`AppContent renderDescripion - should match snapshot 1`] = ` diff --git a/packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/client-app-detail.test.tsx.snap b/packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/client-app-detail.test.tsx.snap index 17ab739451..6014c81e42 100644 --- a/packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/client-app-detail.test.tsx.snap +++ b/packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/client-app-detail.test.tsx.snap @@ -166,7 +166,6 @@ exports[`ClientAppDetail should not render loader when client.appDetail.data is >
} > -
+
-
- -
-
-
- -

- -
- - - - - - - - Verified by Reapit -
+

- -
+
+ + +
+ +

+ +

+
- -
+ -
+
-
+
-
+
{ const wrapper = shallow(
{result}
) expect(wrapper).toMatchSnapshot() }) - test('RenderWithHeader - should match snapshot', () => { - const wrapper = shallow(some text) - expect(wrapper).toMatchSnapshot() - }) - test('Tag - should match snapshot', () => { - const wrapper = shallow(Test) - expect(wrapper).toMatchSnapshot() - }) test('AppContent - should match snapshot', () => { const wrapper = shallow(
{children}
- export const renderDescripion = (description: string) => (
Description
@@ -61,13 +61,6 @@ export const renderDesktopIntegrationTypes = (desktopIntegrationTypes: DesktopIn ) } -export const RenderWithHeader: React.FC<{ header: string }> = ({ header, children }) => ( -
-
{header}
- {children} -
-) - export const renderExtraMedia = (media: MediaModel[] = []) => media.map(({ uri }) => (
diff --git a/packages/marketplace/src/components/pages/client-app-detail/client-app-detail.tsx b/packages/marketplace/src/components/pages/client-app-detail/client-app-detail.tsx index b4efa77335..830f6c3f9b 100644 --- a/packages/marketplace/src/components/pages/client-app-detail/client-app-detail.tsx +++ b/packages/marketplace/src/components/pages/client-app-detail/client-app-detail.tsx @@ -10,20 +10,14 @@ import { selectIntegrationTypes } from '@/selector/integration-types' import { useSelector } from 'react-redux' import { selectAppDetailData, selectAppDetailLoading } from '@/selector/client-app-detail' import { selectLoginType, selectIsAdmin } from '@/selector/auth' -import AppHeader from './app-header' +import AppHeader from '@/components/ui/app-detail/app-header' import AppContent from './app-content' import { Loader, Button } from '@reapit/elements' -import developerAppDetailStyles from '@/styles/pages/developer-app-detail.scss?mod' import clientAppDetailStyles from '@/styles/pages/client-app-detail.scss?mod' import ClientAppInstallConfirmation from '@/components/ui/client-app-detail/client-app-install-confirmation' export type ClientAppDetailProps = {} -const appDetailContainerClassNames = [ - clientAppDetailStyles.appDetailContainer, - developerAppDetailStyles.appDetailContainer, -].join(' ') - export const handleCloseInstallConfirmationModal = (setIsVisibleInstallConfirmation: (isVisible: boolean) => void) => { return () => { setIsVisibleInstallConfirmation(false) @@ -107,7 +101,7 @@ const ClientAppDetail: React.FC = () => { } return ( -
+
+ +
+ +
+
+ +
+ + See listing preview + + + + + + + + + +
+ +

+ The listing preview will display your app as it would appear in the Marketplace +

+
+ +
+ +
+ Authentication +
+ +
+

+ Client ID: +

+

+

+
+ +
+ +
+ +
+ Installations +
+ + + + + + + + + + + + + + + + + +
+ Client + + Date Installed + + Uninstall +
+ + DXX + + + + 03/12/2019 + + + + + + + +
+ +
+ +
+
+ + +`; + +exports[`AppContent renderAuthentication should render AppAuthenticationDetail when authFlow = AuthFlow.CLIENT_SECRET 1`] = ` + + + +`; + +exports[`AppContent renderAuthentication should render client id when authFlow != AuthFlow.USER_SESSION 1`] = ` +
+
+

+ Client ID: +

+

+ 1 +

+
+
+`; + +exports[`AppContent renderInstallationsTable should run correctly should render empty text when have data 1`] = ` +
+ +
+ +
+ Installations +
+ + + + + +
+ +
+ +
+`; + +exports[`AppContent renderInstallationsTable should run correctly should render table when have have data 1`] = ` +
+ +
+ +
+ Installations +
+ +

+ Currently, there are no installations for your app +

+
+ +
+`; diff --git a/packages/marketplace/src/components/pages/developer-app-detail/__test__/__snapshots__/aside.test.tsx.snap b/packages/marketplace/src/components/pages/developer-app-detail/__test__/__snapshots__/aside.test.tsx.snap new file mode 100644 index 0000000000..cdb15eefa8 --- /dev/null +++ b/packages/marketplace/src/components/pages/developer-app-detail/__test__/__snapshots__/aside.test.tsx.snap @@ -0,0 +1,211 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Aside Aside - should match snapshot 1`] = ` +
+
+
+
+ + Destop Integration + + + Identity Check + + + Property Marketing Information + + + Vendor Marketing Report + + + Property Details Generation + + + Applicant Export + + + Property + + + Applicant + +
+
+ + No + + + No + + + Not Listed + + +
+`; + +exports[`Aside ManageApp - should match snapshot 1`] = ` + + + +
+ + EDIT DETAILS + + + DELETE APP + +
+ +`; + +exports[`Aside renderListedStatus should render listed if isListed = false 1`] = ` +
+ Not Listed +
+`; + +exports[`Aside renderListedStatus should render listed if isListed = true 1`] = ` +
+
+ Listed + +
+
+`; diff --git a/packages/marketplace/src/components/pages/developer-app-detail/__test__/__snapshots__/developer-app-detail.test.tsx.snap b/packages/marketplace/src/components/pages/developer-app-detail/__test__/__snapshots__/developer-app-detail.test.tsx.snap index dfeab951b7..7c9497c6fa 100644 --- a/packages/marketplace/src/components/pages/developer-app-detail/__test__/__snapshots__/developer-app-detail.test.tsx.snap +++ b/packages/marketplace/src/components/pages/developer-app-detail/__test__/__snapshots__/developer-app-detail.test.tsx.snap @@ -73,155 +73,17 @@ exports[`DeveloperAppDetail should match a snapshot 1`] = ` } > -
- - - - } + +
- -
- -
-
- -
-
- - -
- -

- -

- -
- - - - -
- -
-
-

- Developer: -

-

-

-
-

- Client ID: -

-

-

-
-

- Status: -

-

- Not listed -

- - - - - - - -
-
- - -
- - -
- - -
-
- -
- -
- -
- - -
+
+
+
+
+
+ diff --git a/packages/marketplace/src/components/pages/developer-app-detail/__test__/app-content.test.tsx b/packages/marketplace/src/components/pages/developer-app-detail/__test__/app-content.test.tsx new file mode 100644 index 0000000000..5a9ece5e6a --- /dev/null +++ b/packages/marketplace/src/components/pages/developer-app-detail/__test__/app-content.test.tsx @@ -0,0 +1,101 @@ +import React from 'react' +import { InstallationModel } from '@reapit/foundations-ts-definitions' +import { installationsStub } from '@/sagas/__stubs__/installations' +import { shallow, mount } from 'enzyme' +import AuthFlow from '@/constants/app-auth-flow' +import { appInstallationsRequestData } from '@/actions/app-installations' +import { appDetailDataStub } from '@/sagas/__stubs__/app-detail' +import AppContent, { handleUninstallSuccess, renderAuthentication, renderInstallationsTable } from '../app-content' +import { Provider } from 'react-redux' +import { ReduxState } from '@/types/core' +import configureStore from 'redux-mock-store' +import { AppDetailModel } from '@reapit/foundations-ts-definitions' + +const mockState = { + auth: { + loginSession: { + loginIdentity: { + developerId: '1', + }, + }, + }, + installations: { + installationsAppData: installationsStub, + }, + appDetail: { + authentication: { + loading: false, + code: '123', + }, + }, +} as ReduxState + +describe('AppContent', () => { + const mockStore = configureStore() + const store = mockStore(mockState) + + test('AppContent - should match snapshoot', () => { + expect( + mount( + + + , + ), + ).toMatchSnapshot() + }) + + test('handleUninstallSuccess should run correctly', () => { + const mockedHandleUninstallSuccessParams = { + handleAfterClose: jest.fn(), + setUninstallApp: jest.fn(), + developerId: '1', + appId: '2', + dispatch: jest.fn(), + } + + const { appId, developerId, handleAfterClose, dispatch, setUninstallApp } = mockedHandleUninstallSuccessParams + + handleUninstallSuccess(mockedHandleUninstallSuccessParams)() + expect(handleAfterClose).toHaveBeenCalledWith({ setUninstallApp }) + expect(dispatch).toHaveBeenCalledWith( + appInstallationsRequestData({ + appId: [appId], + pageNumber: 1, + pageSize: 15, + isInstalled: true, + developerId: [developerId], + }), + ) + }) + + describe('renderAuthentication', () => { + it('should render AppAuthenticationDetail when authFlow = AuthFlow.CLIENT_SECRET', () => { + const result = renderAuthentication({ authFlow: AuthFlow.CLIENT_SECRET, externalId: '1', id: '1' }) + const wrapper = shallow({result}) + expect(wrapper.find('AppAuthenticationDetailConnect').length).toBe(1) + expect(wrapper).toMatchSnapshot() + }) + it('should render client id when authFlow != AuthFlow.USER_SESSION', () => { + const result = renderAuthentication({ authFlow: AuthFlow.USER_SESSION, externalId: '1', id: '1' }) + const wrapper = shallow(
{result}
) + expect(wrapper.find('[data-test="authentication-client-id"]').length).toBe(1) + expect(wrapper).toMatchSnapshot() + }) + }) + + describe('renderInstallationsTable should run correctly', () => { + it('should render empty text when have data', () => { + const result = renderInstallationsTable({ data: installationsStub.data as InstallationModel[], columns: [] }) + const wrapper = mount(
{result}
) + expect(wrapper.find('[data-test="render-installations-table"]').length).toBe(1) + expect(wrapper).toMatchSnapshot() + }) + it('should render table when have have data', () => { + const result = renderInstallationsTable({ data: [], columns: [] }) + const wrapper = mount(
{result}
) + console.log(wrapper.debug()) + expect(wrapper.find('[data-test="render-installations-table-empty-text"]').length).toBe(1) + expect(wrapper).toMatchSnapshot() + }) + }) +}) diff --git a/packages/marketplace/src/components/pages/developer-app-detail/__test__/aside.test.tsx b/packages/marketplace/src/components/pages/developer-app-detail/__test__/aside.test.tsx new file mode 100644 index 0000000000..8e24244ba9 --- /dev/null +++ b/packages/marketplace/src/components/pages/developer-app-detail/__test__/aside.test.tsx @@ -0,0 +1,57 @@ +import React from 'react' +import { DeveloperAppDetailState } from '@/reducers/developer' +import { Aside, ManageApp, renderListedStatus } from '../aside' +import { shallow } from 'enzyme' +import toJson from 'enzyme-to-json' +import { integrationTypesStub } from '@/sagas/__stubs__/integration-types' +import { appDetailDataStub } from '@/sagas/__stubs__/app-detail' +import { DesktopIntegrationTypeModel } from '@reapit/foundations-ts-definitions' + +jest.mock('react-router', () => ({ + ...jest.requireActual('react-router'), // use actual for all non-hook parts + useHistory: () => ({ push: jest.fn() }), +})) + +describe('Aside', () => { + test('Aside - should match snapshot', () => { + expect( + toJson( + shallow( +