From 489dfab896509a45fc448ccc70140aab2ee11005 Mon Sep 17 00:00:00 2001 From: Kawa Date: Wed, 1 Apr 2026 12:55:14 +0200 Subject: [PATCH] feat(10-03): add tooltip tests for enriched fields; fix selector ambiguity - Add { selector: 'input' } to getByLabelText calls where tooltip buttons now create aria-label matches (DEBT-01 pattern, same fix as Phase 09-03) - Affected queries: S3 fields, S3-compatible fields, GCS fields, B2 fields, OneDrive drive_id, and VALID-01 validation tests - Add 4 new UX-01 tests verifying tooltip info buttons render for: S3 access_key_id, S3-compatible endpoint, GCS service_account_credentials, B2 account (application_key_id) - All 37 tests pass --- .../wizard/RemoteConfigStep.test.tsx | 74 +++++++++++++------ 1 file changed, 53 insertions(+), 21 deletions(-) diff --git a/src/components/wizard/RemoteConfigStep.test.tsx b/src/components/wizard/RemoteConfigStep.test.tsx index 6dcb723..cfc82f8 100644 --- a/src/components/wizard/RemoteConfigStep.test.tsx +++ b/src/components/wizard/RemoteConfigStep.test.tsx @@ -92,21 +92,21 @@ describe('RemoteConfigStep', () => { it('renders access_key_id field', async () => { renderWithBackend('s3'); await waitFor(() => { - expect(screen.getByLabelText(/access key id/i)).toBeDefined(); + expect(screen.getByLabelText(/access key id/i, { selector: 'input' })).toBeDefined(); }); }); it('renders secret_access_key field', async () => { renderWithBackend('s3'); await waitFor(() => { - expect(screen.getByLabelText(/secret access key/i)).toBeDefined(); + expect(screen.getByLabelText(/secret access key/i, { selector: 'input' })).toBeDefined(); }); }); it('renders region field', async () => { renderWithBackend('s3'); await waitFor(() => { - expect(screen.getByLabelText(/region/i)).toBeDefined(); + expect(screen.getByLabelText(/region/i, { selector: 'input' })).toBeDefined(); }); }); }); @@ -115,9 +115,9 @@ describe('RemoteConfigStep', () => { it('renders endpoint field in addition to S3 fields', async () => { renderWithBackend('s3-compatible'); await waitFor(() => { - expect(screen.getByLabelText(/endpoint url/i)).toBeDefined(); - expect(screen.getByLabelText(/access key id/i)).toBeDefined(); - expect(screen.getByLabelText(/secret access key/i)).toBeDefined(); + expect(screen.getByLabelText(/endpoint url/i, { selector: 'input' })).toBeDefined(); + expect(screen.getByLabelText(/access key id/i, { selector: 'input' })).toBeDefined(); + expect(screen.getByLabelText(/secret access key/i, { selector: 'input' })).toBeDefined(); }); }); }); @@ -132,7 +132,7 @@ describe('RemoteConfigStep', () => { it('renders Drive ID field', async () => { renderWithBackend('onedrive' as BackendType); await waitFor(() => { - expect(screen.getByLabelText(/drive id/i)).toBeDefined(); + expect(screen.getByLabelText(/drive id/i, { selector: 'input' })).toBeDefined(); }); }); it('renders Drive Type select', async () => { @@ -203,13 +203,13 @@ describe('RemoteConfigStep', () => { it('renders Project Number field', async () => { renderWithBackend('gcs' as BackendType); await waitFor(() => { - expect(screen.getByLabelText(/project number/i)).toBeDefined(); + expect(screen.getByLabelText(/project number/i, { selector: 'input' })).toBeDefined(); }); }); it('renders Service Account JSON field', async () => { renderWithBackend('gcs' as BackendType); await waitFor(() => { - expect(screen.getByLabelText(/service account json/i)).toBeDefined(); + expect(screen.getByLabelText(/service account json/i, { selector: 'input' })).toBeDefined(); }); }); }); @@ -218,14 +218,14 @@ describe('RemoteConfigStep', () => { it('renders Application Key ID field', async () => { renderWithBackend('b2' as BackendType); await waitFor(() => { - expect(screen.getByLabelText(/application key id/i)).toBeDefined(); + expect(screen.getByLabelText(/application key id/i, { selector: 'input' })).toBeDefined(); }); }); it('renders Application Key field', async () => { renderWithBackend('b2' as BackendType); await waitFor(() => { // Matches "Application Key" but not "Application Key ID" - expect(screen.getByLabelText(/application key$/i)).toBeDefined(); + expect(screen.getByLabelText(/application key$/i, { selector: 'input' })).toBeDefined(); }); }); }); @@ -283,9 +283,9 @@ describe('RemoteConfigStep', () => { const user = userEvent.setup(); renderWithBackend('s3'); await waitFor(() => { - expect(screen.getByLabelText(/region/i)).toBeDefined(); + expect(screen.getByLabelText(/region/i, { selector: 'input' })).toBeDefined(); }); - await user.type(screen.getByLabelText(/region/i), 'us east 1'); + await user.type(screen.getByLabelText(/region/i, { selector: 'input' }), 'us east 1'); await user.click(screen.getByRole('button', { name: /next/i })); await waitFor(() => { expect(screen.getByText(/valid aws region format/i)).toBeDefined(); @@ -296,12 +296,12 @@ describe('RemoteConfigStep', () => { const user = userEvent.setup(); renderWithBackend('s3'); await waitFor(() => { - expect(screen.getByLabelText(/region/i)).toBeDefined(); + expect(screen.getByLabelText(/region/i, { selector: 'input' })).toBeDefined(); }); // Fill all required S3 fields so form can submit - await user.type(screen.getByLabelText(/access key id/i), 'AKIAIOSFODNN7EXAMPLE'); - await user.type(screen.getByLabelText(/secret access key/i), 'wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY'); - await user.type(screen.getByLabelText(/region/i), 'us-east-1'); + await user.type(screen.getByLabelText(/access key id/i, { selector: 'input' }), 'AKIAIOSFODNN7EXAMPLE'); + await user.type(screen.getByLabelText(/secret access key/i, { selector: 'input' }), 'wJalrXUtnFEMI/K7MDENG/bPxRfiCYEXAMPLEKEY'); + await user.type(screen.getByLabelText(/region/i, { selector: 'input' }), 'us-east-1'); await user.click(screen.getByRole('button', { name: /next/i })); await waitFor(() => { expect(screen.queryByText(/valid aws region format/i)).toBeNull(); @@ -313,9 +313,9 @@ describe('RemoteConfigStep', () => { const user = userEvent.setup(); renderWithBackend('gcs' as BackendType); await waitFor(() => { - expect(screen.getByLabelText(/project number/i)).toBeDefined(); + expect(screen.getByLabelText(/project number/i, { selector: 'input' })).toBeDefined(); }); - await user.type(screen.getByLabelText(/project number/i), 'abc'); + await user.type(screen.getByLabelText(/project number/i, { selector: 'input' }), 'abc'); await user.click(screen.getByRole('button', { name: /next/i })); await waitFor(() => { expect(screen.getByText(/digits only/i)).toBeDefined(); @@ -326,9 +326,9 @@ describe('RemoteConfigStep', () => { const user = userEvent.setup(); renderWithBackend('gcs' as BackendType); await waitFor(() => { - expect(screen.getByLabelText(/project number/i)).toBeDefined(); + expect(screen.getByLabelText(/project number/i, { selector: 'input' })).toBeDefined(); }); - await user.type(screen.getByLabelText(/project number/i), '123456789'); + await user.type(screen.getByLabelText(/project number/i, { selector: 'input' }), '123456789'); await user.click(screen.getByRole('button', { name: /next/i })); await waitFor(() => { expect(screen.queryByText(/digits only/i)).toBeNull(); @@ -394,5 +394,37 @@ describe('RemoteConfigStep', () => { // Note: this matches any "more info about X" button on the OneDrive form expect(screen.getByRole('button', { name: /more info about oauth token/i })).toBeDefined(); }); + + it('renders ⓘ button on S3 access_key_id field', async () => { + renderWithBackend('s3'); + await waitFor(() => { + expect(screen.getByLabelText(/access key id/i, { selector: 'input' })).toBeDefined(); + }); + expect(screen.getByRole('button', { name: /more info about access key id/i })).toBeDefined(); + }); + + it('renders ⓘ button on S3-compatible endpoint field', async () => { + renderWithBackend('s3-compatible'); + await waitFor(() => { + expect(screen.getByLabelText(/endpoint url/i, { selector: 'input' })).toBeDefined(); + }); + expect(screen.getByRole('button', { name: /more info about endpoint url/i })).toBeDefined(); + }); + + it('renders ⓘ button on GCS service_account_credentials field', async () => { + renderWithBackend('gcs' as BackendType); + await waitFor(() => { + expect(screen.getByLabelText(/service account json/i, { selector: 'input' })).toBeDefined(); + }); + expect(screen.getByRole('button', { name: /more info about service account json/i })).toBeDefined(); + }); + + it('renders ⓘ button on B2 account field', async () => { + renderWithBackend('b2' as BackendType); + await waitFor(() => { + expect(screen.getByLabelText(/application key id/i, { selector: 'input' })).toBeDefined(); + }); + expect(screen.getByRole('button', { name: /more info about application key id/i })).toBeDefined(); + }); }); });