Skip to content

Commit deec884

Browse files
KocalKocal
committed
minor #3237 Add E2E tests for Chart.js (Kocal)
This PR was merged into the 2.x branch. Discussion ---------- Add E2E tests for Chart.js | Q | A | -------------- | --- | Bug fix? | no | New feature? | no <!-- please update src/**/CHANGELOG.md files --> | Deprecations? | no <!-- if yes, also update UPGRADE-*.md and src/**/CHANGELOG.md --> | Documentation? | no <!-- required for new features, or documentation updates --> | Issues | Fix #3018 <!-- prefix each issue number with "Fix #", no need to create an issue if none exist, explain below instead --> | License | MIT <!-- Replace this notice by a description of your feature/bugfix. This will help reviewers and should be a good start for the documentation. Additionally (see https://symfony.com/releases): - Always add tests and ensure they pass. - For new features, provide some code snippets to help understand usage. - Features and deprecations must be submitted against branch main. - Update/add documentation as required (we can help!) - Changelog entry should follow https://symfony.com/doc/current/contributing/code/conventions.html#writing-a-changelog-entry - Never break backward compatibility (see https://symfony.com/bc). --> Commits ------- 23e88a3 Add E2E tests for Chart.js
2 parents dbb40f7 + 23e88a3 commit deec884

File tree

5 files changed

+217
-8
lines changed

5 files changed

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

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

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

0 commit comments

Comments
 (0)