Skip to content

Commit

Permalink
chore(playwright): merge rte playwright components
Browse files Browse the repository at this point in the history
  • Loading branch information
damienrobson-sage committed Jan 14, 2025
1 parent a2e4333 commit 1f72852
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 137 deletions.
124 changes: 2 additions & 122 deletions src/components/rich-text-editor/components.test-pw.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React from "react";
import RichTextEditor from "./rich-text-editor.component";

export const RichTextEditorDefaultComponent = ({ ...props }) => {
const RichTextEditorDefaultComponent = ({ ...props }) => {
return (
<RichTextEditor
labelText="Playwright Example"
Expand All @@ -11,124 +11,4 @@ export const RichTextEditorDefaultComponent = ({ ...props }) => {
);
};

export const RichTextEditorWithValue = ({ ...props }) => {
const initialValue = {
root: {
children: [
{
children: [
{
detail: 0,
format: 0,
mode: "normal",
style: "",
text: "Sample text with ",
type: "text",
version: 1,
},
{
detail: 0,
format: 1,
mode: "normal",
style: "",
text: "some formatting",
type: "text",
version: 1,
},
{
detail: 0,
format: 0,
mode: "normal",
style: "",
text: " ",
type: "text",
version: 1,
},
{
detail: 0,
format: 2,
mode: "normal",
style: "",
text: "applied",
type: "text",
version: 1,
},
{
detail: 0,
format: 0,
mode: "normal",
style: "",
text: ".",
type: "text",
version: 1,
},
],
direction: "ltr",
format: "",
indent: 0,
type: "paragraph",
version: 1,
textFormat: 0,
textStyle: "",
},
],
direction: "ltr",
format: "",
indent: 0,
type: "root",
version: 1,
},
};
const value = JSON.stringify(initialValue);
return (
<RichTextEditor
labelText="Playwright Example"
namespace="pw-rte"
value={value}
{...props}
/>
);
};

export const RichTextEditorWithUnformattedValue = ({ ...props }) => {
const initialValue = {
root: {
children: [
{
children: [
{
detail: 0,
format: 0,
mode: "normal",
style: "",
text: "This text needs formatting",
type: "text",
version: 1,
},
],
direction: "ltr",
format: "",
indent: 0,
type: "paragraph",
version: 1,
textFormat: 0,
textStyle: "",
},
],
direction: "ltr",
format: "",
indent: 0,
type: "root",
version: 1,
},
};
const value = JSON.stringify(initialValue);
return (
<RichTextEditor
labelText="Playwright Example"
namespace="pw-rte"
value={value}
{...props}
/>
);
};
export default RichTextEditorDefaultComponent;
139 changes: 124 additions & 15 deletions src/components/rich-text-editor/rich-text-editor.pw.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,110 @@ import React from "react";
import { test, expect } from "@playwright/experimental-ct-react17";
import { checkAccessibility } from "../../../playwright/support/helper";

import {
RichTextEditorDefaultComponent,
RichTextEditorWithUnformattedValue,
RichTextEditorWithValue,
} from "./components.test-pw";
import RichTextEditorDefaultComponent from "./components.test-pw";

const preformattedJSON = {
root: {
children: [
{
children: [
{
detail: 0,
format: 0,
mode: "normal",
style: "",
text: "Sample text with ",
type: "text",
version: 1,
},
{
detail: 0,
format: 1,
mode: "normal",
style: "",
text: "some formatting",
type: "text",
version: 1,
},
{
detail: 0,
format: 0,
mode: "normal",
style: "",
text: " ",
type: "text",
version: 1,
},
{
detail: 0,
format: 2,
mode: "normal",
style: "",
text: "applied",
type: "text",
version: 1,
},
{
detail: 0,
format: 0,
mode: "normal",
style: "",
text: ".",
type: "text",
version: 1,
},
],
direction: "ltr",
format: "",
indent: 0,
type: "paragraph",
version: 1,
textFormat: 0,
textStyle: "",
},
],
direction: "ltr",
format: "",
indent: 0,
type: "root",
version: 1,
},
};

const unformattedJSON = {
root: {
children: [
{
children: [
{
detail: 0,
format: 0,
mode: "normal",
style: "",
text: "This text needs formatting",
type: "text",
version: 1,
},
],
direction: "ltr",
format: "",
indent: 0,
type: "paragraph",
version: 1,
textFormat: 0,
textStyle: "",
},
],
direction: "ltr",
format: "",
indent: 0,
type: "root",
version: 1,
},
};

const preformattedValue = JSON.stringify(preformattedJSON);
const unformattedValue = JSON.stringify(unformattedJSON);

test.describe("Prop tests", () => {
test.describe("characterLimit", () => {
Expand Down Expand Up @@ -162,7 +261,7 @@ test.describe("Prop tests", () => {
mount,
page,
}) => {
await mount(<RichTextEditorWithValue />);
await mount(<RichTextEditorDefaultComponent value={preformattedValue} />);
const defaultText = await page.locator("p").textContent();
expect(defaultText).toBe("Sample text with some formatting applied.");

Expand Down Expand Up @@ -198,7 +297,11 @@ test.describe("Functionality tests", () => {
page,
}) => {
await mount(
<RichTextEditorWithValue onCancel={() => {}} resetOnCancel />,
<RichTextEditorDefaultComponent
value={preformattedValue}
onCancel={() => {}}
resetOnCancel
/>,
);
const textbox = await page.locator("div[role='textbox']");
await textbox.click();
Expand Down Expand Up @@ -298,7 +401,7 @@ test.describe("Functionality tests", () => {
mount,
page,
}) => {
await mount(<RichTextEditorWithUnformattedValue />);
await mount(<RichTextEditorDefaultComponent value={unformattedValue} />);
const textbox = await page.locator("div[role='textbox']");
await textbox.selectText();
const boldButton = await page.locator(
Expand All @@ -317,7 +420,7 @@ test.describe("Functionality tests", () => {
mount,
page,
}) => {
await mount(<RichTextEditorWithUnformattedValue />);
await mount(<RichTextEditorDefaultComponent value={unformattedValue} />);
const textbox = await page.locator("div[role='textbox']");
await textbox.selectText();
const italicButton = await page.locator(
Expand All @@ -336,7 +439,7 @@ test.describe("Functionality tests", () => {
mount,
page,
}) => {
await mount(<RichTextEditorWithUnformattedValue />);
await mount(<RichTextEditorDefaultComponent value={unformattedValue} />);
const textbox = await page.locator("div[role='textbox']");
await textbox.selectText();
const orderedListButton = await page.locator(
Expand All @@ -355,7 +458,7 @@ test.describe("Functionality tests", () => {
mount,
page,
}) => {
await mount(<RichTextEditorWithUnformattedValue />);
await mount(<RichTextEditorDefaultComponent value={unformattedValue} />);
const textbox = await page.locator("div[role='textbox']");
await textbox.selectText();
const unorderedListButton = await page.locator(
Expand Down Expand Up @@ -402,7 +505,9 @@ test.describe("Events tests", () => {
test.describe("Shortcut keys", () => {
test.describe("Bold", () => {
test("pressing Meta + B toggles bold text", async ({ mount, page }) => {
await mount(<RichTextEditorWithUnformattedValue />);
await mount(
<RichTextEditorDefaultComponent value={unformattedValue} />,
);
const textbox = await page.locator("div[role='textbox']");
await textbox.selectText();
await page.keyboard.press("ControlOrMeta+B");
Expand All @@ -429,7 +534,9 @@ test.describe("Events tests", () => {

test.describe("Italic", () => {
test("pressing Meta + I toggles italic text", async ({ mount, page }) => {
await mount(<RichTextEditorWithUnformattedValue />);
await mount(
<RichTextEditorDefaultComponent value={unformattedValue} />,
);
const textbox = await page.locator("div[role='textbox']");
await textbox.selectText();
await page.keyboard.press("ControlOrMeta+I");
Expand Down Expand Up @@ -459,7 +566,9 @@ test.describe("Events tests", () => {
mount,
page,
}) => {
await mount(<RichTextEditorWithUnformattedValue />);
await mount(
<RichTextEditorDefaultComponent value={unformattedValue} />,
);
const textbox = await page.locator("div[role='textbox']");
await textbox.click();
await textbox.press("Home");
Expand All @@ -478,7 +587,7 @@ test.describe("Events tests", () => {
mount,
page,
}) => {
await mount(<RichTextEditorWithUnformattedValue />);
await mount(<RichTextEditorDefaultComponent value={unformattedValue} />);
const textbox = await page.locator("div[role='textbox']");
await textbox.click();
await textbox.press("Home");
Expand Down

0 comments on commit 1f72852

Please sign in to comment.