chore: update testing setup and component configurations

- Refactor .gitignore to include Playwright test results and reports.
- Update package-lock.json and package.json to reflect version changes and add Playwright dependencies.
- Introduce Playwright configuration and testing scripts in test-app.
- Add comprehensive end-to-end tests for IKImage and IKVideo components, covering rendering, transformations, and responsive behavior.
- Create integration and transformation tests to validate component functionality and URL handling.
- Enhance app.component.html with updated attributes for testing purposes.

Author: piyushryn

.github/workflows/e2e.yml

@@ -0,0 +1,69 @@
+# This is a test workflow for testing the tests 
+name: E2E Tests
+
+on:
+  push:
+    branches: ['*']
+  pull_request:
+    branches: ['*']
+
+jobs:
+  playwright-run:
+    runs-on: ubuntu-latest
+    strategy:
+      fail-fast: false
+      matrix:
+        project: ['Desktop Chrome', 'Desktop Firefox', 'Desktop Safari']
+    
+    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: Build SDK
+        run: npm run build
+      
+      - name: Install test app dependencies
+        working-directory: ./test-app
+        run: npm ci
+      
+      - name: Install Playwright browsers
+        working-directory: ./test-app
+        run: npx playwright install --with-deps
+      
+      - name: Run Playwright tests
+        working-directory: ./test-app
+        run: npx playwright test --project="${{ matrix.project }}"
+      
+      - name: Upload test results on failure
+        if: failure()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-results-${{ matrix.project }}
+          path: test-app/test-results/
+          if-no-files-found: ignore
+      
+      - name: Upload Playwright report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report-${{ matrix.project }}
+          path: test-app/playwright-report/
+          retention-days: 30
+          if-no-files-found: ignore
+      
+      - name: Generate test report
+        if: always()
+        run: |
+          echo "## Test Results - ${{ matrix.project }}" >> $GITHUB_STEP_SUMMARY
+          echo "Project: ${{ matrix.project }}" >> $GITHUB_STEP_SUMMARY
+
+

.gitignore

@@ -44,10 +44,10 @@ testem.log
 .DS_Store
 Thumbs.db
 
-# Environment files
-.env
-.env.local
-.env.*.local
+# Playwright
+/test-app/test-results/
+/test-app/playwright-report/
+/test-app/playwright/.cache/
 
 # Logs
 *.log
@@ -60,3 +60,8 @@ logs/
 # Test coverage
 coverage/
 .nyc_output/
+
+# Environment files
+.env
+.env.local
+.env.*.local

TESTING.md

@@ -0,0 +1,97 @@
+# Testing Guide
+
+This document provides an overview of testing in the ImageKit Angular SDK.
+
+## Test Framework
+
+The SDK uses **Playwright** for end-to-end testing.
+
+## Quick Start
+
+### Install Dependencies
+
+```bash
+# Install root dependencies
+npm install
+
+# Install test app dependencies
+cd test-app
+npm install
+
+# Install Playwright browsers
+npx playwright install
+```
+
+### Run Tests
+
+```bash
+# From root directory
+npm run test:e2e         # Run all tests headless
+npm run test:e2e:ui      # Open interactive UI
+npm run test:e2e:headed  # Run with visible browser
+
+# From test-app directory
+cd test-app
+npm run test:e2e         # Run all tests
+npm run test:e2e:ui      # Open interactive UI
+npm run test:e2e:headed  # Run with visible browser
+```
+
+## Test Structure
+
+```
+test-app/
+├── e2e/
+│   ├── ik-image.spec.ts        # IKImage component tests
+│   ├── ik-video.spec.ts        # IKVideo component tests
+│   ├── transformations.spec.ts # URL transformation tests
+│   ├── integration.spec.ts     # Integration tests
+│   └── README.md               # Detailed E2E testing guide
+└── playwright.config.ts        # Playwright configuration
+```
+
+
+## Debugging Tests
+
+### UI Mode (Recommended)
+```bash
+npm run test:e2e:ui
+```
+
+### Debug Mode
+```bash
+cd test-app
+npx playwright test --debug
+```
+
+### Headed Mode
+```bash
+npm run test:e2e:headed
+```
+
+### Specific Test File
+```bash
+cd test-app
+npx playwright test ik-image.spec.ts
+```
+
+### Specific Browser
+```bash
+cd test-app
+npx playwright test --project="Desktop Chrome"
+```
+
+## Test Reports
+
+After running tests, view the HTML report:
+
+```bash
+cd test-app
+npx playwright show-report
+```
+## Getting Help
+
+- Check existing test files for examples
+- Review [Playwright documentation](https://playwright.dev/)
+
+

package-lock.json

@@ -10,7 +10,13 @@
     "postbuild": "cp README.md dist/imagekit-angular/ && cp LICENSE dist/imagekit-angular/",
     "watch": "ng build imagekit-angular --watch",
     "test": "ng test imagekit-angular",
-    "pack": "npm run build && cd dist/imagekit-angular && npm pack"
+    "pack": "npm run build && cd dist/imagekit-angular && npm pack",
+    "start:test-app": "cd test-app && npm start",
+    "test:e2e": "cd test-app && npm run test:e2e",
+    "test:e2e:ui": "cd test-app && npm run test:e2e:ui",
+    "test:e2e:headed": "cd test-app && npm run test:e2e:headed",
+    "test:e2e:ci": "cd test-app && npm run test:e2e",
+    "testapp" : "cd test-app && npm start"
   },
   "private": true,
   "dependencies": {
@@ -24,6 +30,7 @@
     "@angular/cli": "^17.0.0",
     "@angular/compiler": "^17.0.0",
     "@angular/compiler-cli": "^17.0.0",
+    "@types/http-proxy": "^1.17.17",
     "ng-packagr": "^17.0.0",
     "typescript": "~5.2.2"
   }

package.json

@@ -66,22 +66,22 @@ import { getInt, validateUrlEndpoint, getTransformationConfig } from '../utils/c
   `
 })
 export class IKImageComponent implements OnChanges, AfterViewInit {
-  @Input() src: string = '';
+  @Input() src: IKImageProps['src'] = '';
   @Input() urlEndpoint?: string;
-  @Input() transformation?: Array<Record<string, any>>;
-  @Input() queryParameters?: Record<string, string | number>;
-  @Input() transformationPosition?: 'path' | 'query';
-  @Input() responsive: boolean = true;
-  @Input() width?: number | string;
-  @Input() height?: number | string;
-  @Input() alt?: string;
-  @Input() loading?: 'lazy' | 'eager';
-  @Input() className?: string;
-  @Input() style?: Record<string, string>;
-  @Input() sizes?: string;
-  @Input() deviceBreakpoints?: number[];
-  @Input() imageBreakpoints?: number[];
-  @Input() passthrough?: Record<string, any> | null;
+  @Input() transformation?: IKImageProps['transformation'];
+  @Input() queryParameters?: IKImageProps['queryParameters'];
+  @Input() transformationPosition?: IKImageProps['transformationPosition'];
+  @Input() responsive: IKImageProps['responsive'] = true;
+  @Input() width?: IKImageProps['width'];
+  @Input() height?: IKImageProps['height'];
+  @Input() alt?: IKImageProps['alt'];
+  @Input() loading?: IKImageProps['loading'];
+  @Input() className?: IKImageProps['className'];
+  @Input() style?: IKImageProps['style'];
+  @Input() sizes?: IKImageProps['sizes'];
+  @Input() deviceBreakpoints?: IKImageProps['deviceBreakpoints'];
+  @Input() imageBreakpoints?: IKImageProps['imageBreakpoints'];
+  @Input() passthrough?: IKImageProps['passthrough'];
 
   @ViewChild(BindDirective, { static: false }) bindDirective?: BindDirective;
 

projects/imagekit-angular/src/lib/components/ik-image.component.ts

@@ -70,24 +70,24 @@ import { validateUrlEndpoint, getTransformationConfig } from '../utils/common.ut
   `
 })
 export class IKVideoComponent implements OnChanges, AfterViewInit {
-  @Input() src: string = '';
+  @Input() src: IKVideoProps['src'] = '';
   @Input() urlEndpoint?: string;
-  @Input() transformation?: Array<Record<string, any>>;
-  @Input() queryParameters?: Record<string, string | number>;
-  @Input() transformationPosition?: 'path' | 'query';
-  @Input() className?: string;
-  @Input() style?: Record<string, string>;
-  @Input() title?: string;
-  @Input() controls?: boolean;
-  @Input() autoplay?: boolean;
-  @Input() loop?: boolean;
-  @Input() muted?: boolean;
-  @Input() playsinline?: boolean;
-  @Input() preload?: string;
-  @Input() width?: number | string;
-  @Input() height?: number | string;
-  @Input() poster?: string;
-  @Input() passthrough?: Record<string, any> | null;
+  @Input() transformation?: IKVideoProps['transformation'];
+  @Input() queryParameters?: IKVideoProps['queryParameters'];
+  @Input() transformationPosition?: IKVideoProps['transformationPosition'];
+  @Input() className?: IKVideoProps['className'];
+  @Input() style?: IKVideoProps['style'];
+  @Input() title?: IKVideoProps['title'];
+  @Input() controls?: IKVideoProps['controls'];
+  @Input() autoplay?: IKVideoProps['autoplay'];
+  @Input() loop?: IKVideoProps['loop'];
+  @Input() muted?: IKVideoProps['muted'];
+  @Input() playsinline?: IKVideoProps['playsinline'];
+  @Input() preload?: IKVideoProps['preload'];
+  @Input() width?: IKVideoProps['width'];
+  @Input() height?: IKVideoProps['height'];
+  @Input() poster?: IKVideoProps['poster'];
+  @Input() passthrough?: IKVideoProps['passthrough'];
 
   @ViewChild(BindDirective, { static: false }) bindDirective?: BindDirective;
 

projects/imagekit-angular/src/lib/components/ik-video.component.ts

@@ -1,3 +1,5 @@
+import { Transformation } from '@imagekit/javascript';
+
 /**
  * Re-export types from @imagekit/javascript for convenience
  */
@@ -40,7 +42,7 @@ export interface IKSrcProps {
    *
    * @see https://imagekit.io/docs/transformations#chained-transformations
    */
-  transformation?: Array<Record<string, any>>;
+  transformation?: Array<Transformation> | Array<Record<string, any>>;
 
   /**
    * By default, the transformation string is added as a `query` parameter in the URL, e.g., `?tr=w-100,h-100`.