diff --git a/ACTION_PLAN.md b/ACTION_PLAN.md new file mode 100644 index 00000000..5dc9fb1b --- /dev/null +++ b/ACTION_PLAN.md @@ -0,0 +1,133 @@ +# Testing Infrastructure Improvement Action Plan + +## Phase 1: Foundation Fixes (Branch: `testing-infrastructure-improvements`) + +### Child Branch 1: `fix/jest-configuration` +- **Issue**: Jest config syntax error preventing proper test execution +- **Actions**: + - Fix `testMatch` pattern in jest.config.js (remove extra `>`) + - Verify test discovery works correctly + - Update test scripts if needed + +### Child Branch 2: `feat/test-coverage-reporting` +- **Issue**: No coverage collection or reporting +- **Actions**: + - Configure Jest coverage collection + - Add coverage scripts to package.json + - Set up coverage thresholds (start with 50% minimum) + - Generate HTML coverage reports + - Add coverage to CI pipeline + +### Child Branch 3: `feat/e2e-tests-in-ci` +- **Issue**: E2E tests not running in GitHub Actions +- **Actions**: + - Update push.yml workflow to include e2e tests + - Configure Docker environment for CI + - Add visual diff reporting for failed tests + - Set up artifact storage for screenshots + +## Phase 2: Core Component Testing (Branch: `testing-components`) + +### Child Branch 4: `test/main-page-components` +- **Issue**: 0% coverage on critical components (Home, VersionSelector) +- **Actions**: + - Add comprehensive tests for Home.tsx + - Test VersionSelector component interactions + - Test UpgradeButton functionality + - Add integration tests for version selection flow + +### Child Branch 5: `test/diff-viewer-components` +- **Issue**: All 7 Diff components untested +- **Actions**: + - Test DiffViewer.tsx rendering and state management + - Test DiffSection.tsx file filtering and display + - Test DiffHeader.tsx anchor links and actions + - Test Diff.tsx component interactions + - Add tests for collapse/expand functionality + +### Child Branch 6: `test/ui-components` +- **Issue**: Missing tests for 16 remaining components +- **Actions**: + - Test all button components (Copy, Download, View, etc.) + - Test CompletedFilesCounter interactions + - Test alert and notification components + - Test VersionSelector dropdown behavior + +## Phase 3: Hook and Data Layer Testing (Branch: `testing-hooks-data`) + +### Child Branch 7: `test/custom-hooks` +- **Issue**: 0% hook coverage - critical data fetching untested +- **Actions**: + - Test useFetchDiff hook with mock responses + - Test useFetchReleaseVersions hook + - Test URL parsing hooks (get-language-from-url, get-package-name-from-url) + - Add error handling tests for all hooks + +### Child Branch 8: `test/utils-and-helpers` +- **Issue**: 67% of utility functions untested +- **Actions**: + - Complete utils.ts test coverage + - Test device-sizes.ts utility functions + - Test update-url.ts URL manipulation + - Add edge case testing for all utilities + +## Phase 4: Advanced Testing Features (Branch: `testing-enhancements`) + +### Child Branch 9: `feat/accessibility-testing` +- **Issue**: No accessibility testing infrastructure +- **Actions**: + - Add jest-axe dependency + - Create accessibility test utilities + - Add a11y tests to all interactive components + - Test keyboard navigation flows + +### Child Branch 10: `feat/integration-testing` +- **Issue**: No component interaction testing +- **Actions**: + - Test version selection → diff loading → display flow + - Test diff completion → progress tracking integration + - Test theme switching across components + - Test responsive behavior integration + +### Child Branch 11: `feat/performance-testing` +- **Issue**: No performance benchmarks or testing +- **Actions**: + - Add performance testing utilities + - Test large diff rendering performance + - Add memory leak detection + - Create performance regression tests + +## Phase 5: CI/CD and Quality Gates (Branch: `testing-ci-quality`) + +### Child Branch 12: `feat/coverage-thresholds` +- **Issue**: No enforced quality gates +- **Actions**: + - Implement progressive coverage thresholds + - Add coverage requirements for new code + - Create coverage badges for README + - Set up coverage trend tracking + +### Child Branch 13: `feat/test-automation-improvements` +- **Issue**: Limited CI testing scope +- **Actions**: + - Add cross-browser e2e testing + - Implement parallel test execution + - Add test result reporting and notifications + - Create test flakiness detection + +## Success Metrics +- **Component Coverage**: 7.7% → 85%+ +- **Hook Coverage**: 0% → 100% +- **Util Coverage**: 33% → 90%+ +- **Overall Coverage**: ~15% → 80%+ +- **CI Pipeline**: Include all test types +- **Quality Gates**: Enforce coverage thresholds + +## Timeline Estimate +- **Phase 1**: 3-5 days (foundation critical) +- **Phase 2**: 7-10 days (bulk of work) +- **Phase 3**: 4-6 days (complex hook testing) +- **Phase 4**: 5-7 days (advanced features) +- **Phase 5**: 2-3 days (CI/automation) + +**Total**: ~3-4 weeks for comprehensive testing infrastructure \ No newline at end of file diff --git a/jest.config.js b/jest.config.js index 2e5802c1..39a04f46 100644 --- a/jest.config.js +++ b/jest.config.js @@ -5,6 +5,6 @@ module.exports = { '^.+\\.(js|jsx|ts|tsx)?$': 'ts-jest', }, transformIgnorePatterns: ['/node_modules/'], - testMatch: ['>/__tests__/**/*.spec.(js|jsx|ts|tsx)'], + testMatch: ['/__tests__/**/*.spec.(js|jsx|ts|tsx)'], setupFilesAfterEnv: ['/jest.setup.js'], } diff --git a/src/components/common/Select.test.tsx b/src/__tests__/components/common/Select.spec.tsx similarity index 80% rename from src/components/common/Select.test.tsx rename to src/__tests__/components/common/Select.spec.tsx index b54a6e4e..9d8ceb19 100644 --- a/src/components/common/Select.test.tsx +++ b/src/__tests__/components/common/Select.spec.tsx @@ -1,6 +1,6 @@ import React from 'react' import { render } from '@testing-library/react' -import Select from './Select' +import Select from '../../../components/common/Select' it('renders without crashing', () => { const { container } = render( @@ -16,11 +16,13 @@ it('renders without crashing', () => {
-

+

The title -
+
{ class="ant-select-selection-search" > { readonly="" role="combobox" style="opacity: 0;" + type="search" + unselectable="on" value="" /> one option @@ -57,12 +62,11 @@ it('renders without crashing', () => { >