@navios/commander-tui 1.0.0

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

@@ -0,0 +1,190 @@
+import { describe, expect, it } from 'vitest'
+
+import { FilterBar } from '../../components/filter/filter_bar.tsx'
+import { createFilterState } from '../utils/factories.ts'
+import { wrapWithContext } from '../utils/render-utils.tsx'
+
+import type { LevelCounts } from '../../types/index.ts'
+
+const defaultLevelCounts: LevelCounts = {
+  verbose: 0,
+  debug: 0,
+  log: 0,
+  warn: 0,
+  error: 0,
+  fatal: 0,
+}
+
+describe('FilterBar', () => {
+  describe('search input', () => {
+    it('should render search input', () => {
+      const filter = createFilterState({
+        searchQuery: '',
+        focusedField: 'search',
+      })
+
+      const component = wrapWithContext(
+        <FilterBar filter={filter} levelCounts={defaultLevelCounts} />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render with active search query', () => {
+      const filter = createFilterState({
+        searchQuery: 'error message',
+        focusedField: 'search',
+      })
+
+      const component = wrapWithContext(
+        <FilterBar filter={filter} levelCounts={defaultLevelCounts} />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render search focused state', () => {
+      const filter = createFilterState({
+        focusedField: 'search',
+      })
+
+      const component = wrapWithContext(
+        <FilterBar filter={filter} levelCounts={defaultLevelCounts} />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render levels focused state', () => {
+      const filter = createFilterState({
+        focusedField: 'levels',
+      })
+
+      const component = wrapWithContext(
+        <FilterBar filter={filter} levelCounts={defaultLevelCounts} />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('log level toggles', () => {
+    it('should render log level toggles', () => {
+      const filter = createFilterState()
+
+      const component = wrapWithContext(
+        <FilterBar filter={filter} levelCounts={defaultLevelCounts} />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render with some levels disabled', () => {
+      const filter = createFilterState({
+        enabledLevels: new Set(['error', 'fatal', 'warn']),
+      })
+
+      const component = wrapWithContext(
+        <FilterBar filter={filter} levelCounts={defaultLevelCounts} />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render with all levels enabled', () => {
+      const filter = createFilterState({
+        enabledLevels: new Set(['verbose', 'debug', 'log', 'warn', 'error', 'fatal']),
+      })
+
+      const component = wrapWithContext(
+        <FilterBar filter={filter} levelCounts={defaultLevelCounts} />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render with only one level enabled', () => {
+      const filter = createFilterState({
+        enabledLevels: new Set(['error']),
+      })
+
+      const component = wrapWithContext(
+        <FilterBar filter={filter} levelCounts={defaultLevelCounts} />,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('level counts', () => {
+    it('should render level counts', () => {
+      const filter = createFilterState()
+      const levelCounts: LevelCounts = {
+        verbose: 5,
+        debug: 12,
+        log: 25,
+        warn: 3,
+        error: 2,
+        fatal: 0,
+      }
+
+      const component = wrapWithContext(<FilterBar filter={filter} levelCounts={levelCounts} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should truncate high counts to 99+', () => {
+      const filter = createFilterState()
+      const levelCounts: LevelCounts = {
+        verbose: 0,
+        debug: 0,
+        log: 150,
+        warn: 0,
+        error: 200,
+        fatal: 0,
+      }
+
+      const component = wrapWithContext(<FilterBar filter={filter} levelCounts={levelCounts} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should not show counts when zero', () => {
+      const filter = createFilterState()
+      const levelCounts: LevelCounts = {
+        verbose: 0,
+        debug: 0,
+        log: 0,
+        warn: 0,
+        error: 0,
+        fatal: 0,
+      }
+
+      const component = wrapWithContext(<FilterBar filter={filter} levelCounts={levelCounts} />)
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('combined states', () => {
+    it('should render with search query and disabled levels', () => {
+      const filter = createFilterState({
+        searchQuery: 'api',
+        enabledLevels: new Set(['log', 'error']),
+        focusedField: 'search',
+      })
+      const levelCounts: LevelCounts = {
+        verbose: 2,
+        debug: 5,
+        log: 10,
+        warn: 1,
+        error: 3,
+        fatal: 0,
+      }
+
+      const component = wrapWithContext(<FilterBar filter={filter} levelCounts={levelCounts} />)
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+})

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

@@ -0,0 +1,110 @@
+import { describe, expect, it } from 'vitest'
+
+import { LoadingMessage } from '../../components/screen/loading_message.tsx'
+import { createLoadingMessage } from '../utils/factories.ts'
+import { wrapWithContext } from '../utils/render-utils.tsx'
+
+describe('LoadingMessage', () => {
+  describe('loading state', () => {
+    it('should render loading state', () => {
+      const message = createLoadingMessage({
+        content: 'Loading data...',
+        status: 'loading',
+      })
+
+      const component = wrapWithContext(<LoadingMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render loading with custom content', () => {
+      const message = createLoadingMessage({
+        content: 'Fetching user information...',
+        status: 'loading',
+      })
+
+      const component = wrapWithContext(<LoadingMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('success state', () => {
+    it('should render success state', () => {
+      const message = createLoadingMessage({
+        content: 'Loading...',
+        status: 'success',
+        resolvedContent: 'Successfully loaded!',
+      })
+
+      const component = wrapWithContext(<LoadingMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should show resolved content when success', () => {
+      const message = createLoadingMessage({
+        content: 'Original loading message',
+        status: 'success',
+        resolvedContent: 'Operation completed successfully',
+      })
+
+      const component = wrapWithContext(<LoadingMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should fall back to original content if no resolvedContent', () => {
+      const message = createLoadingMessage({
+        content: 'Loading completed',
+        status: 'success',
+        resolvedContent: undefined,
+      })
+
+      const component = wrapWithContext(<LoadingMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('fail state', () => {
+    it('should render fail state', () => {
+      const message = createLoadingMessage({
+        content: 'Loading...',
+        status: 'fail',
+        resolvedContent: 'Failed to load data',
+      })
+
+      const component = wrapWithContext(<LoadingMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should show error message when failed', () => {
+      const message = createLoadingMessage({
+        content: 'Connecting to server...',
+        status: 'fail',
+        resolvedContent: 'Connection timeout',
+      })
+
+      const component = wrapWithContext(<LoadingMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('with timestamp', () => {
+    it('should include timestamp in all states', () => {
+      const timestamp = new Date('2024-01-15T10:30:00.000Z')
+      const message = createLoadingMessage({
+        content: 'Loading...',
+        status: 'loading',
+        timestamp,
+      })
+
+      const component = wrapWithContext(<LoadingMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+})

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

@@ -0,0 +1,166 @@
+import { describe, expect, it } from 'vitest'
+
+import { LogMessage } from '../../components/log/log_message.tsx'
+import { wrapWithContext } from '../utils/render-utils.tsx'
+
+import type { LogLevel } from '@navios/core'
+
+describe('LogMessage', () => {
+  const LOG_LEVELS: LogLevel[] = ['verbose', 'debug', 'log', 'warn', 'error', 'fatal']
+
+  describe('renders log levels', () => {
+    for (const level of LOG_LEVELS) {
+      it(`should render ${level} level`, () => {
+        const component = wrapWithContext(<LogMessage level={level}>Test message</LogMessage>)
+
+        expect(component).toMatchSnapshot()
+      })
+    }
+  })
+
+  describe('variants', () => {
+    it('should render with success variant', () => {
+      const component = wrapWithContext(
+        <LogMessage level="log" variant="success">
+          Success message
+        </LogMessage>,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render with trace variant', () => {
+      const component = wrapWithContext(
+        <LogMessage level="verbose" variant="trace">
+          Trace message
+        </LogMessage>,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('with timestamp', () => {
+    it('should render with Date timestamp', () => {
+      const timestamp = new Date('2024-01-15T10:30:00.000Z')
+      const component = wrapWithContext(
+        <LogMessage level="log" timestamp={timestamp}>
+          Message with timestamp
+        </LogMessage>,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render with string timestamp', () => {
+      const component = wrapWithContext(
+        <LogMessage level="log" timestamp="10:30:00">
+          Message with string timestamp
+        </LogMessage>,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('with label', () => {
+    it('should render with label', () => {
+      const component = wrapWithContext(
+        <LogMessage level="log" label="API">
+          Message with label
+        </LogMessage>,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render with label and timestamp', () => {
+      const timestamp = new Date('2024-01-15T10:30:00.000Z')
+      const component = wrapWithContext(
+        <LogMessage level="log" label="Database" timestamp={timestamp}>
+          Message with both
+        </LogMessage>,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('with trace content', () => {
+    it('should render with trace', () => {
+      const component = wrapWithContext(
+        <LogMessage level="verbose" trace="    at someFunction (file.ts:10:5)\n    at main (index.ts:1:1)">
+          Message with trace
+        </LogMessage>,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('with custom colors', () => {
+    it('should render with custom borderColor', () => {
+      const component = wrapWithContext(
+        <LogMessage level="log" borderColor="#ff0000">
+          Custom border color
+        </LogMessage>,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render with custom backgroundColor', () => {
+      const component = wrapWithContext(
+        <LogMessage level="log" backgroundColor="#111111">
+          Custom background color
+        </LogMessage>,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('border styles', () => {
+    it('should render with thin border style (default)', () => {
+      const component = wrapWithContext(
+        <LogMessage level="log" borderStyle="thin">
+          Thin border
+        </LogMessage>,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render with thick border style', () => {
+      const component = wrapWithContext(
+        <LogMessage level="log" borderStyle="thick">
+          Thick border
+        </LogMessage>,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('with padding and margin', () => {
+    it('should render with custom padding', () => {
+      const component = wrapWithContext(
+        <LogMessage level="log" padding={2}>
+          Custom padding
+        </LogMessage>,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render with custom margin', () => {
+      const component = wrapWithContext(
+        <LogMessage level="log" margin={1}>
+          Custom margin
+        </LogMessage>,
+      )
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+})

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

@@ -0,0 +1,147 @@
+import { describe, expect, it } from 'vitest'
+
+import { ProgressMessage } from '../../components/screen/progress_message.tsx'
+import { createProgressMessage } from '../utils/factories.ts'
+import { wrapWithContext } from '../utils/render-utils.tsx'
+
+describe('ProgressMessage', () => {
+  describe('progress percentages', () => {
+    it('should render progress at 0%', () => {
+      const message = createProgressMessage({
+        label: 'Processing',
+        current: 0,
+        total: 100,
+        status: 'active',
+      })
+
+      const component = wrapWithContext(<ProgressMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render progress at 50%', () => {
+      const message = createProgressMessage({
+        label: 'Downloading files',
+        current: 50,
+        total: 100,
+        status: 'active',
+      })
+
+      const component = wrapWithContext(<ProgressMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render progress at 100%', () => {
+      const message = createProgressMessage({
+        label: 'Upload complete',
+        current: 100,
+        total: 100,
+        status: 'active',
+      })
+
+      const component = wrapWithContext(<ProgressMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should render progress at arbitrary percentage', () => {
+      const message = createProgressMessage({
+        label: 'Installing packages',
+        current: 37,
+        total: 100,
+        status: 'active',
+      })
+
+      const component = wrapWithContext(<ProgressMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should handle non-100 totals', () => {
+      const message = createProgressMessage({
+        label: 'Processing items',
+        current: 3,
+        total: 10,
+        status: 'active',
+      })
+
+      const component = wrapWithContext(<ProgressMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('with label', () => {
+    it('should render with label', () => {
+      const message = createProgressMessage({
+        label: 'Custom Label',
+        current: 25,
+        total: 100,
+        status: 'active',
+      })
+
+      const component = wrapWithContext(<ProgressMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('complete state', () => {
+    it('should render complete state', () => {
+      const message = createProgressMessage({
+        label: 'Processing',
+        current: 100,
+        total: 100,
+        status: 'complete',
+      })
+
+      const component = wrapWithContext(<ProgressMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should show resolved content when complete', () => {
+      const message = createProgressMessage({
+        label: 'Processing',
+        current: 100,
+        total: 100,
+        status: 'complete',
+        resolvedContent: 'All items processed successfully!',
+      })
+
+      const component = wrapWithContext(<ProgressMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+
+  describe('failed state', () => {
+    it('should render failed state', () => {
+      const message = createProgressMessage({
+        label: 'Uploading',
+        current: 42,
+        total: 100,
+        status: 'failed',
+      })
+
+      const component = wrapWithContext(<ProgressMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+
+    it('should show error content when failed', () => {
+      const message = createProgressMessage({
+        label: 'Uploading',
+        current: 42,
+        total: 100,
+        status: 'failed',
+        resolvedContent: 'Network error: connection lost',
+      })
+
+      const component = wrapWithContext(<ProgressMessage message={message} />)
+
+      expect(component).toMatchSnapshot()
+    })
+  })
+})