loewy
ec6d36b44c
-- question: helper functions can be used directly in chartLabel OR I could have them be part of useGraphData hook since this component will be called on a graph. image: shows the Chart Label up top with capital cased keys/labels and color boxes FIXES #29 Co-authored-by: Loewy <loewy@chainstarters.com> Reviewed-on: billnerds/rn-playground#30 Reviewed-by: Kat Huang <kkathuang@gmail.com> Co-authored-by: loewy <loewymalkov@gmail.com> Co-committed-by: loewy <loewymalkov@gmail.com>
39 lines
1.2 KiB
TypeScript
39 lines
1.2 KiB
TypeScript
import React from 'react';
|
|
import { render } from '@testing-library/react-native';
|
|
import "@testing-library/jest-native/extend-expect";
|
|
|
|
import ChartLabel from '../../component/charts/chart-label/chart-label';
|
|
|
|
describe('ChartLabel Component Tests', () => {
|
|
const mockData = {
|
|
yLabels: [
|
|
{ displayName: 'Shots Taken', axis: 'LEFT' as 'LEFT', color: '#598EBB' },
|
|
{ displayName:'Make Percentage', axis: 'RIGHT' as 'RIGHT', color: '#F2D4BC'}
|
|
],
|
|
title: 'Shots Taken / Make Percentage by Cut Angle'
|
|
};
|
|
|
|
it('should render the correct labels given yLabels', () => {
|
|
const { getByText } = render(
|
|
<ChartLabel title={mockData.title} yLabels={mockData.yLabels} />
|
|
);
|
|
|
|
mockData.yLabels.forEach(label => {
|
|
expect(getByText(label.displayName)).toBeTruthy();
|
|
});
|
|
});
|
|
|
|
it('should render the correct number of label boxes', () => {
|
|
const { getAllByText } = render(
|
|
<ChartLabel title={mockData.title} yLabels={mockData.yLabels} />
|
|
);
|
|
|
|
// Assuming displayName is unique and used only for labels
|
|
const labelElements = mockData.yLabels.map(label =>
|
|
getAllByText(label.displayName)
|
|
).flat();
|
|
|
|
expect(labelElements.length).toBe(mockData.yLabels.length);
|
|
});
|
|
});
|