This small project was to practice and learn new things like Playwright, Vitest, Vite, and Vue 3. I used this free GraphQL API made by Trevor Blades.
See Vite Configuration Reference.
npm install
npm run dev
npm run build
Run Unit Tests with Vitest
npm run test:unit
![Screenshot 2023-11-23 at 11 41 00](https://private-user-images.githubusercontent.com/28515670/285172555-cbbf5804-5314-4f15-a6e6-0bbe9cc9991d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkwOTg0ODYsIm5iZiI6MTcxOTA5ODE4NiwicGF0aCI6Ii8yODUxNTY3MC8yODUxNzI1NTUtY2JiZjU4MDQtNTMxNC00ZjE1LWE2ZTYtMGJiZTljYzk5OTFkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIyVDIzMTYyNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPThhMjM3ZGU5ZmUyMmI3MTI5Y2UwMzVmNDJjMDVhMWUxY2M4MWQ5MDdlNTU3ZjUwNzczYWEwZWJkMzk1M2U0NzQmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.YHV-lzfn5AbxpysccalI-7EuWrIpAShx1HX7jH9xXxc)
Run Unit Tests coverage with Vitest
npm run test:unit:coverage
![Screenshot 2023-11-23 at 11 44 40](https://private-user-images.githubusercontent.com/28515670/285172628-f03c81a3-98de-470b-ae1e-5afc4850e1b1.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkwOTg0ODYsIm5iZiI6MTcxOTA5ODE4NiwicGF0aCI6Ii8yODUxNTY3MC8yODUxNzI2MjgtZjAzYzgxYTMtOThkZS00NzBiLWFlMWUtNWFmYzQ4NTBlMWIxLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIyVDIzMTYyNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTZhZTk0NzVlNGZhYTViOTI5OTZmODhjMzAwZmQ4OTUwMzgwZGFlZjcwNmM1YjE1NDIzZWVlMGE2Yzc2ZGI5ZGImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.KyLh4zyuQbU8BMGj0mT2C3j0fI3pmVpudq69nMIdX6g)
Run End-to-End Tests with Playwright
# Install browsers for the first run
npx playwright install
# When testing on CI, must build the project first
npm run build
# Runs the end-to-end tests
npm run test:e2e
# Runs the tests only on Chromium
npm run test:e2e -- --project=chromium
# Runs the tests of a specific file
npm run test:e2e -- tests/example.spec.ts
# Runs the tests in debug mode
npm run test:e2e -- --debug
![Screenshot 2023-11-23 at 11 40 30](https://private-user-images.githubusercontent.com/28515670/285172767-35a7cd45-5eb0-4b7f-994a-2a07714ec57e.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTkwOTg0ODYsIm5iZiI6MTcxOTA5ODE4NiwicGF0aCI6Ii8yODUxNTY3MC8yODUxNzI3NjctMzVhN2NkNDUtNWViMC00YjdmLTk5NGEtMmEwNzcxNGVjNTdlLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDA2MjIlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwNjIyVDIzMTYyNlomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTc2ZmUzOTk0MWI3M2ZhYTYyYjM4OTRlMzdlN2E1NWNhMDJmNzNlZGM3NjMwNzEyZjgyM2Y5ZjJlOWRjOTFlNDkmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.FhNV1ikD8VtExeZUwHR8Bin92yg5No4XF709fhZrl5s)
Lint with ESLint
npm run lint
npm run format