Skip to content

Commit 7d5301e

Browse files
KocalKocal
committed
Add E2E tests for Chart.js
1 parent dbb40f7 commit 7d5301e

File tree

5 files changed

+201
-8
lines changed

5 files changed

+201
-8
lines changed

‎apps/e2e/src/Controller/ChartjsController.php‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,4 +58,69 @@ public function withOptions(ChartBuilderInterface $chartBuilder): Response
5858
'chart' => $chart,
5959
]);
6060
}
61+
62+
#[Route('/pie', name: 'pie')]
63+
public function pie(ChartBuilderInterface $chartBuilder): Response
64+
{
65+
$chart = $chartBuilder->createChart(Chart::TYPE_PIE);
66+
67+
$chart->setData([
68+
'labels' => ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
69+
'datasets' => [
70+
[
71+
'label' => 'My First Dataset',
72+
'data' => [12, 19, 3, 5, 2, 3],
73+
'backgroundColor' => [
74+
'rgb(255, 99, 132)',
75+
'rgb(54, 162, 235)',
76+
'rgb(255, 205, 86)',
77+
'rgb(75, 192, 192)',
78+
'rgb(153, 102, 255)',
79+
'rgb(255, 159, 64)',
80+
],
81+
],
82+
],
83+
]);
84+
85+
return $this->render('ux_chartjs/index.html.twig', [
86+
'chart' => $chart,
87+
]);
88+
}
89+
90+
#[Route('/pie-with-options', name: 'pie_with_options')]
91+
public function pieWithOptions(ChartBuilderInterface $chartBuilder): Response
92+
{
93+
$chart = $chartBuilder->createChart(Chart::TYPE_PIE);
94+
95+
$chart->setData([
96+
'labels' => ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
97+
'datasets' => [
98+
[
99+
'label' => 'My First Dataset',
100+
'data' => [12, 19, 3, 5, 2, 3],
101+
'backgroundColor' => [
102+
'rgb(255, 99, 132)',
103+
'rgb(54, 162, 235)',
104+
'rgb(255, 205, 86)',
105+
'rgb(75, 192, 192)',
106+
'rgb(153, 102, 255)',
107+
'rgb(255, 159, 64)',
108+
],
109+
],
110+
],
111+
]);
112+
113+
$chart->setOptions([
114+
'responsive' => true,
115+
'plugins' => [
116+
'legend' => [
117+
'position' => 'top',
118+
],
119+
],
120+
]);
121+
122+
return $this->render('ux_chartjs/index.html.twig', [
123+
'chart' => $chart,
124+
]);
125+
}
61126
}

‎apps/e2e/src/Repository/ExampleRepository.php‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ public function __construct()
2626
$this->examples = [
2727
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'),
2828
new Example(UxPackage::Autocomplete, 'Autocomplete (custom controller)', 'An autocomplete form field, with a custom Stimulus controller for AJAX results.', 'app_ux_autocomplete_custom_controller'),
29+
new Example(UxPackage::ChartJs, 'Line chart without options', 'A basic line chart displaying monthly data without additional options.', 'app_ux_chartjs_without_options'),
30+
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'),
31+
new Example(UxPackage::ChartJs, 'Pie chart', 'A pie chart displaying data distribution across different categories.', 'app_ux_chartjs_pie'),
32+
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'),
2933
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'),
3034
new Example(UxPackage::LiveComponent, 'Counter', 'A basic counter that you can increment or decrement.', 'app_ux_live_component_counter'),
3135
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‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,14 @@
11
{% extends 'example.html.twig' %}
22

3-
{% block example %}{% endblock %}
3+
{% block example %}
4+
<div style="max-width: 600px; margin: 0 auto;">
5+
{{ render_chart(chart, {'id': 'test-chart'}) }}
6+
</div>
7+
8+
<script>
9+
const canvas = document.querySelector('#test-chart');
10+
canvas.addEventListener('chartjs:connect', (event) => {
11+
window.__chartInstance = event.detail.chart;
12+
});
13+
</script>
14+
{% endblock %}

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

Lines changed: 120 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,120 @@
1+
import { expect, test } from '@playwright/test';
2+
3+
test('Can display a line chart without options', async ({ page }) => {
4+
await page.goto('/ux-chartjs/without-options');
5+
6+
// Wait for the canvas element to be visible
7+
const canvas = page.locator('canvas[data-controller*="chart"]');
8+
await expect(canvas).toBeVisible();
9+
10+
// Wait for the chart instance to be available and access its configuration
11+
const chartData = await page.waitForFunction(() => {
12+
return (window as any).__chartInstance !== undefined;
13+
}).then(() => page.evaluate(() => {
14+
const chart = (window as any).__chartInstance;
15+
return {
16+
type: chart.config.type,
17+
labels: chart.config.data.labels,
18+
datasets: chart.config.data.datasets,
19+
options: chart.config.options,
20+
};
21+
}));
22+
23+
expect(chartData.type).toBe('line');
24+
expect(chartData.labels).toEqual(['January', 'February', 'March', 'April', 'May', 'June', 'July']);
25+
expect(chartData.datasets).toHaveLength(1);
26+
expect(chartData.datasets[0].label).toBe('My First dataset');
27+
expect(chartData.datasets[0].data).toEqual([0, 10, 5, 2, 20, 30, 45]);
28+
expect(chartData.datasets[0].backgroundColor).toBe('rgb(255, 99, 132)');
29+
expect(chartData.datasets[0].borderColor).toBe('rgb(255, 99, 132)');
30+
});
31+
32+
test('Can display a line chart with options', async ({ page }) => {
33+
await page.goto('/ux-chartjs/with-options');
34+
35+
// Wait for the canvas element to be visible
36+
const canvas = page.locator('canvas[data-controller*="chart"]');
37+
await expect(canvas).toBeVisible();
38+
39+
// Wait for the chart instance to be available and access its configuration
40+
const chartData = await page.waitForFunction(() => {
41+
return (window as any).__chartInstance !== undefined;
42+
}).then(() => page.evaluate(() => {
43+
const chart = (window as any).__chartInstance;
44+
return {
45+
type: chart.config.type,
46+
labels: chart.config.data.labels,
47+
datasets: chart.config.data.datasets,
48+
showLines: chart.config.options.showLines,
49+
};
50+
}));
51+
52+
expect(chartData.type).toBe('line');
53+
expect(chartData.labels).toEqual(['January', 'February', 'March', 'April', 'May', 'June', 'July']);
54+
expect(chartData.datasets).toHaveLength(1);
55+
expect(chartData.datasets[0].data).toEqual([0, 10, 5, 2, 20, 30, 45]);
56+
expect(chartData.showLines).toBe(false);
57+
});
58+
59+
test('Can display a pie chart', async ({ page }) => {
60+
await page.goto('/ux-chartjs/pie');
61+
62+
// Wait for the canvas element to be visible
63+
const canvas = page.locator('canvas[data-controller*="chart"]');
64+
await expect(canvas).toBeVisible();
65+
66+
// Wait for the chart instance to be available and access its configuration
67+
const chartData = await page.waitForFunction(() => {
68+
return (window as any).__chartInstance !== undefined;
69+
}).then(() => page.evaluate(() => {
70+
const chart = (window as any).__chartInstance;
71+
return {
72+
type: chart.config.type,
73+
labels: chart.config.data.labels,
74+
datasets: chart.config.data.datasets,
75+
};
76+
}));
77+
78+
expect(chartData.type).toBe('pie');
79+
expect(chartData.labels).toEqual(['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']);
80+
expect(chartData.datasets).toHaveLength(1);
81+
expect(chartData.datasets[0].label).toBe('My First Dataset');
82+
expect(chartData.datasets[0].data).toEqual([12, 19, 3, 5, 2, 3]);
83+
expect(chartData.datasets[0].backgroundColor).toEqual([
84+
'rgb(255, 99, 132)',
85+
'rgb(54, 162, 235)',
86+
'rgb(255, 205, 86)',
87+
'rgb(75, 192, 192)',
88+
'rgb(153, 102, 255)',
89+
'rgb(255, 159, 64)',
90+
]);
91+
});
92+
93+
test('Can display a pie chart with options', async ({ page }) => {
94+
await page.goto('/ux-chartjs/pie-with-options');
95+
96+
// Wait for the canvas element to be visible
97+
const canvas = page.locator('canvas[data-controller*="chart"]');
98+
await expect(canvas).toBeVisible();
99+
100+
// Wait for the chart instance to be available and access its configuration
101+
const chartData = await page.waitForFunction(() => {
102+
return (window as any).__chartInstance !== undefined;
103+
}).then(() => page.evaluate(() => {
104+
const chart = (window as any).__chartInstance;
105+
return {
106+
type: chart.config.type,
107+
labels: chart.config.data.labels,
108+
datasets: chart.config.data.datasets,
109+
responsive: chart.config.options.responsive,
110+
legendPosition: chart.config.options.plugins?.legend?.position,
111+
};
112+
}));
113+
114+
expect(chartData.type).toBe('pie');
115+
expect(chartData.labels).toEqual(['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange']);
116+
expect(chartData.datasets).toHaveLength(1);
117+
expect(chartData.datasets[0].data).toEqual([12, 19, 3, 5, 2, 3]);
118+
expect(chartData.responsive).toBe(true);
119+
expect(chartData.legendPosition).toBe('top');
120+
});

‎src/Chartjs/assets/test/browser/placeholder.test.ts‎

Lines changed: 0 additions & 7 deletions
This file was deleted.

0 commit comments

Comments
 (0)