[playwright] feat: Page object examples (#41)

* [playwright] feat: Page object examples

backend/package.json

@@ -24,6 +24,7 @@
   "license": "ISC",
   "devDependencies": {
     "@eslint/js": "^9.2.0",
+    "@faker-js/faker": "^8.4.1",
     "@types/cors": "2.8.17",
     "@types/express": "4.17.21",
     "@types/jsonwebtoken": "^9.0.6",
@@ -60,7 +61,7 @@
   },
   "husky": {
     "hooks": {
-        "pre-commit": "pretty-quick --staged"
+      "pre-commit": "pretty-quick --staged"
     }
-}
+  }
 }

backend/src/routes/userRoutes.ts

@@ -52,4 +52,15 @@ router.post('/api/users', async (req, res) => {
   }
 });
 
+router.delete('/api/users/:id', authenticateToken, async (req, res) => {
+  const { id } = req.params;
+
+  try {
+    await prisma.user.delete({ where: { id } });
+    res.status(204).send({ deleted: true });
+  } catch (error) {
+    res.status(500).send({ error: 'Oops, something went wrong' });
+  }
+});
+
 export default router;

backend/tests/service/notes.spec.ts

@@ -1,7 +1,6 @@
 import { config } from 'dotenv';
-import { test, expect, beforeAll } from 'vitest';
+import { test, expect, beforeAll, describe } from 'vitest';
 import request from 'supertest';
-import { describe } from 'node:test';
 
 config();
 

backend/tests/service/users.spec.ts

@@ -1,14 +1,19 @@
 import { config } from 'dotenv';
-import { test, expect, beforeAll } from 'vitest';
+import { test, expect, beforeAll, describe } from 'vitest';
 import request from 'supertest';
-import { describe } from 'node:test';
+import { faker } from '@faker-js/faker';
 
 config();
 
 const BASE_URL = `${process.env.API_URL}`;
 const USERS_URL = `${BASE_URL}/api/users`;
 
+const username = faker.internet.userName().toLowerCase();
+const email = faker.internet.email();
+const password = faker.internet.password();
+
 let token: string;
+let createdID: string;
 
 describe('Unauthenticated Flows', () => {
   test('Should not be able to get the list of Users', async () => {
@@ -51,16 +56,23 @@ describe('Authenticated Flows', () => {
   });
 
   test('Create a new User', async () => {
-    const randomUsername = Math.random().toString(36).substring(7);
     const response = await request(USERS_URL)
       .post('/')
       .set('Authorization', `Bearer ${token}`)
       .send({
-        username: randomUsername,
-        password: 'n0te$App!23',
-        email: `${randomUsername}@testing.com`,
+        username,
+        password,
+        email,
       });
     expect(response.status).toBe(200);
     expect(response.body.id).toBeDefined();
+    createdID = response.body.id;
+  });
+
+  test('Delete a User', async () => {
+    const response = await request(USERS_URL)
+      .delete(`/${createdID}`)
+      .set('Authorization', `Bearer ${token}`);
+    expect(response.status).toBe(204);
   });
 });

backend/tests/unit/users.spec.ts

@@ -133,3 +133,33 @@ describe('Create User', () => {
     });
   });
 });
+
+describe('Delete User', () => {
+  test('DELETE with id', async ({}) => {
+    prisma.user.delete.mockResolvedValue({
+      id: 'gcf89a7e-b941-4f17-bbe0-4e0c8b2cd272',
+      username: 'Dave',
+      password: 'check',
+      email: null,
+      createdAt: new Date('2024-02-05T23:33:42.252Z'),
+      updatedAt: new Date('2024-02-05T23:33:42.252Z'),
+    });
+    const response = await request(app).delete(
+      '/api/users/gcf89a7e-b941-4f17-bbe0-4e0c8b2cd272'
+    );
+    expect(response.status).toBe(204);
+  });
+
+  test('DELETE with error', async ({}) => {
+    prisma.user.delete.mockImplementation(() => {
+      throw new Error('Test error');
+    });
+    const response = await request(app).delete(
+      '/api/users/gcf89a7e-b941-4f17-bbe0-4e0c8b2cd272'
+    );
+    expect(response.status).toBe(500);
+    expect(response.body).toStrictEqual({
+      error: 'Oops, something went wrong',
+    });
+  });
+});

frontend/src/api/apiService.ts

@@ -83,3 +83,8 @@ export const createUser = async ( user:
   );
   return response;
 }
+
+export const deleteUser = async (id: string) => {
+  const response = await api.delete(`users/${id}`);
+  return response;
+}

playwright/package.json

@@ -15,6 +15,7 @@
   "author": "",
   "license": "ISC",
   "devDependencies": {
+    "@faker-js/faker": "^8.4.1",
     "@playwright/test": "1.42.1",
     "@types/node": "20.10.6",
     "@typescript-eslint/eslint-plugin": "6.16.0",

playwright/pages/LoginPage.ts

@@ -0,0 +1,29 @@
+import { Page } from '@playwright/test';
+
+class LoginPage {
+  private page: Page;
+  private defaultTimeout: number = 60 * 1000;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  usernameInput = () => this.page.getByTestId('username');
+  passwordInput = () => this.page.getByTestId('password');
+  loginButton = () => this.page.getByRole('button', { name: 'Login' });
+  signupLink = () => this.page.getByRole('link', { name: 'Sign up' });
+
+  async goto() {
+    await this.page.goto('/');
+    await this.page.waitForLoadState('domcontentloaded');
+    await this.loginButton().waitFor({ timeout: this.defaultTimeout });
+  }
+
+  async login(username: string, password: string) {
+    await this.usernameInput().fill(username);
+    await this.passwordInput().fill(password);
+    await this.page.click('button[type=submit]');
+  }
+}
+
+export default LoginPage;

playwright/pages/NotesPage.ts

@@ -0,0 +1,52 @@
+import { Page } from '@playwright/test';
+
+class NotesPage {
+  private page: Page;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+
+  spinnerContainer = () => this.page.getByTestId('spinner-container');
+  addNewNoteButton = () =>
+    this.page.getByRole('button', { name: 'Add a Note' });
+  addNoteTitleInput = () => this.page.getByPlaceholder('Title');
+  addNoteContentInput = () => this.page.getByPlaceholder('Content');
+  addNoteButton = () => this.page.getByRole('button', { name: 'Add Note' });
+  noteTitle = () => this.page.getByTestId('note-title');
+  noteContent = () => this.page.getByTestId('note-content');
+  deleteNoteButton = () => this.page.getByTestId('note-delete-button');
+  note = () => this.page.getByTestId('note');
+  saveNoteButton = () => this.page.getByRole('button', { name: 'Save' });
+  closeNoteModalButton = () =>
+    this.page.locator('[class*="modal-close"]').first();
+
+  async goto() {
+    await this.page.goto('/');
+    await this.page.waitForLoadState('domcontentloaded');
+    await this.spinnerContainer().waitFor({
+      state: 'hidden',
+      timeout: 60 * 1000,
+    });
+  }
+
+  async addNote(options: { title: string; content: string }) {
+    await this.addNewNoteButton().click();
+    await this.addNoteTitleInput().fill(options.title);
+    await this.addNoteContentInput().fill(options.content);
+    await this.addNoteButton().click();
+  }
+
+  async deleteNote() {
+    await this.deleteNoteButton().first().click();
+  }
+
+  async editNote(options: { title: string; content: string }) {
+    await this.note().first().click();
+    await this.addNoteTitleInput().fill(options.title);
+    await this.addNoteContentInput().fill(options.content);
+    await this.saveNoteButton().click();
+  }
+}
+
+export default NotesPage;

playwright/pages/RegistrationPage.ts

@@ -0,0 +1,61 @@
+import { Page } from '@playwright/test';
+
+class RegistrationPage {
+  /**
+   * @param {Page} page - Playwright page
+   */
+
+  private page: Page;
+  private defaultTimeout: number = 60 * 1000;
+
+  constructor(page: Page) {
+    this.page = page;
+  }
+  usernameInput = () => this.page.locator('input[name="username"]');
+  emailInput = () => this.page.locator('input[name="email"]');
+  passwordInput = () => this.page.locator('input[name="password"]');
+  confirmPasswordInput = () =>
+    this.page.locator('input[name="confirmPassword"]');
+  registerButton = () => this.page.getByRole('button', { name: 'Register' });
+  successMessage = () =>
+    this.page.locator('text="Account created successfully!"');
+  accountHeader = () =>
+    this.page.getByRole('heading', { name: 'Register new account' });
+  errorMessage = () => this.page.locator('.registration-form-error');
+
+  goto = async () => {
+    await this.page.goto('/register');
+    await this.page.waitForLoadState('domcontentloaded');
+    await this.registerButton().waitFor({ timeout: this.defaultTimeout });
+  };
+
+  /**
+   * Register a new user
+   * @param options - Registration options
+   * @param options.username - Username
+   * @param options.email - Email
+   * @param options.password - Password
+   * @param options.expectFailure - Expect registration to fail
+   */
+  register = async (options: {
+    username: string;
+    email: string;
+    password: string;
+    expectFailure?: boolean;
+    timeout?: number;
+  }) => {
+    await this.usernameInput().fill(options.username);
+    await this.emailInput().fill(options.email);
+    await this.passwordInput().fill(options.password);
+    await this.confirmPasswordInput().fill(options.password);
+    await this.registerButton().click();
+
+    if (!options.expectFailure) {
+      await this.successMessage().waitFor({
+        timeout: options.timeout || this.defaultTimeout,
+      });
+    }
+  };
+}
+
+export default RegistrationPage;