From 73ba629be03bc6c75862ab8db36c8840c23b131f Mon Sep 17 00:00:00 2001 From: Titouan Galopin Date: Sat, 5 Dec 2020 20:03:35 +0100 Subject: [PATCH] Fix Chartjs options support --- .../Resources/assets/dist/controller.js | 2 +- .../Resources/assets/src/controller.js | 2 +- .../Resources/assets/test/controller.test.js | 32 +++++++++++++++---- src/Chartjs/Tests/Twig/ChartExtensionTest.php | 7 +++- 4 files changed, 34 insertions(+), 9 deletions(-) diff --git a/src/Chartjs/Resources/assets/dist/controller.js b/src/Chartjs/Resources/assets/dist/controller.js index b8e3d673d6a..6072d487d49 100644 --- a/src/Chartjs/Resources/assets/dist/controller.js +++ b/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 = {}; } diff --git a/src/Chartjs/Resources/assets/src/controller.js b/src/Chartjs/Resources/assets/src/controller.js index ee0aad68dfb..4ee2b63a565 100644 --- a/src/Chartjs/Resources/assets/src/controller.js +++ b/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 = {}; } diff --git a/src/Chartjs/Resources/assets/test/controller.test.js b/src/Chartjs/Resources/assets/test/controller.test.js index 64453cfa90f..1ed8bbbabba 100644 --- a/src/Chartjs/Resources/assets/test/controller.test.js +++ b/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,7 +33,11 @@ const startStimulus = () => { describe('ChartjsController', () => { let container; - beforeEach(() => { + afterEach(() => { + clearDOM(); + }); + + it('connect without options', async () => { container = mountDOM(` { data-view="{"type":"line","data":{"labels":["January","February","March","April","May","June","July"],"datasets":[{"label":"My First dataset","backgroundColor":"rgb(255, 99, 132)","borderColor":"rgb(255, 99, 132)","data":[0,10,5,2,20,30,45]}]},"options":[]}" > `); - }); - 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(` + + `); + 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); }); }); diff --git a/src/Chartjs/Tests/Twig/ChartExtensionTest.php b/src/Chartjs/Tests/Twig/ChartExtensionTest.php index 372c4a5134f..927e15e39f5 100644 --- a/src/Chartjs/Tests/Twig/ChartExtensionTest.php +++ b/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( '', $rendered );