fix: reset title, subtitle and type when removing attribute (#7816) (#…

…7820) Co-authored-by: Serhii Kulykov <iamkulykov@gmail.com>
vaadin · Sep 18, 2024 · 6d43810 · 6d43810
1 parent 3d488c5
commit 6d43810
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 14 deletions.
diff --git 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
@@ -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(`
+        <vaadin-chart title="My title">
+          <vaadin-chart-series values="[10, 20, 30, 40, 50]"></vaadin-chart-series>
+        </vaadin-chart>
+      `);
+      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', () => {