test(e2e, playwright) editor components (freeCodeCamp#362)

Co-authored-by: yoko <[email protected]>
sidemt · Dec 4, 2023 · d5942fb · d5942fb
1 parent b5b5caf
commit d5942fb
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 2 deletions.
diff --git 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
@@ -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
@@ -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');
+})