more refactors

frontend/components/header/HeaderMobile.vue

@@ -35,13 +35,13 @@
               :location="DropdownLocation.SIDE_MENU"
             />
             <DropdownInfo
-              class="w-full"
               id="info"
+              class="w-full"
               :location="DropdownLocation.SIDE_MENU"
             />
             <DropdownUserOptions
-              class="w-full"
               id="user-options"
+              class="w-full"
               :location="DropdownLocation.SIDE_MENU"
               :userIsSignedIn="userIsSignedIn"
             />

frontend/components/header/HeaderWebsite.vue

@@ -35,16 +35,19 @@
           />
           <DropdownCreate
             v-if="userIsSignedIn && devMode.active"
+            id="create"
             class="w-full"
             :location="DropdownLocation.SIDE_MENU"
           />
           <DropdownInfo
             v-if="devMode.active"
+            id="info"
             class="w-full"
             :location="DropdownLocation.SIDE_MENU"
           />
           <DropdownUserOptions
             v-if="devMode.active"
+            id="user-options"
             class="w-full"
             :location="DropdownLocation.SIDE_MENU"
             :userIsSignedIn="userIsSignedIn"

frontend/nuxt.config.ts

@@ -31,6 +31,14 @@ export default defineNuxtConfig({
     server: {
       watch: {
         usePolling: true,
+        ignored: [
+          '**/playwright/**',
+          '**/playwright-report/**',
+          '**/tests/**',
+          '**/test-results/**',
+          '**/frontend/test-results/**',
+          '**/frontend/test-results/accessibility-results/**'
+        ],
       },
     },
     build: {

frontend/playwright.config.ts

@@ -33,7 +33,7 @@ export default defineConfig({
   reporter: [
     ['html'],
     ['list'],
-    ['./tests/utils/axe-reporter.ts']
+    ['./tests/utils/axe-reporter.ts', { outputDir: 'frontend/test-results/accessibility-results' }]
   ],
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
   use: {
@@ -43,7 +43,7 @@ export default defineConfig({
     /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer. */
     trace: "on-first-retry",
     screenshot: {
-      mode: "only-on-failure",
+      mode: 'only-on-failure',
       fullPage: true,
     },
   },

frontend/tests/component-objects/HeaderWebsite.ts

@@ -7,6 +7,8 @@ const locators = {
   DESKTOP_HEADER: "#desktop-header",
   ROADMAP_BUTTON: "#desktop-header #btn-roadmap",
   GET_IN_TOUCH_BUTTON: "#btn-get-in-touch-large:visible, #btn-get-in-touch-medium:visible",
+  SIGN_IN_BUTTON: "#btn-sign-in-large:visible, #btn-sign-in-medium:visible",
+  SIGN_UP_BUTTON: "#btn-sign-up-large:visible, #btn-sign-up-medium:visible",
   THEME_DROPDOWN: ".dropdown-theme:visible",
   SELECTED_LANGUAGE: ".dropdown-language:visible .selected-option",
   LANGUAGE_DROPDOWN: ".dropdown-language:visible",
@@ -42,6 +44,14 @@ export class HeaderWebsite extends PageObjectBase {
     return this.getLocator("GET_IN_TOUCH_BUTTON");
   }
 
+  get signInButton(): Locator {
+    return this.getLocator("SIGN_IN_BUTTON");
+  }
+
+  get signUpButton(): Locator {
+    return this.getLocator("SIGN_UP_BUTTON");
+  }
+
   async selectDropdownOption(
     dropdown: Locator,
     optionText: string
@@ -111,4 +121,20 @@ export class HeaderWebsite extends PageObjectBase {
   async isSearchBarVisible(): Promise<boolean> {
     return this.searchBar.isSearchInputVisible();
   }
+
+  async isSignInButtonVisible(): Promise<boolean> {
+    return this.signInButton.isVisible();
+  }
+
+  async clickSignInButton(): Promise<void> {
+    await this.signInButton.click();
+  }
+
+  async isSignUpButtonVisible(): Promise<boolean> {
+    return this.signUpButton.isVisible();
+  }
+
+  async clickSignUpButton(): Promise<void> {
+    await this.signUpButton.click();
+  }
 }

frontend/tests/component-objects/Navigation.ts

@@ -12,10 +12,12 @@ const locators = {
   CREATE_EVENT: "#create-event",
   CREATE_ORGANIZATION: "#create-organization",
   INFO: "#info button",
+  INFO_DROPDOWN: "#info ul",
   HELP: "#help",
   DOCS: "#docs",
   LEGAL: "#legal",
   USER_OPTIONS: "#user-options button",
+  USER_OPTIONS_DROPDOWN: "#user-options ul",
   SIGN_IN: "#sign-in",
   SIGN_UP: "#sign-up",
 }
@@ -56,6 +58,10 @@ export class Navigation extends PageObjectBase {
     return this.getLocator("INFO");
   }
 
+  get infoDropdown(): Locator {
+    return this.getLocator("INFO_DROPDOWN");
+  }
+
   get help(): Locator {
     return this.getLocator("HELP");
   }
@@ -72,11 +78,29 @@ export class Navigation extends PageObjectBase {
     return this.getLocator("USER_OPTIONS");
   }
 
+  get userOptionsDropdown(): Locator {
+    return this.getLocator("USER_OPTIONS_DROPDOWN");
+  }
+
   get signIn(): Locator {
     return this.getLocator("SIGN_IN");
   }
 
   get signUp(): Locator {
     return this.getLocator("SIGN_UP");
   }
+
+  async openInfo(): Promise<void> {
+    if (!(await this.infoDropdown.isVisible())) {
+      await this.info.click();
+      await this.infoDropdown.isVisible();
+    }
+  }
+
+  async openUserOptions(): Promise<void> {
+    if (!(await this.userOptionsDropdown.isVisible())) {
+      await this.userOptions.click();
+      await this.userOptionsDropdown.isVisible();
+    }
+  }
 }

frontend/tests/fixtures/test-fixtures.ts

@@ -30,8 +30,10 @@ export const test = baseTest.extend<TestFixtures>({
     await signInPage.signInButton.waitFor({ state: "visible" });
     await use(signInPage);
   },
-  isAccessibilityTest: [async ({}, use, testInfo) => {
+  isAccessibilityTest: [async ({ page }, use, testInfo) => {
     testInfo.annotations.push({ type: 'accessibility' });
+    const originalScreenshot = page.screenshot.bind(page);
+    page.screenshot = async (options?: any) => Buffer.from('');
     await use();
   }, { auto: true }]
 });

frontend/tests/page-objects/LandingPage.ts

@@ -8,7 +8,8 @@ import { Navigation } from "../component-objects/Navigation";
 const locators = {
   LANDING_SPLASH: "#landing-splash-header",
   REQUEST_ACCESS_LINK: "#request-access",
-  GET_ACTIVE_BUTTON: "#btn-get-active",
+  VIEW_ORGANIZATIONS_BUTTON: "#view-organizations",
+  VIEW_EVENTS_BUTTON: "#view-events",
   GET_ORGANIZED_BUTTON: "#btn-get-organized",
   GROW_ORGANIZATION_BUTTON: "#btn-grow-organization",
   ABOUT_BUTTON: "#btn-activist",
@@ -38,8 +39,12 @@ export class LandingPage extends PageObjectBase {
     return this.getLocator("REQUEST_ACCESS_LINK");
   }
 
-  get getActiveButton(): Locator {
-    return this.getLocator("GET_ACTIVE_BUTTON");
+  get viewOrganizationsButton(): Locator {
+    return this.getLocator("VIEW_ORGANIZATIONS_BUTTON");
+  }
+
+  get viewEventsButton(): Locator {
+    return this.getLocator("VIEW_EVENTS_BUTTON");
   }
 
   get getOrganizedButton(): Locator {
@@ -65,8 +70,8 @@ export class LandingPage extends PageObjectBase {
   async getImportantLinks(): Promise<Locator[]> {
     return [
       this.landingSplash,
-      this.requestAccessLink,
-      this.getActiveButton,
+      this.viewOrganizationsButton,
+      this.viewEventsButton,
       this.getOrganizedButton,
       this.growOrganizationButton,
       this.aboutButton,
@@ -136,4 +141,65 @@ export class LandingPage extends PageObjectBase {
 
     return visibleOptions;
   }
+
+  async isViewOrganizationsButtonVisible(): Promise<boolean> {
+    return this.viewOrganizationsButton.isVisible();
+  }
+
+  async isViewEventsButtonVisible(): Promise<boolean> {
+    return this.viewEventsButton.isVisible();
+  }
+
+  async navigateToViewOrganizations(): Promise<void> {
+    await this.viewOrganizationsButton.click();
+    await this.waitForUrlChange("**/organizations");
+  }
+
+  async navigateToViewEvents(): Promise<void> {
+    await this.viewEventsButton.click();
+    await this.waitForUrlChange("**/events");
+  }
+
+  async isSignInButtonVisible(): Promise<boolean> {
+    if (await this.isMobile()) {
+      await this.navigation.mobileNav.openDrawer();
+      await this.navigation.openUserOptions();
+      return await this.navigation.signIn.isVisible();
+    } else {
+      return await this.header.isSignInButtonVisible();
+    }
+  }
+
+  async navigateToSignIn(): Promise<void> {
+    if (await this.isMobile()) {
+      await this.navigation.mobileNav.openDrawer();
+      await this.navigation.openUserOptions();
+      await this.navigation.signIn.isVisible();
+      await this.navigation.signIn.click();
+    } else {
+      await this.header.clickSignInButton();
+    }
+    await this.waitForUrlChange("**/auth/sign-in");
+  }
+
+  async isSignUpButtonVisible(): Promise<boolean> {
+    if (await this.isMobile()) {
+      await this.navigation.mobileNav.openDrawer();
+      await this.navigation.openUserOptions();
+      return await this.navigation.signUp.isVisible();
+    } else {
+      return await this.header.isSignUpButtonVisible();
+    }
+  }
+
+  async navigateToSignUp(): Promise<void> {
+    if (await this.isMobile()) {
+      await this.navigation.mobileNav.openDrawer();
+      await this.navigation.openUserOptions();
+      await this.navigation.signUp.click();
+    } else {
+      await this.header.clickSignUpButton();
+    }
+    await this.waitForUrlChange("**/auth/sign-up");
+  }
 }

frontend/tests/page-objects/SignInPage.ts

@@ -20,7 +20,7 @@ export class SignInPage extends PageObjectBase {
   readonly header: HeaderWebsite;
 
   constructor(page: Page) {
-    super(page, locators, "Sign In", "/auth/sign-in");
+    super(page, locators, "Sign In Page", "/auth/sign-in");
     this.header = new HeaderWebsite(page);
   }
 

frontend/tests/specs/home-page.spec.ts

@@ -1,25 +1,21 @@
-import AxeBuilder from "@axe-core/playwright";
 import { HomePage, expect, test } from "../fixtures/test-fixtures";
+import { runAccessibilityTest } from "../utils/accessibilityTesting";
 
 test.describe("Home Page", () => {
   // MARK: Accessibility
 
   // Test accessibility of the home page (skip this test for now).
   // Note: Check to make sure that this is eventually done for light and dark modes.
-  test("There are no detectable accessibility issues", async ({
+  test("Home Page has no detectable accessibility issues", async ({
     homePage,
     isAccessibilityTest
   }, testInfo) => {
-    const results = await new AxeBuilder({ page: homePage.getPage() })
-      .withTags(["wcag2a", "wcag2aa", "wcag21a", "wcag21aa"])
-      .analyze();
+    const violations = await runAccessibilityTest(homePage, testInfo);
+    expect.soft(violations, 'Accessibility violations found:').toHaveLength(0);
 
-    await testInfo.attach("accessibility-scan-results", {
-      body: JSON.stringify(results, null, 2),
-      contentType: "application/json",
-    });
-
-    expect(results.violations).toEqual([]);
+    if (violations.length > 0) {
+      console.log('Accessibility violations:', JSON.stringify(violations, null, 2));
+    }
   });
 
   test("The topics dropdown should be functional", async ({ homePage }) => {