- Added [ready: true](http://_vscodecontentref_/6) to [react-i18next](http://_vscodecontentref_/7) mock in CrowdSecBouncerKeyDisplay tests to prevent infinite loading state - Mocked [getCrowdsecKeyStatus](http://_vscodecontentref_/8) in Security page tests to resolve "Query data cannot be undefined" warning - Ensures all Security dashboard related tests pass reliably without console errors
2.7 KiB
2.7 KiB
Plan: Fix E2E Test Failures
Objective
Fix implementation bugs and test logic issues causing failures in certificates.spec.ts, navigation.spec.ts, and proxy-acl-integration.spec.ts.
Analysis of Failures
1. Certificates Test (tests/core/certificates.spec.ts)
- Failure: Fails to assert "Domain" column header. Received
undefined. - Root Cause: Race condition. The test attempts to valid header text before the table has finished rendering (likely while in Loading or Empty state).
- Fix: explicit wait for the table element to be visible before asserting headers.
2. Navigation Test (tests/core/navigation.spec.ts)
- Failure: Sidebar expected to be hidden on mobile but is detected as visible.
- Root Cause: The Sidebar implementation in
Layout.tsxuses CSS transforms (-translate-x-full) to hide the menu on mobile. Playwright's.toBeVisible()matcher considers elements withopacity: 1and non-zero size as "visible", even if translated off-screen. - Fix: Update the assertion to check that the sidebar is hidden from the viewport OR check for the presence of the
-translate-x-fullclass.
3. Proxy ACL Integration (tests/integration/proxy-acl-integration.spec.ts)
- Failure: Timeout waiting for
select[name="access_list_id"]. - Root Cause: The
AccessListSelector.tsxcomponent renders a standard<select>element but omits thenameattribute. The test specifically queries by this attribute. - Fix: Add
name="access_list_id"(andid="access_list_id"for accessibility) to theselectelement inAccessListSelector.tsx.
Tasks
Phase 1: Fix Component Implementation
- Task 1.1: Update
frontend/src/components/AccessListSelector.tsx- Add
name="access_list_id"to the<select>element. - Add
id="access_list_id"to the<select>element.
- Add
Phase 2: Fix Test Logic
- Task 2.1: Update
tests/core/certificates.spec.ts- Insert
await expect(page.getByRole('table')).toBeVisible()before header assertions.
- Insert
- Task 2.2: Update
tests/core/navigation.spec.ts- Change
.not.toBeVisible()to.not.toBeInViewport()(if available in project Playwright version) or check for class:await expect(page.getByRole('complementary')).toHaveClass(/-translate-x-full/).
- Change
Phase 3: Verification
- Task 3.1: Run affected tests to verify fixes.
npx playwright test tests/core/certificates.spec.tsnpx playwright test tests/core/navigation.spec.tsnpx playwright test tests/integration/proxy-acl-integration.spec.ts
Files to Modify
frontend/src/components/AccessListSelector.tsxtests/core/certificates.spec.tstests/core/navigation.spec.ts