feat: Tests for profile image changer

src/lib/components/user.svelte

@@ -12,7 +12,7 @@
   <div class="mb-1 flex w-full items-center p-2">
     <div class="avatar mr-2 rounded-sm">
       <div class="h-12 w-12 overflow-hidden rounded-lg border bg-white">
-        <img src={imageSrc} alt="Profile image for {data.user.username}" />
+        <img src={imageSrc} alt="Profile image for {data.user.username}" id="userimage" />
       </div>
     </div>
     <div class="flex w-full items-center align-middle">

tests/profileImage.spec.ts

@@ -0,0 +1,62 @@
+import { test, expect, type Page, type Locator } from '@playwright/test';
+import { login } from './utils';
+
+async function getImgSrc(image: Locator) {
+  return await image.getAttribute('src');
+}
+
+test.describe('Profile Photo Update', () => {
+  let page: Page;
+  let fileInput: Locator;
+  let profileImage: Locator;
+  let submitButton: Locator;
+
+  test.beforeEach(async ({ browser }) => {
+    page = await browser.newPage();
+
+    // Login and navigate
+    await login(page);
+    await page.goto('/account', { timeout: 30000, waitUntil: 'domcontentloaded' });
+
+    // Initialize locators
+    submitButton = page.getByRole('button', { name: 'Update Profile Photo' });
+    profileImage = page.locator('img#userimage');
+    fileInput = page.locator('input[type="file"]');
+  });
+
+  test('successfully update profile image', async () => {
+    await page.waitForTimeout(1000);
+
+    // Get the inital image src
+    const initalSrc = await getImgSrc(profileImage);
+
+    // Upload the new image
+    await fileInput.setInputFiles(['./static/freakybear.jpg']);
+    await submitButton.click();
+
+    // Wait for upload to complete
+    const response = await page.waitForResponse((response) => response.request().method() === 'POST', { timeout: 30000 });
+    expect(response.status()).toBe(200);
+
+    // Make sure the src is not the same as the original
+    expect(await getImgSrc(profileImage)).not.toEqual(initalSrc);
+  });
+
+  test("shouldn't accept non-images", async () => {
+    await page.waitForTimeout(1000);
+
+    // Get the inital image src
+    const initalSrc = await getImgSrc(profileImage);
+
+    // Upload the new image
+    await fileInput.setInputFiles(['./README.md']);
+    await submitButton.click();
+
+    // Wait for upload to complete
+    const response = await page.waitForResponse((response) => response.request().method() === 'POST', { timeout: 30000 });
+    expect(response.status()).toBe(500);
+
+    // Make sure the src is the same as the original
+    expect(await getImgSrc(profileImage)).toEqual(initalSrc);
+  });
+});

tests/signout.spec.ts

@@ -1,39 +1,39 @@
-// import { test, expect, type Page, type Locator } from '@playwright/test';
+import { test, expect, type Page, type Locator } from '@playwright/test';
-// import { login } from './utils';
+import { login } from './utils';
 
-// test.describe('Sign Out Button', () => {
+test.describe('Sign Out Button', () => {
-//   let page: Page;
+  let page: Page;
-//   let button: Locator;
+  let button: Locator;
 
-//   test.beforeEach(async ({ browser }) => {
+  test.beforeEach(async ({ browser }) => {
-//     page = await browser.newPage();
+    page = await browser.newPage();
 
-//     // Login and navigate
+    // Login and navigate
-//     await login(page);
+    await login(page);
-//     await page.goto('/account', { timeout: 30000, waitUntil: 'domcontentloaded' });
+    await page.goto('/account', { timeout: 30000, waitUntil: 'domcontentloaded' });
-//     // Initialize locators
+    // Initialize locators
-//     button = page.getByRole('button', { name: 'Sign Out' });
+    button = page.getByRole('button', { name: 'Sign Out' });
-//   });
+  });
 
-//   test('sign out button signs user out', async ({ request }) => {
+  test('sign out button signs user out', async ({ request }) => {
-//     // Get cookies from the browser context
+    // Get cookies from the browser context
-//     const cookies = await page.context().cookies();
+    const cookies = await page.context().cookies();
-//     const cookieHeader = cookies.map((cookie) => `${cookie.name}=${cookie.value}`).join('; ');
+    const cookieHeader = cookies.map((cookie) => `${cookie.name}=${cookie.value}`).join('; ');
 
-//     const initalfetch = await request.get('/api/checkauth', {
+    const initalfetch = await request.get('/api/checkauth', {
-//       headers: {
+      headers: {
-//         Cookie: cookieHeader,
+        Cookie: cookieHeader,
-//       },
+      },
-//     });
+    });
-//     expect(initalfetch.status()).toEqual(200);
+    expect(initalfetch.status()).toEqual(200);
 
-//     await button.click();
+    await button.click();
 
-//     const finalfetch = await request.get('/api/checkauth', {
+    const finalfetch = await request.get('/api/checkauth', {
-//       headers: {
+      headers: {
-//         Cookie: cookieHeader,
+        Cookie: cookieHeader,
-//       },
+      },
-//     });
+    });
-//     expect(finalfetch.status()).toEqual(401);
+    expect(finalfetch.status()).toEqual(401);
-//   });
+  });
-// });
+});