chart-view, styles and tests
This commit is contained in:
parent
4e3a93f126
commit
f14ba0e97f
16
component/charts/chart-styles.ts
Normal file
16
component/charts/chart-styles.ts
Normal file
@ -0,0 +1,16 @@
|
|||||||
|
import { StyleSheet } from 'react-native';
|
||||||
|
|
||||||
|
import { colors, shadows } from '../../styles';
|
||||||
|
|
||||||
|
export const graphStyles = StyleSheet.create({
|
||||||
|
container: {
|
||||||
|
backgroundColor: colors.panelWhite,
|
||||||
|
borderColor: 'black',
|
||||||
|
borderRadius: 5,
|
||||||
|
marginVertical: 10,
|
||||||
|
marginHorizontal: 15,
|
||||||
|
paddingTop: 15,
|
||||||
|
paddingHorizontal: 15,
|
||||||
|
...shadows.standard
|
||||||
|
},
|
||||||
|
});
|
17
component/charts/chart-view.tsx
Normal file
17
component/charts/chart-view.tsx
Normal file
@ -0,0 +1,17 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { StyleProp, View, ViewStyle } from 'react-native';
|
||||||
|
|
||||||
|
import { graphStyles } from './chart-styles';
|
||||||
|
|
||||||
|
interface ChartViewProps {
|
||||||
|
style?: StyleProp<ViewStyle>;
|
||||||
|
children: React.ReactNode;
|
||||||
|
testID?: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
// ChartView functional component with margin props
|
||||||
|
const ChartView: React.FC<ChartViewProps> = ({ children, style, testID }) => {
|
||||||
|
return <View style={[graphStyles.container, style]} testID={testID} >{children}</View>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ChartView;
|
13
styles.ts
13
styles.ts
@ -8,3 +8,16 @@ export const colors = {
|
|||||||
buttonBlue: '#1987ff',
|
buttonBlue: '#1987ff',
|
||||||
textWhite: '#ffffff'
|
textWhite: '#ffffff'
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const shadows = {
|
||||||
|
standard: {
|
||||||
|
shadowColor: '#000000',
|
||||||
|
shadowOffset: {
|
||||||
|
width: 0,
|
||||||
|
height: 3
|
||||||
|
},
|
||||||
|
shadowOpacity: 0.1,
|
||||||
|
shadowRadius: 4.65,
|
||||||
|
elevation: 3
|
||||||
|
},
|
||||||
|
};
|
32
test/component/chart-view.test.tsx
Normal file
32
test/component/chart-view.test.tsx
Normal file
@ -0,0 +1,32 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import { Text } from 'react-native'
|
||||||
|
import { render } from '@testing-library/react-native';
|
||||||
|
import "@testing-library/jest-native/extend-expect";
|
||||||
|
|
||||||
|
import ChartView from '../../component/charts/chart-view';
|
||||||
|
|
||||||
|
describe('ChartView Component Tests', () => {
|
||||||
|
it('applies the passed style prop correctly', () => {
|
||||||
|
const testStyle = { backgroundColor: 'blue', padding: 10 };
|
||||||
|
const { getByTestId } = render(
|
||||||
|
<ChartView style={testStyle} testID="chart-view">
|
||||||
|
<Text>Test Child</Text>
|
||||||
|
</ChartView>
|
||||||
|
);
|
||||||
|
|
||||||
|
const chartView = getByTestId('chart-view');
|
||||||
|
expect(chartView.props.style).toEqual(expect.arrayContaining([testStyle]));
|
||||||
|
});
|
||||||
|
|
||||||
|
it('renders children correctly', () => {
|
||||||
|
const { getByText } = render(
|
||||||
|
<ChartView>
|
||||||
|
<Text testID="child-text">Child Component</Text>
|
||||||
|
</ChartView>
|
||||||
|
);
|
||||||
|
|
||||||
|
const childText = getByText('Child Component');
|
||||||
|
console.log(childText)
|
||||||
|
expect(childText).toBeTruthy();
|
||||||
|
});
|
||||||
|
});
|
Loading…
Reference in New Issue
Block a user