@hero-design/rn 8.99.4 → 8.100.0

package/src/components/Chart/ColumnChart/__tests__/ColumnChartContent.spec.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { render } from '@testing-library/react-native';
+import Svg from 'react-native-svg';
+import ColumnChartContent from '../ColumnChartContent';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+
+const baseData = [
+  {
+    label: 'Series 1',
+    data: [10, 20, 30],
+  },
+  {
+    label: 'Series 2',
+    data: [5, 15, 25],
+  },
+];
+
+const xAxisConfig = {
+  labels: ['A', 'B', 'C'],
+};
+
+const yAxisConfig = {
+  maxValue: 55,
+  minValue: 0,
+  step: 5,
+  tick: { interval: 5 },
+};
+
+const coordinates = { xStart: 0, xEnd: 100, yStart: 0, yEnd: 200 };
+
+describe('ColumnChartContent', () => {
+  it('renders segments with correct accessibilityLabel and testID', () => {
+    const { getByTestId } = renderWithTheme(
+      <Svg>
+        <ColumnChartContent
+          coordinates={coordinates}
+          data={baseData}
+          xAxisConfig={xAxisConfig}
+          yAxisConfig={yAxisConfig}
+        />
+      </Svg>
+    );
+    // Check a few segments
+    const segmentA1 = getByTestId('column-segment-A-Series 1');
+    expect(segmentA1.props.accessibilityLabel).toContain('value 10');
+    expect(segmentA1.props.accessibilityLabel).toContain('x-label A');
+    expect(segmentA1.props.accessibilityLabel).toContain('series Series 1');
+
+    const segmentB2 = getByTestId('column-segment-B-Series 2');
+    expect(segmentB2.props.accessibilityLabel).toContain('value 15');
+    expect(segmentB2.props.accessibilityLabel).toContain('x-label B');
+    expect(segmentB2.props.accessibilityLabel).toContain('series Series 2');
+  });
+
+  it('renders nothing if data is empty', () => {
+    const { queryByTestId } = render(
+      <Svg>
+        <ColumnChartContent
+          coordinates={coordinates}
+          data={[]}
+          xAxisConfig={xAxisConfig}
+          yAxisConfig={yAxisConfig}
+        />
+      </Svg>
+    );
+    expect(queryByTestId('column-segment-A-Series 1')).toBeNull();
+  });
+});

package/src/components/Chart/ColumnChart/__tests__/Segment.spec.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { Svg } from 'react-native-svg';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import Segment from '../Segment';
+
+describe('Segment', () => {
+  const defaultProps = {
+    xCenter: 50,
+    y: 100,
+    height: 50,
+    color: '#000000',
+    value: 10,
+    xLabel: 'A',
+    seriesLabel: 'Series 1',
+    testID: 'test-segment',
+  };
+
+  it('renders with correct accessibility props', () => {
+    const { getByTestId } = renderWithTheme(
+      <Svg>
+        <Segment {...defaultProps} />
+      </Svg>
+    );
+
+    const segment = getByTestId('test-segment');
+    expect(segment.props.accessibilityLabel).toBe(
+      'Column segment: value 10, x-label A, series Series 1'
+    );
+  });
+
+  it('applies segment gap from theme', () => {
+    const { getByTestId } = renderWithTheme(
+      <Svg>
+        <Segment {...defaultProps} height={100} y={50} />
+      </Svg>
+    );
+
+    const segment = getByTestId('test-segment');
+    // Height should be adjusted by the segment gap
+    expect(segment.props.height).toBeLessThan(100);
+    // Y position should be adjusted by half the segment gap
+    expect(segment.props.y).toBeGreaterThan(50);
+  });
+
+  it('centers segment horizontally based on xCenter', () => {
+    const { getByTestId } = renderWithTheme(
+      <Svg>
+        <Segment {...defaultProps} xCenter={100} />
+      </Svg>
+    );
+
+    const segment = getByTestId('test-segment');
+    const { width } = segment.props;
+    // X position should be centered around xCenter
+    expect(segment.props.x).toBe(100 - width / 2);
+  });
+
+  it('enforces a minimum bar height if height > 0 but height - segmentGap < minBarHeight', () => {
+    // segmentGap from theme is 2 (default), so height = 11 should result in adjustedHeight = 10
+    const { getByTestId } = renderWithTheme(
+      <Svg>
+        <Segment {...defaultProps} height={11} />
+      </Svg>
+    );
+    const segment = getByTestId('test-segment');
+    expect(segment.props.height).toBe(10);
+  });
+
+  it('does not support negative values: negative height results in height 0', () => {
+    const { getByTestId } = renderWithTheme(
+      <Svg>
+        <Segment {...defaultProps} height={-20} />
+      </Svg>
+    );
+    const segment = getByTestId('test-segment');
+    expect(segment.props.height).toBe(0);
+  });
+
+  it('calls onPress when the segment is pressed', () => {
+    const onPress = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <Svg>
+        <Segment {...defaultProps} onPress={onPress} />
+      </Svg>
+    );
+    const segment = getByTestId('test-segment');
+    // fireEvent.press works for react-native-svg Rect
+    // but if not, use fireEvent(segment, 'press')
+    // (depends on test setup)
+    // Try both for robustness
+    try {
+      fireEvent.press(segment);
+    } catch {
+      fireEvent(segment, 'press');
+    }
+    expect(onPress).toHaveBeenCalled();
+  });
+});

package/src/components/Chart/ColumnChart/__tests__/StackedSegment.spec.tsx

@@ -0,0 +1,115 @@
+import React from 'react';
+import { Svg } from 'react-native-svg';
+import { fireEvent } from '@testing-library/react-native';
+import renderWithTheme from '../../../../testHelpers/renderWithTheme';
+import StackedSegment from '../StackedSegment';
+
+describe('StackedSegment', () => {
+  const stackedData = [10, 20, 30];
+  const seriesLabels = ['Series 1', 'Series 2', 'Series 3'];
+  const xLabel = 'A';
+  const yAxisConfig = {
+    maxValue: 60,
+    minValue: 0,
+    step: 10,
+    tick: { interval: 10 },
+  };
+  const coordinates = { xStart: 0, xEnd: 100, yStart: 0, yEnd: 200 };
+  const xCenter = 50;
+
+  it('renders segments with correct accessibilityLabel and testID', () => {
+    const { getByTestId, toJSON } = renderWithTheme(
+      <Svg>
+        <StackedSegment
+          stackedData={stackedData}
+          seriesLabels={seriesLabels}
+          xLabel={xLabel}
+          yAxisConfig={yAxisConfig}
+          coordinates={coordinates}
+          xCenter={xCenter}
+          xIndex={0}
+        />
+      </Svg>
+    );
+
+    expect(toJSON()).toMatchSnapshot();
+    // Check a few segments
+    const segment1 = getByTestId('column-segment-A-Series 1');
+    expect(segment1.props.accessibilityLabel).toContain('value 10');
+    expect(segment1.props.accessibilityLabel).toContain('x-label A');
+    expect(segment1.props.accessibilityLabel).toContain('series Series 1');
+
+    const segment2 = getByTestId('column-segment-A-Series 2');
+    expect(segment2.props.accessibilityLabel).toContain('value 20');
+    expect(segment2.props.accessibilityLabel).toContain('series Series 2');
+  });
+
+  it('handles undefined data value', () => {
+    const stackedDataWithUndefined = [undefined, 15, 25];
+    const { getByTestId, queryByTestId } = renderWithTheme(
+      <Svg>
+        <StackedSegment
+          stackedData={stackedDataWithUndefined}
+          seriesLabels={seriesLabels}
+          xLabel={xLabel}
+          yAxisConfig={yAxisConfig}
+          coordinates={coordinates}
+          xCenter={xCenter}
+          xIndex={0}
+        />
+      </Svg>
+    );
+    expect(queryByTestId('column-segment-A-Series 1')).toBeNull();
+    const segment2 = getByTestId('column-segment-A-Series 2');
+    expect(segment2.props.accessibilityLabel).toContain('value 15');
+  });
+
+  it('renders nothing if stackedData is empty', () => {
+    const { queryByTestId } = renderWithTheme(
+      <Svg>
+        <StackedSegment
+          stackedData={[]}
+          seriesLabels={[]}
+          xLabel={xLabel}
+          yAxisConfig={yAxisConfig}
+          coordinates={coordinates}
+          xCenter={xCenter}
+          xIndex={0}
+        />
+      </Svg>
+    );
+    expect(queryByTestId('column-segment-A-Series 1')).toBeNull();
+  });
+
+  it('calls onBarPress with correct info when a segment is pressed', () => {
+    const onBarPress = jest.fn();
+    const { getByTestId } = renderWithTheme(
+      <Svg>
+        <StackedSegment
+          stackedData={stackedData}
+          seriesLabels={seriesLabels}
+          xLabel={xLabel}
+          yAxisConfig={yAxisConfig}
+          coordinates={coordinates}
+          xCenter={xCenter}
+          xIndex={0}
+          onBarPress={onBarPress}
+        />
+      </Svg>
+    );
+    // Press the first segment (A, Series 1)
+    const segment = getByTestId('column-segment-A-Series 1');
+    try {
+      fireEvent.press(segment);
+    } catch {
+      fireEvent(segment, 'press');
+    }
+    expect(onBarPress).toHaveBeenCalledWith({
+      value: 10,
+      xLabel: 'A',
+      seriesLabel: 'Series 1',
+      seriesIndex: 0,
+      xIndex: 0,
+    });
+  });
+});

package/src/components/Chart/ColumnChart/__tests__/__snapshots__/StackedSegment.spec.tsx.snap

@@ -0,0 +1,120 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`StackedSegment renders segments with correct accessibilityLabel and testID 1`] = `
+<View
+  style={
+    {
+      "flex": 1,
+    }
+  }
+>
+  <RNSVGSvgView
+    bbHeight="100%"
+    bbWidth="100%"
+    focusable={false}
+    style={
+      [
+        {
+          "backgroundColor": "transparent",
+          "borderWidth": 0,
+        },
+        {
+          "flex": 0,
+          "height": "100%",
+          "width": "100%",
+        },
+      ]
+    }
+  >
+    <RNSVGGroup
+      fill={
+        {
+          "payload": 4278190080,
+          "type": 0,
+        }
+      }
+    >
+      <RNSVGRect
+        accessibilityLabel="Column segment: value 10, x-label A, series Series 1"
+        fill={
+          {
+            "payload": 4291005678,
+            "type": 0,
+          }
+        }
+        height={31.333333333333314}
+        propList={
+          [
+            "fill",
+          ]
+        }
+        rx={8}
+        testID="column-segment-A-Series 1"
+        width={16}
+        x={42}
+        y={167.66666666666669}
+      />
+      <RNSVGRect
+        accessibilityLabel="Column segment: value 20, x-label A, series Series 2"
+        fill={
+          {
+            "payload": 4280139502,
+            "type": 0,
+          }
+        }
+        height={64.66666666666669}
+        propList={
+          [
+            "fill",
+          ]
+        }
+        rx={8}
+        testID="column-segment-A-Series 2"
+        width={16}
+        x={42}
+        y={101}
+      />
+      <RNSVGRect
+        accessibilityLabel="Column segment: value 30, x-label A, series Series 3"
+        fill={
+          {
+            "payload": 4284471940,
+            "type": 0,
+          }
+        }
+        height={98}
+        propList={
+          [
+            "fill",
+          ]
+        }
+        rx={8}
+        testID="column-segment-A-Series 3"
+        width={16}
+        x={42}
+        y={1}
+      />
+    </RNSVGGroup>
+  </RNSVGSvgView>
+  <View
+    pointerEvents="box-none"
+    position="bottom"
+    style={
+      [
+        {
+          "bottom": 0,
+          "elevation": 9999,
+          "flexDirection": "column-reverse",
+          "left": 0,
+          "paddingHorizontal": 24,
+          "paddingVertical": 16,
+          "position": "absolute",
+          "right": 0,
+          "top": 0,
+        },
+        undefined,
+      ]
+    }
+  />
+</View>
+`;