chore(radial-chart): Fixed flaky e2e tests.

apps/components-e2e/src/components/radial-chart/radial-chart.e2e.ts

@@ -26,6 +26,15 @@ import {
   pieSafari,
 } from './radial-chart.po';
 
+// Reduced speed of hovering should get our e2e tests stable.
+// We should think about removing the dtOverlay and using the cdk one,
+// that is not flaky on other e2e tests #86
+const hover: MouseActionOptions = {
+  // Slowest possible speed should help as workaround til the issue is fixed.
+  // The issue #646 is opened for this.
+  speed: 0.01,
+};
+
 fixture('Radial chart')
   .page('http://localhost:4200/radial-chart')
   .beforeEach(async () => {
@@ -35,48 +44,49 @@ fixture('Radial chart')
 
 test('should show overlay on hover', async (testController: TestController) => {
   await testController
-    .hover(pieChrome, { speed: 0.1 })
+    .hover(pieChrome, hover)
     .expect(overlay.exists)
     .ok()
     .expect(overlay.textContent)
     .match(/Chrome: 43 of 89/)
-    .hover(body, { speed: 0.1, offsetX: 10, offsetY: 10 })
+    .hover(body, { ...hover, offsetX: 10, offsetY: 10 })
     .expect(overlay.exists)
     .notOk();
 });
 
 test('should show correct overlays when switching from pie to donut chart and back', async (testController: TestController) => {
   await testController
-    .hover(pieChrome, { speed: 0.1 })
+    .hover(pieChrome, hover)
     .expect(overlay.exists)
     .ok()
-    .click(chartTypeDonut)
+    .click(chartTypeDonut, { speed: 0.3 })
     // hover over circle center where no path should be in a donut chart
-    .hover(body, { speed: 0.1, offsetX: 475, offsetY: 280 })
+    .hover(body, { ...hover, offsetX: 475, offsetY: 280 })
     .expect(overlay.exists)
     .notOk()
     // hover over part of the donut where an overlay should appear
-    .hover(body, { speed: 0.1, offsetX: 650, offsetY: 255 })
+    .hover(body, { ...hover, offsetX: 650, offsetY: 255 })
     .expect(overlay.exists)
     .ok()
-    .click(chartTypePie)
-    .hover(pieChrome, { speed: 0.1 })
+    .click(chartTypePie, { speed: 0.3 })
+    .hover(pieChrome, hover)
     .expect(overlay.exists)
     .ok();
 });
 
 test('should show correct overlay contents when hovering over pies', async (testController: TestController) => {
   await testController
-    .hover(pieChrome, { speed: 0.1 })
+    .click(body, { speed: 0.5, offsetX: 0, offsetY: 0 }) // triggering change detection
+    .hover(pieChrome, hover)
     .expect(overlay.textContent)
     .match(/Chrome: 43 of 89/)
-    .hover(pieSafari, { speed: 0.1 })
+    .hover(pieSafari, hover)
     .expect(overlay.textContent)
     .match(/Safari: 22 of 89/)
-    .hover(pieFirefox, { speed: 0.1 })
+    .hover(pieFirefox, hover)
     .expect(overlay.textContent)
     .match(/Firefox: 15 of 89/)
-    .hover(pieEdge, { speed: 0.1 })
+    .hover(pieEdge, hover)
     .expect(overlay.textContent)
     .match(/Microsoft Edge: 9 of 89/);
 });