/* 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

npm install @bernierllc/content-management-tests

Quick Start

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:

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('[email protected]', '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:

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:

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:

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:

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('[email protected]', '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:

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:

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: '[email protected]'
});

Test Configuration

Playwright Configuration

// 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

// 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

# Run all tests
npm run test:all

# Run with coverage
npm run test:coverage

# Run in CI mode
npm run test:ci

Playwright Tests

# 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

# 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

# Run integration tests
npm run test:integration

# Run E2E tests
npm run test:e2e

Test Scripts

Package.json Scripts

{
  "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:

{
  "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 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

# 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

# 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.