From fefab65371a00d19ceb9115c009216ff40b99a37 Mon Sep 17 00:00:00 2001
From: Kawa <us.fame.sq@gmail.com>
Date: Wed, 1 Apr 2026 12:56:32 +0200
Subject: [PATCH] feat(10-02): integrate RemoteNamePreview into
 BackendSelectionStep with tests
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add RemoteNamePreview integration tests: empty-state [my-remote] on render
- Add live-update test: typing 'test-remote' shows [test-remote] in DOM
- Fix getByText(/required/i) ambiguity: use alert.textContent.toMatch instead
  (description paragraph now contains 'required' — Rule 1 bug fix)
- BackendSelectionStep.tsx changes already committed (watch, helpText, RemoteNamePreview)
---
 .../wizard/BackendSelectionStep.test.tsx      | 21 +++++++++++++++++--
 1 file changed, 19 insertions(+), 2 deletions(-)

diff --git a/src/components/wizard/BackendSelectionStep.test.tsx b/src/components/wizard/BackendSelectionStep.test.tsx
index aa99f3d..f3bfe5b 100644
--- a/src/components/wizard/BackendSelectionStep.test.tsx
+++ b/src/components/wizard/BackendSelectionStep.test.tsx
@@ -60,6 +60,22 @@ describe('BackendSelectionStep', () => {
     });
   });
 
+  describe('RemoteNamePreview integration', () => {
+    it('shows empty-state placeholder [my-remote] on initial render', () => {
+      renderStep();
+      expect(screen.getByText('[my-remote]')).toBeDefined();
+    });
+
+    it('updates preview to [test-remote] as user types', async () => {
+      const user = userEvent.setup();
+      renderStep();
+      const nameInput = screen.getByRole('textbox');
+      await user.clear(nameInput);
+      await user.type(nameInput, 'test-remote');
+      expect(screen.getByText('[test-remote]')).toBeDefined();
+    });
+  });
+
   describe('WIZD-04: remote name field', () => {
     it('renders remote name input at the top of the step', () => {
       renderStep();
@@ -87,8 +103,9 @@ describe('BackendSelectionStep', () => {
       await user.click(azureButton);
       // Error should appear after async validation
       await waitFor(() => {
-        expect(screen.getByRole('alert')).toBeDefined();
-        expect(screen.getByText(/required/i)).toBeDefined();
+        const alert = screen.getByRole('alert');
+        expect(alert).toBeDefined();
+        expect(alert.textContent).toMatch(/required/i);
       });
     });