Add E2E tests for Chart.js

apps/e2e/src/Controller/ChartjsController.php

@@ -58,4 +58,69 @@ public function withOptions(ChartBuilderInterface $chartBuilder): Response
             'chart' => $chart,
         ]);
     }
+
+    #[Route('/pie', name: 'pie')]
+    public function pie(ChartBuilderInterface $chartBuilder): Response
+    {
+        $chart = $chartBuilder->createChart(Chart::TYPE_PIE);
+
+        $chart->setData([
+            'labels' => ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+            'datasets' => [
+                [
+                    'label' => 'My First Dataset',
+                    'data' => [12, 19, 3, 5, 2, 3],
+                    'backgroundColor' => [
+                        'rgb(255, 99, 132)',
+                        'rgb(54, 162, 235)',
+                        'rgb(255, 205, 86)',
+                        'rgb(75, 192, 192)',
+                        'rgb(153, 102, 255)',
+                        'rgb(255, 159, 64)',
+                    ],
+                ],
+            ],
+        ]);
+
+        return $this->render('ux_chartjs/index.html.twig', [
+            'chart' => $chart,
+        ]);
+    }
+
+    #[Route('/pie-with-options', name: 'pie_with_options')]
+    public function pieWithOptions(ChartBuilderInterface $chartBuilder): Response
+    {
+        $chart = $chartBuilder->createChart(Chart::TYPE_PIE);
+
+        $chart->setData([
+            'labels' => ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
+            'datasets' => [
+                [
+                    'label' => 'My First Dataset',
+                    'data' => [12, 19, 3, 5, 2, 3],
+                    'backgroundColor' => [
+                        'rgb(255, 99, 132)',
+                        'rgb(54, 162, 235)',
+                        'rgb(255, 205, 86)',
+                        'rgb(75, 192, 192)',
+                        'rgb(153, 102, 255)',
+                        'rgb(255, 159, 64)',
+                    ],
+                ],
+            ],
+        ]);
+
+        $chart->setOptions([
+            'responsive' => true,
+            'plugins' => [
+                'legend' => [
+                    'position' => 'top',
+                ],
+            ],
+        ]);
+
+        return $this->render('ux_chartjs/index.html.twig', [
+            'chart' => $chart,
+        ]);
+    }
 }

apps/e2e/src/Repository/ExampleRepository.php

@@ -26,6 +26,10 @@ public function __construct()
         $this->examples = [
             new Example(UxPackage::Autocomplete, 'Autocomplete (without AJAX)', 'An autocomplete form field, by using the choses from the choice type field.', 'app_ux_autocomplete_without_ajax'),
             new Example(UxPackage::Autocomplete, 'Autocomplete (custom controller)', 'An autocomplete form field, with a custom Stimulus controller for AJAX results.', 'app_ux_autocomplete_custom_controller'),
+            new Example(UxPackage::ChartJs, 'Line chart without options', 'A basic line chart displaying monthly data without additional options.', 'app_ux_chartjs_without_options'),
+            new Example(UxPackage::ChartJs, 'Line chart with options', 'A line chart with custom options (showLines: false) that displays data points without connecting lines.', 'app_ux_chartjs_with_options'),
+            new Example(UxPackage::ChartJs, 'Pie chart', 'A pie chart displaying data distribution across different categories.', 'app_ux_chartjs_pie'),
+            new Example(UxPackage::ChartJs, 'Pie chart with options', 'A pie chart with custom options to control the appearance and behavior.', 'app_ux_chartjs_pie_with_options'),
             new Example(UxPackage::LiveComponent, 'Examples filtering', "On this page, you can filter all examples by query terms, and observe how the UI and URLs update during and after processing.", 'app_home'),
             new Example(UxPackage::LiveComponent, 'Counter', 'A basic counter that you can increment or decrement.', 'app_ux_live_component_counter'),
             new Example(UxPackage::LiveComponent, 'Registration form', 'A registration form with live validation using Symfony Forms and the Validator component.', 'app_ux_live_component_registration_form'),

apps/e2e/templates/ux_chartjs/index.html.twig

@@ -1,3 +1,14 @@
 {% extends 'example.html.twig' %}
 
-{% block example %}{% endblock %}
+{% block example %}
+    <div style="max-width: 600px; margin: 0 auto;">
+        {{ render_chart(chart, {'id': 'test-chart'}) }}
+    </div>
+
+    <script>
+        const canvas = document.querySelector('#test-chart');
+        canvas.addEventListener('chartjs:connect', (event) => {
+            window.__chartInstance = event.detail.chart;
+        });
+    </script>
+{% endblock %}

src/Chartjs/assets/test/browser/chartjs.test.ts

@@ -0,0 +1,136 @@
+import { expect, test } from '@playwright/test';
+
+test('Can display a line chart without options', async ({ page }) => {
+    await page.goto('/ux-chartjs/without-options');
+
+    // Wait for the canvas element to be visible
+    const canvas = page.locator('canvas[data-controller*="chart"]');
+    await expect(canvas).toBeVisible();
+
+    // Wait for the chart instance to be available and access its configuration
+    const chartData = await page
+        .waitForFunction(() => {
+            return (window as any).__chartInstance !== undefined;
+        })
+        .then(() =>
+            page.evaluate(() => {
+                const chart = (window as any).__chartInstance;
+                return {
+                    type: chart.config.type,
+                    labels: chart.config.data.labels,
+                    datasets: chart.config.data.datasets,
+                    options: chart.config.options,
+                };
+            })
+        );
+
+    expect(chartData.type).toBe('line');
+    expect(chartData.labels).toEqual(['January', 'February', 'March', 'April', 'May', 'June', 'July']);
+    expect(chartData.datasets).toHaveLength(1);
+    expect(chartData.datasets[0].label).toBe('My First dataset');
+    expect(chartData.datasets[0].data).toEqual([0, 10, 5, 2, 20, 30, 45]);
+    expect(chartData.datasets[0].backgroundColor).toBe('rgb(255, 99, 132)');
+    expect(chartData.datasets[0].borderColor).toBe('rgb(255, 99, 132)');
+});
+
+test('Can display a line chart with options', async ({ page }) => {
+    await page.goto('/ux-chartjs/with-options');
+
+    // Wait for the canvas element to be visible
+    const canvas = page.locator('canvas[data-controller*="chart"]');
+    await expect(canvas).toBeVisible();
+
+    // Wait for the chart instance to be available and access its configuration
+    const chartData = await page
+        .waitForFunction(() => {
+            return (window as any).__chartInstance !== undefined;
+        })
+        .then(() =>
+            page.evaluate(() => {
+                const chart = (window as any).__chartInstance;
+                return {
+                    type: chart.config.type,
+                    labels: chart.config.data.labels,
+                    datasets: chart.config.data.datasets,
+                    showLines: chart.config.options.showLines,
+                };
+            })
+        );
+
+    expect(chartData.type).toBe('line');
+    expect(chartData.labels).toEqual(['January', 'February', 'March', 'April', 'May', 'June', 'July']);
+    expect(chartData.datasets).toHaveLength(1);
+    expect(chartData.datasets[0].data).toEqual([0, 10, 5, 2, 20, 30, 45]);
+    expect(chartData.showLines).toBe(false);
+});
+
+test('Can display a pie chart', async ({ page }) => {
+    await page.goto('/ux-chartjs/pie');
+
+    // Wait for the canvas element to be visible
+    const canvas = page.locator('canvas[data-controller*="chart"]');
+    await expect(canvas).toBeVisible();
+
+    // Wait for the chart instance to be available and access its configuration
+    const chartData = await page
+        .waitForFunction(() => {
+            return (window as any).__chartInstance !== undefined;
+        })
+        .then(() =>
+            page.evaluate(() => {
+                const chart = (window as any).__chartInstance;
+                return {
+                    type: chart.config.type,
+                    labels: chart.config.data.labels,
+                    datasets: chart.config.data.datasets,
+                };
+            })
+        );
+
+    expect(chartData.type).toBe('pie');
+    expect(chartData.labels).toEqual(['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']);
+    expect(chartData.datasets).toHaveLength(1);
+    expect(chartData.datasets[0].label).toBe('My First Dataset');
+    expect(chartData.datasets[0].data).toEqual([12, 19, 3, 5, 2, 3]);
+    expect(chartData.datasets[0].backgroundColor).toEqual([
+        'rgb(255, 99, 132)',
+        'rgb(54, 162, 235)',
+        'rgb(255, 205, 86)',
+        'rgb(75, 192, 192)',
+        'rgb(153, 102, 255)',
+        'rgb(255, 159, 64)',
+    ]);
+});
+
+test('Can display a pie chart with options', async ({ page }) => {
+    await page.goto('/ux-chartjs/pie-with-options');
+
+    // Wait for the canvas element to be visible
+    const canvas = page.locator('canvas[data-controller*="chart"]');
+    await expect(canvas).toBeVisible();
+
+    // Wait for the chart instance to be available and access its configuration
+    const chartData = await page
+        .waitForFunction(() => {
+            return (window as any).__chartInstance !== undefined;
+        })
+        .then(() =>
+            page.evaluate(() => {
+                const chart = (window as any).__chartInstance;
+                return {
+                    type: chart.config.type,
+                    labels: chart.config.data.labels,
+                    datasets: chart.config.data.datasets,
+                    responsive: chart.config.options.responsive,
+                    legendPosition: chart.config.options.plugins?.legend?.position,
+                };
+            })
+        );
+
+    expect(chartData.type).toBe('pie');
+    expect(chartData.labels).toEqual(['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']);
+    expect(chartData.datasets).toHaveLength(1);
+    expect(chartData.datasets[0].data).toEqual([12, 19, 3, 5, 2, 3]);
+    expect(chartData.responsive).toBe(true);
+    expect(chartData.legendPosition).toBe('top');
+});