#92: Techdebt/testing infrastructure improvements

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

jest.config.js

@@ -5,6 +5,6 @@ module.exports = {
     '^.+\\.(js|jsx|ts|tsx)?$': 'ts-jest',
   },
   transformIgnorePatterns: ['<rootDir>/node_modules/'],
-  testMatch: ['<rootDir>>/__tests__/**/*.spec.(js|jsx|ts|tsx)'],
+  testMatch: ['<rootDir>/__tests__/**/*.spec.(js|jsx|ts|tsx)'],
   setupFilesAfterEnv: ['<rootDir>/jest.setup.js'],
 }

src/components/common/Select.test.tsx → 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', () => {
       <div
         class="css-1ago99h"
       >
-        <h4>
+        <h5
+          class="ant-typography css-dev-only-do-not-override-1rqnfsa"
+        >
           The title
-        </h4>
+        </h5>
         <div
-          class="ant-select css-1ago99h ant-select-lg ant-select-single ant-select-show-arrow"
+          class="ant-select ant-select-lg ant-select-outlined css-1ago99h css-dev-only-do-not-override-1rqnfsa ant-select-single ant-select-show-arrow"
         >
           <div
             class="ant-select-selector"
@@ -29,9 +31,9 @@ it('renders without crashing', () => {
               class="ant-select-selection-search"
             >
               <input
-                aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
                 aria-autocomplete="list"
                 aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-owns="rc_select_TEST_OR_SSR_list"
                 autocomplete="off"
@@ -40,11 +42,14 @@ it('renders without crashing', () => {
                 readonly=""
                 role="combobox"
                 style="opacity: 0;"
+                type="search"
+                unselectable="on"
                 value=""
               />
             </span>
             <span
               class="ant-select-selection-item"
+              title="one option"
             >
               one option
             </span>
@@ -57,12 +62,11 @@ it('renders without crashing', () => {
           >
             <span
               aria-label="down"
-              class="anticon anticon-down"
+              class="anticon anticon-down ant-select-suffix"
               role="img"
             >
               <svg
                 aria-hidden="true"
-                class=""
                 data-icon="down"
                 fill="currentColor"
                 focusable="false"