Migrate header tests to Vitest browser mode

[Raghavcr7]

I’ve now migrated the header tests to Vitest 4 Browser Mode with Playwright and removed the old JSDOM polyfills.
All tests pass in Chromium, and the setupTests file is reduced to the minimal browser-mode version.
Ref: #150

[spwoodcock]

Much nicer, good work 👍

Could you provide a minimal reproducible setup for have the relevant chromium / playwright dependencies installed?

I feel like the easiest way to set this up would actually be using chromium / playwright inside docker, for a consistent environment

[Raghavcr7]

Thank you . Sure, I can put that together. I don’t have a lot of experience with Docker yet, but I’ll figure it out and set up the minimal reproducible environment so the Chromium / Playwright setup is fully consistent. I’ll update the PR once it’s ready.

[spwoodcock]

Or feel free to write up how you set up your environment manually & I can reproduce it using docker for you 😃

Either is fine for me!

[Raghavcr7]

That would be helpfull , thank you . Here’s the setup I’m using locally to run Vitest in browser mode with Chromium:

Environment
Windows
pnpm (v10)
vitest 4.x
@vitest/browser 4.x
Playwright (Chromium)

1. Install dependencies
   Install standard project dependencies
   pnpm install
   Install Vitest and Browser Mode adapters
   pnpm add -D vitest @vitest/browser playwright
   Install Testing Library utilities
   pnpm add -D @testing-library/dom @testing-library/jest-dom
   Then install the Playwright browser:
   npx playwright install chromium

2. Configuration Files
   vitest.config.ts This configuration sets up the Playwright provider and handles the WebAwesome library.
   tests/setupTests.ts

3. Running the tests
   pnpm test

[spwoodcock]

Hey @Raghavcr7 I will have some time in perhaps a few weeks or few days to look at adding the docker config - uncertain based on what comes up.

For now, we most need a way to run these tests in an automated way via CI workflow. Playwright has some good docs on how to do this - would appreciate you taking a stab before I look into it 🙏

[Raghavcr7]

@spwoodcock I will take a look at the documentation and see how to implement the CI workflow.

[spwoodcock]

The workflow is good!

If you also make it run on PR too, then we can probably see if it works within this PR before merging 😃

[spwoodcock]

Oh my bad, I didn't see the workflow run on mobile.

On desktop: https://github.com/hotosm/ui/actions/runs/19851789898/job/56913692079?pr=159

Between the repo checkout and the node env install, you need to add something like:

      - name: Install pnpm
        uses: pnpm/action-setup@v4
        with:
          version: 10

https://pnpm.io/continuous-integration#github-actions

[Raghavcr7]

I have made the changes. Waiting for approval to see if it works. Meanwhile trying to look for a way to test github actions locally so that i can test without waiting.

[spwoodcock]

You can use act, but honestly it isn't very good as you have to configure all the same env and secrets anyway.

What I have started doing is removing github action entirely, replacing them with a single Justfile command from a configured task runner - the same locally and in CI

[Raghavcr7]

Yeah, I realised it's not that easy or efficient 😅