diff --git a/packages/charts/src/vaadin-chart.js b/packages/charts/src/vaadin-chart.js index 3c02c7615e..a2b0fe201b 100644 --- a/packages/charts/src/vaadin-chart.js +++ b/packages/charts/src/vaadin-chart.js @@ -1555,9 +1555,7 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) { return; } - if (title && title.length > 0) { - config.title.update({ text: title }); - } + config.title.update({ text: title }); } /** @private */ @@ -1575,11 +1573,9 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) { return; } - if (type && type.length > 0) { - config.update({ - chart: { type }, - }); - } + config.update({ + chart: { type: type || 'line' }, + }); } /** @private */ @@ -1588,12 +1584,10 @@ class Chart extends ResizeMixin(ElementMixin(ThemableMixin(PolymerElement))) { return; } - if (subtitle && subtitle.length > 0) { - if (!config.subtitle) { - config.setSubtitle({ text: subtitle }); - } else { - config.subtitle.update({ text: subtitle }); - } + if (!config.subtitle) { + config.setSubtitle({ text: subtitle }); + } else { + config.subtitle.update({ text: subtitle }); } } diff --git a/packages/charts/test/chart-properties.test.js b/packages/charts/test/chart-properties.test.js index 43b4fadfbd..4d38136b41 100644 --- a/packages/charts/test/chart-properties.test.js +++ b/packages/charts/test/chart-properties.test.js @@ -5,6 +5,34 @@ import '../vaadin-chart.js'; import Highcharts from 'highcharts/es-modules/masters/highstock.src.js'; describe('vaadin-chart properties', () => { + describe('title', () => { + let chart, chartContainer; + + beforeEach(async () => { + chart = fixtureSync(` + + + + `); + await oneEvent(chart, 'chart-load'); + chartContainer = chart.$.chart; + }); + + it('should have custom title', () => { + expect(chartContainer.querySelector('.highcharts-title').textContent).to.be.equal('My title'); + }); + + it('should reset title when property is set to null', () => { + chart.title = null; + expect(chartContainer.querySelector('.highcharts-title').textContent).to.be.equal(''); + }); + + it('should reset title when attribute is removed', () => { + chart.removeAttribute('title'); + expect(chartContainer.querySelector('.highcharts-title').textContent).to.be.equal(''); + }); + }); + describe('subtitle', () => { let chart, chartContainer; @@ -28,6 +56,16 @@ describe('vaadin-chart properties', () => { expect(chartContainer.querySelector('.highcharts-title').textContent).to.equal('Awesome chart'); expect(chartContainer.querySelector('.highcharts-subtitle').textContent).to.equal('My subtitle'); }); + + it('should reset subtitle when property is set to null', () => { + chart.subtitle = null; + expect(chartContainer.querySelector('.highcharts-subtitle').textContent).to.be.equal(''); + }); + + it('should reset subtitle when attribute is removed', () => { + chart.removeAttribute('subtitle'); + expect(chartContainer.querySelector('.highcharts-subtitle').textContent).to.be.equal(''); + }); }); describe('type', () => { @@ -49,6 +87,16 @@ describe('vaadin-chart properties', () => { const text = Array.from(series).map((node) => node.textContent); expect(text).to.be.deep.equal(['80']); }); + + it('should reset type to line when type property is set to null', () => { + chart.type = null; + expect(chart.configuration.types).to.eql(['line']); + }); + + it('should reset type to line when type attribute is removed', () => { + chart.removeAttribute('type'); + expect(chart.configuration.types).to.eql(['line']); + }); }); describe('additionalOptions', () => {