Skip to content

Commit

Permalink
feat: adding configuration for details in InfoBox (#1069)
Browse files Browse the repository at this point in the history
  • Loading branch information
@SophiaSales
SophiaSales authored Jan 23, 2024
1 parent 94e231e commit c28329c
Show file tree
Hide file tree
Showing 10 changed files with 170 additions and 103 deletions.
13 changes: 8 additions & 5 deletions packages/legacy/core/App/components/misc/InfoBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { StyleSheet, View, Text, TouchableOpacity, ScrollView, useWindowDimensio
import Icon from 'react-native-vector-icons/MaterialIcons'

import { hitSlop } from '../../constants'
import { useConfiguration } from '../../contexts/configuration'
import { useTheme } from '../../contexts/theme'
import { GenericFn } from '../../types/fn'
import { testIdWithKey } from '../../utils/testable'
Expand Down Expand Up @@ -48,6 +49,7 @@ const InfoBox: React.FC<BifoldErrorProps> = ({
const { t } = useTranslation()
const { TextTheme, ColorPallet } = useTheme()
const [showDetails, setShowDetails] = useState<boolean>(false)
const { showDetailsInfo } = useConfiguration()
const styles = StyleSheet.create({
container: {
backgroundColor: ColorPallet.brand.modalPrimaryBackground,
Expand All @@ -71,6 +73,7 @@ const InfoBox: React.FC<BifoldErrorProps> = ({
},
headerText: {
...TextTheme.normal,
marginLeft: 7,
flexShrink: 1,
fontWeight: 'bold',
alignSelf: 'center',
Expand Down Expand Up @@ -179,12 +182,12 @@ const InfoBox: React.FC<BifoldErrorProps> = ({
return (
<View style={styles.container}>
<View style={styles.headerContainer}>
<View style={[styles.icon]}>
<View style={[styles.icon, { flexDirection: 'row' }]}>
<Icon accessible={false} name={iconName} size={iconSize} color={iconColor} />
<Text style={styles.headerText} testID={testIdWithKey('HeaderText')}>
{title}
</Text>
</View>
<Text style={styles.headerText} testID={testIdWithKey('HeaderText')}>
{title}
</Text>
{onClosePressed && (
<View>
<TouchableOpacity
Expand All @@ -207,7 +210,7 @@ const InfoBox: React.FC<BifoldErrorProps> = ({
{showDetails ? message : description}
</Text>
)}
{message && !showDetails && (
{message && !showDetails && (showDetailsInfo ?? true) && (
<TouchableOpacity
accessibilityLabel={t('Global.ShowDetails')}
testID={testIdWithKey('ShowDetails')}
Expand Down
1 change: 1 addition & 0 deletions packages/legacy/core/App/contexts/configuration.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ export interface ConfigurationContext {
showScanHelp?: boolean
showScanButton?: boolean
globalScreenOptions?: StackNavigationOptions
showDetailsInfo?: boolean
}

export const ConfigurationContext = createContext<ConfigurationContext>(null as unknown as ConfigurationContext)
Expand Down
1 change: 1 addition & 0 deletions packages/legacy/core/App/defaultConfiguration.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,4 +57,5 @@ export const defaultConfiguration: ConfigurationContext = {
whereToUseWalletUrl: 'https://example.com',
showScanHelp: true,
showScanButton: true,
showDetailsInfo: true,
}
10 changes: 10 additions & 0 deletions packages/legacy/core/__tests__/components/InfoBox.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,14 @@ import { render, fireEvent } from '@testing-library/react-native'
import React from 'react'

import InfoBox, { InfoBoxType } from '../../App/components/misc/InfoBox'
import { useConfiguration } from '../../App/contexts/configuration'

const callToAction = jest.fn()

jest.mock('../../App/contexts/configuration', () => ({
useConfiguration: jest.fn(),
}))

describe('ErrorModal Component', () => {
test('Renders correctly as Info', async () => {
const tree = render(
Expand Down Expand Up @@ -90,4 +95,9 @@ describe('ErrorModal Component', () => {

expect(callToAction).toBeCalledTimes(1)
})
beforeEach(() => {
// @ts-ignore-next-line
useConfiguration.mockReturnValue({ showDetailsInfo: true })
jest.clearAllMocks()
})
})
32 changes: 18 additions & 14 deletions packages/legacy/core/__tests__/components/__snapshots__/ErrorModal.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,9 @@ exports[`ErrorModal Component Renders correctly 1`] = `
"alignSelf": "center",
"marginRight": 10,
},
Object {
"flexDirection": "row",
},
]
}
>
Expand All @@ -80,21 +83,22 @@ exports[`ErrorModal Component Renders correctly 1`] = `
>
</Text>
</View>
<Text
style={
Object {
"alignSelf": "center",
"color": "#FFFFFF",
"flexShrink": 1,
"fontSize": 18,
"fontWeight": "bold",
<Text
style={
Object {
"alignSelf": "center",
"color": "#FFFFFF",
"flexShrink": 1,
"fontSize": 18,
"fontWeight": "bold",
"marginLeft": 7,
}
}
}
testID="com.ariesbifold:id/HeaderText"
>
title
</Text>
testID="com.ariesbifold:id/HeaderText"
>
title
</Text>
</View>
</View>
<RCTScrollView
style={
Expand Down
128 changes: 72 additions & 56 deletions packages/legacy/core/__tests__/components/__snapshots__/InfoBox.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,9 @@ exports[`ErrorModal Component Renders correctly as Error 1`] = `
"alignSelf": "center",
"marginRight": 10,
},
Object {
"flexDirection": "row",
},
]
}
>
Expand All @@ -54,21 +57,22 @@ exports[`ErrorModal Component Renders correctly as Error 1`] = `
>
</Text>
</View>
<Text
style={
Object {
"alignSelf": "center",
"color": "#FFFFFF",
"flexShrink": 1,
"fontSize": 18,
"fontWeight": "bold",
<Text
style={
Object {
"alignSelf": "center",
"color": "#FFFFFF",
"flexShrink": 1,
"fontSize": 18,
"fontWeight": "bold",
"marginLeft": 7,
}
}
}
testID="com.ariesbifold:id/HeaderText"
>
Hello Title
</Text>
testID="com.ariesbifold:id/HeaderText"
>
Hello Title
</Text>
</View>
</View>
<RCTScrollView
style={
Expand Down Expand Up @@ -279,6 +283,9 @@ exports[`ErrorModal Component Renders correctly as Info 1`] = `
"alignSelf": "center",
"marginRight": 10,
},
Object {
"flexDirection": "row",
},
]
}
>
Expand All @@ -304,21 +311,22 @@ exports[`ErrorModal Component Renders correctly as Info 1`] = `
>
</Text>
</View>
<Text
style={
Object {
"alignSelf": "center",
"color": "#FFFFFF",
"flexShrink": 1,
"fontSize": 18,
"fontWeight": "bold",
<Text
style={
Object {
"alignSelf": "center",
"color": "#FFFFFF",
"flexShrink": 1,
"fontSize": 18,
"fontWeight": "bold",
"marginLeft": 7,
}
}
}
testID="com.ariesbifold:id/HeaderText"
>
Hello Title
</Text>
testID="com.ariesbifold:id/HeaderText"
>
Hello Title
</Text>
</View>
</View>
<RCTScrollView
style={
Expand Down Expand Up @@ -529,6 +537,9 @@ exports[`ErrorModal Component Renders correctly as Success 1`] = `
"alignSelf": "center",
"marginRight": 10,
},
Object {
"flexDirection": "row",
},
]
}
>
Expand All @@ -554,21 +565,22 @@ exports[`ErrorModal Component Renders correctly as Success 1`] = `
>
</Text>
</View>
<Text
style={
Object {
"alignSelf": "center",
"color": "#FFFFFF",
"flexShrink": 1,
"fontSize": 18,
"fontWeight": "bold",
<Text
style={
Object {
"alignSelf": "center",
"color": "#FFFFFF",
"flexShrink": 1,
"fontSize": 18,
"fontWeight": "bold",
"marginLeft": 7,
}
}
}
testID="com.ariesbifold:id/HeaderText"
>
Hello Title
</Text>
testID="com.ariesbifold:id/HeaderText"
>
Hello Title
</Text>
</View>
</View>
<RCTScrollView
style={
Expand Down Expand Up @@ -779,6 +791,9 @@ exports[`ErrorModal Component Renders correctly as Warning 1`] = `
"alignSelf": "center",
"marginRight": 10,
},
Object {
"flexDirection": "row",
},
]
}
>
Expand All @@ -804,21 +819,22 @@ exports[`ErrorModal Component Renders correctly as Warning 1`] = `
>
</Text>
</View>
<Text
style={
Object {
"alignSelf": "center",
"color": "#FFFFFF",
"flexShrink": 1,
"fontSize": 18,
"fontWeight": "bold",
<Text
style={
Object {
"alignSelf": "center",
"color": "#FFFFFF",
"flexShrink": 1,
"fontSize": 18,
"fontWeight": "bold",
"marginLeft": 7,
}
}
}
testID="com.ariesbifold:id/HeaderText"
>
Hello Title
</Text>
testID="com.ariesbifold:id/HeaderText"
>
Hello Title
</Text>
</View>
</View>
<RCTScrollView
style={
Expand Down
12 changes: 12 additions & 0 deletions packages/legacy/core/__tests__/modals/AlertModal.test.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,23 @@ import { render } from '@testing-library/react-native'
import React from 'react'

import AlertModal from '../../App/components/modals/AlertModal'
import { useConfiguration } from '../../App/contexts/configuration'

jest.mock('../../App/contexts/configuration', () => ({
useConfiguration: jest.fn(),
}))

describe('AlertModal Component', () => {
test('Renders correctly', async () => {
const tree = render(<AlertModal title="Hello" message="World" />)

expect(tree).toMatchSnapshot()
})

beforeEach(() => {
// @ts-ignore-next-line
useConfiguration.mockReturnValue({ showDetailsInfo: true })
jest.clearAllMocks()
})

})
32 changes: 18 additions & 14 deletions packages/legacy/core/__tests__/modals/__snapshots__/AlertModal.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,9 @@ exports[`AlertModal Component Renders correctly 1`] = `
"alignSelf": "center",
"marginRight": 10,
},
Object {
"flexDirection": "row",
},
]
}
>
Expand All @@ -82,21 +85,22 @@ exports[`AlertModal Component Renders correctly 1`] = `
>
</Text>
</View>
<Text
style={
Object {
"alignSelf": "center",
"color": "#FFFFFF",
"flexShrink": 1,
"fontSize": 18,
"fontWeight": "bold",
<Text
style={
Object {
"alignSelf": "center",
"color": "#FFFFFF",
"flexShrink": 1,
"fontSize": 18,
"fontWeight": "bold",
"marginLeft": 7,
}
}
}
testID="com.ariesbifold:id/HeaderText"
>
Hello
</Text>
testID="com.ariesbifold:id/HeaderText"
>
Hello
</Text>
</View>
</View>
<RCTScrollView
style={
Expand Down
Loading

0 comments on commit c28329c

Please sign in to comment.