Move to loginRedirect from loginPopup, and update e2e tests (#293)

* Move to loginRedirect from loginPopup, and update e2e tests

* Use e2e test sharding

* Fix comments

* Cleanup actions

* Install playwright without deps

* Use yarn cache for merge reports

* Install playwright with deps

Author: devksingh4

.github/workflows/deploy.yml

@@ -23,7 +23,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 24.x
+          node-version: lts/*
           cache: 'yarn'
 
       - name: Restore Yarn Cache
@@ -92,17 +92,23 @@ jobs:
           edit-mode: 'replace'
 
   e2e:
+    name: Run Playwright tests
     if: github.event_name == 'pull_request'
     needs: deploy
     runs-on: ubuntu-latest
     permissions:
       contents: read
-    timeout-minutes: 10
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4]
+        shardTotal: [4]
+    timeout-minutes: 20
     steps:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 24.x
+          node-version: lts/*
           cache: 'yarn'
       - name: Validate deployment URL
         run: |
@@ -119,18 +125,21 @@ jobs:
             yarn-modules-${{ runner.arch }}-${{ runner.os }}-
       - name: Install dependencies
         run: yarn -D
-      - run: npx playwright install --with-deps
-      - run: yarn test:e2e
+      - name: Install Playwright dependencies
+        run: npx playwright install --with-deps
+      - run: yarn test:e2e --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
         env:
           PLAYWRIGHT_BASE_URL: ${{ needs.deploy.outputs.deployment-url }}
-      - uses: actions/upload-artifact@v4
+      - name: Upload blob report to GitHub Actions Artifacts
         if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v4
         with:
-          name: playwright-report
-          path: playwright-report/
-          retention-days: 7
+          name: blob-report-${{ matrix.shardIndex }}
+          path: blob-report
+          retention-days: 1
 
   check_formatting:
+    name: Check code formatting
     if: github.event_name == 'pull_request'
     runs-on: ubuntu-latest
     permissions:
@@ -140,7 +149,7 @@ jobs:
       - uses: actions/checkout@v4
       - uses: actions/setup-node@v4
         with:
-          node-version: 24.x
+          node-version: lts/*
           cache: 'yarn'
       - name: Restore Yarn Cache
         uses: actions/cache@v4
@@ -151,3 +160,41 @@ jobs:
             yarn-modules-${{ runner.arch }}-${{ runner.os }}-
       - run: yarn -D
       - run: yarn format:check
+
+  merge-reports:
+    name: Merge Playwright Reports
+    if: ${{ !cancelled() }}
+    needs: [e2e]
+    runs-on: ubuntu-latest
+    permissions:
+      contents: read
+    steps:
+      - uses: actions/checkout@v5
+      - uses: actions/setup-node@v5
+        with:
+          node-version: lts/*
+      - name: Restore Yarn Cache
+        uses: actions/cache@v4
+        with:
+          path: node_modules
+          key: yarn-modules-${{ runner.arch }}-${{ runner.os }}-${{ hashFiles('**/yarn.lock') }}-dev
+          restore-keys: |
+            yarn-modules-${{ runner.arch }}-${{ runner.os }}-
+      - name: Install dependencies
+        run: yarn -D
+      - name: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v5
+        with:
+          path: all-blob-reports
+          pattern: blob-report-*
+          merge-multiple: true
+
+      - name: Merge into HTML Report
+        run: npx playwright merge-reports --reporter html ./all-blob-reports
+
+      - name: Upload HTML report
+        uses: actions/upload-artifact@v4
+        with:
+          name: html-report--attempt-${{ github.run_attempt }}
+          path: playwright-report
+          retention-days: 14

.github/workflows/test.yml

@@ -29,4 +29,10 @@ test.describe('Homepage', () => {
       await expect(page.locator(`img[src*="${sponsor}"]`)).toBeVisible();
     }
   });
+  test('Copyright section is visible', async ({ page }) => {
+    const currentYear = new Date().getFullYear();
+    await expect(
+      page.getByText(`© ${currentYear} ACM @ UIUC. All rights reserved.`)
+    ).toBeVisible();
+  });
 });

e2e/home.spec.ts

@@ -0,0 +1,33 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Identity Sync', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/admin/sync');
+  });
+
+  test('Page renders with heading', async ({ page }) => {
+    const heading = page.locator('h1');
+    await expect(heading).toContainText('Sync Identity');
+    const desc = page.locator('p').first();
+    await expect(desc).toContainText(
+      'Use this tool to setup your account, or update your ACM account with details from your Illinois NetID.'
+    );
+  });
+  test('Page provides sync button which leads to login redirect', async ({
+    page,
+  }) => {
+    await expect(
+      page.getByRole('button', { name: 'Sync Identity' })
+    ).toBeVisible();
+    await page.getByRole('button', { name: 'Sync Identity' }).click();
+    await page.waitForURL(
+      'https://login.microsoftonline.com/44467e6f-462c-4ea2-823f-7800de5434e3/oauth2/v2.0/authorize?client_id=d64e9c50-d144-4b4a-a315-ad2ed456c37**'
+    );
+  });
+  test('Copyright section is visible', async ({ page }) => {
+    const currentYear = new Date().getFullYear();
+    await expect(
+      page.getByText(`© ${currentYear} ACM @ UIUC. All rights reserved.`)
+    ).toBeVisible();
+  });
+});

e2e/identitySync.spec.ts

@@ -0,0 +1,56 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Membership Purchase', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/membership');
+  });
+
+  test('Page renders with heading and perks', async ({ page }) => {
+    const heading = page.locator('h1');
+    await expect(heading).toContainText('Become a Paid Member');
+
+    const perksList = page.getByTestId('membership-perks');
+    await expect(perksList).toBeVisible();
+    const listItems = perksList.locator('li');
+    expect((await listItems.all()).length).toBeGreaterThan(0);
+  });
+  test('Page provides purchase button which leads to login redirect', async ({
+    page,
+  }) => {
+    await expect(
+      page.getByRole('button', { name: 'Purchase Membership' })
+    ).toBeVisible();
+    await page.getByRole('button', { name: 'Purchase Membership' }).click();
+    await page.waitForURL(
+      'https://login.microsoftonline.com/44467e6f-462c-4ea2-823f-7800de5434e3/oauth2/v2.0/authorize?client_id=d64e9c50-d144-4b4a-a315-ad2ed456c37**'
+    );
+  });
+});
+
+test.describe('Membership Check', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/membership/check');
+  });
+
+  test('Page renders with heading', async ({ page }) => {
+    const heading = page.locator('h1');
+    await expect(heading).toContainText('Check Paid Membership');
+  });
+  test('Page provides check button which leads to login redirect', async ({
+    page,
+  }) => {
+    await expect(
+      page.getByRole('button', { name: 'Check Membership' })
+    ).toBeVisible();
+    await page.getByRole('button', { name: 'Check Membership' }).click();
+    await page.waitForURL(
+      'https://login.microsoftonline.com/44467e6f-462c-4ea2-823f-7800de5434e3/oauth2/v2.0/authorize?client_id=d64e9c50-d144-4b4a-a315-ad2ed456c37**'
+    );
+  });
+  test('Copyright section is visible', async ({ page }) => {
+    const currentYear = new Date().getFullYear();
+    await expect(
+      page.getByText(`© ${currentYear} ACM @ UIUC. All rights reserved.`)
+    ).toBeVisible();
+  });
+});

e2e/membership.spec.ts

@@ -1,5 +1,11 @@
 import { test, expect } from '@playwright/test';
 
+const internalPages = [
+  { href: '/about', heading: /About/i },
+  { href: '/calendar', heading: /Calendar/i },
+  { href: '/store', heading: /All Products/i },
+];
+
 test.describe('Navigation', () => {
   test.beforeEach(async ({ page }) => {
     await page.goto('/');
@@ -24,21 +30,16 @@ test.describe('Navigation', () => {
     await expect(page.locator('nav a[href*="illinoiscs.wiki"]')).toBeVisible();
   });
 
-  test('internal nav links navigate to correct pages', async ({ page }) => {
-    const pages = [
-      { href: '/about', heading: /About/i },
-      { href: '/calendar', heading: /Calendar/i },
-    ];
-
-    for (const p of pages) {
+  for (const p of internalPages) {
+    test(`Internal nav link navigates to ${p.href}`, async ({ page }) => {
       await page.goto('/');
       await page.locator(`nav a[href="${p.href}"]`).click();
       await expect(page).toHaveURL(new RegExp(p.href));
       await expect(
         page.getByRole('heading', { name: p.heading }).first()
       ).toBeVisible();
-    }
-  });
+    });
+  }
 
   test('Join Now button opens Join modal', async ({ page }) => {
     await page.getByRole('button', { name: /Join Now/i }).click();

e2e/navigation.spec.ts

@@ -0,0 +1,23 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Resources', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('resources/');
+  });
+
+  test('Heading renders with description', async ({ page }) => {
+    const heading = page.getByTestId('content-title');
+    const description = page.getByTestId('content-description');
+    await expect(heading).toContainText('Resources');
+    await expect(description).toContainText(
+      'Learn about resources provided to ACM @ UIUC members'
+    );
+  });
+
+  test('Copyright section is visible', async ({ page }) => {
+    const currentYear = new Date().getFullYear();
+    await expect(
+      page.getByText(`© ${currentYear} ACM @ UIUC. All rights reserved.`)
+    ).toBeVisible();
+  });
+});

e2e/resources.spec.ts

@@ -6,7 +6,7 @@ export default defineConfig({
   forbidOnly: !!process.env.CI,
   retries: process.env.CI ? 2 : 0,
   workers: process.env.CI ? 1 : undefined,
-  reporter: process.env.CI ? 'html' : 'list',
+  reporter: process.env.CI ? 'blob' : 'list',
   timeout: 30_000,
   use: {
     baseURL: process.env.PLAYWRIGHT_BASE_URL ?? 'http://localhost:3000',

playwright.config.ts

@@ -1,9 +1,8 @@
 import {
-  BrowserAuthError,
   createStandardPublicClientApplication,
   InteractionRequiredAuthError,
   type IPublicClientApplication,
-  type PopupRequest,
+  type RedirectRequest,
 } from '@azure/msal-browser';
 
 export const loginRequest = {
@@ -27,54 +26,29 @@ export const initMsalClient = async () => {
 };
 
 export const getUserAccessToken = async (
-  pca: IPublicClientApplication
+  pca: IPublicClientApplication,
+  returnPath?: string
 ): Promise<string> => {
   const account = pca.getActiveAccount() || pca.getAllAccounts()[0];
-  const request: PopupRequest = {
+  const request: RedirectRequest = {
     ...loginRequest,
     account: account || undefined,
     redirectUri: '/auth-redirect',
+    state: returnPath ?? window.location.pathname + window.location.search,
   };
 
   if (!account) {
-    try {
-      const response = await pca.loginPopup(request);
-      pca.setActiveAccount(response.account);
-      return response.accessToken;
-    } catch (error) {
-      if (
-        error instanceof BrowserAuthError &&
-        error.errorCode === 'popup_window_error'
-      ) {
-        alert(
-          'Your browser is blocking popups. Please allow popups for this site and then try logging in again.'
-        );
-      }
-      console.error('MSAL login failed:', error);
-      throw error;
-    }
+    await pca.loginRedirect(request);
+    throw new Error('Redirecting to login');
   }
 
   try {
     const response = await pca.acquireTokenSilent(request);
     return response.accessToken;
   } catch (e) {
     if (e instanceof InteractionRequiredAuthError) {
-      try {
-        const response = await pca.acquireTokenPopup(request);
-        return response.accessToken;
-      } catch (popupError) {
-        if (
-          popupError instanceof BrowserAuthError &&
-          popupError.errorCode === 'popup_window_error'
-        ) {
-          alert(
-            'Your browser is blocking popups, which are required for this action. Please allow popups for this site and try again.'
-          );
-        }
-        console.error('MSAL popup token acquisition failed:', popupError);
-        throw popupError;
-      }
+      await pca.acquireTokenRedirect(request);
+      throw new Error('Redirecting to login', { cause: e });
     }
     throw e;
   }