add a basic upcoming events view test

Author: devksingh4

playwright.config.ts

@@ -11,7 +11,7 @@ export default defineConfig({
   /* Opt out of parallel tests on CI. */
   workers: process.env.CI ? 1 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
-  reporter: 'html',
+  reporter: process.env.CI ? 'github' : 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
     /* Base URL to use in actions like `await page.goto('/')`. */

tests/e2e/base.ts

@@ -57,8 +57,22 @@ async function becomeUser(page) {
   await page.getByRole("button", { name: "No" }).click();
 }
 
+export async function getUpcomingEvents() {
+  const data = await fetch('https://infra-core-api.aws.qa.acmuiuc.org/api/v1/events?upcomingOnly=true');
+  return await data.json() as Record<string, string>[];
+}
+
+export async function getAllEvents() {
+  const data = await fetch('https://infra-core-api.aws.qa.acmuiuc.org/api/v1/events');
+  return await data.json() as Record<string, string>[];
+}
+
+export function capitalizeFirstLetter(string: string) {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
 export const test = base.extend<{ becomeUser: (page) => Promise<void> }>({
-  becomeUser: async ({}, use) => {
+  becomeUser: async ({ }, use) => {
     use(becomeUser);
   },
 });

tests/e2e/events.spec.ts

@@ -0,0 +1,43 @@
+import { expect } from "@playwright/test";
+import { capitalizeFirstLetter, getUpcomingEvents, test } from "./base";
+import { describe } from "node:test";
+
+describe("Events tests", () => {
+  test("A user can login and view the upcoming events", async ({
+    page,
+    becomeUser,
+  }) => {
+    await becomeUser(page);
+    await page.locator('a').filter({ hasText: 'Events' }).click();
+    await expect(page.getByRole('heading')).toContainText('Core Management Service (NonProd)');
+    await expect(page.getByRole('button', { name: 'New Calendar Event' })).toBeVisible();
+    await expect(page.getByRole('button', { name: 'Show Previous Events' })).toBeVisible();
+
+    const table = page.getByTestId('events-table');
+    await expect(table).toBeVisible();
+
+    const rows = await table.locator('tbody tr').all();
+    const expectedTableData = await getUpcomingEvents();
+
+    for (let i = 0; i < rows.length; i++) {
+      const row = rows[i];
+      const expectedData = expectedTableData[i];
+
+      const title = await row.locator('td:nth-child(1)').innerText();
+      const location = await row.locator('td:nth-child(4)').innerText();
+      const description = await row.locator('td:nth-child(5)').innerText();
+      const host = await row.locator('td:nth-child(6)').innerText();
+      const featured = await row.locator('td:nth-child(7)').innerText();
+      const repeats = await row.locator('td:nth-child(8)').innerText();
+
+      expect(title).toEqual(expectedData.title);
+      expect(location).toEqual(expectedData.location);
+      expect(description).toEqual(expectedData.description);
+      expect(host).toEqual(expectedData.host);
+      expect(featured).toEqual(expectedData.featured ? "Yes" : "No");
+      expect(repeats).toEqual(capitalizeFirstLetter(expectedData.repeats));
+    }
+
+    expect(page.url()).toEqual("https://manage.qa.acmuiuc.org/events/manage");
+  });
+});