class TestcaseDashboard extends HTMLElement { connectedCallback() { this.attachShadow({ mode: 'open' }); this.shadowRoot.innerHTML = `

${this.generateTestCases()}

Statistics

${this.generateStats()}

Test Types

`; } generateTestCases() { const testCases = [ { id: 'TC-001', title: 'User authentication validation', type: 'Manual', status: 'Passed', stages: ['SIT', 'UAT'], priority: 'High', project: 'PROJ-1', module: 'AUTH-MOD', fsd: 'FSD-101', userStory: 'US-42', description: 'Validate user can authenticate with valid credentials', steps: '1. Navigate to login page\n2. Enter valid credentials\n3. Click login button', expected: 'User should be authenticated and redirected to dashboard' }, { id: 'TC-002', title: 'API endpoint response validation', type: 'API Auto', status: 'Failed', stages: ['UAT', 'PVT'], priority: 'Medium', project: 'PROJ-1', module: 'API-MOD', fsd: 'FSD-102', userStory: 'US-43', description: 'Validate API returns correct response format', steps: '1. Send GET request to /api/users\n2. Verify response format', expected: 'Response should match OpenAPI specification' }, { id: 'TC-003', title: 'UI component rendering test', type: 'UI Auto', status: 'Pending', stages: ['SIT', 'UAT', 'PVT'], priority: 'Low', project: 'PROJ-2', module: 'UI-MOD', fsd: 'FSD-103', userStory: 'US-44', description: 'Verify dashboard components render correctly', steps: '1. Load dashboard page\n2. Check all components', expected: 'All components should render without errors' }, { id: 'TC-004', title: 'Performance benchmark', type: 'Performance', status: 'Passed', stages: ['SIT'], priority: 'Medium', project: 'PROJ-2', module: 'PERF-MOD', fsd: 'FSD-104', userStory: 'US-45', description: 'Measure API response times under load', steps: '1. Run load test with 1000 concurrent users\n2. Record response times', expected: '95% of requests should complete in <500ms' }, { id: 'TC-005', title: 'Security vulnerability scan', type: 'Security', status: 'Failed', stages: ['UAT', 'PVT'], priority: 'High', project: 'PROJ-3', module: 'SEC-MOD', fsd: 'FSD-105', userStory: 'US-46', description: 'Check for common security vulnerabilities', steps: '1. Run OWASP ZAP scan\n2. Analyze results', expected: 'No critical vulnerabilities found' } ]; return testCases.map(tc => `

${tc.project} ${tc.module} ${tc.fsd} ${tc.userStory}

${this.getTypeIcon(tc.type)}

${tc.title}

${tc.id} • ${tc.stages.join(', ')}

${tc.priority}

Description: ${tc.description}

Steps:

${tc.steps}

Expected: ${tc.expected}

Last updated: ${new Date().toLocaleDateString()} • Used in: ${tc.stages.map(s => `${s}`).join(' ')}

`).join(''); } generateStats() { return `

Total

Passed

Failed

Pending

`; } getTypeIcon(type) { const icons = { 'Manual': '👨‍💻', 'UI Auto': '🖥️', 'API Auto': '🔌', 'Performance': '⏱️', 'Security': '🔒', 'Accessibility': '♿', 'Compatibility': '🔄', 'Regression': '🔁' }; return icons[type] || '📋'; } } customElements.define('testcase-dashboard', TestcaseDashboard);

TestCase Visualizer Pro