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:
commit
f0b9f8043b
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
|
||||
},
|
||||
});
|
16
component/charts/chart-view.tsx
Normal file
16
component/charts/chart-view.tsx
Normal 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;
|
13
styles.ts
13
styles.ts
@ -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
|
||||
},
|
||||
};
|
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