@navios/commander-tui 1.0.0

package/src/__tests__/components/prompt_renderer.spec.tsx

@@ -0,0 +1,274 @@
+import { describe, expect, it } from 'vitest'
+
+import { PromptRenderer } from '../../components/prompt/prompt_renderer.tsx'
+import {
+  createChoicePrompt,
+  createConfirmPrompt,
+  createInputPrompt,
+  createMultiChoicePrompt,
+  STABLE_TIMESTAMP,
+} from '../utils/factories.ts'
+import { wrapWithContext } from '../utils/render-utils.tsx'
+
+describe('PromptRenderer', () => {
+  describe('choice prompt', () => {
+    it('should render choice prompt with options', () => {
+      const prompt = createChoicePrompt({
+        question: 'Select an option',
+        choices: [
+          { label: 'Option A', value: 'a' },
+          { label: 'Option B', value: 'b' },
+          { label: 'Option C', value: 'c' },
+        ],
+        selectedIndex: 0,
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render selected option highlighted', () => {
+      const prompt = createChoicePrompt({
+        question: 'Choose wisely',
+        choices: [
+          { label: 'First', value: '1' },
+          { label: 'Second', value: '2' },
+          { label: 'Third', value: '3' },
+        ],
+        selectedIndex: 1,
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render choice with input mode', () => {
+      const prompt = createChoicePrompt({
+        question: 'Select or type',
+        choices: [
+          { label: 'Option A', value: 'a' },
+          { label: 'Other', value: 'other', input: true },
+        ],
+        selectedIndex: 1,
+        inputMode: true,
+        inputValue: 'custom value',
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render choice with timeout', () => {
+      const prompt = createChoicePrompt({
+        question: 'Quick! Select one',
+        choices: [{ label: 'Default', value: 'default' }],
+        timeout: 10000,
+        timeoutStarted: STABLE_TIMESTAMP.getTime() - 5000, // 5 seconds elapsed from stable timestamp
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render resolved choice prompt', () => {
+      const prompt = createChoicePrompt({
+        question: 'Already answered',
+        choices: [
+          { label: 'Yes', value: 'yes' },
+          { label: 'No', value: 'no' },
+        ],
+        selectedIndex: 0,
+        resolved: true,
+        resolvedValue: 'yes',
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('confirm prompt', () => {
+    it('should render confirm prompt (Yes/No)', () => {
+      const prompt = createConfirmPrompt({
+        question: 'Are you sure?',
+        confirmText: 'Yes',
+        cancelText: 'No',
+        selectedValue: true,
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render with No selected', () => {
+      const prompt = createConfirmPrompt({
+        question: 'Continue?',
+        confirmText: 'Yes',
+        cancelText: 'No',
+        selectedValue: false,
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render with custom button labels', () => {
+      const prompt = createConfirmPrompt({
+        question: 'Delete this file?',
+        confirmText: 'Delete',
+        cancelText: 'Keep',
+        selectedValue: true,
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render resolved confirm prompt', () => {
+      const prompt = createConfirmPrompt({
+        question: 'Already confirmed',
+        resolved: true,
+        resolvedValue: true,
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('input prompt', () => {
+    it('should render input prompt with placeholder', () => {
+      const prompt = createInputPrompt({
+        question: 'Enter your name',
+        placeholder: 'John Doe',
+        value: '',
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render input with entered value', () => {
+      const prompt = createInputPrompt({
+        question: 'Enter your email',
+        placeholder: 'user@example.com',
+        value: 'test@test.com',
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render resolved input prompt', () => {
+      const prompt = createInputPrompt({
+        question: 'Already answered',
+        value: 'My answer',
+        resolved: true,
+        resolvedValue: 'My answer',
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('multiChoice prompt', () => {
+    it('should render multiChoice with checkboxes', () => {
+      const prompt = createMultiChoicePrompt({
+        question: 'Select all that apply',
+        choices: [
+          { label: 'Option A', value: 'a' },
+          { label: 'Option B', value: 'b' },
+          { label: 'Option C', value: 'c' },
+        ],
+        selectedIndices: new Set(),
+        focusedIndex: 0,
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render with some options selected', () => {
+      const prompt = createMultiChoicePrompt({
+        question: 'Choose features',
+        choices: [
+          { label: 'Feature A', value: 'a' },
+          { label: 'Feature B', value: 'b' },
+          { label: 'Feature C', value: 'c' },
+        ],
+        selectedIndices: new Set([0, 2]),
+        focusedIndex: 1,
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should show selection count', () => {
+      const prompt = createMultiChoicePrompt({
+        question: 'Select up to 3',
+        choices: [
+          { label: 'A', value: 'a' },
+          { label: 'B', value: 'b' },
+          { label: 'C', value: 'c' },
+          { label: 'D', value: 'd' },
+        ],
+        selectedIndices: new Set([0, 2]),
+        maxSelect: 3,
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should show minSelect warning when not met', () => {
+      const prompt = createMultiChoicePrompt({
+        question: 'Select at least 2',
+        choices: [
+          { label: 'A', value: 'a' },
+          { label: 'B', value: 'b' },
+          { label: 'C', value: 'c' },
+        ],
+        selectedIndices: new Set([0]), // Only 1 selected
+        minSelect: 2,
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render resolved multiChoice prompt', () => {
+      const prompt = createMultiChoicePrompt({
+        question: 'Already selected',
+        choices: [
+          { label: 'A', value: 'a' },
+          { label: 'B', value: 'b' },
+        ],
+        selectedIndices: new Set([0, 1]),
+        resolved: true,
+        resolvedValues: ['a', 'b'],
+      })
+
+      const component = wrapWithContext(<PromptRenderer prompt={prompt} />)
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+})

package/src/__tests__/components/sidebar.spec.tsx

@@ -0,0 +1,305 @@
+import { describe, expect, it, vi } from 'vitest'
+
+import { Sidebar } from '../../components/sidebar/sidebar.tsx'
+import { wrapWithContext } from '../utils/render-utils.tsx'
+
+import type { ScreenInstance } from '../../services/screen.ts'
+import type { ScreenStatus } from '../../types/index.ts'
+
+// Create mock ScreenInstance
+function createMockScreen(overrides: {
+  id?: string
+  name?: string
+  icon?: string
+  badgeCount?: number
+  status?: ScreenStatus
+}): ScreenInstance {
+  return {
+    getId: vi.fn(() => overrides.id ?? 'screen-1'),
+    getName: vi.fn(() => overrides.name ?? 'Test Screen'),
+    getIcon: vi.fn(() => overrides.icon),
+    getBadgeCount: vi.fn(() => overrides.badgeCount ?? 0),
+    getStatus: vi.fn(() => overrides.status ?? 'pending'),
+    isHidden: vi.fn(() => false),
+  } as unknown as ScreenInstance
+}
+
+describe('Sidebar', () => {
+  describe('screen list', () => {
+    it('should render screen list', () => {
+      const screens = [
+        createMockScreen({ id: '1', name: 'Screen 1' }),
+        createMockScreen({ id: '2', name: 'Screen 2' }),
+        createMockScreen({ id: '3', name: 'Screen 3' }),
+      ]
+
+      const component = wrapWithContext(
+        <Sidebar
+          screens={screens}
+          selectedIndex={0}
+          activeScreenId="1"
+          focused={true}
+          width={30}
+          title="Screens"
+        />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render active screen highlighted', () => {
+      const screens = [
+        createMockScreen({ id: '1', name: 'Screen 1' }),
+        createMockScreen({ id: '2', name: 'Screen 2' }),
+      ]
+
+      const component = wrapWithContext(
+        <Sidebar
+          screens={screens}
+          selectedIndex={1}
+          activeScreenId="2"
+          focused={true}
+          width={30}
+          title="Screens"
+        />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('pending vs completed screens', () => {
+    it('should separate pending from other screens', () => {
+      const screens = [
+        createMockScreen({ id: '1', name: 'Pending 1', status: 'pending' }),
+        createMockScreen({ id: '2', name: 'Success', status: 'success' }),
+        createMockScreen({ id: '3', name: 'Pending 2', status: 'pending' }),
+        createMockScreen({ id: '4', name: 'Failed', status: 'fail' }),
+      ]
+
+      const component = wrapWithContext(
+        <Sidebar
+          screens={screens}
+          selectedIndex={0}
+          activeScreenId="1"
+          focused={true}
+          width={30}
+          title="Tasks"
+        />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should show separator between pending and completed', () => {
+      const screens = [
+        createMockScreen({ id: '1', name: 'Active Task', status: 'pending' }),
+        createMockScreen({ id: '2', name: 'Completed Task', status: 'success' }),
+      ]
+
+      const component = wrapWithContext(
+        <Sidebar
+          screens={screens}
+          selectedIndex={0}
+          activeScreenId="1"
+          focused={true}
+          width={30}
+          title="Tasks"
+        />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should not show separator if no mix', () => {
+      const screens = [
+        createMockScreen({ id: '1', name: 'Task 1', status: 'pending' }),
+        createMockScreen({ id: '2', name: 'Task 2', status: 'pending' }),
+      ]
+
+      const component = wrapWithContext(
+        <Sidebar
+          screens={screens}
+          selectedIndex={0}
+          activeScreenId="1"
+          focused={true}
+          width={30}
+          title="Tasks"
+        />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('status indicators', () => {
+    it('should render waiting status', () => {
+      const screens = [createMockScreen({ id: '1', name: 'Waiting', status: 'waiting' })]
+
+      const component = wrapWithContext(
+        <Sidebar
+          screens={screens}
+          selectedIndex={0}
+          activeScreenId="1"
+          focused={true}
+          width={30}
+          title="Screens"
+        />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render pending status', () => {
+      const screens = [createMockScreen({ id: '1', name: 'In Progress', status: 'pending' })]
+
+      const component = wrapWithContext(
+        <Sidebar
+          screens={screens}
+          selectedIndex={0}
+          activeScreenId="1"
+          focused={true}
+          width={30}
+          title="Screens"
+        />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render success status', () => {
+      const screens = [createMockScreen({ id: '1', name: 'Completed', status: 'success' })]
+
+      const component = wrapWithContext(
+        <Sidebar
+          screens={screens}
+          selectedIndex={0}
+          activeScreenId="1"
+          focused={true}
+          width={30}
+          title="Screens"
+        />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render fail status', () => {
+      const screens = [createMockScreen({ id: '1', name: 'Failed', status: 'fail' })]
+
+      const component = wrapWithContext(
+        <Sidebar
+          screens={screens}
+          selectedIndex={0}
+          activeScreenId="1"
+          focused={true}
+          width={30}
+          title="Screens"
+        />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('badge counts', () => {
+    it('should render badge counts', () => {
+      const screens = [
+        createMockScreen({ id: '1', name: 'Messages', badgeCount: 5 }),
+        createMockScreen({ id: '2', name: 'Notifications', badgeCount: 12 }),
+        createMockScreen({ id: '3', name: 'Empty', badgeCount: 0 }),
+      ]
+
+      const component = wrapWithContext(
+        <Sidebar
+          screens={screens}
+          selectedIndex={0}
+          activeScreenId="1"
+          focused={true}
+          width={30}
+          title="Screens"
+        />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('icons', () => {
+    it('should render icons', () => {
+      const screens = [
+        createMockScreen({ id: '1', name: 'Build', icon: '🔨' }),
+        createMockScreen({ id: '2', name: 'Test', icon: '🧪' }),
+        createMockScreen({ id: '3', name: 'Deploy', icon: '🚀' }),
+      ]
+
+      const component = wrapWithContext(
+        <Sidebar
+          screens={screens}
+          selectedIndex={0}
+          activeScreenId="1"
+          focused={true}
+          width={30}
+          title="Pipeline"
+        />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('focus state', () => {
+    it('should render focused state', () => {
+      const screens = [createMockScreen({ id: '1', name: 'Test' })]
+
+      const component = wrapWithContext(
+        <Sidebar
+          screens={screens}
+          selectedIndex={0}
+          activeScreenId="1"
+          focused={true}
+          width={30}
+          title="Screens"
+        />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render unfocused state', () => {
+      const screens = [createMockScreen({ id: '1', name: 'Test' })]
+
+      const component = wrapWithContext(
+        <Sidebar
+          screens={screens}
+          selectedIndex={0}
+          activeScreenId="1"
+          focused={false}
+          width={30}
+          title="Screens"
+        />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('title', () => {
+    it('should render custom title', () => {
+      const screens = [createMockScreen({ id: '1', name: 'Test' })]
+
+      const component = wrapWithContext(
+        <Sidebar
+          screens={screens}
+          selectedIndex={0}
+          activeScreenId="1"
+          focused={true}
+          width={30}
+          title="Custom Title"
+        />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+})