Merge pull request #127 from sharmalab/tests-add

Add Chart Tests

source/components/VisualTools/Chart/BarChart.js

@@ -113,7 +113,8 @@ function BarChart(props) {
       .attr('class', `${className}`)
       .attr('x', (d) => scaleRef.current.x(d[fields.x]))
       .attr('width', scaleRef.current.x.bandwidth())
-      .attr('y', hightRef.current);
+      .attr('y', hightRef.current)
+      .attr('role', 'graphics-symbol');
     enterBars
       .on('mousemove', tooltipHandlers.mousemove)
       .on('mouseleave', tooltipHandlers.mouseleave)
@@ -168,7 +169,8 @@ function BarChart(props) {
         .select(self.current)
         .append('svg')
         .attr('width', rect.width)
-        .attr('height', rect.height);
+        .attr('height', rect.height)
+        .attr('role', 'img');
       // create viewer
       viewerRef.current = svg
         .append('g')
@@ -206,7 +208,7 @@ function BarChart(props) {
     }, 100);
   }, [props.filters, props.filterData, props.layout]);
 
-  return <div id={props.id} ref={self} style={{ width: '100%', height: '100%' }} />;
+  return <div id={props.id} ref={self} role="figure" style={{ width: '100%', height: '100%' }} />;
 }
 
 export default BarChart;

source/components/VisualTools/Chart/DensityChart.js

@@ -167,7 +167,7 @@ function DensityChart(props) {
         .attr('fill', (d) => color(d.value));
     }, 100);
   }, [props.layout, props.filters, props.filterData]);
-  return <div id={props.id} ref={self} style={{ width: '100%', height: '100%' }} />;
+  return <div id={props.id} ref={self} role="figure" style={{ width: '100%', height: '100%' }} />;
 }
 
 export default DensityChart;

source/components/VisualTools/Chart/Heatmap.js

@@ -131,7 +131,7 @@ function Heatmap(props) {
     }, 100);
   }, [props.layout, props.filters, props.filterData]);
 
-  return <div id={props.id} ref={self} style={{ width: '100%', height: '100%' }} />;
+  return <div id={props.id} ref={self} role="figure" style={{ width: '100%', height: '100%' }} />;
 }
 
 export default Heatmap;

source/components/VisualTools/Chart/Histogram.js

@@ -142,7 +142,7 @@ function Histogram({
         .style('fill', '#4682B4');
     }, 100);
   }, [filters, filterData, layout]);
-  return <div id={id} ref={svgRef} style={{ width: '100%', height: '100%' }} />;
+  return <div id={id} ref={svgRef} role="figure" style={{ width: '100%', height: '100%' }} />;
 }
 
 export default Histogram;

source/components/VisualTools/Chart/HorizontalBarChart.js

@@ -186,7 +186,7 @@ function HorizontalBarChart(props) {
     }, 100);
   }, [props.filters, props.filterData, props.layout]);
 
-  return <div id={props.id} ref={self} style={{ width: '100%', height: '100%' }} />;
+  return <div id={props.id} ref={self} role="figure" style={{ width: '100%', height: '100%' }} />;
 }
 
 export default HorizontalBarChart;

source/components/VisualTools/Chart/KMCurve.js

@@ -208,7 +208,7 @@ export default class KMCurve extends PureComponent {
   }
 
   render() {
-    return <div id={this.props.id} ref={this.self} style={{ width: '100%', height: '100%' }} />;
+    return <div id={this.props.id} ref={this.self} role="figure" style={{ width: '100%', height: '100%' }} />;
   }
 }
 

source/components/VisualTools/Chart/ParallelCoordinates.js

@@ -161,7 +161,7 @@ function ParallelCoordinates(props) {
     }, 100);
   }, [props.filters, props.filterData, props.layout]);
 
-  return <div id={props.id} ref={self} style={{ width: '100%', height: '100%' }} />;
+  return <div id={props.id} ref={self} role="figure" style={{ width: '100%', height: '100%' }} />;
 }
 
 export default ParallelCoordinates;

source/components/VisualTools/Chart/PieChart.js

@@ -151,7 +151,7 @@ function PieChart(props) {
 
   return (
     <div style={{ width: '100%', height: '100%' }}>
-      <div id={props.id} ref={self} style={{ width: '100%', height: '100%' }} />
+      <div role="figure" id={props.id} ref={self} style={{ width: '100%', height: '100%' }} />
     </div>
   );
 }

source/components/VisualTools/Chart/ScatterChart.js

@@ -199,7 +199,7 @@ export default class ScatterChart extends PureComponent {
 
   render() {
     return (
-      <div id={this.props.id} ref={this.self} style={{ width: '100%', height: '100%' }} />
+      <div id={this.props.id} ref={this.self} role="figure" style={{ width: '100%', height: '100%' }} />
     );
   }
 }

tests/BarChart.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import BarChart from '../source/components/VisualTools/Chart/BarChart';
+
+const mockData = [
+    { category: 'A' },
+    { category: 'B' },
+    { category: 'A' },
+    { category: 'C' },
+    { category: 'B' },
+    { category: 'A' },
+  ];
+
+const mockFields = {
+  x: 'category',
+  isList: false,
+};
+
+const mockLayout = { width: 500, currentCols: 1 };
+const mockFilters = [];
+const mockTitle = 'Test Bar Chart';
+const mockId = 'test-bar-chart';
+
+describe('BarChart Vis Component', () => {
+  it('renders', () => {
+    render(
+      <BarChart
+        data={mockData}
+        fields={mockFields}
+        id={mockId}
+        title={mockTitle}
+        filterData={mockData}
+        filters={mockFilters}
+        filterAdded={[]}
+        layout={mockLayout}
+      />
+    );
+    const chartElement = screen.getByRole('figure', { hidden: true });
+    expect(chartElement).toBeInTheDocument();
+  });
+});

tests/DensityChart.test.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import DensityChart from '../source/components/VisualTools/Chart/DensityChart';
+
+const mockData = [
+  { x: 10, y: 20 },
+  { x: 15, y: 25 },
+  { x: 20, y: 30 },
+];
+
+const mockFields = { x: 'x', y: 'y' };
+const mockLayout = { width: 500, currentCols: 1 };
+const mockFilters = [];
+const mockTitle = 'Test Density Chart';
+const mockFilterAdded = [];
+const mockId = 'test-density-chart';
+
+describe('DensityChart Component', () => {
+  it('renders', () => {
+    render(
+      <DensityChart
+        data={mockData}
+        fields={mockFields}
+        id={mockId}
+        title={mockTitle}
+        filterData={mockData}
+        filters={mockFilters}
+        filterAdded={mockFilterAdded}
+        layout={mockLayout}
+      />
+    );
+    expect(document.getElementById(mockId)).toBeInTheDocument();
+  });
+});

tests/Heatmap.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import Heatmap from '../source/components/VisualTools/Chart/Heatmap';
+import '@testing-library/jest-dom';
+
+const mockData = [
+  { x: 'A', y: '1', z: 10 },
+  { x: 'B', y: '1', z: 20 },
+  { x: 'A', y: '2', z: 30 },
+];
+
+const mockFields = {
+  x: 'x',
+  y: 'y',
+  z: 'z',
+};
+
+const mockFilters = [];
+const mockFilterAdded = [];
+const mockTitle = 'Test Heatmap Chart';
+const mockId = 'test-heatmap-chart';
+const mockLayout = {
+  width: 500,
+  currentCols: 2,
+};
+
+test('renders without crashing', () => {
+  render(
+    <Heatmap
+      data={mockData}
+      fields={mockFields}
+      id={mockId}
+      title={mockTitle}
+      filterData={mockData}
+      filters={mockFilters}
+      filterAdded={mockFilterAdded}
+      layout={mockLayout}
+    />
+  );
+  expect(document.getElementById(mockId)).toBeInTheDocument();
+});

tests/Histogram.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Histogram from '../source/components/VisualTools/Chart/Histogram';
+
+const mockData = [
+    { category: 10 },
+    { category: 11 },
+    { category: 12 },
+    { category: 12 },
+    { category: 15 },
+    { category: 21 },
+  ];
+
+const mockFields = {
+  x: 'category'
+};
+
+const mockLayout = { width: 500, currentCols: 1 };
+const mockFilters = [];
+const mockTitle = 'Test Histogram Chart';
+const mockId = 'test-histogram-chart';
+
+describe('Histogram Vis Component', () => {
+  it('renders', () => {
+    render(
+      <Histogram
+        data={mockData}
+        fields={mockFields}
+        id={mockId}
+        title={mockTitle}
+        filterData={mockData}
+        filters={mockFilters}
+        filterAdded={[]}
+        layout={mockLayout}
+        binsCount={3}
+      />
+    );
+    const chartElement = screen.getByRole('figure', { hidden: true });
+    expect(chartElement).toBeInTheDocument();
+  });
+});

tests/HorizontalBarChart.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import HorizontalBarChart from '../source/components/VisualTools/Chart/HorizontalBarChart';
+
+const mockData = [
+    { category: 'A' },
+    { category: 'B' },
+    { category: 'A' },
+    { category: 'C' },
+    { category: 'B' },
+    { category: 'A' },
+  ];
+
+const mockFields = {
+  x: 'category',
+  isList: false,
+};
+
+const mockLayout = { width: 500, currentCols: 1 };
+const mockFilters = [];
+const mockTitle = 'Test Horiz Bar Chart';
+const mockId = 'test-horiz-bar-chart';
+
+describe('HorizontalBarChart Vis Component', () => {
+  it('renders', () => {
+    render(
+      <HorizontalBarChart
+        data={mockData}
+        fields={mockFields}
+        id={mockId}
+        title={mockTitle}
+        filterData={mockData}
+        filters={mockFilters}
+        filterAdded={[]}
+        layout={mockLayout}
+      />
+    );
+    const chartElement = screen.getByRole('figure', { hidden: true });
+    expect(chartElement).toBeInTheDocument();
+  });
+});

tests/KMCurve.test.js

@@ -0,0 +1,42 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import KMCurve from '../source/components/VisualTools/Chart/KMCurve';
+
+const mockData = [
+  { collapsed_stage: 'stage_x/NR', time: 1, event: 'event', group: 'group1' },
+  { collapsed_stage: 'stage_x/NR', time: 2, event: 'event', group: 'group1' },
+  { collapsed_stage: 'stage_x/NR', time: 3, event: 'censor', group: 'group1' },
+  { collapsed_stage: 'stage_x/NR', time: 1, event: 'event', group: 'group2' },
+  { collapsed_stage: 'stage_x/NR', time: 2, event: 'censor', group: 'group2' },
+];
+
+const mockFields = {
+    x: 'group',
+    time: { field: 'time' },
+    event: { field: 'event', eventValue: 'event', censoredValue: 'censor' },
+    group: { field: 'group' },
+  };
+
+const mockLayout = { width: 500, currentCols: 1 };
+const mockFilters = [];
+const mockTitle = 'Test KMCurve Chart';
+const mockId = 'test-km-curve-chart';
+
+describe('KMCurve Vis Component', () => {
+  it('renders', () => {
+    render(
+      <KMCurve
+        data={mockData}
+        fields={mockFields}
+        id={mockId}
+        title={mockTitle}
+        filterData={mockData}
+        filters={mockFilters}
+        filterAdded={[]}
+        layout={mockLayout}
+      />
+    );
+    const chartElement = screen.getByRole('figure', { hidden: true });
+    expect(chartElement).toBeInTheDocument();
+  });
+});

tests/ParallelCoordinates.test.js

@@ -0,0 +1,39 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import ParallelCoordinates from '../source/components/VisualTools/Chart/ParallelCoordinates';
+
+const mockData = [
+  { dimension1: 10, dimension2: 20, dimension3: 30 },
+  { dimension1: 15, dimension2: 25, dimension3: 35 },
+  { dimension1: 20, dimension2: 30, dimension3: 40 },
+  { dimension1: 25, dimension2: 35, dimension3: 45 },
+  { dimension1: 30, dimension2: 40, dimension3: 50 },
+];
+
+const mockFields = {
+  y: ['dimension1', 'dimension2', 'dimension3'],
+};
+
+const mockLayout = { width: 500, currentCols: 1 };
+const mockFilters = [];
+const mockTitle = 'Test Parallel Coordinates Chart';
+const mockId = 'test-parallel-coords-chart';
+
+describe('ParallelCoordinates Vis Component', () => {
+  it('renders', () => {
+    render(
+      <ParallelCoordinates
+        data={mockData}
+        fields={mockFields}
+        id={mockId}
+        title={mockTitle}
+        filterData={mockData}
+        filters={mockFilters}
+        filterAdded={[]}
+        layout={mockLayout}
+      />
+    );
+    const chartElement = screen.getByRole('figure', { hidden: true });
+    expect(chartElement).toBeInTheDocument();
+  });
+});