Merge pull request 'ChartView styled component' (#27) from loewy/chart-view into master

Reviewed-on: billnerds/rn-playground#27
Reviewed-by: Kat Huang <kkathuang@gmail.com>
This commit is contained in:
Kat Huang 2024-01-15 15:52:31 -07:00
commit f0b9f8043b
4 changed files with 77 additions and 0 deletions

View 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
},
});

View File

@ -0,0 +1,16 @@
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;
}
const ChartView: React.FC<ChartViewProps> = ({ children, style, testID }) => {
return <View style={[graphStyles.container, style]} testID={testID} >{children}</View>;
};
export default ChartView;

View File

@ -8,3 +8,16 @@ export const colors = {
buttonBlue: '#1987ff',
textWhite: '#ffffff'
};
export const shadows = {
standard: {
shadowColor: '#000000',
shadowOffset: {
width: 0,
height: 3
},
shadowOpacity: 0.1,
shadowRadius: 4.65,
elevation: 3
},
};

View 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();
});
});