cdd-cli 3.2.0 → 3.2.2

package/src/hooks/useControls.js

@@ -1,17 +1,17 @@
-import React from "react";
-import { useInput } from "ink";
-import { useContainerActions } from "./creation/useContainerActions";
-import { useContainerCreation } from "./creation/useContainerCreation";
-import { useLogsViewer } from "./creation/useLogsViewer";
-import { useContainerSelection } from "./navigation/useContainerSelection";
-import { useDebugLogs } from "./debug/useDebugLogs";
-import { useEraseConfirmation } from "./useEraseConfirmation";
-import { useExitHandler } from "./useExitHandler";
-import { useContainerCommandRouter } from "./useContainerCommandRouter";
-import { getLogsStream } from "../helpers/dockerService/serviceComponents/containerLogs.js";
-import { createContainer as svcCreateContainer } from "../helpers/dockerService/serviceComponents/containerActions.js";
-import { buildContainerOptions } from "../helpers/containerOptionsBuilder.js";
-import { DB_IMAGES } from "../helpers/constants.js";
+import React from 'react';
+import { useInput } from 'ink';
+import { useContainerActions } from './creation/useContainerActions';
+import { useContainerCreation } from './creation/useContainerCreation';
+import { useLogsViewer } from './creation/useLogsViewer';
+import { useContainerSelection } from './navigation/useContainerSelection';
+import { useDebugLogs } from './debug/useDebugLogs';
+import { useEraseConfirmation } from './useEraseConfirmation';
+import { useExitHandler } from './useExitHandler';
+import { useContainerCommandRouter } from './useContainerCommandRouter';
+import { getLogsStream } from '../helpers/dockerService/serviceComponents/containerLogs.js';
+import { createContainer as svcCreateContainer } from '../helpers/dockerService/serviceComponents/containerActions.js';
+import { buildContainerOptions } from '../helpers/containerOptionsBuilder.js';
+import { DB_IMAGES } from '../helpers/constants.js';
 
 // Principal hook to manage user inputs and control the app state
 /**
@@ -29,20 +29,29 @@ export function useControls(containers = []) {
 
   const creation = useContainerCreation({
     onCreate: async ({ imageName, containerName, portInput, envInput }) => {
-      const options = buildContainerOptions({ imageName, containerName, portInput, envInput });
+      const options = buildContainerOptions({
+        imageName,
+        containerName,
+        portInput,
+        envInput,
+      });
       actions.setMessage(`Creating container ${imageName}...`);
-      actions.setMessageColor("yellow");
+      actions.setMessageColor('yellow');
       try {
         const { id, ports } = await svcCreateContainer(imageName, options);
-        let portMsg = "";
+        let portMsg = '';
         if (ports && ports.length) {
-          portMsg = " | Ports: " + ports.map(p => `${p.hostPort}→${p.containerPort}/${p.protocol}`).join(", ");
+          portMsg =
+            ' | Ports: ' +
+            ports
+              .map((p) => `${p.hostPort}→${p.containerPort}/${p.protocol}`)
+              .join(', ');
         }
         actions.setMessage(`Created container ${id}${portMsg}`);
-        actions.setMessageColor("green");
+        actions.setMessageColor('green');
       } catch (err) {
         actions.setMessage(`Error creating container: ${err.message}`);
-        actions.setMessageColor("red");
+        actions.setMessageColor('red');
       } finally {
         setCreatingContainer(false);
       }
@@ -59,14 +68,14 @@ export function useControls(containers = []) {
     onConfirm: () => {
       actions.handleAction({
         actionFn: async (id) => await actions.removeContainer(id),
-        actionLabel: "Erasing",
+        actionLabel: 'Erasing',
         selected: selection.selected,
       });
-      actions.setMessageColor("yellow");
+      actions.setMessageColor('yellow');
     },
     onCancel: () => {
-      actions.setMessage("");
-      actions.setMessageColor("");
+      actions.setMessage('');
+      actions.setMessageColor('');
     },
   });
 
@@ -74,17 +83,22 @@ export function useControls(containers = []) {
    * Pipe container logs into the viewer while applying a hard limit.
    * @param {string} containerId - Container identifier used by Docker.
    */
-  const startLogsStream = React.useCallback((containerId) => {
-    getLogsStream(
-      containerId,
-      (data) => logsViewer.setLogs((prev) => {
-        const newLogs = [...prev, ...data.split("\n").filter(Boolean)];
-        return newLogs.slice(-1000);
-      }),
-      () => {},
-      (err) => logsViewer.setLogs((prev) => [...prev, `Error: ${err.message}`])
-    );
-  }, [logsViewer]);
+  const startLogsStream = React.useCallback(
+    (containerId) => {
+      getLogsStream(
+        containerId,
+        (data) =>
+          logsViewer.setLogs((prev) => {
+            const newLogs = [...prev, ...data.split('\n').filter(Boolean)];
+            return newLogs.slice(-1000);
+          }),
+        () => {},
+        (err) =>
+          logsViewer.setLogs((prev) => [...prev, `Error: ${err.message}`])
+      );
+    },
+    [logsViewer]
+  );
 
   const commandRouter = useContainerCommandRouter({
     actions,
@@ -95,8 +109,10 @@ export function useControls(containers = []) {
     startLogsStream,
     onStartErase: () => {
       eraseConfirmation.startErase();
-      actions.setMessage("Are you sure you want to erase this container? (y/n)");
-      actions.setMessageColor("yellow");
+      actions.setMessage(
+        'Are you sure you want to erase this container? (y/n)'
+      );
+      actions.setMessageColor('yellow');
     },
     onToggleDebug: () => debugLogs.setShowDebugLogs((prev) => !prev),
     onStartCreate: () => setCreatingContainer(true),
@@ -104,8 +120,8 @@ export function useControls(containers = []) {
 
   const exitHandler = useExitHandler({
     onBeforeExit: () => {
-      actions.setMessage("Exiting...");
-      actions.setMessageColor("yellow");
+      actions.setMessage('Exiting...');
+      actions.setMessageColor('yellow');
       logsViewer.closeLogs();
       debugLogs.setShowDebugLogs(false);
     },
@@ -114,38 +130,67 @@ export function useControls(containers = []) {
   /**
    * Route keystrokes to the container creation wizard.
    */
-  const processCreationInput = React.useCallback((input, key) => {
-    const step = creation.step;
+  const processCreationInput = React.useCallback(
+    (input, key) => {
+      const step = creation.step;
 
-    const removeLastChar = (setter) => setter((value) => (value || "").slice(0, -1));
-    const appendChar = (setter, current, ch) => setter((current || "") + ch);
+      const removeLastChar = (setter) =>
+        setter((value) => (value || '').slice(0, -1));
+      const appendChar = (setter, current, ch) => setter((current || '') + ch);
 
-    if (key.escape) {
-      creation.cancelCreation();
-      setCreatingContainer(false);
-      return;
-    }
+      if (key.escape) {
+        creation.cancelCreation();
+        setCreatingContainer(false);
+        return;
+      }
 
-    if (input === "\r" || input === "\n") {
-      creation.nextStep();
-      return;
-    }
+      if (input === '\r' || input === '\n') {
+        // If on step 0 with a focused suggestion, apply it instead of advancing
+        if (step === 0 && creation.selectedSuggestionIndex >= 0) {
+          creation.applyFocusedSuggestion();
+          return;
+        }
+        creation.nextStep();
+        return;
+      }
 
-    if (key.backspace || key.delete) {
-      if (step === 0) removeLastChar(creation.setImageName);
-      if (step === 1) removeLastChar(creation.setContainerName);
-      if (step === 2) removeLastChar(creation.setPortInput);
-      if (step === 3) removeLastChar(creation.setEnvInput);
-      return;
-    }
+      // Arrow keys on step 0: navigate suggestion list
+      if (step === 0 && creation.suggestions.length > 0) {
+        if (key.upArrow) {
+          creation.moveSuggestionSelection(-1);
+          return;
+        }
+        if (key.downArrow) {
+          creation.moveSuggestionSelection(1);
+          return;
+        }
+      }
 
-    if (input && input.length === 1 && !key.ctrl && !key.meta) {
-      if (step === 0) appendChar(creation.setImageName, creation.imageName, input);
-      if (step === 1) appendChar(creation.setContainerName, creation.containerName, input);
-      if (step === 2) appendChar(creation.setPortInput, creation.portInput, input);
-      if (step === 3) appendChar(creation.setEnvInput, creation.envInput, input);
-    }
-  }, [creation, setCreatingContainer]);
+      if (key.backspace || key.delete) {
+        if (step === 0) {
+          const newValue = (creation.imageName || '').slice(0, -1);
+          creation.updateImageInput(newValue);
+        }
+        if (step === 1) removeLastChar(creation.setContainerName);
+        if (step === 2) removeLastChar(creation.setPortInput);
+        if (step === 3) removeLastChar(creation.setEnvInput);
+        return;
+      }
+
+      if (input && input.length === 1 && !key.ctrl && !key.meta) {
+        if (step === 0) {
+          creation.updateImageInput((creation.imageName || '') + input);
+        }
+        if (step === 1)
+          appendChar(creation.setContainerName, creation.containerName, input);
+        if (step === 2)
+          appendChar(creation.setPortInput, creation.portInput, input);
+        if (step === 3)
+          appendChar(creation.setEnvInput, creation.envInput, input);
+      }
+    },
+    [creation, setCreatingContainer]
+  );
 
   // Single keyboard entry point
   useInput((input, key) => {
@@ -155,7 +200,7 @@ export function useControls(containers = []) {
     }
 
     if (logsViewer.showLogs) {
-      if (input === "q" || key.escape) {
+      if (input === 'q' || key.escape) {
         logsViewer.closeLogs();
       }
       return;
@@ -180,7 +225,9 @@ export function useControls(containers = []) {
     selected: selection.selected,
     setSelected: selection.setSelected,
     message: creatingContainer ? creation.message : actions.message,
-    messageColor: creatingContainer ? creation.messageColor : actions.messageColor,
+    messageColor: creatingContainer
+      ? creation.messageColor
+      : actions.messageColor,
     showLogs: logsViewer.showLogs,
     logs: logsViewer.logs,
     exitLogs: logsViewer.closeLogs,

package/src/hooks/useEraseConfirmation.js

@@ -1,4 +1,4 @@
-import { useState, useCallback } from "react";
+import { useState, useCallback } from 'react';
 
 /**
  * Hook to manage the erase confirmation dialog flow.
@@ -20,13 +20,13 @@ export function useEraseConfirmation({ onConfirm, onCancel }) {
 
   const processEraseConfirmation = useCallback(
     (input, key) => {
-      if (input === "y" || input === "Y") {
+      if (input === 'y' || input === 'Y') {
         onConfirm();
         setConfirmErase(false);
         return;
       }
 
-      if (input === "n" || input === "N" || key.escape) {
+      if (input === 'n' || input === 'N' || key.escape) {
         setConfirmErase(false);
         onCancel();
         return;

package/src/hooks/useExitHandler.js

@@ -30,37 +30,40 @@ export function useExitHandler({ onBeforeExit } = {}) {
    * @param {string} input - Raw character input from Ink's useInput
    * @returns {boolean} True when the input was consumed, false otherwise
    */
-  const handleExitCommand = useCallback((input) => {
-    if (input !== 'q') {
-      return false;
-    }
+  const handleExitCommand = useCallback(
+    (input) => {
+      if (input !== 'q') {
+        return false;
+      }
 
-    if (typeof onBeforeExit === 'function') {
-      onBeforeExit();
-    }
+      if (typeof onBeforeExit === 'function') {
+        onBeforeExit();
+      }
 
-    const clearTerminal = () => {
-      try {
-        if (process.stdout && process.stdout.isTTY) {
-          process.stdout.write('\u001Bc');
-        } else {
-          console.clear();
+      const clearTerminal = () => {
+        try {
+          if (process.stdout && process.stdout.isTTY) {
+            process.stdout.write('\u001Bc');
+          } else {
+            console.clear();
+          }
+        } catch (err) {
+          // Ignore clear errors to avoid blocking exit.
         }
-      } catch (err) {
-        // Ignore clear errors to avoid blocking exit.
-      }
-    };
+      };
 
-    setTimeout(() => {
-      clearTerminal();
-      exit();
-      if (process.env.NODE_ENV !== 'test') {
-        setTimeout(() => process.exit(0), 50);
-      }
-    }, EXIT_DELAY);
+      setTimeout(() => {
+        clearTerminal();
+        exit();
+        if (process.env.NODE_ENV !== 'test') {
+          setTimeout(() => process.exit(0), 50);
+        }
+      }, EXIT_DELAY);
 
-    return true;
-  }, [exit, onBeforeExit]);
+      return true;
+    },
+    [exit, onBeforeExit]
+  );
 
   return { handleExitCommand };
 }

package/src/index.js

@@ -8,9 +8,9 @@
  * node index.js
  */
 
-import React from "react";
-import { render } from "ink";
-import App from './App';
+import React from 'react';
+import { render } from 'ink';
+import App from './App.jsx';
 
 console.clear();
-render(<App />);
+render(<App />);

package/test/ContainerCreationPrompt.dom.test.js

@@ -0,0 +1,68 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ContainerCreationPrompt } from '../src/components/ContainerCreationPrompt.jsx';
+
+describe('ContainerCreationPrompt — SuggestionPanel wiring', () => {
+  test('does NOT render SuggestionPanel when step > 0', () => {
+    const { queryByText } = render(
+      <ContainerCreationPrompt
+        step={1}
+        imageName="nginx"
+        containerName=""
+        portInput=""
+        envInput=""
+        message=""
+        messageColor="yellow"
+        suggestions={['nginx', 'node']}
+        selectedSuggestionIndex={-1}
+        visibleOffset={0}
+      />
+    );
+    // On step 1, the imageName field is not active — no suggestion panel
+    expect(queryByText(/^nginx$/)).toBeNull();
+  });
+
+  test('does NOT render SuggestionPanel on step 0 when suggestions is empty', () => {
+    const { queryByTestId } = render(
+      <ContainerCreationPrompt
+        step={0}
+        imageName="ng"
+        containerName=""
+        portInput=""
+        envInput=""
+        message=""
+        messageColor="yellow"
+        suggestions={[]}
+        selectedSuggestionIndex={-1}
+        visibleOffset={0}
+      />
+    );
+    // No suggestion panel should render when suggestions array is empty
+    expect(queryByTestId('suggestion-panel')).toBeNull();
+  });
+
+  test('renders SuggestionPanel items on step 0 when suggestions exist', () => {
+    const { getAllByText, getByText } = render(
+      <ContainerCreationPrompt
+        step={0}
+        imageName="ng"
+        containerName=""
+        portInput=""
+        envInput=""
+        message=""
+        messageColor="yellow"
+        suggestions={['nginx', 'golang']}
+        selectedSuggestionIndex={-1}
+        visibleOffset={0}
+      />
+    );
+    // golang is not in any label — appears only in suggestion panel
+    expect(getByText(/golang/)).toBeTruthy();
+    // nginx appears in suggestion panel (may also appear in label text, but it does appear)
+    const nginxEls = getAllByText(/nginx/);
+    expect(nginxEls.length).toBeGreaterThan(0);
+  });
+});

package/test/SuggestionPanel.dom.test.js

@@ -0,0 +1,53 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render } from '@testing-library/react';
+import { SuggestionPanel } from '../src/components/SuggestionPanel.jsx';
+
+describe('SuggestionPanel', () => {
+  const items = ['caddy', 'elasticsearch', 'golang', 'httpd', 'kafka', 'mariadb', 'memcached', 'minio'];
+
+  test('renders nothing when items is empty', () => {
+    const { container } = render(
+      <SuggestionPanel items={[]} selectedIndex={-1} visibleOffset={0} maxVisible={5} />
+    );
+    expect(container.firstChild).toBeNull();
+  });
+
+  test('renders only maxVisible items from visibleOffset', () => {
+    const { getByText, queryByText } = render(
+      <SuggestionPanel items={items} selectedIndex={-1} visibleOffset={0} maxVisible={5} />
+    );
+    expect(getByText(/caddy/)).toBeTruthy();
+    expect(getByText(/elasticsearch/)).toBeTruthy();
+    expect(getByText(/kafka/)).toBeTruthy();
+    expect(queryByText(/mariadb/)).toBeNull();
+  });
+
+  test('respects visibleOffset by skipping early items', () => {
+    const { queryByText, getByText } = render(
+      <SuggestionPanel items={items} selectedIndex={-1} visibleOffset={2} maxVisible={3} />
+    );
+    expect(getByText(/golang/)).toBeTruthy();
+    expect(getByText(/httpd/)).toBeTruthy();
+    expect(getByText(/kafka/)).toBeTruthy();
+    expect(queryByText(/caddy/)).toBeNull();
+  });
+
+  test('focused row has › prefix marker', () => {
+    const { getByText } = render(
+      <SuggestionPanel items={items} selectedIndex={1} visibleOffset={0} maxVisible={5} />
+    );
+    const el = getByText(/› elasticsearch/);
+    expect(el).toBeTruthy();
+  });
+
+  test('non-focused rows do NOT have › prefix', () => {
+    const { getByText } = render(
+      <SuggestionPanel items={items} selectedIndex={1} visibleOffset={0} maxVisible={5} />
+    );
+    const el = getByText(/caddy/);
+    expect(el.textContent).not.toMatch(/›/);
+  });
+});

package/test/constants.test.js

@@ -0,0 +1,34 @@
+/**
+ * @jest-environment node
+ */
+import { IMAGE_PROFILES } from '../src/helpers/constants.js';
+
+describe('IMAGE_PROFILES', () => {
+  test('has ~20 entries', () => {
+    const count = Object.keys(IMAGE_PROFILES).length;
+    expect(count).toBeGreaterThanOrEqual(20);
+  });
+
+  test('every entry has requiredEnv (array), defaultPort (string), and suggestedEnv (array)', () => {
+    for (const [key, profile] of Object.entries(IMAGE_PROFILES)) {
+      expect(Array.isArray(profile.requiredEnv)).toBe(true);
+      expect(typeof profile.defaultPort).toBe('string');
+      expect(Array.isArray(profile.suggestedEnv)).toBe(true);
+    }
+  });
+
+  test('postgres has POSTGRES_PASSWORD in requiredEnv and suggestedEnv hints', () => {
+    expect(IMAGE_PROFILES.postgres.requiredEnv).toContain('POSTGRES_PASSWORD');
+    expect(IMAGE_PROFILES.postgres.suggestedEnv.length).toBeGreaterThan(0);
+  });
+
+  test('nginx has empty requiredEnv, defaultPort 80, and empty suggestedEnv', () => {
+    expect(IMAGE_PROFILES.nginx.requiredEnv).toEqual([]);
+    expect(IMAGE_PROFILES.nginx.defaultPort).toBe('80');
+    expect(IMAGE_PROFILES.nginx.suggestedEnv).toEqual([]);
+  });
+
+  test('node has suggestedEnv with NODE_ENV hint', () => {
+    expect(IMAGE_PROFILES.node.suggestedEnv).toContain('NODE_ENV=production');
+  });
+});

package/test/useContainerCreation.dom.test.js

@@ -139,3 +139,126 @@ describe('useContainerCreation (DOM render)', () => {
     expect(created[0].imageName).toBe('mysql:8');
   });
 });
+
+describe('useContainerCreation — suggestions & updateImageInput()', () => {
+  test('hook exposes suggestions, selectedSuggestionIndex, visibleOffset', () => {
+    const expose = { current: null };
+    render(<HookTester onCreate={() => {}} onCancel={() => {}} dbImages={[]} imageProfiles={IMAGE_PROFILES} expose={expose} />);
+    expect(Array.isArray(expose.current.suggestions)).toBe(true);
+    expect(typeof expose.current.selectedSuggestionIndex).toBe('number');
+    expect(typeof expose.current.visibleOffset).toBe('number');
+  });
+
+  test('updateImageInput() with "ng" filters IMAGE_PROFILES keys containing "ng"', () => {
+    const expose = { current: null };
+    render(<HookTester onCreate={() => {}} onCancel={() => {}} dbImages={[]} imageProfiles={IMAGE_PROFILES} expose={expose} />);
+
+    act(() => { expose.current.updateImageInput('ng'); });
+
+    expect(expose.current.imageName).toBe('ng');
+    expect(expose.current.suggestions).toContain('nginx');
+  });
+
+  test('updateImageInput() with empty string clears suggestions', () => {
+    const expose = { current: null };
+    render(<HookTester onCreate={() => {}} onCancel={() => {}} dbImages={[]} imageProfiles={IMAGE_PROFILES} expose={expose} />);
+
+    act(() => { expose.current.updateImageInput('ng'); });
+    act(() => { expose.current.updateImageInput(''); });
+
+    expect(expose.current.suggestions).toHaveLength(0);
+  });
+
+  test('updateImageInput() resets selectedSuggestionIndex to -1', () => {
+    const expose = { current: null };
+    render(<HookTester onCreate={() => {}} onCancel={() => {}} dbImages={[]} imageProfiles={IMAGE_PROFILES} expose={expose} />);
+
+    act(() => { expose.current.updateImageInput('ng'); });
+
+    expect(expose.current.selectedSuggestionIndex).toBe(-1);
+  });
+
+  test('step-3 message includes suggestedEnv hints when profile has them', () => {
+    const expose = { current: null };
+    render(<HookTester onCreate={() => {}} onCancel={() => {}} dbImages={[]} imageProfiles={IMAGE_PROFILES} expose={expose} />);
+
+    act(() => { expose.current.setImageName('postgres'); });
+    act(() => { expose.current.nextStep(); }); // → step 1
+    act(() => { expose.current.nextStep(); }); // → step 2
+    act(() => { expose.current.nextStep(); }); // → step 3
+
+    expect(expose.current.message).toMatch(/POSTGRES_PASSWORD/i);
+    expect(expose.current.message).toMatch(/POSTGRES_USER/i);
+  });
+});
+
+describe('useContainerCreation — moveSuggestionSelection() & applyFocusedSuggestion()', () => {
+  test('moveSuggestionSelection(1) increases selectedSuggestionIndex', () => {
+    const expose = { current: null };
+    render(<HookTester onCreate={() => {}} onCancel={() => {}} dbImages={[]} imageProfiles={IMAGE_PROFILES} expose={expose} />);
+
+    act(() => { expose.current.updateImageInput('m'); });
+    // There should be several suggestions with "m"
+    act(() => { expose.current.moveSuggestionSelection(1); });
+
+    expect(expose.current.selectedSuggestionIndex).toBe(0);
+  });
+
+  test('moveSuggestionSelection() clamps at last item', () => {
+    const expose = { current: null };
+    render(<HookTester onCreate={() => {}} onCancel={() => {}} dbImages={[]} imageProfiles={IMAGE_PROFILES} expose={expose} />);
+
+    act(() => { expose.current.updateImageInput('m'); });
+    const count = expose.current.suggestions.length;
+
+    // Move past end
+    for (let i = 0; i <= count + 2; i++) {
+      act(() => { expose.current.moveSuggestionSelection(1); });
+    }
+
+    expect(expose.current.selectedSuggestionIndex).toBe(count - 1);
+  });
+
+  test('moveSuggestionSelection(-1) clamps at -1 (no selection)', () => {
+    const expose = { current: null };
+    render(<HookTester onCreate={() => {}} onCancel={() => {}} dbImages={[]} imageProfiles={IMAGE_PROFILES} expose={expose} />);
+
+    act(() => { expose.current.updateImageInput('m'); });
+    act(() => { expose.current.moveSuggestionSelection(-1); });
+
+    expect(expose.current.selectedSuggestionIndex).toBe(-1);
+  });
+
+  test('applyFocusedSuggestion() fills imageName with focused suggestion', () => {
+    const expose = { current: null };
+    render(<HookTester onCreate={() => {}} onCancel={() => {}} dbImages={[]} imageProfiles={IMAGE_PROFILES} expose={expose} />);
+
+    act(() => { expose.current.updateImageInput('ng'); });
+    act(() => { expose.current.moveSuggestionSelection(1); }); // select first
+    act(() => { expose.current.applyFocusedSuggestion(); });
+
+    expect(expose.current.imageName).toBe('nginx');
+  });
+
+  test('applyFocusedSuggestion() does NOT advance step', () => {
+    const expose = { current: null };
+    render(<HookTester onCreate={() => {}} onCancel={() => {}} dbImages={[]} imageProfiles={IMAGE_PROFILES} expose={expose} />);
+
+    act(() => { expose.current.updateImageInput('ng'); });
+    act(() => { expose.current.moveSuggestionSelection(1); });
+    act(() => { expose.current.applyFocusedSuggestion(); });
+
+    expect(expose.current.step).toBe(0);
+  });
+
+  test('applyFocusedSuggestion() clears suggestions after applying', () => {
+    const expose = { current: null };
+    render(<HookTester onCreate={() => {}} onCancel={() => {}} dbImages={[]} imageProfiles={IMAGE_PROFILES} expose={expose} />);
+
+    act(() => { expose.current.updateImageInput('ng'); });
+    act(() => { expose.current.moveSuggestionSelection(1); });
+    act(() => { expose.current.applyFocusedSuggestion(); });
+
+    expect(expose.current.suggestions).toHaveLength(0);
+  });
+});