cdd-cli 3.1.9 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cdd-cli",
-  "version": "3.1.9",
+  "version": "3.2.0",
   "description": "CLI Docker Dashboard",
   "main": "index.js",
   "scripts": {

package/src/helpers/constants.js

@@ -28,3 +28,23 @@ export const TIMEOUTS = {
   CONTAINER_OP: 30000,
   PULL_IMAGE: 300000,
 };
+
+/**
+ * List of well-known database image names (without tags or registry prefixes).
+ */
+export const DB_IMAGES = ["mysql", "mariadb", "postgres", "mongo", "mssql", "redis"];
+
+/**
+ * Per-image profiles with required env vars and default exposed port.
+ * Keys are normalized image names (no tag, no registry prefix).
+ *
+ * @type {Record<string, { requiredEnv: string[], defaultPort: string }>}
+ */
+export const IMAGE_PROFILES = {
+  mysql:    { requiredEnv: ["MYSQL_ROOT_PASSWORD"], defaultPort: "3306" },
+  mariadb:  { requiredEnv: ["MARIADB_ROOT_PASSWORD"], defaultPort: "3306" },
+  postgres: { requiredEnv: ["POSTGRES_PASSWORD"], defaultPort: "5432" },
+  mongo:    { requiredEnv: [], defaultPort: "27017" },
+  mssql:    { requiredEnv: ["ACCEPT_EULA", "SA_PASSWORD"], defaultPort: "1433" },
+  redis:    { requiredEnv: [], defaultPort: "6379" },
+};

package/src/helpers/dockerService/serviceComponents/containerActions.js

@@ -1,6 +1,6 @@
 import { docker } from "../dockerService.js";
 import { imageExists, pullImage } from "./imageUtils.js";
-import { TIMEOUTS } from "../../constants.js";
+import { TIMEOUTS, IMAGE_PROFILES } from "../../constants.js";
 import { logger } from "../../logger.js";
 
 /**
@@ -40,15 +40,33 @@ export async function removeContainer(containerId) {
   }
 }
 
+/**
+ * Normalize image name to base name (strips registry prefix and tag).
+ * e.g. "docker.io/library/postgres:16" → "postgres"
+ *
+ * @param {string} imageName - Raw image name
+ * @returns {string} Base name (lowercase)
+ */
+function normalizeImageName(imageName) {
+  if (!imageName) return "";
+  let name = imageName;
+  const slashIdx = name.lastIndexOf("/");
+  if (slashIdx !== -1) name = name.slice(slashIdx + 1);
+  const colonIdx = name.indexOf(":");
+  if (colonIdx !== -1) name = name.slice(0, colonIdx);
+  return name.toLowerCase();
+}
+
 /**
  * Create a new container from an image. If the image is missing locally, it will be pulled.
  *
  * @param {string} imageName - Image name (e.g. 'nginx:alpine')
  * @param {Object} [options] - Docker create options (Env, ExposedPorts, HostConfig, name, etc.)
- * @returns {Promise<string>} The created container id
+ * @param {Object} [imageProfiles] - Image profiles map for defaultPort fallback
+ * @returns {Promise<{id: string, ports: Array<{containerPort: string, hostPort: string, protocol: string, source: string}>}>}
  * @throws {Error} If image listing/pull or creation fails
  */
-export async function createContainer(imageName, options = {}) {
+export async function createContainer(imageName, options = {}, imageProfiles = IMAGE_PROFILES) {
   logger.info("Creating container from image %s", imageName);
   let exists;
   try {
@@ -75,6 +93,9 @@ export async function createContainer(imageName, options = {}) {
 
   const hasUserDefinedPorts = Boolean(createOpts.ExposedPorts && Object.keys(createOpts.ExposedPorts).length);
 
+  /** @type {Array<{containerPort: string, hostPort: string, protocol: string, source: string}>} */
+  const assignedPorts = [];
+
   if (!hasUserDefinedPorts) {
     try {
       const image = docker.getImage(imageName);
@@ -101,7 +122,6 @@ export async function createContainer(imageName, options = {}) {
         const pickNextAvailablePort = (base) => {
           const numericBase = Number.parseInt(base, 10);
           if (Number.isNaN(numericBase)) {
-            // If the base port is non-numeric, just return the base.
             if (!usedHostPorts.has(base)) {
               usedHostPorts.add(base);
               return base;
@@ -124,8 +144,20 @@ export async function createContainer(imageName, options = {}) {
         };
 
         const inspectData = await withTimeout(image.inspect(), TIMEOUTS.CONTAINER_OP);
-        const exposed = inspectData?.Config?.ExposedPorts || inspectData?.ContainerConfig?.ExposedPorts || {};
-        const exposedKeys = Object.keys(exposed || {});
+        let exposed = inspectData?.Config?.ExposedPorts || inspectData?.ContainerConfig?.ExposedPorts || {};
+        let exposedKeys = Object.keys(exposed || {});
+
+        // If no ExposedPorts in image, fall back to IMAGE_PROFILES defaultPort
+        if (!exposedKeys.length) {
+          const baseName = normalizeImageName(imageName);
+          const profile = imageProfiles[baseName];
+          if (profile && profile.defaultPort) {
+            const fallbackKey = `${profile.defaultPort}/tcp`;
+            exposed = { [fallbackKey]: {} };
+            exposedKeys = [fallbackKey];
+          }
+        }
+
         if (exposedKeys.length) {
           createOpts.ExposedPorts = createOpts.ExposedPorts || {};
           createOpts.HostConfig = { ...(createOpts.HostConfig || {}) };
@@ -135,9 +167,12 @@ export async function createContainer(imageName, options = {}) {
               createOpts.ExposedPorts[portKey] = exposed[portKey] || {};
             }
             if (!createOpts.HostConfig.PortBindings[portKey] || !createOpts.HostConfig.PortBindings[portKey].length) {
-              const containerPort = portKey.split("/")[0];
+              const parts = portKey.split("/");
+              const containerPort = parts[0];
+              const protocol = parts[1] || "tcp";
               const hostPort = pickNextAvailablePort(containerPort);
               createOpts.HostConfig.PortBindings[portKey] = [{ HostPort: hostPort }];
+              assignedPorts.push({ containerPort, hostPort, protocol, source: "auto" });
             }
           });
         }
@@ -145,12 +180,24 @@ export async function createContainer(imageName, options = {}) {
     } catch (err) {
       logger.warn("Could not inspect image %s for default ports", imageName, err);
     }
+  } else {
+    // User-defined ports: collect them with source: "user"
+    const portBindings = createOpts.HostConfig?.PortBindings || {};
+    Object.entries(portBindings).forEach(([portKey, bindings]) => {
+      const parts = portKey.split("/");
+      const containerPort = parts[0];
+      const protocol = parts[1] || "tcp";
+      (bindings || []).forEach((b) => {
+        assignedPorts.push({ containerPort, hostPort: b.HostPort, protocol, source: "user" });
+      });
+    });
   }
+
   try {
     const container = await withTimeout(docker.createContainer(createOpts), TIMEOUTS.CONTAINER_OP);
     const containerId = container.id || container.Id;
     logger.info("Created container %s from image %s", containerId, imageName);
-    return container.id || container.Id;
+    return { id: containerId, ports: assignedPorts };
   } catch (err) {
     logger.error("Failed to create container from image %s", imageName, err);
     throw new Error('Error creating container: ' + err.message);

package/src/helpers/validationHelpers.js

@@ -19,28 +19,85 @@ export function validatePorts(portInput) {
   return !invalid;
 }
 
+/**
+ * Normalize an image name to its base name (strips registry prefix and tag).
+ * e.g. "docker.io/library/postgres:16-alpine" → "postgres"
+ *
+ * @param {string} imageName - Raw image name from user
+ * @returns {string} Base image name (lowercase)
+ */
+function normalizeImageName(imageName) {
+  if (!imageName) return "";
+  // Remove registry prefix (anything before the last / when it contains a dot or colon before the /)
+  let name = imageName;
+  const slashIdx = name.lastIndexOf("/");
+  if (slashIdx !== -1) {
+    name = name.slice(slashIdx + 1);
+  }
+  // Remove tag
+  const colonIdx = name.indexOf(":");
+  if (colonIdx !== -1) {
+    name = name.slice(0, colonIdx);
+  }
+  return name.toLowerCase();
+}
+
 /**
  * Validate environment variable input as comma-separated VAR=value pairs.
- * Empty or whitespace-only input is considered valid (no env vars).
- * Variable names must start with a letter or underscore and contain only
- * alphanumeric characters and underscores.
+ *
+ * When called with 3 arguments (envInput, imageName, imageProfiles), performs
+ * contextual validation: checks that all required env vars for the given image
+ * are present and non-empty. Returns an object { valid, errors, parsedEnv }.
+ *
+ * When called with 1 argument (legacy), returns a boolean for backward compatibility.
  *
  * @param {string} envInput - Comma-separated environment variable assignments
- * @returns {boolean} True when all env var assignments are valid, false otherwise
+ * @param {string} [imageName] - Optional Docker image name for contextual validation
+ * @param {Object} [imageProfiles] - Optional map of image profiles (from constants.js)
+ * @returns {boolean|{valid: boolean, errors: string[], parsedEnv: Record<string,string>}}
  */
-export function validateEnvVars(envInput) {
-  if (!envInput || !envInput.trim()) return true; // Empty is valid
-
-  const vars = envInput.split(",").map(v => v.trim()).filter(Boolean);
-  const invalid = vars.find(v => {
-    const parts = v.split("=");
-    // Must have at least VAR=value format
-    if (parts.length < 2) return true;
-    const varName = parts[0].trim();
-    // Variable names should be alphanumeric with underscores
-    if (!/^[A-Z_][A-Z0-9_]*$/i.test(varName)) return true;
-    return false;
-  });
+export function validateEnvVars(envInput, imageName, imageProfiles) {
+  const contextual = imageName !== undefined && imageProfiles !== undefined;
 
-  return !invalid;
+  // Parse: split on FIRST '=' only
+  const parsedEnv = {};
+  const syntaxErrors = [];
+
+  if (envInput && envInput.trim()) {
+    const vars = envInput.split(",").map(v => v.trim()).filter(Boolean);
+    for (const v of vars) {
+      const eqIdx = v.indexOf("=");
+      if (eqIdx === -1) {
+        syntaxErrors.push(`"${v}" is missing an '=' sign`);
+        continue;
+      }
+      const varName = v.slice(0, eqIdx).trim();
+      const varValue = v.slice(eqIdx + 1);
+      if (!/^[A-Z_][A-Z0-9_]*$/i.test(varName)) {
+        syntaxErrors.push(`"${varName}" is not a valid variable name`);
+        continue;
+      }
+      parsedEnv[varName] = varValue;
+    }
+  }
+
+  if (!contextual) {
+    // Legacy: return boolean
+    return syntaxErrors.length === 0;
+  }
+
+  // Contextual: also check required env vars from the profile
+  const errors = [...syntaxErrors];
+  const baseName = normalizeImageName(imageName);
+  const profile = imageProfiles[baseName];
+
+  if (profile && profile.requiredEnv && profile.requiredEnv.length) {
+    for (const required of profile.requiredEnv) {
+      if (!parsedEnv[required] || parsedEnv[required].trim() === "") {
+        errors.push(`Missing required env var: ${required}`);
+      }
+    }
+  }
+
+  return { valid: errors.length === 0, errors, parsedEnv };
 }

package/src/hooks/creation/useContainerCreation.js

@@ -1,5 +1,6 @@
 import { useState } from "react";
-import { validatePorts } from "../../helpers/validationHelpers.js";
+import { validatePorts, validateEnvVars } from "../../helpers/validationHelpers.js";
+import { IMAGE_PROFILES } from "../../helpers/constants.js";
 import { safeCall } from "../../helpers/safeCall.js";
 
 /**
@@ -9,10 +10,11 @@ import { safeCall } from "../../helpers/safeCall.js";
  * @param {Object} params
  * @param {Function} params.onCreate - Callback when creation is confirmed
  * @param {Function} params.onCancel - Callback when creation is cancelled
- * @param {Array<string>} params.dbImages - List of DB image names for env var warning
+ * @param {Array<string>} params.dbImages - List of DB image names for env var warning (legacy)
+ * @param {Object} [params.imageProfiles] - Image profiles map for contextual validation
  * @returns {Object} Creation state, setters, and helpers
  */
-export function useContainerCreation({ onCreate, onCancel, dbImages = [] }) {
+export function useContainerCreation({ onCreate, onCancel, dbImages = [], imageProfiles = IMAGE_PROFILES }) {
   const [step, setStep] = useState(0); // 0: image, 1: name, 2: ports, 3: env
   const [imageName, setImageName] = useState("");
   const [containerName, setContainerName] = useState("");
@@ -51,7 +53,13 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [] }) {
       }
       setStep(3);
       const isDb = dbImages.some(db => imageName.trim().toLowerCase().includes(db));
-      if (isDb) {
+      // Check if the image has a profile with required env vars
+      const baseName = imageName.trim().toLowerCase().split(":")[0].split("/").pop();
+      const profile = imageProfiles[baseName];
+      if (profile && profile.requiredEnv && profile.requiredEnv.length) {
+        setMessage(`Required env vars for ${baseName}: ${profile.requiredEnv.join(", ")}. Enter as VAR=val,VAR2=val2`);
+        setMessageColor("yellow");
+      } else if (isDb) {
         setMessage("Warning: This image usually requires environment variables (e.g. MYSQL_ROOT_PASSWORD=my-secret-pw for MySQL, POSTGRES_PASSWORD=yourpassword for Postgres). Enter them as VAR=val,VAR2=val2 or leave empty and press Enter.");
         setMessageColor("yellow");
       } else {
@@ -61,6 +69,13 @@ export function useContainerCreation({ onCreate, onCancel, dbImages = [] }) {
       return;
     }
     if (step === 3) {
+      // Contextual env validation using image profiles
+      const result = validateEnvVars(envInput, imageName, imageProfiles);
+      if (!result.valid) {
+        setMessage(result.errors.join(" | "));
+        setMessageColor("red");
+        return;
+      }
       // Final step: call onCreate with all data (safely)
       safeCall(onCreate, { imageName, containerName, portInput, envInput });
     }

package/src/hooks/useControls.js

@@ -11,6 +11,7 @@ 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
 /**
@@ -32,8 +33,12 @@ export function useControls(containers = []) {
       actions.setMessage(`Creating container ${imageName}...`);
       actions.setMessageColor("yellow");
       try {
-        const id = await svcCreateContainer(imageName, options);
-        actions.setMessage(`Created container ${id}`);
+        const { id, ports } = await svcCreateContainer(imageName, options);
+        let portMsg = "";
+        if (ports && ports.length) {
+          portMsg = " | Ports: " + ports.map(p => `${p.hostPort}→${p.containerPort}/${p.protocol}`).join(", ");
+        }
+        actions.setMessage(`Created container ${id}${portMsg}`);
         actions.setMessageColor("green");
       } catch (err) {
         actions.setMessage(`Error creating container: ${err.message}`);
@@ -43,7 +48,7 @@ export function useControls(containers = []) {
       }
     },
     onCancel: () => setCreatingContainer(false),
-    dbImages: ["mysql", "mariadb", "postgres", "mongo", "mssql", "redis"],
+    dbImages: DB_IMAGES,
   });
 
   const logsViewer = useLogsViewer();

package/test/containerActions.test.js

@@ -3,14 +3,13 @@ import { jest } from '@jest/globals';
 describe('containerActions service functions (mocked ESM imports)', () => {
   afterEach(() => jest.resetModules());
 
-  test('createContainer returns id when image exists', async () => {
-    // mock imageUtils and dockerService before importing the module under test
+  test('createContainer returns { id, ports } when image exists', async () => {
     const imageUtilsMock = {
       imageExists: jest.fn().mockResolvedValue(true),
       pullImage: jest.fn()
     };
 
-    const inspectMock = jest.fn().mockResolvedValue({ Config: { ExposedPorts: {} } });
+    const inspectMock = jest.fn().mockResolvedValue({ Config: { ExposedPorts: { '3306/tcp': {} } } });
     const dockerMock = {
       createContainer: jest.fn().mockResolvedValue({ id: 'cid-123' }),
       getImage: jest.fn().mockReturnValue({ inspect: inspectMock }),
@@ -27,16 +26,107 @@ describe('containerActions service functions (mocked ESM imports)', () => {
 
     const mod = await import('../src/helpers/dockerService/serviceComponents/containerActions.js');
 
-    const id = await mod.createContainer('nginx:latest', { Name: 'test' });
-    expect(id).toBe('cid-123');
-    const imageUtils = await import('../src/helpers/dockerService/serviceComponents/imageUtils.js');
-    expect(imageUtils.imageExists).toHaveBeenCalledWith('nginx:latest');
-    const ds = await import('../src/helpers/dockerService/dockerService.js');
-    expect(ds.docker.createContainer).toHaveBeenCalled();
-    expect(ds.docker.getImage).toHaveBeenCalledWith('nginx:latest');
+    const result = await mod.createContainer('mysql:8', { Name: 'test' });
+    expect(result).toHaveProperty('id', 'cid-123');
+    expect(result).toHaveProperty('ports');
+    expect(Array.isArray(result.ports)).toBe(true);
+  });
+
+  test('createContainer ports contain containerPort, hostPort, protocol, source fields', async () => {
+    const imageUtilsMock = {
+      imageExists: jest.fn().mockResolvedValue(true),
+      pullImage: jest.fn()
+    };
+
+    const inspectMock = jest.fn().mockResolvedValue({ Config: { ExposedPorts: { '80/tcp': {} } } });
+    const dockerMock = {
+      createContainer: jest.fn().mockResolvedValue({ id: 'cid-ports' }),
+      getImage: jest.fn().mockReturnValue({ inspect: inspectMock }),
+      listContainers: jest.fn().mockResolvedValue([])
+    };
+
+    await jest.unstable_mockModule('../src/helpers/dockerService/serviceComponents/imageUtils.js', () => ({
+      ...imageUtilsMock
+    }));
+
+    await jest.unstable_mockModule('../src/helpers/dockerService/dockerService.js', () => ({
+      docker: dockerMock
+    }));
+
+    const mod = await import('../src/helpers/dockerService/serviceComponents/containerActions.js');
+    const result = await mod.createContainer('nginx:latest', {});
+    expect(result.ports.length).toBeGreaterThan(0);
+    const port = result.ports[0];
+    expect(port).toHaveProperty('containerPort');
+    expect(port).toHaveProperty('hostPort');
+    expect(port).toHaveProperty('protocol');
+    expect(port).toHaveProperty('source');
+  });
+
+  test('createContainer uses IMAGE_PROFILES defaultPort as fallback when ExposedPorts empty', async () => {
+    const imageUtilsMock = {
+      imageExists: jest.fn().mockResolvedValue(true),
+      pullImage: jest.fn()
+    };
+
+    // inspect returns empty ExposedPorts
+    const inspectMock = jest.fn().mockResolvedValue({ Config: { ExposedPorts: {} } });
+    const dockerMock = {
+      createContainer: jest.fn().mockResolvedValue({ id: 'cid-fallback' }),
+      getImage: jest.fn().mockReturnValue({ inspect: inspectMock }),
+      listContainers: jest.fn().mockResolvedValue([])
+    };
+
+    await jest.unstable_mockModule('../src/helpers/dockerService/serviceComponents/imageUtils.js', () => ({
+      ...imageUtilsMock
+    }));
+
+    await jest.unstable_mockModule('../src/helpers/dockerService/dockerService.js', () => ({
+      docker: dockerMock
+    }));
+
+    const { IMAGE_PROFILES } = await import('../src/helpers/constants.js');
+    const mod = await import('../src/helpers/dockerService/serviceComponents/containerActions.js');
+    const result = await mod.createContainer('mysql:8', {}, IMAGE_PROFILES);
+
+    expect(result.id).toBe('cid-fallback');
+    // Should have auto port from defaultPort fallback
+    const mysqlDefault = IMAGE_PROFILES.mysql.defaultPort;
+    const portEntry = result.ports.find(p => p.containerPort === mysqlDefault);
+    expect(portEntry).toBeDefined();
+    expect(portEntry.source).toBe('auto');
+  });
+
+  test('createContainer returns { id, ports: [] } when no ports and image not in profiles', async () => {
+    const imageUtilsMock = {
+      imageExists: jest.fn().mockResolvedValue(true),
+      pullImage: jest.fn()
+    };
+
+    const inspectMock = jest.fn().mockResolvedValue({ Config: { ExposedPorts: {} } });
+    const dockerMock = {
+      createContainer: jest.fn().mockResolvedValue({ id: 'cid-noport' }),
+      getImage: jest.fn().mockReturnValue({ inspect: inspectMock }),
+      listContainers: jest.fn().mockResolvedValue([])
+    };
+
+    await jest.unstable_mockModule('../src/helpers/dockerService/serviceComponents/imageUtils.js', () => ({
+      ...imageUtilsMock
+    }));
+
+    await jest.unstable_mockModule('../src/helpers/dockerService/dockerService.js', () => ({
+      docker: dockerMock
+    }));
+
+    const { IMAGE_PROFILES } = await import('../src/helpers/constants.js');
+    const mod = await import('../src/helpers/dockerService/serviceComponents/containerActions.js');
+    const result = await mod.createContainer('unknownimage:latest', {}, IMAGE_PROFILES);
+
+    expect(result.id).toBe('cid-noport');
+    expect(result.ports).toEqual([]);
   });
 
-  test('createContainer pulls image when not present and returns Id', async () => {
+  test('createContainer pulls image when not present and returns { id, ports }', async () => {
     const imageUtilsMock = {
       imageExists: jest.fn().mockResolvedValue(false),
       pullImage: jest.fn().mockResolvedValue(true)
@@ -58,8 +148,9 @@ describe('containerActions service functions (mocked ESM imports)', () => {
     }));
 
     const mod = await import('../src/helpers/dockerService/serviceComponents/containerActions.js');
-    const id = await mod.createContainer('busybox:1.0');
-    expect(id).toBe('CID-456');
+    const result = await mod.createContainer('busybox:1.0');
+    expect(result.id).toBe('CID-456');
+    expect(result).toHaveProperty('ports');
     const imageUtils = await import('../src/helpers/dockerService/serviceComponents/imageUtils.js');
     expect(imageUtils.pullImage).toHaveBeenCalledWith('busybox:1.0');
   });

package/test/containerOptionsBuilder.test.js

@@ -0,0 +1,36 @@
+let buildContainerOptions;
+
+beforeAll(async () => {
+  const mod = await import('../src/helpers/containerOptionsBuilder.js');
+  buildContainerOptions = mod.buildContainerOptions;
+});
+
+describe('buildContainerOptions', () => {
+  test('basic image only sets Tty', () => {
+    const opts = buildContainerOptions({ imageName: 'nginx' });
+    expect(opts.Tty).toBe(true);
+    expect(opts.Env).toBeUndefined();
+  });
+
+  test('env var with value containing = is preserved intact', () => {
+    const opts = buildContainerOptions({ imageName: 'nginx', envInput: 'TOKEN=a=b' });
+    expect(opts.Env).toEqual(['TOKEN=a=b']);
+  });
+
+  test('multiple env vars with = in values are all preserved', () => {
+    const opts = buildContainerOptions({ imageName: 'nginx', envInput: 'TOKEN=a=b,DSN=user:pass@host/db?opt=1' });
+    expect(opts.Env).toContain('TOKEN=a=b');
+    expect(opts.Env).toContain('DSN=user:pass@host/db?opt=1');
+  });
+
+  test('port input builds ExposedPorts and PortBindings', () => {
+    const opts = buildContainerOptions({ imageName: 'nginx', portInput: '8080:80' });
+    expect(opts.ExposedPorts).toEqual({ '80/tcp': {} });
+    expect(opts.HostConfig.PortBindings['80/tcp']).toEqual([{ HostPort: '8080' }]);
+  });
+
+  test('container name is included when provided', () => {
+    const opts = buildContainerOptions({ imageName: 'nginx', containerName: 'my-nginx' });
+    expect(opts.name).toBe('my-nginx');
+  });
+});

package/test/useContainerCreation.dom.test.js

@@ -4,9 +4,10 @@
 import React, { useEffect } from 'react';
 import { render, act } from '@testing-library/react';
 import { useContainerCreation } from '../src/hooks/creation/useContainerCreation.js';
+import { IMAGE_PROFILES } from '../src/helpers/constants.js';
 
-function HookTester({ onCreate, onCancel, dbImages, expose }) {
-  const hook = useContainerCreation({ onCreate, onCancel, dbImages });
+function HookTester({ onCreate, onCancel, dbImages, imageProfiles, expose }) {
+  const hook = useContainerCreation({ onCreate, onCancel, dbImages, imageProfiles });
   // keep exposing the latest hook values on every render
   useEffect(() => {
     if (expose) expose.current = hook;
@@ -97,4 +98,44 @@ describe('useContainerCreation (DOM render)', () => {
       expect(created.length).toBe(1);
       expect(created[0]).toEqual({ imageName: 'redis', containerName: '', portInput: '', envInput: 'FOO=bar' });
   });
+
+  test('step 3 with mysql image: missing MYSQL_ROOT_PASSWORD blocks creation', () => {
+    const created = [];
+    const expose = { current: null };
+
+    render(<HookTester onCreate={(d) => created.push(d)} onCancel={() => {}} dbImages={[]} imageProfiles={IMAGE_PROFILES} expose={expose} />);
+
+    // advance to step 3 (env) with mysql image
+    act(() => { expose.current.setImageName('mysql:8'); });
+    act(() => { expose.current.nextStep(); }); // step 0 → 1
+    act(() => { expose.current.nextStep(); }); // step 1 → 2
+    act(() => { expose.current.nextStep(); }); // step 2 → 3
+
+    expect(expose.current.step).toBe(3);
+
+    // try to advance without required env var
+    act(() => { expose.current.nextStep(); });
+
+    expect(expose.current.step).toBe(3); // still blocked
+    expect(expose.current.message).toMatch(/MYSQL_ROOT_PASSWORD/i);
+    expect(created.length).toBe(0);
+  });
+
+  test('step 3 with mysql image: valid env advances and calls onCreate', () => {
+    const created = [];
+    const expose = { current: null };
+
+    render(<HookTester onCreate={(d) => created.push(d)} onCancel={() => {}} dbImages={[]} imageProfiles={IMAGE_PROFILES} expose={expose} />);
+
+    act(() => { expose.current.setImageName('mysql:8'); });
+    act(() => { expose.current.nextStep(); });
+    act(() => { expose.current.nextStep(); });
+    act(() => { expose.current.nextStep(); }); // at step 3
+
+    act(() => { expose.current.setEnvInput('MYSQL_ROOT_PASSWORD=secret'); });
+    act(() => { expose.current.nextStep(); }); // should call onCreate
+
+    expect(created.length).toBe(1);
+    expect(created[0].imageName).toBe('mysql:8');
+  });
 });