Use page object pattern for e2e tests

.github/workflows/pr_ci_playwright_e2e.yaml

@@ -4,18 +4,18 @@ on:
 
 jobs:
   frontend:
-    name: Run PR Frontend Check
+    name: Run PR Frontend E2E Check
     runs-on: ubuntu-latest
     environment: dev
 
     steps:
-      - name: cleanup old checkout
+      - name: Cleanup Old Checkout
         run: chmod +w -R ${GITHUB_WORKSPACE}; rm -rf ${GITHUB_WORKSPACE}/*;
 
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Clean up any existing containers
+      - name: Clean Any Existing Containers
         run: |
           docker stop $(docker ps -aq) || true
           docker rm $(docker ps -aq) || true
@@ -27,32 +27,39 @@ jobs:
           ! nc -z localhost 5432
 
       - name: Run Docker Compose
-        run: docker compose --env-file .env.dev up --build -d
+        run: docker compose --env-file .env.dev up --build -d backend db
 
       - name: Check Docker Container Logs
         run: docker compose --env-file .env.dev logs
 
-      - name: Setup Node environment
+      - name: Setup Node Environment
         uses: actions/setup-node@v4
         with:
           node-version: 20
 
-      - name: Clean Yarn cache
+      - uses: c-py/action-dotenv-to-setenv@v5
+        with:
+          env-file: .env.dev
+
+      - name: Clean Yarn Cache
         working-directory: ./frontend
-        run: |
-          sudo yarn cache clean
+        run: sudo yarn cache clean
 
       - name: Install dependencies via Yarn
         working-directory: ./frontend
         run: |
           sudo yarn install
+          sudo yarn build
+
+      - name: Run Node Server
+        working-directory: ./frontend
+        run: nohup node .output/server/index.mjs &
 
       - name: Install Playwright Browsers
         working-directory: ./frontend
-        run: |
-          sudo yarn playwright install --with-deps
+        run: sudo yarn playwright install --with-deps
 
-      - name: Wait for web server to be ready
+      - name: Wait for Web Server
         working-directory: ./frontend
         run: |
           MAX_ATTEMPTS=3
@@ -76,12 +83,11 @@ jobs:
             fi
           done
 
-      - name: Run Playwright tests
+      - name: Run Playwright Tests
         working-directory: ./frontend
-        run: |
-          sudo yarn playwright test --reporter=html
+        run: sudo yarn playwright test
 
-      - name: Upload Playwright report
+      - name: Upload Playwright Report
         if: always()
         uses: actions/upload-artifact@v4
         with:

.prettierignore

@@ -1,5 +1,6 @@
 node_modules/
 .nuxt/
+.output/
 
 playwright-report/
 tests-examples/

CONTRIBUTING.md

@@ -27,8 +27,9 @@ If you have questions or would like to communicate with the team, please [join u
 - [Documentation](#documentation-)
 - [Accessibility](#accessibility-)
 - [Design](#design-)
+- [Troubleshooting](#troubleshooting-)
 
-<a id="first-steps"></a>
+<a id="first-steps-"></a>
 
 ## First steps as a contributor [`⇧`](#contents)
 
@@ -44,7 +45,7 @@ Thank you for your interest in contributing to activist.org! We look forward to
 - Check out our [public designs on Figma](https://www.figma.com/file/I9McFfaLu1RiiWp5IP3YjE/activist_public_designs?type=design&node-id=10%3A18&mode=design&t=tdQyOtl5lU1n7oLN-1) to understand activist's goals and direction
 - Consider joining our [bi-weekly developer sync](https://etherpad.wikimedia.org/p/activist-dev-sync)!
 
-<a id="tech-stack"></a>
+<a id="tech-stack-"></a>
 
 ## Tech Stack [`⇧`](#contents)
 
@@ -73,7 +74,7 @@ The following are the current and planned technologies for [activist.org](https:
 > [!NOTE]
 > Those new to any frameworks or technologies who want to work on their skills are more than welcome to contribute!
 
-<a id="learning-the-tech"></a>
+<a id="learning-the-tech-"></a>
 
 ## Learning the tech stack [`⇧`](#contents)
 
@@ -119,7 +120,7 @@ activist is very open to contributions from people in the early stages of their
 </p>
 </details>
 
-<a id="dev-env"></a>
+<a id="dev-env-"></a>
 
 ## Development environment [`⇧`](#contents)
 
@@ -223,7 +224,7 @@ git remote add upstream https://github.com/activist-org/activist.git
 > [!NOTE]
 > Feel free to contact the team in the [Development room on Matrix](https://matrix.to/#/!CRgLpGeOBNwxYCtqmK:matrix.org?via=matrix.org&via=acter.global&via=chat.0x7cd.xyz) if you're having problems getting your environment setup!
 
-<a id="using-yarn-or-python"></a>
+<a id="using-yarn-or-python-"></a>
 
 ### Using Yarn or Python
 
@@ -237,6 +238,11 @@ The frontend currently uses [Yarn 1](https://classic.yarnpkg.com/lang/en/docs/in
 ```bash
 # In the root activist directory:
 cd frontend
+
+# Set the environment variables:
+set -a && source ../.env.dev && set +a
+
+# Install and run the project:
 yarn install
 yarn run dev:local
 ```
@@ -324,13 +330,13 @@ yarn run story:dev
 
 From there you'll be able to visit http://localhost:6006/ to view the documentation. Contributions are very welcome! -->
 
-<a id="style-guide"></a>
+<a id="style-guide-"></a>
 
 ## Style guide [`⇧`](#contents)
 
 Please see the [activist style guide](STYLEGUIDE.md) for details about how to follow the code style for the project. We made these guidelines to assure that we as a community write clean, cohesive code that's easy to write and review. Suggestions for the style guide are welcome.
 
-<a id="testing"></a>
+<a id="testing-"></a>
 
 ## Testing [`⇧`](#contents)
 
@@ -389,7 +395,41 @@ Please see the [frontend testing guide](FRONTEND_TESTING.md) for information on
 > [!NOTE]
 > The vitest test suite is still in a very early stage.  There is a lot of work left to do to increase test coverage, and some features still need troubleshooting.  If you need assistance then feel free to open a PR and we'll support!
 
-<a id="linting"></a>
+### End to End Testing
+
+#### Local E2E
+
+In order to test locally, you first need to build the production version of the frontend as directed in the [local build directions](#using-yarn-or-python-).
+
+To run the end to end tests locally, please run the following commands:
+
+```bash
+docker-compose --env-file .env.dev up backend db # run backend and db in docker
+```
+
+Then in a second shell:
+
+```bash
+node .output/server/index.mjs  # start the build frontend
+```
+
+Then in a third shell:
+
+```bash
+yarn test:local
+```
+
+#### Remote E2E
+
+To run the tests on the repository, first create a branch from the remote branch that you want to test against. This can be done with the following command:
+
+```bash
+git push upstream <local-branch-name>:<remote-branch-name-of-your-choice>
+```
+
+You can then navigate to the [actions of the repository](https://github.com/activist-org/activist/actions) and trigger [pr_ci_playwright_e2e](https://github.com/activist-org/activist/actions/workflows/pr_ci_playwright_e2e.yaml) for the remote branch that you just created.
+
+<a id="linting-"></a>
 
 ## Linting [`⇧`](#contents)
 
@@ -434,13 +474,13 @@ To make the above steps easier, the activist team asks that contributors report
 
 Again, thank you for your time in reporting issues!
 
-<a name="feature-requests"></a>
+<a name="feature-requests-"></a>
 
 ## Feature requests [`⇧`](#contents)
 
 Feature requests are more than welcome! Please take a moment to find out whether your idea fits with the scope and aims of the project. When making a suggestion, provide as much detail and context as possible, and further make clear the degree to which you would like to contribute in its development. Feature requests are marked with the [`feature`](https://github.com/activist-org/activist/issues?q=is%3Aopen+is%3Aissue+label%3Afeature) label in the [issues](https://github.com/activist-org/activist/issues).
 
-<a name="pull-requests"></a>
+<a name="pull-requests-"></a>
 
 ## Pull requests [`⇧`](#contents)
 
@@ -477,6 +517,13 @@ When making a contribution, adhering to the [GitHub flow](https://docs.github.co
 > pip install pre-commit
 > ```
 
+> [!NOTE]
+> If you are having issues with pre-commit and want to send along your changes regardless, you can ignore the pre-commit hooks via the following:
+>
+> ```bash
+> git commit --no-verify -m "COMMIT_MESSAGE"
+> ```
+
 4. Commit your changes in logical chunks, and please try to adhere to [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/).
 
 > [!NOTE]
@@ -501,7 +548,7 @@ When making a contribution, adhering to the [GitHub flow](https://docs.github.co
 
 Thank you in advance for your contributions!
 
-<a id="localization"></a>
+<a id="localization-"></a>
 
 ## Localization [`⇧`](#contents)
 
@@ -525,13 +572,13 @@ To find issues related to localization, please see the [`localization`](https://
 > }
 > ```
 
-<a id="documentation"></a>
+<a id="documentation-"></a>
 
 ## Documentation [`⇧`](#contents)
 
 Documentation is an invaluable way to contribute to coding projects as it allows others to more easily understand the project structure and contribute. Issues related to documentation are marked with the [`documentation`](https://github.com/activist-org/activist/labels/documentation) label in the [issues](https://github.com/activist-org/activist/issues).
 
-<a id="accessibility"></a>
+<a id="accessibility-"></a>
 
 ## Accessibility [`⇧`](#contents)
 
@@ -562,7 +609,7 @@ Tab focusing sadly doesn't work out of the box for many browsers. Chrome works g
 
 Once the above steps are finished you should be able to use tab to navigate web pages :)
 
-<a id="design"></a>
+<a id="design-"></a>
 
 ## Design [`⇧`](#contents)
 
@@ -573,3 +620,19 @@ Designs for activist are done in the [public design file in Figma](https://www.f
 Note that the linked Figma file above is the [public facing designs](https://www.figma.com/file/I9McFfaLu1RiiWp5IP3YjE/activist_designs?node-id=805%3A231). Those interested in improving them or contributing designs for new features are invited to contact the team on GitHub or [Matrix](https://matrix.to/#/!uIGQUxlCnEzrPiRsRw:matrix.org?via=matrix.org&via=effektio.org&via=acter.global). We'd love to see a sample of your work, and if everything looks good we'll schedule a time to get connected!
 
 All branding elements such as logos, icons, colors and fonts should follow those that are set out in [activist-org/Organization](https://github.com/activist-org/Organization). As the project is fully open source, these elements are also open for discussion. Your efforts in making activist products professional with a distinct and cohesive identity are much appreciated.
+
+<a id="troubleshooting-"></a>
+
+## Troubleshooting [`⇧`](#contents)
+
+### Nuxt Auto Import Errors
+
+Nuxt uses auto imports to make frontend development more seamless, but at times these imports malfunction. For the `Property 'PROPERTY_NAME' does not exist on type...` errors, this is caused both by having an out of sync `yarn.lock` file and having Nuxt improperly installed.
+
+Things to check are:
+
+1. Replace `yarn.lock` file with the one in main
+2. Run `yarn cache clean` (this clears the yarn cache system wide and takes a long time)
+3. Delete the `node_modules` folder
+4. Load environment variables into your shell with `set -a && source ../.env.dev && set +a`
+5. Rerun `yarn install`

frontend/components/SearchBar.vue

@@ -1,6 +1,7 @@
 <template>
   <div
     v-if="location == SearchBarLocation.SIDEBAR"
+    id="search"
     class="elem-shadow-sm mx-2 flex grow select-none items-center justify-between rounded-md bg-layer-2 py-1 pl-[12px] text-left text-distinct-text transition duration-200 focus-within:mb-[-3px] focus-within:border-2 focus-within:border-link-text"
   >
     <div class="flex items-center space-x-2 pl-1">
@@ -69,19 +70,21 @@
   </div>
   <div
     v-else
+    id="search"
     class="relative inline-flex select-none items-center space-x-2 rounded-md border border-distinct-text bg-layer-2 py-1 pl-[12px] pr-[10px] text-left text-distinct-text focus-within:border-2 focus-within:border-cta-orange dark:border-distinct-text dark:text-distinct-text dark:focus-within:border-cta-orange"
   >
     <Icon
       @click="emit('on-search-toggle')"
+      id="search-toggle"
       class="my-1 h-4 w-4 flex-shrink-0"
       :name="expanded ? `${IconMap.X_LG}` : `${IconMap.SEARCH}`"
       size="1em"
     />
-    <label for="expanded-search-input" class="hidden md:block">{{
+    <label for="input-search" class="hidden md:block">{{
       $t("_global.search")
     }}</label>
     <input
-      id="expanded-search-input"
+      id="input-search"
       class="bg-transparent focus:outline-none"
       :class="{ hidden: !expanded }"
       type="text"

frontend/components/dropdown/DropdownItemsLayout.vue

@@ -8,6 +8,7 @@
     <MenuLinkWrapper
       v-for="opt in options"
       :key="opt.id"
+      :id="getSelectorId(opt.label)"
       :to="opt.routeUrl"
       :selected="opt.selected"
       :isAddStyles="false"
@@ -42,4 +43,27 @@ const isSideLeftMenu = computed(() => {
 const isSideMenu = computed(() => {
   return props.location === DropdownLocation.SIDE_MENU;
 });
+
+const getSelectorId = (label: string) => {
+  const idMap: Record<string, string> = {
+    help: "help",
+    doc: "docs",
+    legal: "legal",
+    profile: "profile",
+    events: "your-events",
+    orgs: "your-organizations",
+    notifications: "notifications",
+    settings: "settings",
+    sign_out: "sign-out",
+    sign_up: "sign-up",
+    sign_in: "sign-in",
+    new_event: "create-new-event",
+    new_organization: "create-new-organization",
+    new_group: "create-new-group",
+    new_resource: "create-new-resource",
+  };
+
+  const key = Object.keys(idMap).find((k) => label.includes(k));
+  return key ? idMap[key] : undefined;
+};
 </script>

frontend/components/header/HeaderAppPage.vue

@@ -40,7 +40,7 @@
       </div>
     </div>
   </div>
-  <div class="flex items-baseline gap-2 md:gap-4">
+  <div id="home-header" class="flex items-baseline gap-2 md:gap-4">
     <h1
       class="responsive-h1 pt-4 font-bold text-primary-text transition-all duration-500"
     >

frontend/components/header/HeaderMobile.vue

@@ -2,6 +2,7 @@
   <header
     v-if="!aboveMediumBP"
     ref="header"
+    id="mobile-header"
     class="sticky top-0 z-50 h-12 w-full bg-layer-2 drop-shadow-md duration-500"
   >
     <div class="h-full">
@@ -29,14 +30,17 @@
             />
             <DropdownCreate
               v-if="userIsSignedIn"
+              id="create"
               class="w-full"
               :location="DropdownLocation.SIDE_MENU"
             />
             <DropdownInfo
+              id="info"
               class="w-full"
               :location="DropdownLocation.SIDE_MENU"
             />
             <DropdownUserOptions
+              id="user-options"
               class="w-full"
               :location="DropdownLocation.SIDE_MENU"
               :userIsSignedIn="userIsSignedIn"