From d5942fb41200fcaf5cedea66937f4d68a609696c Mon Sep 17 00:00:00 2001
From: Sem Bauke <semboot699@gmail.com>
Date: Mon, 4 Dec 2023 19:43:02 +0100
Subject: [PATCH] test(e2e, playwright) editor components (#362)

Co-authored-by: yoko <25644062+sidemt@users.noreply.github.com>
---
 apps/frontend/src/components/post-form.jsx | 11 +++++--
 apps/frontend/src/components/tiptap.jsx    |  3 ++
 e2e/editor.spec.ts                         | 34 ++++++++++++++++++++++
 3 files changed, 46 insertions(+), 2 deletions(-)
 create mode 100644 e2e/editor.spec.ts

diff --git a/apps/frontend/src/components/post-form.jsx b/apps/frontend/src/components/post-form.jsx
index a1005923f..5000af832 100644
--- a/apps/frontend/src/components/post-form.jsx
+++ b/apps/frontend/src/components/post-form.jsx
@@ -289,7 +289,9 @@ const PostForm = ({ tags, user, authors, post }) => {
             {!isEditingTitle ? (
               <>
                 <Stack direction="row" onClick={() => setIsEditingTitle(true)}>
-                  <Text fontSize="2xl">{title}</Text>
+                  <Text fontSize="2xl" data-testid="post-title">
+                    {title}
+                  </Text>
                   <Text fontSize="2xl">
                     <FontAwesomeIcon icon={faEdit} />
                   </Text>
@@ -314,7 +316,12 @@ const PostForm = ({ tags, user, authors, post }) => {
                             w="30%"
                             isInvalid={form.errors.title && form.touched.title}
                           >
-                            <Input {...field} placeholder="title" required />
+                            <Input
+                              {...field}
+                              placeholder="title"
+                              data-testid="post-title-field"
+                              required
+                            />
                             <FormErrorMessage>
                               {form.errors.title}
                             </FormErrorMessage>
diff --git a/apps/frontend/src/components/tiptap.jsx b/apps/frontend/src/components/tiptap.jsx
index 29a6e88bc..b63a47dac 100644
--- a/apps/frontend/src/components/tiptap.jsx
+++ b/apps/frontend/src/components/tiptap.jsx
@@ -90,6 +90,7 @@ function ToolBar({ editor, user }) {
       border="1px solid silver"
       borderRadius="lg"
       overflowX="auto"
+      id="toolbar"
     >
       <Button
         variant="ghost"
@@ -305,6 +306,7 @@ const Tiptap = ({ handleContentChange, user, content }) => {
     editorProps: {
       attributes: {
         class: "prose focus:outline-none",
+        "data-testid": "editor",
       },
     },
     onUpdate: ({ editor }) => {
@@ -325,6 +327,7 @@ const Tiptap = ({ handleContentChange, user, content }) => {
           fontSize="xl"
           opacity={0.6}
           backgroundColor="white"
+          data-testid="word-count"
           padding="0.5rem"
         >
           {words === 1 ? `${words} word` : `${words} words`}
diff --git a/e2e/editor.spec.ts b/e2e/editor.spec.ts
new file mode 100644
index 000000000..66db934de
--- /dev/null
+++ b/e2e/editor.spec.ts
@@ -0,0 +1,34 @@
+import { test, expect } from "@playwright/test";
+
+test.beforeEach(async ({ page }) => {
+    await page.goto("/posts/2");
+});
+
+
+test("it should be possible to type in the editor", async ({ page }) => {
+    const textToType = 'Hello World';
+    await page.getByTestId('editor').fill(textToType);
+
+    const wordCount = await page.getByTestId('word-count').innerText();
+    expect(wordCount).toBe(textToType.split(' ').length.toString() + ' words');
+});
+
+
+test("it should have eleven buttons in the toolbar", async ({ page }) => {
+    const buttons = page.locator('#toolbar > button');
+    expect(await buttons.count()).toBe(10);
+
+    const addImageButton = page.locator('#toolbar > label > button');
+    expect(await addImageButton.count()).toBe(1);
+});
+
+test("it should be possible to edit the title", async ({ page }) => {
+    page.getByTestId('post-title').click();
+
+    const titleField =  page.getByTestId('post-title-field');
+    await titleField.fill('New Title');
+    await page.keyboard.press('Enter');
+
+    const newTitle = await page.getByTestId('post-title').innerText();
+    expect(newTitle).toBe('New Title');
+})
\ No newline at end of file