[playwright] chore: Separate login test (#48)

frontend/src/components/Login.tsx

@@ -44,7 +44,7 @@ const Login: React.FC<LoginProps> = ({ onLogin }) => {
       <div className="login-page-form">
         <form onSubmit={handleSubmit}>
           <h3>Existing user login</h3>
-          {errorText !== "" && <span className='registration-form-error'>{errorText}</span>}
+          {errorText !== "" && <span data-testid="login-error-text" className='registration-form-error'>{errorText}</span>}
           <input
             type="text"
             placeholder="Username"

playwright/pages/LoginPage.ts

@@ -12,6 +12,7 @@ class LoginPage {
   passwordInput = () => this.page.getByTestId('password');
   loginButton = () => this.page.getByRole('button', { name: 'Login' });
   signupLink = () => this.page.getByRole('link', { name: 'Sign up' });
+  loginErrorText = () => this.page.getByTestId('login-error-text');
 
   async goto() {
     await this.page.goto('/');

playwright/tests/login.spec.ts

@@ -0,0 +1,35 @@
+import { test, expect, Page } from '@playwright/test';
+import { allure } from 'allure-playwright';
+import LoginPage from '../pages/LoginPage';
+import NotesPage from '../pages/NotesPage';
+
+let page: Page;
+let loginPage: LoginPage;
+let notesPage: NotesPage;
+
+const timeout = 60 * 1000;
+
+test.beforeAll(async ({ browser }) => {
+  await allure.feature('User Login');
+  page = await browser.newPage();
+  loginPage = new LoginPage(page);
+  notesPage = new NotesPage(page);
+});
+
+test.beforeEach(async () => {
+  await loginPage.goto();
+});
+
+test.describe('Notes App Login', { tag: ['@PRODUCTION'] }, async () => {
+  test('should see user successfully logged in', async () => {
+    await loginPage.login('dave', 'test');
+    await expect(page).toHaveTitle(/Notes/, { timeout });
+    await expect(notesPage.spinnerContainer()).toBeHidden({ timeout });
+  });
+  test('should see error message when login fails', async () => {
+    await loginPage.login('dave', 'wrongpassword');
+    await expect(loginPage.loginErrorText()).toHaveText(
+      'Invalid username or password'
+    );
+  });
+});

playwright/tests/note.spec.ts

@@ -20,11 +20,11 @@ test.beforeAll(async ({ browser }) => {
   loginPage = new LoginPage(page);
   notesPage = new NotesPage(page);
   await loginPage.goto();
+  await loginPage.login('dave', 'test');
 });
 
 test.describe('Notes App e2e flow', { tag: ['@PRODUCTION'] }, async () => {
   test('Should see notes page login', async () => {
-    await loginPage.login('dave', 'test');
     await expect(page).toHaveTitle(/Notes/, { timeout });
     await expect(notesPage.spinnerContainer()).toBeHidden({ timeout });
   });
@@ -38,11 +38,6 @@ test.describe('Notes App e2e flow', { tag: ['@PRODUCTION'] }, async () => {
     await expect(notesPage.noteContent().first()).toHaveText(NOTE_CONTENT);
   });
 
-  test('Should be able to Delete a Note', async () => {
-    await notesPage.deleteNote();
-    await expect(notesPage.noteTitle().first()).not.toHaveText(NOTE_TITLE);
-  });
-
   test('Should be able to Edit a Note', async () => {
     await notesPage.editNote({
       title: EDITED_NOTE_TITLE,
@@ -54,6 +49,11 @@ test.describe('Notes App e2e flow', { tag: ['@PRODUCTION'] }, async () => {
     );
   });
 
+  test('Should be able to Delete a Note', async () => {
+    await notesPage.deleteNote();
+    await expect(notesPage.noteTitle().first()).not.toHaveText(NOTE_TITLE);
+  });
+
   test('Should not be able to add Note without title', async () => {
     await notesPage.addNote({
       title: '',