Skip to content

Commit

Permalink
test(e2e, playwright) editor components (freeCodeCamp#362)
Browse files Browse the repository at this point in the history
Co-authored-by: yoko <[email protected]>
  • Loading branch information
Sembauke and sidemt authored Dec 4, 2023
1 parent b5b5caf commit d5942fb
Show file tree
Hide file tree
Showing 3 changed files with 46 additions and 2 deletions.
11 changes: 9 additions & 2 deletions apps/frontend/src/components/post-form.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand Down
3 changes: 3 additions & 0 deletions apps/frontend/src/components/tiptap.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -90,6 +90,7 @@ function ToolBar({ editor, user }) {
border="1px solid silver"
borderRadius="lg"
overflowX="auto"
id="toolbar"
>
<Button
variant="ghost"
Expand Down Expand Up @@ -305,6 +306,7 @@ const Tiptap = ({ handleContentChange, user, content }) => {
editorProps: {
attributes: {
class: "prose focus:outline-none",
"data-testid": "editor",
},
},
onUpdate: ({ editor }) => {
Expand All @@ -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`}
Expand Down
34 changes: 34 additions & 0 deletions e2e/editor.spec.ts
Original file line number Diff line number Diff line change
@@ -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');
})

0 comments on commit d5942fb

Please sign in to comment.