test: add not animated styles to disable animations in charts tests (#9916)

Author: DiegoCardoso

packages/charts/test/chart-not-animated-styles.js

@@ -0,0 +1,116 @@
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin';
+
+registerStyles(
+  'vaadin-chart',
+  css`
+    :where([styled-mode]) .highcharts-point {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-credits {
+      transition: none;
+    }
+
+    /* Tooltip */
+    :where([styled-mode]) .highcharts-tooltip {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-point-inactive {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-series-inactive {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-state-hover path {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-state-normal path {
+      transition: none;
+    }
+
+    /* Legend hover affects points and series */
+    :where([styled-mode]) g.highcharts-series,
+    :where([styled-mode]) .highcharts-point,
+    :where([styled-mode]) .highcharts-markers,
+    :where([styled-mode]) .highcharts-data-labels {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-column-series .highcharts-point {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-column-series .highcharts-point-hover {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-pie-series .highcharts-point-hover {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-funnel-series .highcharts-point-hover {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-pyramid-series .highcharts-point-hover {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-treemap-series .highcharts-point {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-treemap-series .highcharts-point-hover {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-legend-item-hidden * {
+      transition: none;
+    }
+
+    /* Loading */
+    :where([styled-mode]) .highcharts-loading {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-loading-hidden {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-sankey-series .highcharts-link {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-sankey-series .highcharts-point-hover.highcharts-link {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-venn-series .highcharts-point {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-button {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-button-hover {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-range-input:hover rect {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-flags-series .highcharts-point .highcharts-label-box {
+      transition: none;
+    }
+
+    :where([styled-mode]) .highcharts-menu-item {
+      transition: none;
+    }
+  `,
+);

packages/charts/test/chart-series.test.js

@@ -1,6 +1,7 @@
 import { expect } from '@vaadin/chai-plugins';
-import { aTimeout, fixtureSync, nextRender, oneEvent } from '@vaadin/testing-helpers';
+import { fixtureSync, oneEvent } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
+import './chart-not-animated-styles.js';
 import '../src/vaadin-chart.js';
 
 describe('vaadin-chart-series', () => {
@@ -93,37 +94,32 @@ describe('vaadin-chart-series', () => {
         series = chart.querySelector('vaadin-chart-series');
       });
 
-      it('should have markers by default for widespread data', async () => {
+      it('should have markers by default for widespread data', () => {
         series.values = [10, 20, 10, 30, 50];
-        await nextRender();
         expect(markersVisible(chartContainer)).to.be.true;
       });
 
-      it('should not have markers by default for dense data', async () => {
+      it('should not have markers by default for dense data', () => {
         series.values = new Array(400).fill(10);
-        await nextRender();
         expect(markersVisible(chartContainer)).to.be.false;
       });
 
-      it('should have markers when set to shown', async () => {
+      it('should have markers when set to shown', () => {
         series.markers = 'shown';
         series.values = new Array(400).fill(10);
-        await nextRender();
         expect(markersVisible(chartContainer)).to.be.true;
       });
 
-      it('should not have markers when set to hidden', async () => {
+      it('should not have markers when set to hidden', () => {
         series.markers = 'hidden';
         series.values = [10, 20, 10, 30, 50];
-        await nextRender();
         expect(markersVisible(chartContainer)).to.be.false;
       });
 
       it('should not have markers when options are set', async () => {
         series.values = [10, 20, 10, 30, 50];
-        await nextRender();
         chart.additionalOptions = { plotOptions: { series: { marker: { enabled: false } } } };
-        await aTimeout(50);
+        await oneEvent(chart, 'chart-redraw');
         expect(markersVisible(chartContainer)).to.be.false;
       });
     });