Add bubble chart e2e

packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js

@@ -0,0 +1,189 @@
+import { test, expect } from "@mendix/run-e2e/fixtures";
+import { waitForMendixApp } from "@mendix/run-e2e/mendix-helpers";
+
+test.describe("bubble-chart-web", () => {
+    test.beforeEach(async ({ page }) => {
+        await page.goto("/");
+        await waitForMendixApp(page);
+    });
+
+    test.describe("bubble color", () => {
+        test(
+            "renders bubble chart with default color and compares with a screenshot baseline",
+            async ({ page }) => {
+                const container = page.locator(".mx-name-containerDefaultColor .widget-chart");
+                await container.scrollIntoViewIfNeeded();
+                await expect(container).toBeVisible({ timeout: 10000 });
+                await expect(container.locator(".plot-container")).toBeVisible();
+                await expect(container).toHaveScreenshot("bubbleChartDefaultColor.png");
+            },
+            { retry: 3 }
+        );
+
+        test(
+            "renders bubble chart with custom color and compares with a screenshot baseline",
+            async ({ page }) => {
+                const container = page.locator(".mx-name-containerCustomColor .widget-chart");
+                await container.scrollIntoViewIfNeeded();
+                await expect(container).toBeVisible({ timeout: 10000 });
+                await expect(container.locator(".plot-container")).toBeVisible();
+                await expect(container).toHaveScreenshot("bubbleChartCustomColor.png");
+            },
+            { retry: 3 }
+        );
+    });
+
+    test.describe("bubble size", () => {
+        test(
+            "renders bubble chart with auto scale and compares with a screenshot baseline",
+            async ({ page }) => {
+                const container = page.locator(".mx-name-containerAutoScale .widget-chart");
+                await container.scrollIntoViewIfNeeded();
+                await expect(container).toBeVisible({ timeout: 10000 });
+                await expect(container.locator(".plot-container")).toBeVisible();
+                await expect(container).toHaveScreenshot("bubbleChartAutoScale.png");
+            },
+            { retry: 3 }
+        );
+
+        test(
+            "renders bubble chart with manual scale factor and compares with a screenshot baseline",
+            async ({ page }) => {
+                const container = page.locator(".mx-name-containerManualScale .widget-chart");
+                await container.scrollIntoViewIfNeeded();
+                await expect(container).toBeVisible({ timeout: 10000 });
+                await expect(container.locator(".plot-container")).toBeVisible();
+                await expect(container).toHaveScreenshot("bubbleChartManualScale.png");
+            },
+            { retry: 3 }
+        );
+    });
+
+    test.describe("data series", () => {
+        test(
+            "renders bubble chart with single series and compares with a screenshot baseline",
+            async ({ page }) => {
+                const container = page.locator(".mx-name-containerSingleSeries .widget-chart");
+                await container.scrollIntoViewIfNeeded();
+                await expect(container).toBeVisible({ timeout: 10000 });
+                await expect(container.locator(".plot-container")).toBeVisible();
+                await expect(container).toHaveScreenshot("bubbleChartSingleSeries.png");
+            },
+            { retry: 3 }
+        );
+
+        test(
+            "renders bubble chart with multiple series and compares with a screenshot baseline",
+            async ({ page }) => {
+                const container = page.locator(".mx-name-containerMultipleSeries .widget-chart");
+                await container.scrollIntoViewIfNeeded();
+                await expect(container).toBeVisible({ timeout: 10000 });
+                await expect(container.locator(".plot-container")).toBeVisible();
+                await expect(container).toHaveScreenshot("bubbleChartMultipleSeries.png");
+            },
+            { retry: 3 }
+        );
+    });
+
+    test.describe("legend", () => {
+        test(
+            "renders bubble chart with legend and compares with a screenshot baseline",
+            async ({ page }) => {
+                const container = page.locator(".mx-name-containerLegend .widget-chart");
+                await container.scrollIntoViewIfNeeded();
+                await expect(container).toBeVisible({ timeout: 10000 });
+                await expect(container.locator(".plot-container")).toBeVisible();
+                await expect(container).toHaveScreenshot("bubbleChartLegend.png");
+            },
+            { retry: 3 }
+        );
+
+        test(
+            "renders bubble chart without legend and compares with a screenshot baseline",
+            async ({ page }) => {
+                const container = page.locator(".mx-name-containerNoLegend .widget-chart");
+                await container.scrollIntoViewIfNeeded();
+                await expect(container).toBeVisible({ timeout: 10000 });
+                await expect(container.locator(".plot-container")).toBeVisible();
+                await expect(container).toHaveScreenshot("bubbleChartNoLegend.png");
+            },
+            { retry: 3 }
+        );
+    });
+
+    test.describe("axis label", () => {
+        test(
+            "renders bubble chart with x axis label and compares with a screenshot baseline",
+            async ({ page }) => {
+                const container = page.locator(".mx-name-containerXLabel .widget-chart");
+                await container.scrollIntoViewIfNeeded();
+                await expect(container).toBeVisible({ timeout: 10000 });
+                await expect(container.locator(".plot-container")).toBeVisible();
+                await expect(container).toHaveScreenshot("bubbleChartXLabel.png");
+            },
+            { retry: 3 }
+        );
+
+        test(
+            "renders bubble chart with y axis label and compares with a screenshot baseline",
+            async ({ page }) => {
+                const container = page.locator(".mx-name-containerYLabel .widget-chart");
+                await container.scrollIntoViewIfNeeded();
+                await expect(container).toBeVisible({ timeout: 10000 });
+                await expect(container.locator(".plot-container")).toBeVisible();
+                await expect(container).toHaveScreenshot("bubbleChartYLabel.png");
+            },
+            { retry: 3 }
+        );
+
+        test(
+            "renders bubble chart with x and y axis labels and compares with a screenshot baseline",
+            async ({ page }) => {
+                const container = page.locator(".mx-name-containerXYLabels .widget-chart");
+                await container.scrollIntoViewIfNeeded();
+                await expect(container).toBeVisible({ timeout: 10000 });
+                await expect(container.locator(".plot-container")).toBeVisible();
+                await expect(container).toHaveScreenshot("bubbleChartXYLabels.png");
+            },
+            { retry: 3 }
+        );
+    });
+
+    test.describe("grid lines", () => {
+        test(
+            "renders bubble chart with horizontal grid lines and compares with a screenshot baseline",
+            async ({ page }) => {
+                const container = page.locator(".mx-name-containerGridHorizontal .widget-chart");
+                await container.scrollIntoViewIfNeeded();
+                await expect(container).toBeVisible({ timeout: 10000 });
+                await expect(container.locator(".plot-container")).toBeVisible();
+                await expect(container).toHaveScreenshot("bubbleChartGridHorizontal.png");
+            },
+            { retry: 3 }
+        );
+
+        test(
+            "renders bubble chart with vertical grid lines and compares with a screenshot baseline",
+            async ({ page }) => {
+                const container = page.locator(".mx-name-containerGridVertical .widget-chart");
+                await container.scrollIntoViewIfNeeded();
+                await expect(container).toBeVisible({ timeout: 10000 });
+                await expect(container.locator(".plot-container")).toBeVisible();
+                await expect(container).toHaveScreenshot("bubbleChartGridVertical.png");
+            },
+            { retry: 3 }
+        );
+
+        test(
+            "renders bubble chart with both grid lines and compares with a screenshot baseline",
+            async ({ page }) => {
+                const container = page.locator(".mx-name-containerGridBoth .widget-chart");
+                await container.scrollIntoViewIfNeeded();
+                await expect(container).toBeVisible({ timeout: 10000 });
+                await expect(container.locator(".plot-container")).toBeVisible();
+                await expect(container).toHaveScreenshot("bubbleChartGridBoth.png");
+            },
+            { retry: 3 }
+        );
+    });
+});

packages/pluggableWidgets/bubble-chart-web/package.json

@@ -29,6 +29,8 @@
         "build": "pluggable-widgets-tools build:ts",
         "create-translation": "rui-create-translation",
         "dev": "pluggable-widgets-tools start:web",
+        "e2e": "run-e2e ci",
+        "e2edev": "run-e2e dev --with-preps",
         "format": "prettier --ignore-path ./node_modules/@mendix/prettier-config-web-widgets/global-prettierignore --write .",
         "lint": "eslint src/ package.json",
         "release": "pluggable-widgets-tools release:web",
@@ -49,6 +51,7 @@
         "@mendix/eslint-config-web-widgets": "workspace:*",
         "@mendix/pluggable-widgets-tools": "*",
         "@mendix/prettier-config-web-widgets": "workspace:*",
+        "@mendix/run-e2e": "workspace:*",
         "@mendix/widget-plugin-platform": "workspace:*",
         "@mendix/widget-plugin-test-utils": "workspace:*"
     }

packages/pluggableWidgets/bubble-chart-web/playwright.config.cjs

@@ -0,0 +1 @@
+module.exports = require("@mendix/run-e2e/playwright.config.cjs");