Vanderscycle / techy-cat

Techy Cat: Get inspired & do more tech!

Home Page:https://techy.cat/

Repository from Github https://github.comVanderscycle/techy-catRepository from Github https://github.comVanderscycle/techy-cat

Techy Cat 😸

CI E2E

Ideas should be free, here's some for you to get you started πŸ˜„

Watch livestreams where we build this app, as well as "distilled" tutorial videos / guides!

Discuss, suggest features and get support on the Discord!

And also, feel free to treat this as a regular repo, so raise issues and PRs here on GitHub, as you see fit πŸ™Œ

Testing

This repo is covered by two types of tests: Unit -> Integration tests with Vitest and Integration -> End 2 End tests with Playwright.

Most of the code is made during livestreams and for videos, where we're just figuring stuff out and make up the requirements as we go along! In "real life" I would be TDDing and covering way more stuff. Not many real specs -> no many tests πŸ˜…

Vitest

Here's how we originally set up Vitest with SvelteKit! There's less setup needed nowadays, since the vite.config.js has been extracted out to root in latest versions of SvelteKit, as it should have been from the get go πŸ˜„ But I go over Vitest, why we'd use it, and my favourite, realistic, Test-Driven Development challenge I still use on candidates this day! So people have still been finding the video helpful πŸ˜„

Run the Vitest tests with

npm test

Playwright

Some things are much harder or outright impossible to test in a meaningful way using a simulated browser environment. Responsive design, drag'n'Drop, side-effects in response scrolling / elements getting in and out of view... This is where Playwright comes in!

No "stream-lined" video yet, but I've done streams covering it, for now here are the suggested commands to run:

npx playwright test # Runs playwright tests

npx playwright test --project=chromium # Runs tests only on Desktop Chrome.

npx playwright test --debug # Runs tests in debug mode.

npx playwright codegen # Interactively generate tests with Codegen.

About

Techy Cat: Get inspired & do more tech!

https://techy.cat/


Languages

Language:Svelte 49.8%Language:TypeScript 42.8%Language:JavaScript 3.5%Language:CSS 3.1%Language:HTML 0.7%