Refactor and enhance dropdown functionality and tests

1. Dropdown Components:
   - Add  class to DropdownBase.vue.
   - Add  class to DropdownLanguage.vue.

2. Component Objects:
   - BaseComponent.ts: Import and use  utility function.
   - HeaderWebsite.ts:
     - Add locators for HAMBURGER, SIDEBAR, SELECTED_LANGUAGE, LANGUAGE_MENU, and LANGUAGE_OPTIONS.
     - Implement methods: , , , , , , .

3. Page Objects:
   - BasePage.ts:
     - Import and use  utility function.
     - Add  method.

4. Test Specifications:
   - landing-page.spec.ts:
     - Remove console log from the title test.
     - Refactor theme and language dropdown tests to enhance functionality and readability.

5. Utility Functions:
   - Create  with  function.

frontend/components/dropdown/DropdownBase.vue

@@ -4,7 +4,7 @@
       <MenuButton
         @focus="expandOnFocus"
         v-slot="{ open }"
-        class="style-btn inline-flex w-full select-none whitespace-nowrap rounded-md px-4 py-2 font-semibold"
+        class="selected-option style-btn inline-flex w-full select-none whitespace-nowrap rounded-md px-4 py-2 font-semibold"
         :class="{
           'pl-6': isSideMenu,
           'style-menu-option-cta flex items-center rounded-md pl-1':

frontend/components/dropdown/DropdownLanguage.vue

@@ -11,6 +11,7 @@
       <NuxtLink
         v-for="l in availableLocales"
         :key="getLocaleCode(l)"
+        class="dropdown-language-list-items"
         :to="switchLocalePath(getLocaleCode(l))"
       >
         <MenuItem v-slot="{ active }" class="flex">

frontend/tests/component-objects/BaseComponent.ts

@@ -1,4 +1,5 @@
 import type { Page, Locator } from "@playwright/test";
+import { isMobile } from "../utils/utils";
 
 export default abstract class BaseComponent {
   protected readonly page: Page;
@@ -8,6 +9,10 @@ export default abstract class BaseComponent {
     this.page = page;
   }
 
+  public async isMobile(): Promise<boolean> {
+    return isMobile(this.page);
+  }
+
   protected setLocators(locators: Record<string, string>): void {
     this.locators = locators;
   }

frontend/tests/component-objects/HeaderWebsite.ts

@@ -8,8 +8,14 @@ export default class HeaderWebsite extends BaseComponent {
     ROADMAP_BUTTON: "#desktop-header #btn-roadmap",
     GET_IN_TOUCH_BUTTON:
       "#btn-get-in-touch-large:visible, #btn-get-in-touch-medium:visible",
+    HAMBURGER: "#sidebar-right-hamburger:visible",
+    SIDEBAR: "#drawer-navigation",
     THEME_DROPDOWN: ".dropdown-theme:visible",
+    SELECTED_LANGUAGE: ".dropdown-language:visible .selected-option",
     LANGUAGE_DROPDOWN: ".dropdown-language:visible",
+    LANGUAGE_MENU: ".dropdown-language:visible ul",
+    LANGUAGE_OPTIONS:
+      ".dropdown-language:visible .dropdown-language-list-items",
   };
 
   constructor(page: Page) {
@@ -37,30 +43,98 @@ export default class HeaderWebsite extends BaseComponent {
     return this.getLocator("GET_IN_TOUCH_BUTTON");
   }
 
+  get hamburger(): Locator {
+    return this.getLocator("HAMBURGER");
+  }
+
+  get sidebar(): Locator {
+    return this.getLocator("SIDEBAR");
+  }
+
+  async openSidebar(): Promise<void> {
+    if (!(await this.sidebar.isVisible())) {
+      await this.hamburger.click();
+    }
+  }
+
+  async closeSidebar(): Promise<void> {
+    if (await this.sidebar.isVisible()) {
+      await this.hamburger.click();
+    }
+  }
+
   async selectDropdownOption(
     dropdown: Locator,
     optionText: string
   ): Promise<void> {
-    await dropdown.click();
     await this.page.locator(`text=${optionText}`).click();
   }
 
   get themeDropdown(): Locator {
     return this.getLocator("THEME_DROPDOWN");
   }
 
+  async openThemeDropdown(): Promise<void> {
+    if (await this.isMobile()) {
+      await this.openSidebar();
+    }
+    await this.themeDropdown.click();
+  }
+
   async selectThemeOption(theme: string): Promise<void> {
+    await this.openThemeDropdown();
     await this.selectDropdownOption(this.themeDropdown, theme);
   }
 
   get languageDropdown(): Locator {
     return this.getLocator("LANGUAGE_DROPDOWN");
   }
 
+  async openLanguageDropdown(): Promise<void> {
+    if (await this.isMobile()) {
+      await this.openSidebar();
+    }
+    const isDropdownOpen = await this.getLocator("LANGUAGE_MENU").isVisible();
+    if (!isDropdownOpen) {
+      await this.languageDropdown.click();
+    }
+  }
+
   async selectLanguageOption(language: string): Promise<void> {
+    await this.openLanguageDropdown();
     await this.selectDropdownOption(this.languageDropdown, language);
   }
 
+  async getSelectedLanguage(): Promise<string> {
+    await this.openLanguageDropdown();
+    return (
+      await this.page
+        .locator(HeaderWebsite.locators.SELECTED_LANGUAGE)
+        .innerText()
+    )
+      .trim()
+      .toLowerCase();
+  }
+
+  async getLanguageOptions(): Promise<Locator[]> {
+    await this.openLanguageDropdown();
+    const languageOptions = await this.getLocator("LANGUAGE_OPTIONS").all();
+    return languageOptions;
+  }
+
+  async findLanguageOption(
+    languageOptions: Locator[],
+    optionText: string
+  ): Promise<Locator | undefined> {
+    for (const option of languageOptions) {
+      const textContent = await option.innerText();
+      if (textContent.includes(optionText)) {
+        return option;
+      }
+    }
+    return undefined;
+  }
+
   async navigateTo(link: Locator): Promise<void> {
     await link.click();
   }

frontend/tests/page-objects/BasePage.ts

@@ -1,4 +1,5 @@
 import type { Page, Locator } from "@playwright/test";
+import { isMobile } from "../utils/utils";
 export default abstract class BasePage {
   protected readonly pageName: string;
   protected readonly pageURL: string;
@@ -25,8 +26,7 @@ export default abstract class BasePage {
   }
 
   public async isMobile(): Promise<boolean> {
-    const viewportSize = await this.page.viewportSize();
-    return viewportSize !== null && viewportSize.width < 768;
+    return isMobile(this.page);
   }
 
   public async waitForUrlChange(
@@ -37,6 +37,10 @@ export default abstract class BasePage {
     await this.page.waitForURL(expectedUrlPattern, { timeout });
   }
 
+  public async currentTheme(): Promise<string> {
+    return (await this.page.locator("html").getAttribute("class")) ?? "";
+  }
+
   protected setLocators(locators: Record<string, string>): void {
     this.locators = locators;
   }

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

@@ -1,5 +1,6 @@
 import AxeBuilder from "@axe-core/playwright";
 import { LandingPage, expect, test } from "../fixtures/page-fixtures";
+import locales from "../../locales";
 
 test.describe("Landing Page", () => {
   // Initialize page before each test, wait for the landing splash to be visible.
@@ -60,24 +61,31 @@ test.describe("Landing Page", () => {
 
   // Test that the theme dropdown is visible and functional.
   test("Theme dropdown is functional", async ({ landingPage }) => {
-    const themeDropdown = landingPage.header.themeDropdown;
-    await expect(themeDropdown).toBeVisible();
-    await landingPage.header.selectThemeOption("Light");
-    expect(await landingPage.getPage.getAttribute("html", "class")).toBe(
-      "light"
-    );
-    await landingPage.header.selectThemeOption("Dark");
-    expect(await landingPage.getPage.getAttribute("html", "class")).toBe(
-      "dark"
-    );
+    const themes = ["light", "dark"];
+    for (const theme of themes) {
+      await landingPage.header.selectThemeOption(theme);
+      const currentTheme = await landingPage.currentTheme();
+      expect(currentTheme).toContain(theme);
+    }
   });
 
   // Test that the language dropdown is visible and functional.
   test("Language dropdown is functional", async ({ landingPage }) => {
-    const languageDropdown = landingPage.header.languageDropdown;
-    await expect(languageDropdown).toBeVisible();
-    await landingPage.header.selectLanguageOption("English");
-    await landingPage.header.selectLanguageOption("Español");
+    const selectedLanguage = await landingPage.header.getSelectedLanguage();
+    const languageOptions = await landingPage.header.getLanguageOptions();
+
+    for (const locale of locales) {
+      if (locale.code === selectedLanguage) {
+        continue;
+      }
+      const optionText = locale.name;
+      const option = await landingPage.header.findLanguageOption(
+        languageOptions,
+        optionText
+      );
+      const langOptionIsVisible = await option?.isVisible();
+      expect(langOptionIsVisible).toBe(true);
+    }
   });
 
   /* *********************************************************** */
@@ -106,7 +114,6 @@ test.describe("Landing Page", () => {
 
   test('title should contain "activist"', async ({ landingPage }) => {
     const pageTitle = await landingPage.getPage.title();
-    console.log("Page Title:", pageTitle);
     expect(pageTitle).toContain("activist");
   });
 

frontend/tests/utils/utils.ts

@@ -0,0 +1,6 @@
+import type { Page } from "@playwright/test";
+
+export async function isMobile(page: Page): Promise<boolean> {
+  const viewportSize = page.viewportSize();
+  return viewportSize !== null && viewportSize.width < 768;
+}