test(03-04): add failing tests for RemoteConfigStep

- BACK-01: Azure Blob form with account field + AzureAuthToggle
- BACK-02: S3 form fields (access_key_id, secret_access_key, region)
- BACK-03: S3-compatible form includes endpoint field
- renderWithBackend helper dispatches SET_BACKEND_TYPE before render
- @testing-library/user-event installed for value retention test

src/components/wizard/RemoteConfigStep.test.tsx

@@ -3,43 +3,117 @@
 // Covers BACK-02: Amazon S3 config form — access_key_id, secret_access_key, region
 // Covers BACK-03: S3-Compatible config form — same as S3 plus endpoint field
 import { describe, it, expect } from 'vitest';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { useEffect } from 'react';
+import { WizardProvider } from '../../store/context';
+import { useWizard } from '../../store/context';
+import type { BackendType } from '../../schemas/registry';
+import { RemoteConfigStep } from './RemoteConfigStep';
+
+function renderWithBackend(backendType: BackendType) {
+  function Setup() {
+    const { dispatch } = useWizard();
+    useEffect(() => {
+      dispatch({ type: 'SET_BACKEND_TYPE', payload: backendType });
+      dispatch({ type: 'SET_STEP', payload: 1 });
+    }, []);
+    return <RemoteConfigStep key={backendType} />;
+  }
+  return render(
+    <WizardProvider>
+      <Setup />
+    </WizardProvider>
+  );
+}
 
 describe('RemoteConfigStep', () => {
   describe('BACK-01: Azure Blob form', () => {
-    it('renders Storage Account Name field', () => {
-      expect.fail('not yet implemented');
+    it('renders Storage Account Name field', async () => {
+      renderWithBackend('azureblob');
+      await waitFor(() => {
+        expect(screen.getByLabelText(/storage account name/i)).toBeInTheDocument();
+      });
     });
 
-    it('shows SAS URL field by default (default auth method)', () => {
-      expect.fail('not yet implemented');
+    it('shows SAS URL field by default (default auth method)', async () => {
+      renderWithBackend('azureblob');
+      await waitFor(() => {
+        expect(screen.getByLabelText(/sas url/i)).toBeInTheDocument();
+      });
     });
 
-    it('switching auth toggle to Access Key shows key field and hides SAS URL', () => {
-      expect.fail('not yet implemented');
+    it('switching auth toggle to Access Key shows key field and hides SAS URL', async () => {
+      renderWithBackend('azureblob');
+      await waitFor(() => {
+        expect(screen.getByText(/access key/i, { selector: 'button' })).toBeInTheDocument();
+      });
+      fireEvent.click(screen.getByText(/access key/i, { selector: 'button' }));
+      await waitFor(() => {
+        const sasWrapper = screen.getByLabelText(/sas url/i).closest('div.hidden, div[class*="hidden"]');
+        const keyWrapper = screen.getByLabelText(/access key/i).closest('div.block, div[class*="block"]');
+        expect(sasWrapper).toBeTruthy();
+        expect(keyWrapper).toBeTruthy();
+      });
     });
 
-    it('switching auth toggle does not clear the hidden field value', () => {
-      expect.fail('not yet implemented');
+    it('switching auth toggle does not clear the hidden field value', async () => {
+      const user = userEvent.setup();
+      renderWithBackend('azureblob');
+
+      // Wait for form to render
+      await waitFor(() => {
+        expect(screen.getByLabelText(/sas url/i)).toBeInTheDocument();
+      });
+
+      // Type a value into the SAS URL field
+      const sasInput = screen.getByLabelText(/sas url/i);
+      await user.type(sasInput, 'https://mystorage.blob.core.windows.net/?sv=test');
+
+      // Switch to Access Key
+      fireEvent.click(screen.getByText(/access key/i, { selector: 'button' }));
+
+      // Switch back to SAS URL
+      fireEvent.click(screen.getByText(/sas url/i, { selector: 'button' }));
+
+      // The value should still be there
+      await waitFor(() => {
+        expect(screen.getByLabelText(/sas url/i)).toHaveValue('https://mystorage.blob.core.windows.net/?sv=test');
+      });
     });
   });
 
   describe('BACK-02: Amazon S3 form', () => {
-    it('renders access_key_id field', () => {
-      expect.fail('not yet implemented');
+    it('renders access_key_id field', async () => {
+      renderWithBackend('s3');
+      await waitFor(() => {
+        expect(screen.getByLabelText(/access key id/i)).toBeInTheDocument();
+      });
     });
 
-    it('renders secret_access_key field', () => {
-      expect.fail('not yet implemented');
+    it('renders secret_access_key field', async () => {
+      renderWithBackend('s3');
+      await waitFor(() => {
+        expect(screen.getByLabelText(/secret access key/i)).toBeInTheDocument();
+      });
     });
 
-    it('renders region field', () => {
-      expect.fail('not yet implemented');
+    it('renders region field', async () => {
+      renderWithBackend('s3');
+      await waitFor(() => {
+        expect(screen.getByLabelText(/region/i)).toBeInTheDocument();
+      });
     });
   });
 
   describe('BACK-03: S3-Compatible form', () => {
-    it('renders endpoint field in addition to S3 fields', () => {
-      expect.fail('not yet implemented');
+    it('renders endpoint field in addition to S3 fields', async () => {
+      renderWithBackend('s3-compatible');
+      await waitFor(() => {
+        expect(screen.getByLabelText(/endpoint url/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/access key id/i)).toBeInTheDocument();
+        expect(screen.getByLabelText(/secret access key/i)).toBeInTheDocument();
+      });
     });
   });
 });