chartjs-test-utils

import { fixture, triggerMouseEvent } from 'chartjs-test-utils'; import { Chart } from 'chart.js'; describe('MyChart integration', () => { let chart, canvas, wrapper; // Add global matchers provided by chartjs-test-utils beforeAll(() => { // Assuming chartjs-test-utils is imported globally or its matchers are explicitly added // For this example, we'll assume a global setup or 'import "chartjs-test-utils"' handles it. }); beforeEach(async () => { // fixture.run creates a new DOM environment for each test const result = await fixture.run('<canvas id="myChart" width="400" height="400"></canvas>'); canvas = result.querySelector('#myChart'); wrapper = result; chart = new Chart(canvas, { type: 'bar', data: { labels: ['Red', 'Blue', 'Yellow'], datasets: [{ label: 'Votes', data: [12, 19, 3], backgroundColor: ['red', 'blue', 'yellow'] }] }, options: { responsive: false } }); }); afterEach(() => { if (chart) { chart.destroy(); } fixture.cleanup(); // Cleans up the DOM environment }); it('should render correctly', () => { // Use custom matcher to check image data. Requires a baseline image or pixel comparison logic. // expect(canvas).toEqualImageData('my-chart-baseline'); // Example usage with a baseline expect(chart.data.datasets[0].data[0]).toBe(12); }); it('should trigger mouse events and update chart', async () => { // Simulate a mouse click on the canvas await triggerMouseEvent(canvas, 'mousemove', 100, 100); // Simulate hover await triggerMouseEvent(canvas, 'click', 100, 100); // Simulate click // In a real test, you'd assert changes caused by the event, e.g., tooltip visibility. // For demonstration, we just ensure the event can be triggered without error. expect(true).toBe(true); }); });