test: adds playwright login spec

zecarrera · Sep 20, 2024 · 4977870 · 4977870
1 parent bb5d65c
commit 4977870
Show file tree

Hide file tree

Showing 6 changed files with 42 additions and 5 deletions.
diff --git a/src/components/auth/login/LoginForm.tsx b/src/components/auth/login/LoginForm.tsx
@@ -75,7 +75,7 @@ export const LoginForm = () => {
 	return (
 		<>
 			{state.isError && (
-				<FormattedErrors data={state.errors} className="ml-5" />
+				<FormattedErrors data={state.errors} className="ml-5"/>
 			)}
 
 			<Form {...form}>
@@ -94,6 +94,7 @@ export const LoginForm = () => {
 										placeholder="Email"
 										{...field}
 										className="py-3 px-6 text-xl rounded-s-md text-gray-400 placeholder:text-gray-400  focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-blue-custom"
+										data-testid="email-input"
 									/>
 								</FormControl>
 								<FormMessage />
@@ -112,6 +113,7 @@ export const LoginForm = () => {
 										placeholder="Password"
 										{...field}
 										className="py-3 px-6 text-xl rounded-s-md text-gray-400 placeholder:text-gray-400 focus-visible:ring-0 focus-visible:ring-offset-0 focus:border-blue-custom"
+										data-testid="password-input"
 									/>
 								</FormControl>
 								<FormMessage />
@@ -123,6 +125,7 @@ export const LoginForm = () => {
 							type="submit"
 							disabled={state.loading}
 							className="bg-green-custom opacity-65 py-3 px-5 rounded-md  text-xl hover:bg-green-custom hover:opacity-100"
+							data-testid="signin-btn"
 						>
 							Sign in
 						</Button>

diff --git a/src/components/error/FormattedErrors.tsx b/src/components/error/FormattedErrors.tsx
@@ -16,7 +16,7 @@ export const FormattedErrors: React.FC<TFormattedErrors> = ({
 		<ul className={cn("list-disc text-left text-rose-700", className)}>
 			{keys.map((ele) =>
 				data[ele].map((error, index) => (
-					<li key={index}>{ele + " " + error}</li>
+					<li key={index} data-testid='error-msg'>{ele + " " + error}</li>
 				))
 			)}
 		</ul>

diff --git a/src/components/profiles/ProfileHeader.tsx b/src/components/profiles/ProfileHeader.tsx
@@ -44,6 +44,7 @@ const ProfileHeader: React.FC<TProfileHeaderProps> = ({ profile, session }) => {
 						<Link
 							href="/settings"
 							className="flex items-center align-middle bg-transparent border border-gray-400 rounded-sm cursor-pointer text-gray-400 p-1 hover:bg-gray-200 ml-auto"
+							data-testid="profile-settings"
 						>
 							<Settings height={15} width={15} className="mr-1" />
 							Edit Profile Settings

diff --git a/src/components/profiles/avatar/UserAvatar.tsx b/src/components/profiles/avatar/UserAvatar.tsx
@@ -31,7 +31,7 @@ const UserAvatar: React.FC<TUserAvatar> = ({
 					className
 				)}
 			>
-				<Link href={`/profile/${username}`}>{username}</Link>
+				<Link href={`/profile/${username}`} data-testid="profile-username">{username}</Link>
 				<p className="opacity-65 font-light">{date}</p>
 			</div>
 		</div>

diff --git a/tests/login.spec.ts b/tests/login.spec.ts
@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test';
+const URL = "http://localhost:3000/";
+
+
+test.describe.only('Given conduit login page is loaded', ()=> {
+  test.beforeEach(async ({ page }) =>{
+    await page.goto(`${URL}login`);
+  })
+
+  test('When entering valid credentials', async ({ page }) => {
+    const email = 'jose.carrera@conduit.com';
+    const password = "123456"
+
+    await page.getByTestId('email-input').fill(email);
+    await page.getByTestId('password-input').fill(password);
+    await page.getByTestId('signin-btn').click({force:true});
+
+    await expect(page.locator('a[href="/profile/jose.carrera"]')).toBeVisible();
+  });
+
+  test.describe('When entering invalid credentials', () =>{
+    test('Then login is not successful', async ({ page }) => {
+      const email = 'invalid@conduit.com';
+      const password = "123456"
+
+      await page.getByTestId('email-input').fill(email);
+      await page.getByTestId('password-input').fill(password);
+      await page.getByTestId('signin-btn').click({force:true});
+
+      await expect(page.getByTestId('error-msg')).toContainText('Internal server error');
+    });
+  });
+});
diff --git a/tests/view-articles.spec.ts b/tests/view-articles.spec.ts
@@ -2,7 +2,7 @@ import { test, expect } from '@playwright/test';
 const URL = "http://localhost:3000/";
 
 
-test.describe.only('Given conduit home page is loaded', ()=> {
+test.describe('Given conduit home page is loaded', ()=> {
   test.beforeEach(async ({ page }) =>{
     await page.goto(URL);
   })
@@ -11,7 +11,7 @@ test.describe.only('Given conduit home page is loaded', ()=> {
     await expect(page.getByTestId('article-title')).toHaveCount(2);
   });
 
-  test.describe('When clicking the first article', () =>{
+  test.describe('When clicking the first article', () => {
     test('Then article page loads', async ({ page }) => {
       await page.getByTestId('article-title').nth(1).click();