fix 🐛: Update CI and tests

[melMass]

• also fixes the playwright screenshot test, not sure about the action

[github-actions]

PR Preview Action v1.4.6
Preview removed because the pull request was closed.
2024-02-01 16:22 UTC

[Zir0h]

12 failed
[webkit] › teia.screenshots.spec.ts:46:5 › screenshots feeds menu ──────────────────────────────
[webkit] › teia.screenshots.spec.ts:61:5 › screenshots events menu ─────────────────────────────
[webkit] › teia.screenshots.spec.ts:78:5 › screenshots main menu ───────────────────────────────
[webkit] › teia.screenshots.spec.ts:97:7 › screenshots page home ───────────────────────────────
[webkit] › teia.screenshots.spec.ts:97:7 › screenshots page afterviz ───────────────────────────
[webkit] › teia.screenshots.spec.ts:97:7 › screenshots page settings ───────────────────────────
[Mobile Safari] › teia.screenshots.spec.ts:46:5 › screenshots feeds menu ───────────────────────
[Mobile Safari] › teia.screenshots.spec.ts:61:5 › screenshots events menu ──────────────────────
[Mobile Safari] › teia.screenshots.spec.ts:78:5 › screenshots main menu ────────────────────────
[Mobile Safari] › teia.screenshots.spec.ts:97:7 › screenshots page home ────────────────────────
[Mobile Safari] › teia.screenshots.spec.ts:97:7 › screenshots page afterviz ────────────────────
[Mobile Safari] › teia.screenshots.spec.ts:97:7 › screenshots page settings ────────────────────
18 passed (1.5m)

The ones that passed generated working screenshots 🥳

I'm on linux, so probably normal that I can't run those safari tests

[melMass]

Noice! Then I guess it will fail on the CI though... Maybe I can just conditionally add Webkit if not on linux I'll check it out in docker.

I should have added instructions to test all this, I will add more info to CONTRIBUTE.md or similar later but the TLDR is:

Storybook

• usage:
  from the root of teia-ui, this should open a tab in your default browser to http://localhost:6006

  npm i # you must install dev deps you cannot use prod mode
  npm run storybook

• what is this?:
  This is a very wip storybook workspace that I started during the grant (storybook was in a very beta transition back then), but thanks to that I was already using their new API so this PR doesn't change anything about that.

  storybook is just a way to show and document components in isolation, it's also nice to spot dependencies of a given component and if it's truly isolateable or not.
  For now it includes some of our core componenents (first load is slow that's normal, like vite can):

  demo

storybook+.webm

Playwright

• usage:
  from the root of teia-ui, the first command will install isolated binaries for all browsers it supports to run the tests, the second one run the tests, the --ui flag is a new thing that's really cool and allow you to navigate all the navigation history as live webpages

  npx playwright install --with-deps
  npx playwright test --ui

• what is this?:
  This is a framework for frontend testing / browser automation. In this repo we use it to take screenshots of various parts of the website, this was mainly a way to check all themes quickly in the most critical scenarios, it can be used when doing some global style change to make sure how it's affected on various browsers/devices.

[melMass]

Latest commit fixes a style on windows detected thanks to playwright:

Before

After

[melMass]

• renamed the jobs: makes it easier to manage locally using act
• added maxsockets: not sure if it's a local issue only but I kept bumping into this error: [BUG] Getting constant Client network socket disconnected before secure TLS connection was established npm/cli#4652
• added a WIP compare screenshot CI: the goal would be to provide hashes to it and get side by side image comparison. Kind of like a visual bisect, to initiate it from the cli (for admins):

gh workflow run playwright-compare.yml --ref fix/playwright-tests -f "before-commit=7f0d42ad23a9d2f4b1fdd7dc162f094c08478fca"

Where before-commit is the commit you want to test the current ref against. (you can provide after-commit too but it's optional)

[melMass]

Works!

side_by_side.zip

[melMass]

Ready to merge on my side!

[Zir0h]

awesome!