test: remove Polymer fixture from charts tests, extract styles (#9136)

Author: web-padawan

packages/charts/test/exporting-styles.js

@@ -0,0 +1,32 @@
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles(
+  'vaadin-chart',
+  css`
+    /* Ensure exporting works with complex selectors */
+    .highcharts-color-0 {
+      stroke: red;
+      fill: red;
+    }
+
+    :host(#chart) .highcharts-color-0 {
+      stroke: blue;
+      fill: blue;
+    }
+
+    :host(.my-class .dummy-class) .highcharts-color-0 {
+      stroke: blue;
+      fill: blue;
+    }
+
+    :host(.ColumnLineAndPie) g.highcharts-markers > .highcharts-point {
+      fill: white;
+    }
+
+    :host(.GaugeWithDualAxes) .kmh .highcharts-tick,
+    :host(.GaugeWithDualAxes) .kmh .highcharts-axis-line {
+      stroke: #339;
+      stroke-width: 2;
+    }
+  `,
+);

packages/charts/test/exporting.test.js

@@ -2,58 +2,13 @@ import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync, nextRender, oneEvent } from '@vaadin/testing-helpers';
 import sinon from 'sinon';
 import '../theme/vaadin-chart-base-theme.js';
+import './exporting-styles.js';
 import '../src/vaadin-chart.js';
-import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import HttpUtilities from 'highcharts/es-modules/Core/HttpUtilities.js';
 import Highcharts from 'highcharts/es-modules/masters/highstock.src.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { chartBaseTheme } from '../theme/vaadin-chart-base-theme.js';
-
-const chart = css`
-  /* Ensure exporting works with complex selectors */
-  .highcharts-color-0 {
-    stroke: red;
-    fill: red;
-  }
-
-  :host(#chart) .highcharts-color-0 {
-    stroke: blue;
-    fill: blue;
-  }
-
-  :host(.my-class .dummy-class) .highcharts-color-0 {
-    stroke: blue;
-    fill: blue;
-  }
-
-  :host(.ColumnLineAndPie) g.highcharts-markers > .highcharts-point {
-    fill: white;
-  }
-
-  :host(.GaugeWithDualAxes) .kmh .highcharts-tick,
-  :host(.GaugeWithDualAxes) .kmh .highcharts-axis-line {
-    stroke: #339;
-    stroke-width: 2;
-  }
-`;
-
-registerStyles('vaadin-chart', [chartBaseTheme, chart]);
-
-customElements.define(
-  'chart-exporting',
-  class extends PolymerElement {
-    static get template() {
-      return html`
-        <vaadin-chart id="chart" class="my-class dummy-class">
-          <vaadin-chart-series values="[19,12,9,24,5]"></vaadin-chart-series>
-        </vaadin-chart>
-      `;
-    }
-  },
-);
 
 describe('vaadin-chart exporting', () => {
-  let wrapper, chart, chartContainer, fireEventSpy;
+  let chart, chartContainer, fireEventSpy;
 
   before(() => {
     // Prevent form submit
@@ -63,8 +18,11 @@ describe('vaadin-chart exporting', () => {
   });
 
   beforeEach(async () => {
-    wrapper = fixtureSync('<chart-exporting></chart-exporting>');
-    chart = wrapper.$.chart;
+    chart = fixtureSync(`
+      <vaadin-chart id="chart" class="my-class dummy-class">
+        <vaadin-chart-series values="[19,12,9,24,5]"></vaadin-chart-series>
+      </vaadin-chart>
+    `);
     chart.additionalOptions = { exporting: { enabled: true } };
     await oneEvent(chart, 'chart-add-series');
     chartContainer = chart.$.chart;

packages/charts/test/styling.test.js

@@ -1,18 +1,8 @@
 import { expect } from '@vaadin/chai-plugins';
 import { fixtureSync, oneEvent } from '@vaadin/testing-helpers';
 import '../theme/vaadin-chart-base-theme.js';
+import './theme-styles.js';
 import '../src/vaadin-chart.js';
-import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
-import { chartBaseTheme } from '../theme/vaadin-chart-base-theme.js';
-
-registerStyles('vaadin-chart', [
-  chartBaseTheme,
-  css`
-    :host([theme='custom']) .highcharts-column-series rect.highcharts-point {
-      stroke: rgb(255, 0, 0);
-    }
-  `,
-]);
 
 describe('vaadin-chart styling', () => {
   describe('default theme', () => {

packages/charts/test/theme-styles.js

@@ -0,0 +1,10 @@
+import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+
+registerStyles(
+  'vaadin-chart',
+  css`
+    :host([theme='custom']) .highcharts-column-series rect.highcharts-point {
+      stroke: rgb(255, 0, 0);
+    }
+  `,
+);