chore: add more test on rich text

Author: gjulivan

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

@@ -5,14 +5,14 @@ import { createElement } from "react";
 import { RichTextContainerProps } from "../../typings/RichTextProps";
 
 import RichText from "../RichText";
-
+const richTextDefaultValue = `<h2><strong>Rich text default value</strong></h2>`;
 describe("Rich Text", () => {
     let defaultProps: RichTextContainerProps;
     beforeEach(() => {
         defaultProps = {
             name: "RichText",
             id: "RichText1",
-            stringAttribute: new EditableValueBuilder<string>().withValue("Rich text default value").build(),
+            stringAttribute: new EditableValueBuilder<string>().withValue(richTextDefaultValue).build(),
             preset: "basic",
             toolbarLocation: "bottom",
             widthUnit: "percentage",
@@ -59,4 +59,19 @@ describe("Rich Text", () => {
         const component = render(<RichText {...defaultProps} toolbarLocation={"top"} preset={"full"} />);
         expect(component.container).toMatchSnapshot();
     });
+
+    it("renders richtext widget with readonly config", async () => {
+        const component = render(
+            <RichText
+                {...defaultProps}
+                readOnlyStyle={"bordered"}
+                stringAttribute={new EditableValueBuilder<string>()
+                    .withValue(richTextDefaultValue)
+                    .isReadOnly()
+                    .build()}
+            />
+        );
+
+        expect(component.container).toMatchSnapshot();
+    });
 });

packages/pluggableWidgets/rich-text-web/src/__tests__/RichText.spec.tsx

@@ -690,3 +690,24 @@ exports[`Rich Text renders richtext widget with different config 1`] = `
   </div>
 </div>
 `;
+
+exports[`Rich Text renders richtext widget with readonly config 1`] = `
+<div>
+  <div
+    class="widget-rich-text form-control widget-rich-text-readonly-bordered flex-column editor-bordered"
+    spellcheck="true"
+    style="width: 100%;"
+    tabindex="0"
+  >
+    <div
+      class="flexcontainer flex-column-reverse hide-toolbar"
+    >
+      <div
+        class="widget-rich-text-container"
+        style="height: auto;"
+      />
+      <div />
+    </div>
+  </div>
+</div>
+`;