@bernierllc/content-management-tests 0.1.1

package/README.md

@@ -0,0 +1,522 @@
+/*
+Copyright (c) 2025 Bernier LLC
+
+This file is licensed to the client under a limited-use license.
+The client may use and modify this code *only within the scope of the project it was delivered for*.
+Redistribution or use in other products or commercial offerings is not permitted without written consent from Bernier LLC.
+*/
+
+# Content Management Tests
+
+A comprehensive test suite for the content management system with Playwright, Jest, and integration tests.
+
+## Features
+
+- **🎭 Playwright E2E Tests**: Complete end-to-end testing with browser automation
+- **🧪 Jest Unit Tests**: Unit testing with React Testing Library
+- **🔗 Integration Tests**: API and component integration testing
+- **⚡ Performance Tests**: Load time and performance benchmarking
+- **📱 Responsive Tests**: Mobile, tablet, and desktop testing
+- **♿ Accessibility Tests**: WCAG compliance testing
+- **🛠️ Test Utilities**: Reusable test helpers and fixtures
+- **📊 Test Reports**: HTML, JSON, and JUnit test reports
+- **🎯 Test Data**: Faker-based test data generation
+- **🔧 Mocking**: Comprehensive mocking for external dependencies
+
+## Installation
+
+```bash
+npm install @bernierllc/content-management-tests
+```
+
+## Quick Start
+
+```typescript
+import { createTestUtils, contentFixtures } from '@bernierllc/content-management-tests';
+
+// Create test utilities
+const testUtils = createTestUtils(page, context);
+
+// Use test fixtures
+const contentData = contentFixtures.text;
+
+// Run tests
+await testUtils.createContent('text', contentData);
+```
+
+## Test Types
+
+### 1. End-to-End Tests
+
+Comprehensive browser-based testing with Playwright:
+
+```typescript
+import { test, expect } from '@playwright/test';
+import { createTestUtils } from '@bernierllc/content-management-tests';
+
+test.describe('Content Management E2E', () => {
+  let testUtils: ReturnType<typeof createTestUtils>;
+
+  test.beforeEach(async ({ page, context }) => {
+    testUtils = createTestUtils(page, context);
+    await testUtils.navigateTo('/');
+  });
+
+  test('should create and publish content', async () => {
+    await testUtils.login('admin@example.com', 'password');
+    await testUtils.createContent('text', {
+      title: 'Test Content',
+      slug: 'test-content',
+      body: 'Test body'
+    });
+    await testUtils.publishContent('test-content');
+    await testUtils.expectTextVisible('Content published successfully');
+  });
+});
+```
+
+### 2. Unit Tests
+
+Component and function testing with Jest:
+
+```typescript
+import { render, screen } from '@testing-library/react';
+import { ContentEditor } from '@bernierllc/content-management-suite';
+
+describe('ContentEditor', () => {
+  test('should render editor component', () => {
+    render(<ContentEditor content={contentFixtures.text} />);
+    expect(screen.getByTestId('content-editor')).toBeInTheDocument();
+  });
+});
+```
+
+### 3. Integration Tests
+
+API and service integration testing:
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('API Integration', () => {
+  test('should handle content CRUD operations', async () => {
+    const response = await testUtils.apiRequest('POST', '/content', {
+      type: 'text',
+      data: contentFixtures.text
+    });
+    expect(response.status).toBe(201);
+  });
+});
+```
+
+### 4. Performance Tests
+
+Load time and performance benchmarking:
+
+```typescript
+import { test, expect } from '@playwright/test';
+
+test.describe('Performance', () => {
+  test('should load content list quickly', async () => {
+    const loadTime = await testUtils.measurePerformance('Content List Load', async () => {
+      await testUtils.navigateTo('/admin/content');
+      await testUtils.waitForElement('[data-testid="content-list"]');
+    });
+    expect(loadTime).toBeLessThan(2000);
+  });
+});
+```
+
+## Test Utilities
+
+### TestUtils Class
+
+Comprehensive test utilities for common operations:
+
+```typescript
+import { createTestUtils } from '@bernierllc/content-management-tests';
+
+const testUtils = createTestUtils(page, context);
+
+// Navigation
+await testUtils.navigateTo('/admin/content');
+await testUtils.waitForElement('[data-testid="content-list"]');
+
+// Form operations
+await testUtils.fillForm({
+  title: 'Test Title',
+  slug: 'test-slug',
+  body: 'Test body'
+});
+await testUtils.clickButton('Save as Draft');
+
+// Content operations
+await testUtils.createContent('text', contentData);
+await testUtils.editContent(contentId, updates);
+await testUtils.publishContent(contentId);
+await testUtils.deleteContent(contentId, true);
+
+// Workflow operations
+await testUtils.createWorkflow(workflowData);
+await testUtils.updateWorkflow(workflowId, updates);
+await testUtils.deleteWorkflow(workflowId);
+
+// User operations
+await testUtils.createUser(userData);
+await testUtils.updateUser(userId, updates);
+await testUtils.deleteUser(userId);
+
+// Authentication
+await testUtils.login('admin@example.com', 'password');
+await testUtils.logout();
+
+// API operations
+const response = await testUtils.apiRequest('GET', '/content');
+const content = await testUtils.getContent(contentId);
+const createdContent = await testUtils.createContentViaAPI('text', data);
+
+// Assertions
+await testUtils.expectElementVisible('[data-testid="content-list"]');
+await testUtils.expectTextVisible('Content saved successfully');
+await testUtils.expectElementCount('[data-testid="content-item"]', 5);
+
+// Screenshots
+await testUtils.takeScreenshot('content-list');
+await testUtils.takeElementScreenshot('[data-testid="content-editor"]', 'editor');
+
+// Performance
+const loadTime = await testUtils.measurePerformance('Page Load', async () => {
+  await testUtils.navigateTo('/admin/content');
+});
+
+// Responsive
+await testUtils.switchToMobile();
+await testUtils.switchToTablet();
+await testUtils.switchToDesktop();
+
+// Cleanup
+await testUtils.cleanup();
+```
+
+### Test Fixtures
+
+Pre-defined test data for consistent testing:
+
+```typescript
+import { contentFixtures, workflowFixtures, userFixtures } from '@bernierllc/content-management-tests';
+
+// Content fixtures
+const textContent = contentFixtures.text;
+const imageContent = contentFixtures.image;
+const audioContent = contentFixtures.audio;
+const videoContent = contentFixtures.video;
+
+// Workflow fixtures
+const simpleWorkflow = workflowFixtures.simple;
+const editorialWorkflow = workflowFixtures.editorial;
+
+// User fixtures
+const adminUser = userFixtures.admin;
+const editorUser = userFixtures.editor;
+const authorUser = userFixtures.author;
+const regularUser = userFixtures.user;
+
+// Generate custom test data
+const customContent = testDataGenerators.generateContent('text', {
+  title: 'Custom Title',
+  body: 'Custom body'
+});
+```
+
+### Test Data Generators
+
+Dynamic test data generation:
+
+```typescript
+import { TestDataGenerator } from '@bernierllc/content-management-tests';
+
+// Generate content
+const content = TestDataGenerator.generateContent('text', {
+  title: 'Generated Title',
+  body: 'Generated body'
+});
+
+// Generate workflow
+const workflow = TestDataGenerator.generateWorkflow({
+  name: 'Generated Workflow',
+  stages: [...]
+});
+
+// Generate user
+const user = TestDataGenerator.generateUser('admin', {
+  name: 'Generated User',
+  email: 'generated@example.com'
+});
+```
+
+## Test Configuration
+
+### Playwright Configuration
+
+```typescript
+// playwright.config.ts
+import { defineConfig, devices } from '@playwright/test';
+
+export default defineConfig({
+  testDir: './src/playwright',
+  fullyParallel: true,
+  retries: process.env.CI ? 2 : 0,
+  workers: process.env.CI ? 1 : undefined,
+  reporter: [
+    ['html'],
+    ['json', { outputFile: 'test-results/results.json' }],
+    ['junit', { outputFile: 'test-results/results.xml' }]
+  ],
+  use: {
+    baseURL: 'http://localhost:3000',
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+    video: 'retain-on-failure'
+  },
+  projects: [
+    { name: 'chromium', use: { ...devices['Desktop Chrome'] } },
+    { name: 'firefox', use: { ...devices['Desktop Firefox'] } },
+    { name: 'webkit', use: { ...devices['Desktop Safari'] } },
+    { name: 'Mobile Chrome', use: { ...devices['Pixel 5'] } },
+    { name: 'Mobile Safari', use: { ...devices['iPhone 12'] } }
+  ]
+});
+```
+
+### Jest Configuration
+
+```javascript
+// jest.config.js
+module.exports = {
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/src/setup/jest.setup.ts'],
+  testMatch: [
+    '<rootDir>/src/**/*.test.ts',
+    '<rootDir>/src/**/*.test.tsx'
+  ],
+  collectCoverageFrom: [
+    'src/**/*.{ts,tsx}',
+    '!src/**/*.test.{ts,tsx}',
+    '!src/**/*.stories.{ts,tsx}'
+  ],
+  coverageThreshold: {
+    global: {
+      branches: 80,
+      functions: 80,
+      lines: 80,
+      statements: 80
+    }
+  }
+};
+```
+
+## Running Tests
+
+### All Tests
+
+```bash
+# Run all tests
+npm run test:all
+
+# Run with coverage
+npm run test:coverage
+
+# Run in CI mode
+npm run test:ci
+```
+
+### Playwright Tests
+
+```bash
+# Run Playwright tests
+npm run test:playwright
+
+# Run with UI
+npm run test:playwright:ui
+
+# Run in debug mode
+npm run test:playwright:debug
+
+# Run specific test
+npx playwright test e2e-tests.spec.ts
+
+# Run specific browser
+npx playwright test --project=chromium
+```
+
+### Jest Tests
+
+```bash
+# Run Jest tests
+npm run test
+
+# Run in watch mode
+npm run test:watch
+
+# Run with coverage
+npm run test:coverage
+
+# Run specific test
+npm run test -- --testNamePattern="ContentEditor"
+
+# Run specific file
+npm run test -- content-editor.test.tsx
+```
+
+### Integration Tests
+
+```bash
+# Run integration tests
+npm run test:integration
+
+# Run E2E tests
+npm run test:e2e
+```
+
+## Test Scripts
+
+### Package.json Scripts
+
+```json
+{
+  "scripts": {
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "test:playwright": "playwright test",
+    "test:playwright:ui": "playwright test --ui",
+    "test:playwright:debug": "playwright test --debug",
+    "test:integration": "jest --testPathPattern=integration",
+    "test:e2e": "jest --testPathPattern=e2e",
+    "test:all": "npm run test && npm run test:playwright && npm run test:integration",
+    "test:ci": "npm run test:coverage && npm run test:playwright",
+    "setup": "playwright install"
+  }
+}
+```
+
+## Test Reports
+
+### HTML Reports
+
+Playwright generates HTML reports with:
+- Test results and status
+- Screenshots and videos
+- Performance metrics
+- Error details and stack traces
+
+### JSON Reports
+
+Machine-readable JSON reports for CI/CD integration:
+
+```json
+{
+  "config": {
+    "projects": [...],
+    "webServer": {...}
+  },
+  "suites": [
+    {
+      "title": "Content Management E2E",
+      "file": "e2e-tests.spec.ts",
+      "specs": [...],
+      "tests": [...]
+    }
+  ],
+  "errors": [...]
+}
+```
+
+### JUnit Reports
+
+JUnit XML reports for CI/CD systems:
+
+```xml
+<?xml version="1.0" encoding="UTF-8"?>
+<testsuites>
+  <testsuite name="Content Management E2E" tests="10" failures="0" errors="0" skipped="0" time="45.2">
+    <testcase name="should create and publish content" time="3.2" />
+    <testcase name="should edit content" time="2.8" />
+    ...
+  </testsuite>
+</testsuites>
+```
+
+## Best Practices
+
+### Test Organization
+
+1. **Group related tests** in describe blocks
+2. **Use descriptive test names** that explain what is being tested
+3. **Keep tests independent** - each test should be able to run in isolation
+4. **Use setup and teardown** for common test preparation
+5. **Mock external dependencies** to ensure test reliability
+
+### Test Data
+
+1. **Use fixtures** for consistent test data
+2. **Generate dynamic data** when needed
+3. **Clean up test data** after each test
+4. **Use realistic data** that matches production scenarios
+5. **Avoid hardcoded values** in tests
+
+### Assertions
+
+1. **Use specific assertions** rather than generic ones
+2. **Test both positive and negative cases**
+3. **Verify error messages** and error handling
+4. **Check accessibility** and responsive design
+5. **Measure performance** for critical operations
+
+### Maintenance
+
+1. **Keep tests up to date** with code changes
+2. **Refactor tests** when they become brittle
+3. **Use page object model** for complex UI tests
+4. **Document test scenarios** and expected behavior
+5. **Monitor test performance** and optimize slow tests
+
+## Troubleshooting
+
+### Common Issues
+
+1. **Tests timing out**: Increase timeout or optimize test performance
+2. **Element not found**: Check selectors and wait conditions
+3. **Flaky tests**: Add proper waits and retries
+4. **Memory leaks**: Clean up resources and close browsers
+5. **Network issues**: Mock external services and handle failures
+
+### Debug Mode
+
+```bash
+# Run tests in debug mode
+npx playwright test --debug
+
+# Run specific test in debug mode
+npx playwright test --debug --grep "should create content"
+
+# Run with headed browser
+npx playwright test --headed
+```
+
+### Test Environment
+
+```bash
+# Set test environment
+NODE_ENV=test npm run test
+
+# Set test database
+TEST_DATABASE_URL=sqlite:test.db npm run test
+
+# Set test port
+TEST_PORT=3001 npm run test
+```
+
+## License
+
+Copyright (c) 2025 Bernier LLC. Licensed under limited-use license.