chore: add more test on rich text

Author: gjulivan

packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js

@@ -1,4 +1,4 @@
-import { test, expect } from "@playwright/test";
+import { expect, test } from "@playwright/test";
 
 test.afterEach("Cleanup session", async ({ page }) => {
     // Because the test isolation that will open a new session for every test executed, and that exceeds Mendix's license limit of 5 sessions, so we need to force logout after each test.
@@ -28,13 +28,20 @@ test.describe("RichText", () => {
         await expect(page.locator(".mx-name-richText4")).toHaveScreenshot(`toolbarBasicMode.png`, { threshold: 0.4 });
     });
 
-    test("compares with a screenshot baseline and checks if inline advanced mode are rendered as expected", async ({
+    test("compares with a screenshot baseline and checks if bottom toolbar advanced mode are rendered as expected", async ({
         page
     }) => {
         await page.goto("/p/advanced");
         await page.waitForLoadState("networkidle");
         await expect(page.locator(".mx-name-richText1")).toBeVisible();
-        await expect(page.locator(".mx-name-richText1")).toHaveScreenshot(`inlineAdvancedMode.png`, { threshold: 0.4 });
+        await expect(page.locator(".mx-name-richText1")).toHaveScreenshot(`bottomToolbarAdvancedMode.png`, {
+            threshold: 0.4
+        });
+
+        await page.click(".mx-name-richText1 .ql-toolbar button.ql-image");
+        await expect(page.locator(".widget-rich-text .widget-rich-text-modal-body").first()).toHaveScreenshot(
+            `insertImageDialog.png`
+        );
     });
 
     test("compares with a screenshot baseline and checks if toolbar advanced mode are rendered as expected", async ({
@@ -90,4 +97,34 @@ test.describe("RichText", () => {
             threshold: 0.4
         });
     });
+
+    test("compares with a screenshot baseline and checks for readonly mode basic styling", async ({ page }) => {
+        await page.goto("/p/read-only");
+        await page.waitForLoadState("networkidle");
+        await page.locator(".mx-name-richText3").scrollIntoViewIfNeeded();
+        await expect(page.locator(".mx-name-richText3")).toBeVisible();
+        await expect(page.locator(".mx-name-richText3")).toHaveScreenshot(`readOnlyModeBasic.png`, {
+            threshold: 0.4
+        });
+    });
+
+    test("compares with a screenshot baseline and checks for readonly mode bordered styling", async ({ page }) => {
+        await page.goto("/p/read-only");
+        await page.waitForLoadState("networkidle");
+        await page.locator(".mx-name-richText2").scrollIntoViewIfNeeded();
+        await expect(page.locator(".mx-name-richText2")).toBeVisible();
+        await expect(page.locator(".mx-name-richText2")).toHaveScreenshot(`readOnlyModeBordered.png`, {
+            threshold: 0.4
+        });
+    });
+
+    test("compares with a screenshot baseline and checks for readonly mode read panel styling", async ({ page }) => {
+        await page.goto("/p/read-only");
+        await page.waitForLoadState("networkidle");
+        await page.locator(".mx-name-richText6").scrollIntoViewIfNeeded();
+        await expect(page.locator(".mx-name-richText6")).toBeVisible();
+        await expect(page.locator(".mx-name-richText6")).toHaveScreenshot(`readOnlyModeReadPanel.png`, {
+            threshold: 0.4
+        });
+    });
 });

packages/pluggableWidgets/rich-text-web/e2e/RichText.spec.js-snapshots/inlineAdvancedMode-chromium-linux.png

@@ -24,7 +24,7 @@
     },
     "testProject": {
         "githubUrl": "https://github.com/mendix/testProjects",
-        "branchName": "rich-text-v4-web"
+        "branchName": "rich-text-v4-2"
     },
     "scripts": {
         "build": "cross-env MPKOUTPUT=RichText.mpk pluggable-widgets-tools build:web",