From 08832e2db87886f9965999e76f1921ff10ce39d0 Mon Sep 17 00:00:00 2001 From: Manik Rana Date: Fri, 23 Feb 2024 05:31:39 -0500 Subject: [PATCH] histogram: add UI tests for rendering histogram (#13631) * histogram: add tests for rendering histograms Signed-off-by: Manik Rana * histogram: add tests for rendering histograms Signed-off-by: Manik Rana * chore: remove unused import Signed-off-by: Manik Rana --------- Signed-off-by: Manik Rana --- .../src/pages/graph/DataTable.test.tsx | 31 +++++++++++++++---- 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/web/ui/react-app/src/pages/graph/DataTable.test.tsx b/web/ui/react-app/src/pages/graph/DataTable.test.tsx index 1252b5bfc..61bc55486 100755 --- a/web/ui/react-app/src/pages/graph/DataTable.test.tsx +++ b/web/ui/react-app/src/pages/graph/DataTable.test.tsx @@ -1,7 +1,6 @@ import * as React from 'react'; -import { shallow } from 'enzyme'; +import { mount, shallow } from 'enzyme'; import DataTable, { DataTableProps } from './DataTable'; -import HistogramString, { HistogramStringProps } from './DataTable'; import { Alert, Table } from 'reactstrap'; import SeriesName from './SeriesName'; @@ -130,7 +129,7 @@ describe('DataTable', () => { }, useLocalTime: false, }; - const dataTable = shallow(); + const dataTable = mount(); it('renders a table', () => { const table = dataTable.find(Table); @@ -142,10 +141,30 @@ describe('DataTable', () => { it('renders rows', () => { const table = dataTable.find(Table); + const histogramData = [{ + count: '10', + sum: '3.3', + buckets: [ + [1, '-1', '-0.5', '2'], + [3, '-0.5', '0.5', '3'], + [0, '0.5', '1', '5'], + ] + }, + { + count: '5', + sum: '1.11', + buckets: [ + [0, '0.5', '1', '2'], + [0, '1', '2', '3'], + ], + }]; table.find('tr').forEach((row, idx) => { - expect(row.find(SeriesName)).toHaveLength(1); - // TODO(beorn7): This doesn't actually test the rendoring yet. Need to trigger it somehow. - expect(row.find('td').at(1).text()).toEqual(` `); + const seriesNameComponent = dataTable.find('SeriesName'); + expect(seriesNameComponent).toHaveLength(dataTableProps.data?.result.length as number); + + const histogramStringComponent = row.find('HistogramString'); + expect(histogramStringComponent).toHaveLength(1); + expect(histogramStringComponent.prop('h')).toEqual(histogramData[idx]); }); }); });