bug #17 Fix Chartjs options support (tgalopin)

This PR was merged into the main branch.

Discussion
----------

Fix Chartjs options support

| Q             | A
| ------------- | ---
| Bug fix?      | yes
| New feature?  | no
| Tickets       | Fix #11
| License       | MIT

Fix Chart.js options handling and add better tests to ensure no regression there.

Commits
-------

73ba629 Fix Chartjs options support

Author: fabpot

src/Chartjs/Resources/assets/dist/controller.js

@@ -55,7 +55,7 @@ var _default = /*#__PURE__*/function (_Controller) {
     value: function connect() {
       var payload = JSON.parse(this.element.getAttribute('data-view'));
 
-      if (!payload.options.length) {
+      if (Array.isArray(payload.options) && 0 === payload.options.length) {
         payload.options = {};
       }
 

src/Chartjs/Resources/assets/src/controller.js

@@ -15,7 +15,7 @@ import { Chart } from 'chart.js';
 export default class extends Controller {
     connect() {
         const payload = JSON.parse(this.element.getAttribute('data-view'));
-        if (!payload.options.length) {
+        if (Array.isArray(payload.options) && 0 === payload.options.length) {
             payload.options = {};
         }
 

src/Chartjs/Resources/assets/test/controller.test.js

@@ -17,8 +17,9 @@ import ChartjsController from '../dist/controller';
 // Controller used to check the actual controller was properly booted
 class CheckController extends Controller {
     connect() {
-        this.element.addEventListener('chartjs:connect', () => {
+        this.element.addEventListener('chartjs:connect', (event) => {
             this.element.classList.add('connected');
+            this.element.chart = event.detail.chart;
         });
     }
 }
@@ -32,24 +33,43 @@ const startStimulus = () => {
 describe('ChartjsController', () => {
     let container;
 
-    beforeEach(() => {
+    afterEach(() => {
+        clearDOM();
+    });
+
+    it('connect without options', async () => {
         container = mountDOM(`
             <canvas
                 data-testid="canvas"
                 data-controller="check chartjs"
                 data-view="&#x7B;&quot;type&quot;&#x3A;&quot;line&quot;,&quot;data&quot;&#x3A;&#x7B;&quot;labels&quot;&#x3A;&#x5B;&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;&#x5D;,&quot;datasets&quot;&#x3A;&#x5B;&#x7B;&quot;label&quot;&#x3A;&quot;My&#x20;First&#x20;dataset&quot;,&quot;backgroundColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;borderColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;data&quot;&#x3A;&#x5B;0,10,5,2,20,30,45&#x5D;&#x7D;&#x5D;&#x7D;,&quot;options&quot;&#x3A;&#x5B;&#x5D;&#x7D;"
             ></canvas>
         `);
-    });
 
-    afterEach(() => {
-        clearDOM();
+        expect(getByTestId(container, 'canvas')).not.toHaveClass('connected');
+
+        startStimulus();
+        await waitFor(() => expect(getByTestId(container, 'canvas')).toHaveClass('connected'));
+
+        const chart = getByTestId(container, 'canvas').chart;
+        expect(chart.options.showLines).toBe(true);
     });
 
-    it('connect', async () => {
+    it('connect with options', async () => {
+        container = mountDOM(`
+            <canvas
+                data-testid="canvas"
+                data-controller="check chartjs"
+                data-view="&#x7B;&quot;type&quot;&#x3A;&quot;line&quot;,&quot;data&quot;&#x3A;&#x7B;&quot;labels&quot;&#x3A;&#x5B;&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;&#x5D;,&quot;datasets&quot;&#x3A;&#x5B;&#x7B;&quot;label&quot;&#x3A;&quot;My&#x20;First&#x20;dataset&quot;,&quot;backgroundColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;borderColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;data&quot;&#x3A;&#x5B;0,10,5,2,20,30,45&#x5D;&#x7D;&#x5D;&#x7D;,&quot;options&quot;&#x3A;&#x7B;&quot;showLines&quot;&#x3A;false&#x7D;&#x7D;"
+            ></canvas>
+        `);
+
         expect(getByTestId(container, 'canvas')).not.toHaveClass('connected');
 
         startStimulus();
         await waitFor(() => expect(getByTestId(container, 'canvas')).toHaveClass('connected'));
+
+        const chart = getByTestId(container, 'canvas').chart;
+        expect(chart.options.showLines).toBe(false);
     });
 });

src/Chartjs/Tests/Twig/ChartExtensionTest.php

@@ -32,6 +32,7 @@ public function testRenderChart()
         $builder = $kernel->getContainer()->get('test.chartjs.builder');
 
         $chart = $builder->createChart(Chart::TYPE_LINE);
+
         $chart->setData([
             'labels' => ['January', 'February', 'March', 'April', 'May', 'June', 'July'],
             'datasets' => [
@@ -44,6 +45,10 @@ public function testRenderChart()
             ],
         ]);
 
+        $chart->setOptions([
+            'showLines' => false,
+        ]);
+
         $rendered = $kernel->getContainer()->get('test.chartjs.twig_extension')->renderChart(
             $kernel->getContainer()->get('twig'),
             $chart,
@@ -53,7 +58,7 @@ public function testRenderChart()
         $this->assertSame(
             '<canvas
                 data-controller="mycontroller @symfony/ux-chartjs/chart"
-                data-view="&#x7B;&quot;type&quot;&#x3A;&quot;line&quot;,&quot;data&quot;&#x3A;&#x7B;&quot;labels&quot;&#x3A;&#x5B;&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;&#x5D;,&quot;datasets&quot;&#x3A;&#x5B;&#x7B;&quot;label&quot;&#x3A;&quot;My&#x20;First&#x20;dataset&quot;,&quot;backgroundColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;borderColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;data&quot;&#x3A;&#x5B;0,10,5,2,20,30,45&#x5D;&#x7D;&#x5D;&#x7D;,&quot;options&quot;&#x3A;&#x5B;&#x5D;&#x7D;"
+                data-view="&#x7B;&quot;type&quot;&#x3A;&quot;line&quot;,&quot;data&quot;&#x3A;&#x7B;&quot;labels&quot;&#x3A;&#x5B;&quot;January&quot;,&quot;February&quot;,&quot;March&quot;,&quot;April&quot;,&quot;May&quot;,&quot;June&quot;,&quot;July&quot;&#x5D;,&quot;datasets&quot;&#x3A;&#x5B;&#x7B;&quot;label&quot;&#x3A;&quot;My&#x20;First&#x20;dataset&quot;,&quot;backgroundColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;borderColor&quot;&#x3A;&quot;rgb&#x28;255,&#x20;99,&#x20;132&#x29;&quot;,&quot;data&quot;&#x3A;&#x5B;0,10,5,2,20,30,45&#x5D;&#x7D;&#x5D;&#x7D;,&quot;options&quot;&#x3A;&#x7B;&quot;showLines&quot;&#x3A;false&#x7D;&#x7D;"
         class="myclass"></canvas>',
             $rendered
         );