merge chart-view from master, implement in component

component/charts/bar-graph/bar-graph.tsx

@@ -8,7 +8,8 @@ import { GraphData, YAxisProps } from '../graph-types';
 
 import { CustomBars } from '../custom-bars';
 import { CustomGrid } from '../custom-grid';
-import { graphStyles } from '../../../styles';
+import { graphStyles } from '../chart-styles';
+import ChartView from '../chart-view';
 
 interface Props {
   data: GraphData;
@@ -57,6 +58,7 @@ export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, testID
   
 
   return (
+    <ChartView>
       <View style={[graphStyles.rowContainer, { height: height }]} testID={`bar-graph-${testID}`}>
         <YAxis
           data={yAxisLeftLabels.values}
@@ -104,6 +106,7 @@ export const BarGraph: React.FC<Props> = ({ data, useCommonScale = false, testID
           formatLabel={formatRightYAxisLabel}
         />
       </View>
+      </ChartView>
   );
 };
 

component/charts/chart-styles.ts

@@ -0,0 +1,23 @@
+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
+  },
+  rowContainer: { flexDirection: 'row', padding: 10 },
+  flex: { flex: 1 },
+  yAxisLeftPadding: { paddingRight: 3 },
+  yAxisRightPadding: { paddingLeft: 3 },
+  yAxisFontStyle: { fontSize: 10, fill: 'grey' },
+  xAxisFontStyle: { fontSize: 12, fill: 'black' },
+  xAxisMarginTop: { marginTop: -15 }
+});

component/charts/chart-view.tsx

@@ -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;

styles.ts

@@ -1,4 +1,3 @@
-import { StyleSheet } from 'react-native';
 // GLOBAL STYLES
 // COLORS:
 // can be made more granular to specify utility (ex: fontColors vs backgroundColors)
@@ -25,24 +24,3 @@ export const shadows = {
     elevation: 3
   },
 };
-
-export const graphStyles = StyleSheet.create({
-  container: {
-    backgroundColor: colors.panelWhite,
-    borderColor: 'black',
-    borderRadius: 5,
-    marginVertical: 10,
-    marginHorizontal: 15,
-    paddingTop: 15,
-    paddingHorizontal: 15,
-    ...shadows.standard
-  },
-  rowContainer: { flexDirection: 'row', padding: 10 },
-  flex: { flex: 1 },
-  yAxisLeftPadding: { paddingRight: 3 },
-  yAxisRightPadding: { paddingLeft: 3 },
-  yAxisFontStyle: { fontSize: 10, fill: 'grey' },
-  xAxisFontStyle: { fontSize: 12, fill: 'black' },
-  xAxisMarginTop: { marginTop: -15 }
-});
-

test/component/chart-view.test.tsx

@@ -0,0 +1,31 @@
+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');
+    expect(childText).toBeTruthy();
+  });
+});