install: playwright + github actions

.github/workflows/playwright.yml

@@ -0,0 +1,27 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ main, master ]
+  pull_request:
+    branches: [ main, master ]
+jobs:
+  test:
+    timeout-minutes: 60
+    runs-on: ubuntu-latest
+    steps:
+    - uses: actions/checkout@v3
+    - uses: actions/setup-node@v3
+      with:
+        node-version: 18
+    - name: Install dependencies
+      run: npm ci
+    - name: Install Playwright Browsers
+      run: npx playwright install --with-deps
+    - name: Run Playwright tests
+      run: npx playwright test
+    - uses: actions/upload-artifact@v3
+      if: always()
+      with:
+        name: playwright-report
+        path: playwright-report/
+        retention-days: 30

.gitignore

@@ -42,6 +42,10 @@ __benchmarks__
 cypress/integration/examples
 cypress/screenshots
 cypress/videos
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
 
 # production
 dist/

README.md

@@ -80,7 +80,7 @@ npm run prettier:fix
 
 ## 🐛 Testing
 
-This app uses Jest for unit testing.
+This app uses **Jest** for unit testing and **Playwright** for E2E testing.
 
 ### JEST 🃏
 
@@ -89,13 +89,13 @@ Jest is JavaScript Testing Framework.
 - Test are located in the same folder next to each file being tested.
 - If there is file `getSkillBadgeColor.ts`, the test file will be `getSkillBadgeColor.test.tsx`.
 
-Run tests in command line.
+Runs the unit tests.
 
 ```bash
 npm run test
 ```
 
-#### Test coverage
+#### Test coverage - Jest
 
 Jest will generate a code coverage report.
 
@@ -106,6 +106,71 @@ Jest will generate a code coverage report.
 npm run test:coverage
 ```
 
+### Playwright 🎭
+
+Playwright is library for browser automation E2E testing.
+
+### TODO
+
+- [x] install Playwright
+- [ ] write E2E tests
+- [ ] run E2E tests in CI github actions
+- [ ] update readme
+
+Runs the E2E tests.
+
+```bash
+npx playwright test
+```
+
+Runs the E2E tests using alias for `npx playwright test`
+
+```bash
+npm run test:e2e
+```
+
+#### Test coverage - Playwright
+
+Playwright will generate a code coverage report.
+
+- It serves HTML report on new localhost port.
+
+```bash
+  npx playwright show-report
+```
+
+#### Other Playwright commands
+
+Starts the interactive UI mode.
+
+```bash
+npx playwright test --ui
+```
+
+Runs the tests only on Desktop Chrome.
+
+```bash
+npx playwright test --project=chromium
+```
+
+Runs the tests in a specific file.
+
+```bash
+npx playwright test file_name.spec.ts
+```
+
+Runs the tests in debug mode.
+
+```bash
+npx playwright test --debug
+```
+
+Auto generate tests with Codegen.
+
+```bash
+npx playwright codegen
+```
+
 ## 🚀 Deployment CI / CD
 
 This app uses GitHub Actions for CI and Netlify for CD.

jest.config.ts

@@ -162,15 +162,10 @@ const config: Config = {
   // testLocationInResults: false,
 
   // The glob patterns Jest uses to detect test files
-  // testMatch: [
-  //   "**/__tests__/**/*.[jt]s?(x)",
-  //   "**/?(*.)+(spec|test).[tj]s?(x)"
-  // ],
+  testMatch: ['**/tests-jest/**/*.[jt]s?(x)', '**/?(*.)+(test).[tj]s?(x)'],
 
   // An array of regexp pattern strings that are matched against all test paths, matched tests are skipped
-  // testPathIgnorePatterns: [
-  //   "/node_modules/"
-  // ],
+  testPathIgnorePatterns: ['/node_modules/', '/tests-playwright/', '.spec.ts', '.spec.js'],
 
   // The regexp pattern or array of patterns that Jest uses to detect test files
   // testRegex: [],