diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js new file mode 100644 index 0000000000..ef50f4f1ea --- /dev/null +++ b/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 } + ); + }); +}); diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartAutoScale-chromium-linux.png b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartAutoScale-chromium-linux.png new file mode 100644 index 0000000000..ed3e2ea78e Binary files /dev/null and b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartAutoScale-chromium-linux.png differ diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartCustomColor-chromium-linux.png b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartCustomColor-chromium-linux.png new file mode 100644 index 0000000000..ed3e2ea78e Binary files /dev/null and b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartCustomColor-chromium-linux.png differ diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartDefaultColor-chromium-linux.png b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartDefaultColor-chromium-linux.png new file mode 100644 index 0000000000..6dc35c99af Binary files /dev/null and b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartDefaultColor-chromium-linux.png differ diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartGridBoth-chromium-linux.png b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartGridBoth-chromium-linux.png new file mode 100644 index 0000000000..eaf862ad3c Binary files /dev/null and b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartGridBoth-chromium-linux.png differ diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartGridHorizontal-chromium-linux.png b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartGridHorizontal-chromium-linux.png new file mode 100644 index 0000000000..e9709138a3 Binary files /dev/null and b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartGridHorizontal-chromium-linux.png differ diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartGridVertical-chromium-linux.png b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartGridVertical-chromium-linux.png new file mode 100644 index 0000000000..f50a5c6433 Binary files /dev/null and b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartGridVertical-chromium-linux.png differ diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartLegend-chromium-linux.png b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartLegend-chromium-linux.png new file mode 100644 index 0000000000..ed3e2ea78e Binary files /dev/null and b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartLegend-chromium-linux.png differ diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartManualScale-chromium-linux.png b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartManualScale-chromium-linux.png new file mode 100644 index 0000000000..4402e34f7b Binary files /dev/null and b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartManualScale-chromium-linux.png differ diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartMultipleSeries-chromium-linux.png b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartMultipleSeries-chromium-linux.png new file mode 100644 index 0000000000..723e94945e Binary files /dev/null and b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartMultipleSeries-chromium-linux.png differ diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartNoLegend-chromium-linux.png b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartNoLegend-chromium-linux.png new file mode 100644 index 0000000000..2647ea8d36 Binary files /dev/null and b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartNoLegend-chromium-linux.png differ diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartSingleSeries-chromium-linux.png b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartSingleSeries-chromium-linux.png new file mode 100644 index 0000000000..ed3e2ea78e Binary files /dev/null and b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartSingleSeries-chromium-linux.png differ diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartXLabel-chromium-linux.png b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartXLabel-chromium-linux.png new file mode 100644 index 0000000000..ed3e2ea78e Binary files /dev/null and b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartXLabel-chromium-linux.png differ diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartXYLabels-chromium-linux.png b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartXYLabels-chromium-linux.png new file mode 100644 index 0000000000..ed3e2ea78e Binary files /dev/null and b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartXYLabels-chromium-linux.png differ diff --git a/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartYLabel-chromium-linux.png b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartYLabel-chromium-linux.png new file mode 100644 index 0000000000..ed3e2ea78e Binary files /dev/null and b/packages/pluggableWidgets/bubble-chart-web/e2e/BubbleChart.spec.js-snapshots/bubbleChartYLabel-chromium-linux.png differ diff --git a/packages/pluggableWidgets/bubble-chart-web/package.json b/packages/pluggableWidgets/bubble-chart-web/package.json index 05f810e338..083140cade 100644 --- a/packages/pluggableWidgets/bubble-chart-web/package.json +++ b/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:*" } diff --git a/packages/pluggableWidgets/bubble-chart-web/playwright.config.cjs b/packages/pluggableWidgets/bubble-chart-web/playwright.config.cjs new file mode 100644 index 0000000000..29045fc372 --- /dev/null +++ b/packages/pluggableWidgets/bubble-chart-web/playwright.config.cjs @@ -0,0 +1 @@ +module.exports = require("@mendix/run-e2e/playwright.config.cjs"); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index de09f6caeb..fa2109442a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -745,6 +745,9 @@ importers: '@mendix/prettier-config-web-widgets': specifier: workspace:* version: link:../../shared/prettier-config-web-widgets + '@mendix/run-e2e': + specifier: workspace:* + version: link:../../../automation/run-e2e '@mendix/widget-plugin-platform': specifier: workspace:* version: link:../../shared/widget-plugin-platform