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
new file mode 100644
index 0000000000..8ccf4af89d
--- /dev/null
+++ b/packages/marketplace/src/components/pages/client-app-detail/__test__/__snapshots__/app-content.test.tsx.snap
@@ -0,0 +1,211 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AppContent AppContent - should match snapshot 1`] = `
+
+
+
+
+ Description
+
+
+
+
+
+ Permission Required
+
+
+
+
+
+ Destop Integration
+
+
+ Identity Check
+
+
+ Property Marketing Information
+
+
+ Vendor Marketing Report
+
+
+ Property Details Generation
+
+
+ Applicant Export
+
+
+ Property
+
+
+ Applicant
+
+
+
+ TBC
+
+
+
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam aliquid culpa saepe asperiores debitis illo dolorum dolore incidunt officiis praesentium, nemo similique veritatis exercitationem perferendis non mollitia animi laboriosam perspiciatis.
+
+
+
+
+ NEED HELP?
+
+
+
+
+ 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`] = `
+
+
+
+ Description
+
+
+
+
+
+
+ Destop Integration
+
+
+ Identity Check
+
+
+ Property Marketing Information
+
+
+ Vendor Marketing Report
+
+
+ Property Details Generation
+
+
+ Applicant Export
+
+
+ Property
+
+
+ Applicant
+
+
+
+
+
+ Permission Required
+
+
+ -
+ Read data about developers
+
+ -
+ Write data about developers
+
+
+
+
-
-
+
-
-
- Installed
-
-
+ Uninstall App
+
+
}
>
-
+
+
+
-
+
+
+
+
+
+
+
+
+
+ Verified by Reapit
+
-
-
-
-
-
-
-
-
+
+
-
+
+
-
-
+
+
+
+
+
+ Description
+
-
+
+
-
+
+
+
+ Permission Required
+
+
+
+
+
+
+
+
+ Developer
+
+
+ TBC
+
+
+
+
+
+
+ About Developer
+
+
+
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam aliquid culpa saepe asperiores debitis illo dolorum dolore incidunt officiis praesentium, nemo similique veritatis exercitationem perferendis non mollitia animi laboriosam perspiciatis.
+
+
+
+
+
+
+ Contact Developer
+
+
+
+
+
+
+
+
{result}
)
+ expect(wrapper).toMatchSnapshot()
+ })
+ test('renderDescripion - should match snapshot', () => {
+ const result = renderDescripion(appDetailDataStub.data.description as string)
+ const wrapper = shallow({result}
)
+ expect(wrapper).toMatchSnapshot()
+ })
+ test('renderDesktopIntegrationTypes - should match snapshot', () => {
+ const result = renderDesktopIntegrationTypes(integrationTypesStub.data as DesktopIntegrationTypeModel[])
+ const wrapper = shallow({result}
)
+ expect(wrapper).toMatchSnapshot()
+ })
+ test('renderExtraMedia - should match snapshot', () => {
+ const result = renderExtraMedia(appDetailDataStub.data.media)
+ const wrapper = shallow({result}
)
+ expect(wrapper).toMatchSnapshot()
+ })
+ test('renderPermissions - should match snapshot', () => {
+ const result = renderPermissions(appDetailDataStub.data.scopes)
+ 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(
+ ,
+ )
+ expect(wrapper).toMatchSnapshot()
+ })
+})
diff --git a/packages/marketplace/src/components/pages/client-app-detail/__test__/app-header.text.tsx b/packages/marketplace/src/components/pages/client-app-detail/__test__/app-header.text.tsx
new file mode 100644
index 0000000000..5f5e5b64e2
--- /dev/null
+++ b/packages/marketplace/src/components/pages/client-app-detail/__test__/app-header.text.tsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import AppHeader, { VerifiedByReapit } from '../app-header'
+
+import { appDetailDataStub } from '@/sagas/__stubs__/app-detail'
+import { shallow } from 'enzyme'
+import { AppDetailModel } from '@reapit/foundations-ts-definitions'
+
+describe('AppHeader', () => {
+ test('VerifiedByReapit - should match snapshot', () => {
+ const wrapper = shallow()
+ expect(wrapper).toMatchSnapshot()
+ })
+ test('AppHeader - should match snapshot', () => {
+ const wrapper = shallow()
+ expect(wrapper).toMatchSnapshot()
+ })
+})
diff --git a/packages/marketplace/src/components/pages/client-app-detail/__test__/client-app-detail.test.tsx b/packages/marketplace/src/components/pages/client-app-detail/__test__/client-app-detail.test.tsx
index 77027721bc..92d9aca2cf 100644
--- a/packages/marketplace/src/components/pages/client-app-detail/__test__/client-app-detail.test.tsx
+++ b/packages/marketplace/src/components/pages/client-app-detail/__test__/client-app-detail.test.tsx
@@ -36,30 +36,28 @@ describe('ClientAppDetail', () => {
const mockAppId = 'test'
const mockInstalledOn = '2020-2-20'
it('should match snapshot', () => {
- const wrapper = shallow({renderAppHeaderButtonGroup(mockAppId, mockInstalledOn, jest.fn())}
)
+ const wrapper = shallow({renderAppHeaderButtonGroup(mockAppId, mockInstalledOn, jest.fn(), jest.fn())}
)
expect(wrapper).toMatchSnapshot()
})
it('should render header button group when appId is existed', () => {
- const testRenderer = TestRenderer.create(renderAppHeaderButtonGroup(mockAppId, mockInstalledOn, jest.fn()))
+ const testRenderer = TestRenderer.create(
+ renderAppHeaderButtonGroup(mockAppId, mockInstalledOn, jest.fn(), jest.fn()),
+ )
const testInstance = testRenderer.root
expect(testInstance.children.length).toBe(1)
})
it('should render install app button if installedOn is empty', () => {
- const testRenderer = TestRenderer.create(renderAppHeaderButtonGroup(mockAppId, '', jest.fn()))
+ const testRenderer = TestRenderer.create(renderAppHeaderButtonGroup(mockAppId, '', jest.fn(), jest.fn()))
const testInstance = testRenderer.root
expect(testInstance.findByType(Button).props.children).toBe('Install App')
})
- it('should render installed label if installedOn is existed', () => {
- const testRenderer = TestRenderer.create(renderAppHeaderButtonGroup(mockAppId, mockInstalledOn, jest.fn()))
+ it('should render uninstall app button if installedOn is existed', () => {
+ const testRenderer = TestRenderer.create(renderAppHeaderButtonGroup(mockAppId, 'exist', jest.fn(), jest.fn()))
const testInstance = testRenderer.root
- expect(
- testInstance.findByProps({
- id: 'installed-label-container',
- }).children.length,
- ).toBeGreaterThan(0)
+ expect(testInstance.findByType(Button).props.children).toBe('Uninstall App')
})
it('should not render header button group when appId is empty', () => {
- const testRenderer = TestRenderer.create(renderAppHeaderButtonGroup('', mockInstalledOn, jest.fn()))
+ const testRenderer = TestRenderer.create(renderAppHeaderButtonGroup('', mockInstalledOn, jest.fn(), jest.fn()))
const testInstance = testRenderer.getInstance
expect(testInstance).toHaveLength(0)
})
diff --git a/packages/marketplace/src/components/pages/client-app-detail/app-content.tsx b/packages/marketplace/src/components/pages/client-app-detail/app-content.tsx
new file mode 100644
index 0000000000..057a701bc5
--- /dev/null
+++ b/packages/marketplace/src/components/pages/client-app-detail/app-content.tsx
@@ -0,0 +1,118 @@
+import * as React from 'react'
+import { H5, HTMLRender, Button } from '@reapit/elements'
+import { CategoryModel, DesktopIntegrationTypeModel } from '@reapit/foundations-ts-definitions'
+import styles from '@/styles/blocks/app-detail.scss?mod'
+import { ScopeModel, MediaModel } from '@reapit/foundations-ts-definitions'
+import '@/styles/vendor/slick.scss'
+import clientAppDetailStyles from '@/styles/pages/client-app-detail.scss?mod'
+
+import { AppDetailDataNotNull } from '@/reducers/client/app-detail'
+
+export type AppContentProps = {
+ appDetailData: AppDetailDataNotNull
+ desktopIntegrationTypes: DesktopIntegrationTypeModel[]
+}
+
+export const Tag = ({ children }) => {children}
+
+export const renderDescripion = (description: string) => (
+
+
Description
+
+
+)
+
+export const renderPermissions = (scopes: ScopeModel[] = []) => (
+
+
Permission Required
+
+ {scopes.map(scope => (
+ - {scope?.description}
+ ))}
+
+
+
Category
+ {category.name}
+
+ )
+}
+
+export const renderDesktopIntegrationTypes = (desktopIntegrationTypes: DesktopIntegrationTypeModel[]) => {
+ if (desktopIntegrationTypes.length === 0) {
+ return undefined
+ }
+
+ return (
+
+
Destop Integration
+ {desktopIntegrationTypes.map(({ name }) => (
+ {name}
+ ))}
+
+ )
+}
+
+export const RenderWithHeader: React.FC<{ header: string }> = ({ header, children }) => (
+
+
{header}
+ {children}
+
+)
+
+export const renderExtraMedia = (media: MediaModel[] = []) =>
+ media.map(({ uri }) => (
+
+
+
+
{summary}
+ {renderDescripion(description)}
+ {summary &&
{summary}
}
+ {media[0] &&
}
+ {renderPermissions(scopes)}
+ {renderExtraMedia(extraMedia)}
+ {renderCategory(category)}
+ {renderDesktopIntegrationTypes(desktopIntegrationTypes)}
+
TBC
+
+
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit. Magnam aliquid culpa saepe asperiores debitis illo
+ dolorum dolore incidunt officiis praesentium, nemo similique veritatis exercitationem perferendis non mollitia
+ animi laboriosam perspiciatis.
+
+
+
+
+
+
+
{appName}
+
+ Verified by Reapit
+
+
+
+
+
+
+
+
+ {buttonGroup}
+
+
+
+
+
+
{installedOn ? (
-
-
- Installed
-
+
) : (
+ 
+ 
+