diff --git a/tests/BarChart.test.js b/tests/BarChart.test.js index 07585bb..b88cae8 100644 --- 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( { 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 index 2d289e6..3918a7f 100644 --- 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( { 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 index 38a1260..05fe064 100644 --- 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( - - ); - expect(document.getElementById(mockId)).toBeInTheDocument(); -}); +describe('Heatmap Vis Component', () => { + test('renders box contents', async() => { + const {container} = render( + + ); + + 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 }); + }); +}); \ No newline at end of file diff --git a/tests/Histogram.test.js b/tests/Histogram.test.js index bbd4299..0a57d4f 100644 --- 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( { 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 index 4997b2f..0261c27 100644 --- 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( { 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 index b5e66af..8e736b9 100644 --- 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( { 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 index 01148ca..7b074f7 100644 --- 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( { 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 }; }); }); diff --git a/tests/PieChart.test.js b/tests/PieChart.test.js index 78b29a4..73f48d0 100644 --- a/tests/PieChart.test.js +++ b/tests/PieChart.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 PieChart from '../source/components/VisualTools/Chart/PieChart'; const mockData = [ @@ -22,8 +22,8 @@ const mockTitle = 'Test Pie Chart'; const mockId = 'test-pie-chart'; describe('PieChart Vis Component', () => { - it('renders', () => { - render( + it('renders', async () => { + const {container} = render( { 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('path'); + expect(graphicsElements).toHaveLength(3); + + }, { timeout: 3000 }); }); }); diff --git a/tests/ScatterChart.test.js b/tests/ScatterChart.test.js index c1e9a42..5bb2e5d 100644 --- a/tests/ScatterChart.test.js +++ b/tests/ScatterChart.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 ScatterChart from '../source/components/VisualTools/Chart/ScatterChart'; const mockData = [ @@ -21,8 +21,42 @@ const mockTitle = 'Test Scatter Chart'; const mockId = 'test-scatter-chart'; describe('ScatterChart Vis 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, + })); + + // this feels pretty bad. improve this test. + const mockGetContext = jest.fn().mockReturnValue({ + strokeStyle: '', + clearRect: console.log, + beginPath: console.log, + closePath: console.log, + arc: console.log, + fill: 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 () => { + const {container} = render( { 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 }); }); });