MPI-159: Introduce git actions - linting (#52)

* feat: Add TypeScript compilation checks and ESLint to workflows

- Introduced TypeScript compilation checks in firebase-deployment.yml, lint.yml, and playwright-tests.yml to ensure type safety.
- Added ESLint step to lint.yml and playwright-tests.yml for consistent code quality.
- Removed unused imports in BreathingExercise.spec.ts and WidgetConfiguration.spec.ts for cleaner test files.
- Cleaned up widgetConfigHelpers.ts by removing unnecessary TestData import.

* docs: Update README to include CI/CD pipeline details

- Added comprehensive section on CI/CD pipeline utilizing GitHub Actions.
- Documented workflows for lint validation, Playwright tests, and Firebase deployments.
- Clarified triggers, purposes, and benefits of each workflow.
- Included local development instructions to catch issues early.

Author: jfugalde

.github/workflows/firebase-deployment.yml

@@ -32,6 +32,9 @@ jobs:
       - name: Run Linting
         run: npm run lint
 
+      - name: Check TypeScript compilation
+        run: npx tsc --noEmit
+
       - name: Build Application
         run: npm run build
         env:

.github/workflows/lint.yml

@@ -0,0 +1,31 @@
+name: Lint Validation
+
+on:
+    pull_request:
+        branches: [main, master]
+    push:
+        branches: [main, master]
+
+jobs:
+    lint:
+        name: Run ESLint
+        runs-on: ubuntu-latest
+
+        steps:
+            - name: Checkout code
+              uses: actions/checkout@v4
+
+            - name: Setup Node.js
+              uses: actions/setup-node@v4
+              with:
+                  node-version: "18"
+                  cache: "npm"
+
+            - name: Install dependencies
+              run: npm ci
+
+            - name: Run ESLint
+              run: npm run lint
+
+            - name: Check TypeScript compilation
+              run: npx tsc --noEmit

.github/workflows/playwright-tests.yml

@@ -26,6 +26,12 @@ jobs:
     - name: Install dependencies
       run: npm ci
 
+    - name: Run ESLint
+      run: npm run lint
+    
+    - name: Check TypeScript compilation
+      run: npx tsc --noEmit
+    
     - name: Install Playwright Browsers
       run: npx playwright install chromium
 

README.md

@@ -91,6 +91,77 @@ Deploys when pushing a tag with the `prod-` prefix.
 2. View deployment: https://rainbowrelax.web.app
 3. Monitor status: **Actions > Deploy to Firebase PROD**
 
+---
+# CI/CD Pipeline
+
+This project uses GitHub Actions for automated testing, linting, and deployment. All workflows run on pull requests and pushes to ensure code quality.
+
+## Workflows
+
+### 1. Lint Validation (`lint.yml`)
+- **Triggers**: Pull requests and pushes to `main`
+- **Purpose**: Validates code quality before merge
+- **Runs**: ESLint and TypeScript compilation checks
+- **Duration**: ~2-3 minutes
+- **Benefit**: Prevents linting errors from reaching main branch, avoiding deployment failures
+
+### 2. Playwright Tests (`playwright-tests.yml`)
+- **Triggers**: Pull requests and pushes to `main`
+- **Purpose**: Run end-to-end tests to ensure functionality
+- **Runs**: 
+  - ESLint validation
+  - TypeScript compilation
+  - Build application
+  - Run all 84+ E2E tests (using 4 parallel workers)
+- **Duration**: ~5-7 minutes
+- **Benefit**: Comprehensive validation before merge and deployment
+
+### 3. Firebase Deployment Workflows
+
+All deployment workflows use the reusable `firebase-deployment.yml` workflow which ensures:
+1. ✅ ESLint validation passes
+2. ✅ TypeScript compilation succeeds
+3. ✅ Application builds successfully
+4. ✅ Only validated code reaches production
+
+#### Development Deployment (`firebase-dev.yml`)
+- **Triggers**: Push to `main` branch
+- **Includes**: Full validation (linting, TypeScript, build)
+- **Deploy**: Automatically to `rainbowrelax-dev` site
+- **URL**: https://rainbowrelax-dev.web.app
+
+#### QA Deployment (`firebase-qa.yml`)
+- **Triggers**: Push tag matching `qa-*` pattern
+- **Includes**: Full validation before deployment
+- **Deploy**: To `rainbowrelax-qa` site
+- **URL**: https://rainbowrelax-qa.web.app
+
+#### Production Deployment (`firebase-prod.yml`)
+- **Triggers**: Push tag matching `prod-*` pattern
+- **Includes**: Full validation before deployment
+- **Deploy**: To `rainbowrelax` site
+- **URL**: https://rainbowrelax.web.app
+
+## Workflow Integration
+
+The CI/CD pipeline ensures that:
+- **Pull Requests**: Lint validation and tests run automatically
+- **Main Branch**: All validations pass before any deployment
+- **Deployments**: Only validated code reaches DEV, QA, and PROD environments
+
+This prevents duplicate PRs caused by linting failures and ensures only tested, validated code is deployed.
+
+## Local Development
+
+Before pushing, run locally to catch issues early:
+
+```bash
+npm run lint        # Check for linting errors
+npx tsc --noEmit    # Verify TypeScript compilation
+npm run build       # Verify build works
+npm run test:e2e    # Run all tests
+```
+
 ---
 # Audio Credits
 

tests/e2e/BreathingExercise.spec.ts

@@ -1,6 +1,6 @@
 import { expect, test } from '@playwright/test';
 import TestData from '../fixtures/testData';
-import { waitForBreathingExerciseToStart, waitForBreathingInstructions } from '../fixtures/testHelpers';
+import { waitForBreathingExerciseToStart } from '../fixtures/testHelpers';
 
 test.describe('Breathing Exercise', () => {
   test.beforeEach(async ({ page }) => {

tests/e2e/WidgetConfiguration.spec.ts

@@ -3,12 +3,7 @@ import { WidgetConfigPage } from '../page-objects';
 import TestData from '../fixtures/testData';
 import { 
   verifyCustomLogo, 
-  verifyDefaultLogo, 
-  verifyButtonHidden, 
-  verifyButtonLink, 
-  verifyButtonVisible,
-  verifyAssetRequest,
-  verifyAssetRequestFailed
+  verifyDefaultLogo
 } from '../fixtures/widgetConfigHelpers';
 import { closeQuickEscapeModal } from '../fixtures/testHelpers';
 

tests/fixtures/widgetConfigHelpers.ts

@@ -1,5 +1,4 @@
 import { Page, expect } from '@playwright/test';
-import TestData from './testData';
 
 /**
  * Widget Configuration Helper Functions