antoinezanardi/werewolves-assistant-web-next

🐺 Werewolves Assistant Web is a Nuxt Web App using the Werewolves Assistant API. It helps you, the game master, to manage your games of Werewolves Of Millers Hollow.

☕️  Glad to see you here, make yourself at home

Hi 👋🏼 ! I'm Antoine ZANARDI, a happy and proud ✨ Web FullStack Developer ✨ for several years now.

My main markup / styling / programming languages are HTML , Sass , and TypeScript .

Big fan of Vue 3 or Nuxt 3 with Vite for building my front-end projects.

My back-end projects are mostly REST APIs powered by NestJS and Fastify.

Want to know more about me ? Take a look at my portfolio to see all of my skills and experiences.

---

🌟  Take a look at my daily fancy tools

🔧   Programming languages

      

🎨   Front-end technologies

      

⚙️   Back-end technologies

      

🌥️   Cloud providers

      

🪣   Code hosting solutions

      

---

🎆  Want to see more ? Here are my stats 👇

werewolves-assistant-web-next's Issues

Host HTML reports on GitHub Pages

It's not convenient to download HTML reports to see what's wrong in the CI.

A GitHub Action is available to store HTML reports directly in GitHub Pages. Link

• E2E HTML report.
• Unit HTML coverage report.
• Stryker HTML coverage report.
• Update README to point to different reports.

Generate badges when creating a new badge

Generate badges like in the API when merging to main.

• Script for counting number of tests from Vitest (if necessary).
• Script for counting number of scenarios from Cucumber.
• Badge for Vitest.
• Badge for Cucumber.
• Add them in README

Format HTML printed in failed scenarios with Prettier

When cucumber fails for a scenario, it prints the page inner HTML, which is not well formatted. Use Prettier API instead.

Here is an example of a config

Add renovate instead of dependabot

Set up renovate instead of dependabot for maintaining deps versions.

Here is a tutorial

Test tooltips

Tooltip must be tested with value.

For unit tests, here is the way :

const tooltip = { value: undefined };
const directives = { ...pTooltipDirectiveBinder(tooltip, ".player-card-selector") };
wrapper = await mountSuspendedComponent(PlayerCard, { props: { ...defaultProps, doesShowSelectorTooltip: true }, global: { directives } });

expect(tooltip.value).toBe("Select Player");

For e2e tests :

When the user hovers the link with name "I don't know this game"
Then the tooltip with text "Watch an explanatory video on YouTube" should be visible

• Tooltips tested on unit
• Tooltips tested on e2e

Automate accessibility testing with Axe and Playwright

Accessibility testing can be automated in Playwright thanks to Axe.

Here is the tutorial

Make screenshots in e2e tests for every significative screen state

With Playwright, you can make screenshots and match them to check if UI broke in some way.

Documentation for visual comparisons

A screenshot must be made each time the screen has big change. For example, an empty game lobby and a full one.

Unit tests title should not end with "when mounted"

It should end with "when rendered" when possible.

Remove aria-label for non-interactive elements

Aria labels should only be present for interactive elements. Replace them (and therefor in tests selectors) by classes or ids.