Merge pull request #134 from sharmalab/much-better-tests

wait and check test contents
sharmalab · Sep 27, 2024 · c98f3fc · c98f3fc
2 parents 95763cc + 6fa6f16
commit c98f3fc
Show file tree

Hide file tree

Showing 9 changed files with 240 additions and 64 deletions.
diff --git a/tests/BarChart.test.js b/tests/BarChart.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import BarChart from '../source/components/VisualTools/Chart/BarChart';
 
 const mockData = [
@@ -16,14 +16,19 @@ const mockFields = {
   isList: false,
 };
 
+beforeAll(() => {
+  // Mock getComputedTextLength for tspan
+  SVGElement.prototype.getComputedTextLength = jest.fn(() => 50);
+});
+
 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(
+  it('renders with bars', async () => {
+    const {container} = render(
       <BarChart
         data={mockData}
         fields={mockFields}
@@ -35,7 +40,16 @@ describe('BarChart Vis Component', () => {
         layout={mockLayout}
       />
     );
-    const chartElement = screen.getByRole('figure', { hidden: true });
-    expect(chartElement).toBeInTheDocument();
+
+    // Wait for the chart to render, up to 3 seconds
+    await waitFor(() => {
+      // console.log(container.innerHTML);
+      const chartElement = screen.getByRole('figure', { hidden: true });
+      expect(chartElement).toBeInTheDocument();
+      // console.log(chartElement.innerHTML);
+      const graphicsElements = chartElement.querySelectorAll('[role="graphics-symbol"]');
+      expect(graphicsElements).toHaveLength(3);
+
+    }, { timeout: 3000 });
   });
 });
diff --git a/tests/DensityChart.test.js b/tests/DensityChart.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import DensityChart from '../source/components/VisualTools/Chart/DensityChart';
 
 const mockData = [
@@ -9,15 +9,36 @@ const mockData = [
 ];
 
 const mockFields = { x: 'x', y: 'y' };
-const mockLayout = { width: 500, currentCols: 1 };
+const mockLayout = { width: 500, height: 500, currentCols: 1 };
 const mockFilters = [];
 const mockTitle = 'Test Density Chart';
 const mockFilterAdded = [];
 const mockId = 'test-density-chart';
 
 describe('DensityChart Component', () => {
-  it('renders', () => {
-    render(
+
+  beforeEach(() => {
+    // Mocking the getBoundingClientRect method, which otherwise breaks these tests
+    const mockGetBoundingClientRect = jest.fn(() => ({
+      width: 500,
+      height: 300,
+      top: 0,
+      right: 500,
+      bottom: 300,
+      left: 0,
+    }));
+
+    // Setting the mock on the HTMLDivElement prototype
+    Element.prototype.getBoundingClientRect = mockGetBoundingClientRect;
+  });
+
+  afterEach(() => {
+    // Restore the original implementation
+    jest.restoreAllMocks();
+  });
+
+  it('renders the chart, contents, axes', async () => {
+    const {container} = render(
       <DensityChart
         data={mockData}
         fields={mockFields}
@@ -29,6 +50,16 @@ describe('DensityChart Component', () => {
         layout={mockLayout}
       />
     );
-    expect(document.getElementById(mockId)).toBeInTheDocument();
+
+    await waitFor(() => {
+      const chartElement = screen.getByRole('figure', { hidden: true });
+      expect(chartElement).toBeInTheDocument();
+      // console.log(chartElement.innerHTML)
+      const tickElements = chartElement.querySelectorAll('.tick');
+      const domainElements = chartElement.querySelectorAll('.domain');
+
+      expect(tickElements.length).toBeGreaterThan(0); // axes rendered
+      expect(domainElements.length).toBeGreaterThan(0); // body rendered
+    }), { timeout: 3000 };
   });
 });
diff --git a/tests/Heatmap.test.js b/tests/Heatmap.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import Heatmap from '../source/components/VisualTools/Chart/Heatmap';
 import '@testing-library/jest-dom';
 
@@ -24,18 +24,28 @@ const mockLayout = {
   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();
-});
+describe('Heatmap Vis Component', () => {
+  test('renders box contents', async() => {
+    const {container} = render(
+      <Heatmap
+        data={mockData}
+        fields={mockFields}
+        id={mockId}
+        title={mockTitle}
+        filterData={mockData}
+        filters={mockFilters}
+        filterAdded={mockFilterAdded}
+        layout={mockLayout}
+      />
+    );
+
+    await waitFor(() => {
+      const chartElement = screen.getByRole('figure', { hidden: true });
+      // console.log(chartElement.innerHTML);
+      expect(chartElement).toBeInTheDocument();
+      // nonsense test for now
+      const rectElements = chartElement.querySelectorAll('rect');
+      expect(rectElements).toHaveLength(4); // comparison boxes
+    }, { timeout: 3000 });
+  });
+});
diff --git a/tests/Histogram.test.js b/tests/Histogram.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import Histogram from '../source/components/VisualTools/Chart/Histogram';
 
 const mockData = [
@@ -21,8 +21,8 @@ const mockTitle = 'Test Histogram Chart';
 const mockId = 'test-histogram-chart';
 
 describe('Histogram Vis Component', () => {
-  it('renders', () => {
-    render(
+  it('renders', async () => {
+    const {container} = render(
       <Histogram
         data={mockData}
         fields={mockFields}
@@ -32,10 +32,18 @@ describe('Histogram Vis Component', () => {
         filters={mockFilters}
         filterAdded={[]}
         layout={mockLayout}
-        binsCount={3}
+        binsCount={5}
       />
     );
-    const chartElement = screen.getByRole('figure', { hidden: true });
-    expect(chartElement).toBeInTheDocument();
+    await waitFor(() => {
+      const chartElement = screen.getByRole('figure', { hidden: true });
+      expect(chartElement).toBeInTheDocument();
+      // console.log(chartElement.innerHTML);
+      const barElements = chartElement.querySelectorAll('.bar'); // bars
+      const barFElements = chartElement.querySelectorAll('.bar-f'); // filtered bars
+      expect(barElements).toHaveLength(5);
+      expect(barFElements).toHaveLength(5);
+
+    }, { timeout: 3000 });
   });
 });
diff --git a/tests/HorizontalBarChart.test.js b/tests/HorizontalBarChart.test.js
@@ -1,18 +1,19 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } 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' },
+    { category: 'A', total: 1 },
+    { category: 'B', total: 1  },
+    { category: 'A', total: 1  },
+    { category: 'C', total: 1  },
+    { category: 'B', total: 1  },
+    { category: 'A', total: 1  },
   ];
 
 const mockFields = {
-  x: 'category',
+  y: 'category',
+  x: 'total',
   isList: false,
 };
 
@@ -22,8 +23,8 @@ const mockTitle = 'Test Horiz Bar Chart';
 const mockId = 'test-horiz-bar-chart';
 
 describe('HorizontalBarChart Vis Component', () => {
-  it('renders', () => {
-    render(
+  it('renders', async () => {
+    const {container} = render(
       <HorizontalBarChart
         data={mockData}
         fields={mockFields}
@@ -35,7 +36,19 @@ describe('HorizontalBarChart Vis Component', () => {
         layout={mockLayout}
       />
     );
-    const chartElement = screen.getByRole('figure', { hidden: true });
-    expect(chartElement).toBeInTheDocument();
+    // Wait for the chart to render, up to 3 seconds
+    await waitFor(() => {
+      // console.log(container.innerHTML);
+      const chartElement = screen.getByRole('figure', { hidden: true });
+      expect(chartElement).toBeInTheDocument();
+      // console.log(chartElement.innerHTML);
+      const labelElements = chartElement.querySelectorAll('.label');
+      const barElements = chartElement.querySelectorAll('.og');
+      const barFElements = chartElement.querySelectorAll('.ft');
+      expect(labelElements).toHaveLength(3);
+      expect(barElements).toHaveLength(3);
+      expect(barFElements).toHaveLength(3);
+
+    }, { timeout: 3000 });
   });
 });
diff --git a/tests/KMCurve.test.js b/tests/KMCurve.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
 import KMCurve from '../source/components/VisualTools/Chart/KMCurve';
 
 const mockData = [
@@ -23,8 +23,8 @@ const mockTitle = 'Test KMCurve Chart';
 const mockId = 'test-km-curve-chart';
 
 describe('KMCurve Vis Component', () => {
-  it('renders', () => {
-    render(
+  it('renders', async () => {
+    const {container} = render(
       <KMCurve
         data={mockData}
         fields={mockFields}
@@ -36,7 +36,17 @@ describe('KMCurve Vis Component', () => {
         layout={mockLayout}
       />
     );
-    const chartElement = screen.getByRole('figure', { hidden: true });
-    expect(chartElement).toBeInTheDocument();
+    // Wait for the chart to render, up to 3 seconds
+    await waitFor(() => {
+      // console.log(container.innerHTML);
+      const chartElement = screen.getByRole('figure', { hidden: true });
+      expect(chartElement).toBeInTheDocument();
+      // console.log(chartElement.innerHTML);
+      const tickElements = chartElement.querySelectorAll('.tick');
+      const domainElements = chartElement.querySelectorAll('.domain');
+      expect(tickElements.length).toBeGreaterThan(0); // axes rendered
+      expect(domainElements.length).toBeGreaterThan(0); // body rendered
+
+    }, { timeout: 3000 });
   });
 });
diff --git a/tests/ParallelCoordinates.test.js b/tests/ParallelCoordinates.test.js
@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, screen, fireEvent } from '@testing-library/react';
+import { render, screen, waitFor } from '@testing-library/react';
 import ParallelCoordinates from '../source/components/VisualTools/Chart/ParallelCoordinates';
 
 const mockData = [
@@ -19,8 +19,39 @@ const mockFilters = [];
 const mockTitle = 'Test Parallel Coordinates Chart';
 const mockId = 'test-parallel-coords-chart';
 
-describe('ParallelCoordinates Vis Component', () => {
-  it('renders', () => {
+describe('ParallelCoordinates Vis Component',  () => {
+
+  beforeEach(() => {
+    // Mocking the getBoundingClientRect method, which otherwise breaks these tests
+    const mockGetBoundingClientRect = jest.fn(() => ({
+      width: 500,
+      height: 300,
+      top: 0,
+      right: 500,
+      bottom: 300,
+      left: 0,
+    }));
+
+    // this feels pretty bad. improve this test.
+    const mockGetContext = jest.fn().mockReturnValue({
+      strokeStyle: '',
+      clearRect: console.log,
+      beginPath: console.log,
+      moveTo: console.log,
+      lineTo: console.log,
+      stroke: console.log,
+    });
+
+    Element.prototype.getBoundingClientRect = mockGetBoundingClientRect;
+    HTMLCanvasElement.prototype.getContext = mockGetContext;
+  });
+
+  afterEach(() => {
+    // Restore the original implementation
+    jest.restoreAllMocks();
+  });
+
+  it('renders', async () => {
     render(
       <ParallelCoordinates
         data={mockData}
@@ -33,7 +64,12 @@ describe('ParallelCoordinates Vis Component', () => {
         layout={mockLayout}
       />
     );
-    const chartElement = screen.getByRole('figure', { hidden: true });
-    expect(chartElement).toBeInTheDocument();
+    await waitFor(() => {
+      const chartElement = screen.getByRole('figure', { hidden: true });
+      expect(chartElement).toBeInTheDocument();
+      // console.log(chartElement.innerHTML)
+      const canvasElements = chartElement.querySelectorAll('canvas');
+      expect(canvasElements.length).toBeGreaterThan(0); // body rendered
+    }), { timeout: 3000 };
   });
 });