@startsimpli/funnels 0.1.3 → 0.1.5

package/src/components/FunnelCard/FunnelCard.test.ts

@@ -0,0 +1,257 @@
+/**
+ * FunnelCard Component Tests
+ *
+ * Test Coverage:
+ * - Rendering with different funnel states (active, draft, paused, archived)
+ * - Rendering with different stage counts (0, 1, 5, 10+)
+ * - Rendering with/without latest run data
+ * - Callback invocations (onViewFlow, onEdit)
+ * - Accessibility attributes
+ * - Edge cases (empty description, no stages, failed run)
+ *
+ * NOTE: These tests require React and @testing-library/react to run.
+ * Install with: npm install --save-dev react @types/react @testing-library/react @testing-library/jest-dom
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { Funnel, FunnelRun, FunnelStatus } from '../../types';
+
+// Test data factories
+function createFunnel(overrides?: Partial<Funnel>): Funnel {
+  return {
+    id: 'funnel-1',
+    name: 'Test Funnel',
+    description: 'Test funnel description',
+    status: 'active',
+    input_type: 'any',
+    stages: [
+      {
+        id: 'stage-1',
+        order: 0,
+        name: 'Stage 1',
+        description: 'First stage',
+        filter_logic: 'AND',
+        rules: [
+          { field_path: 'name', operator: 'eq', value: 'test' }
+        ],
+        match_action: 'continue',
+        no_match_action: 'exclude',
+      },
+      {
+        id: 'stage-2',
+        order: 1,
+        name: 'Stage 2',
+        description: 'Second stage',
+        filter_logic: 'OR',
+        rules: [
+          { field_path: 'value', operator: 'gt', value: 100 },
+          { field_path: 'type', operator: 'in', value: ['A', 'B'] },
+          { field_path: 'active', operator: 'is_true', value: null },
+        ],
+        match_action: 'output',
+        no_match_action: 'exclude',
+      },
+    ],
+    created_at: '2024-01-01T00:00:00Z',
+    updated_at: '2024-01-01T00:00:00Z',
+    ...overrides,
+  };
+}
+
+function createFunnelRun(overrides?: Partial<FunnelRun>): FunnelRun {
+  return {
+    id: 'run-1',
+    funnel_id: 'funnel-1',
+    status: 'completed',
+    trigger_type: 'manual',
+    started_at: '2024-01-01T00:00:00Z',
+    completed_at: '2024-01-01T00:01:00Z',
+    duration_ms: 60000,
+    total_input: 83061,
+    total_matched: 235,
+    total_excluded: 82826,
+    total_tagged: 235,
+    stage_stats: {},
+    ...overrides,
+  };
+}
+
+describe('FunnelCard', () => {
+  describe('Test Data Factories', () => {
+    it('creates valid funnel', () => {
+      const funnel = createFunnel();
+
+      expect(funnel.id).toBe('funnel-1');
+      expect(funnel.name).toBe('Test Funnel');
+      expect(funnel.status).toBe('active');
+      expect(funnel.stages).toHaveLength(2);
+    });
+
+    it('creates funnel with overrides', () => {
+      const funnel = createFunnel({ name: 'Custom Funnel', status: 'draft' });
+
+      expect(funnel.name).toBe('Custom Funnel');
+      expect(funnel.status).toBe('draft');
+    });
+
+    it('creates valid funnel run', () => {
+      const run = createFunnelRun();
+
+      expect(run.id).toBe('run-1');
+      expect(run.status).toBe('completed');
+      expect(run.total_input).toBe(83061);
+      expect(run.total_matched).toBe(235);
+    });
+
+    it('creates funnel run with overrides', () => {
+      const run = createFunnelRun({ total_matched: 1000 });
+
+      expect(run.total_matched).toBe(1000);
+    });
+  });
+
+  describe('Funnel Validation', () => {
+    it('validates funnel with 0 stages', () => {
+      const funnel = createFunnel({ stages: [] });
+
+      expect(funnel.stages).toHaveLength(0);
+    });
+
+    it('validates funnel with 5 stages', () => {
+      const stages = Array.from({ length: 5 }, (_, i) => ({
+        id: `stage-${i}`,
+        order: i,
+        name: `Stage ${i + 1}`,
+        filter_logic: 'AND' as const,
+        rules: [{ field_path: 'x', operator: 'eq' as const, value: i }],
+        match_action: 'continue' as const,
+        no_match_action: 'exclude' as const,
+      }));
+      const funnel = createFunnel({ stages });
+
+      expect(funnel.stages).toHaveLength(5);
+      expect(funnel.stages[0].order).toBe(0);
+      expect(funnel.stages[4].order).toBe(4);
+    });
+
+    it('validates different status values', () => {
+      const statuses: FunnelStatus[] = ['active', 'draft', 'paused', 'archived'];
+
+      statuses.forEach((status) => {
+        const funnel = createFunnel({ status });
+        expect(funnel.status).toBe(status);
+      });
+    });
+  });
+
+  describe('Run Stats Calculation', () => {
+    it('calculates match percentage correctly', () => {
+      const run = createFunnelRun();
+      const percentage = (run.total_matched / run.total_input) * 100;
+
+      expect(percentage).toBeCloseTo(0.28, 2); // 235/83061 ≈ 0.28%
+    });
+
+    it('handles zero input', () => {
+      const run = createFunnelRun({ total_input: 0, total_matched: 0 });
+      const percentage = run.total_input > 0 ? (run.total_matched / run.total_input) * 100 : 0;
+
+      expect(percentage).toBe(0);
+    });
+
+    it('handles 100% match rate', () => {
+      const run = createFunnelRun({ total_input: 1000, total_matched: 1000, total_excluded: 0 });
+      const percentage = (run.total_matched / run.total_input) * 100;
+
+      expect(percentage).toBe(100);
+    });
+  });
+
+  describe('Stage Rule Counting', () => {
+    it('counts rules correctly', () => {
+      const funnel = createFunnel();
+
+      expect(funnel.stages[0].rules).toHaveLength(1);
+      expect(funnel.stages[1].rules).toHaveLength(3);
+    });
+
+    it('handles stages with no rules', () => {
+      const funnel = createFunnel({
+        stages: [
+          {
+            id: 'stage-1',
+            order: 0,
+            name: 'Empty Stage',
+            filter_logic: 'AND',
+            rules: [],
+            match_action: 'continue',
+            no_match_action: 'exclude',
+          },
+        ],
+      });
+
+      expect(funnel.stages[0].rules).toHaveLength(0);
+    });
+  });
+
+  describe('Run Status Validation', () => {
+    it('validates completed run', () => {
+      const run = createFunnelRun({ status: 'completed' });
+
+      expect(run.status).toBe('completed');
+      expect(run.completed_at).toBeDefined();
+    });
+
+    it('validates running state', () => {
+      const run = createFunnelRun({ status: 'running', completed_at: undefined });
+
+      expect(run.status).toBe('running');
+      expect(run.completed_at).toBeUndefined();
+    });
+
+    it('validates failed run', () => {
+      const run = createFunnelRun({ status: 'failed', error: 'Database error' });
+
+      expect(run.status).toBe('failed');
+      expect(run.error).toBe('Database error');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles very long funnel names', () => {
+      const longName = 'This is a very long funnel name that should still be valid';
+      const funnel = createFunnel({ name: longName });
+
+      expect(funnel.name).toBe(longName);
+      expect(funnel.name.length).toBeGreaterThan(50);
+    });
+
+    it('handles undefined description', () => {
+      const funnel = createFunnel({ description: undefined });
+
+      expect(funnel.description).toBeUndefined();
+    });
+
+    it('handles large numbers in stats', () => {
+      const run = createFunnelRun({
+        total_input: 10000000,
+        total_matched: 500000,
+        total_excluded: 9500000,
+      });
+
+      expect(run.total_input).toBe(10000000);
+      expect(run.total_matched + run.total_excluded).toBe(run.total_input);
+    });
+
+    it('validates stats add up correctly', () => {
+      const run = createFunnelRun();
+
+      expect(run.total_matched + run.total_excluded).toBe(run.total_input);
+    });
+  });
+});
+
+// TODO: Add React component tests when React is installed
+// Import these and uncomment when React dependencies are added:
+// import { render, screen, fireEvent } from '@testing-library/react';
+// import { FunnelCard } from './FunnelCard';

package/src/components/FunnelCard/FunnelCard.test.tsx

@@ -0,0 +1,336 @@
+/**
+ * FunnelCard Component Tests
+ *
+ * Test Coverage:
+ * - Rendering with different funnel states (active, draft, paused, archived)
+ * - Rendering with different stage counts (0, 1, 5, 10+)
+ * - Rendering with/without latest run data
+ * - Callback invocations (onViewFlow, onEdit)
+ * - Accessibility attributes
+ * - Edge cases (empty description, no stages, failed run)
+ */
+
+import { describe, it, expect, vi } from 'vitest';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { FunnelCard } from './FunnelCard';
+import { Funnel, FunnelRun, FunnelStatus } from '../../types';
+
+// Test data factories
+function createFunnel(overrides?: Partial<Funnel>): Funnel {
+  return {
+    id: 'funnel-1',
+    name: 'Test Funnel',
+    description: 'Test funnel description',
+    status: 'active',
+    input_type: 'any',
+    stages: [
+      {
+        id: 'stage-1',
+        order: 0,
+        name: 'Stage 1',
+        description: 'First stage',
+        filter_logic: 'AND',
+        rules: [
+          { field_path: 'name', operator: 'eq', value: 'test' }
+        ],
+        match_action: 'continue',
+        no_match_action: 'exclude',
+      },
+      {
+        id: 'stage-2',
+        order: 1,
+        name: 'Stage 2',
+        description: 'Second stage',
+        filter_logic: 'OR',
+        rules: [
+          { field_path: 'value', operator: 'gt', value: 100 },
+          { field_path: 'type', operator: 'in', value: ['A', 'B'] },
+          { field_path: 'active', operator: 'is_true', value: null },
+        ],
+        match_action: 'output',
+        no_match_action: 'exclude',
+      },
+    ],
+    created_at: '2024-01-01T00:00:00Z',
+    updated_at: '2024-01-01T00:00:00Z',
+    ...overrides,
+  };
+}
+
+function createFunnelRun(overrides?: Partial<FunnelRun>): FunnelRun {
+  return {
+    id: 'run-1',
+    funnel_id: 'funnel-1',
+    status: 'completed',
+    trigger_type: 'manual',
+    started_at: '2024-01-01T00:00:00Z',
+    completed_at: '2024-01-01T00:01:00Z',
+    duration_ms: 60000,
+    total_input: 83061,
+    total_matched: 235,
+    total_excluded: 82826,
+    total_tagged: 235,
+    stage_stats: {},
+    ...overrides,
+  };
+}
+
+describe('FunnelCard', () => {
+  describe('Basic Rendering', () => {
+    it('renders funnel name and description', () => {
+      const funnel = createFunnel();
+      render(<FunnelCard funnel={funnel} />);
+
+      expect(screen.getByText('Test Funnel')).toBeInTheDocument();
+      expect(screen.getByText('Test funnel description')).toBeInTheDocument();
+    });
+
+    it('renders without description', () => {
+      const funnel = createFunnel({ description: undefined });
+      render(<FunnelCard funnel={funnel} />);
+
+      expect(screen.getByText('Test Funnel')).toBeInTheDocument();
+      expect(screen.queryByText('Test funnel description')).not.toBeInTheDocument();
+    });
+
+    it('renders all stages', () => {
+      const funnel = createFunnel();
+      render(<FunnelCard funnel={funnel} />);
+
+      expect(screen.getByText('Stage 1')).toBeInTheDocument();
+      expect(screen.getByText('Stage 2')).toBeInTheDocument();
+      expect(screen.getByText('1 rule')).toBeInTheDocument();
+      expect(screen.getByText('3 rules')).toBeInTheDocument();
+    });
+
+    it('renders empty state for funnel with no stages', () => {
+      const funnel = createFunnel({ stages: [] });
+      render(<FunnelCard funnel={funnel} />);
+
+      expect(screen.getByText('No stages defined')).toBeInTheDocument();
+    });
+  });
+
+  describe('Status Badge', () => {
+    const statuses: FunnelStatus[] = ['active', 'draft', 'paused', 'archived'];
+
+    it.each(statuses)('renders %s status badge', (status) => {
+      const funnel = createFunnel({ status });
+      render(<FunnelCard funnel={funnel} />);
+
+      expect(screen.getByText(status.toUpperCase())).toBeInTheDocument();
+    });
+  });
+
+  describe('Latest Run Data', () => {
+    it('renders stats when run is completed', () => {
+      const funnel = createFunnel();
+      const latestRun = createFunnelRun();
+      render(<FunnelCard funnel={funnel} latestRun={latestRun} />);
+
+      expect(screen.getByText('83,061')).toBeInTheDocument(); // INPUT
+      expect(screen.getByText('235')).toBeInTheDocument(); // MATCHED
+      expect(screen.getByText('82,826')).toBeInTheDocument(); // EXCLUDED
+      expect(screen.getByText('235 matched')).toBeInTheDocument(); // Match bar label
+    });
+
+    it('renders "No runs yet" when no run data', () => {
+      const funnel = createFunnel();
+      render(<FunnelCard funnel={funnel} />);
+
+      expect(screen.getByText('No runs yet')).toBeInTheDocument();
+      expect(screen.queryByText('INPUT')).not.toBeInTheDocument();
+    });
+
+    it('renders "Running..." for in-progress run', () => {
+      const funnel = createFunnel();
+      const latestRun = createFunnelRun({ status: 'running' });
+      render(<FunnelCard funnel={funnel} latestRun={latestRun} />);
+
+      expect(screen.getByText('Running...')).toBeInTheDocument();
+    });
+
+    it('renders "Last run failed" for failed run', () => {
+      const funnel = createFunnel();
+      const latestRun = createFunnelRun({ status: 'failed' });
+      render(<FunnelCard funnel={funnel} latestRun={latestRun} />);
+
+      expect(screen.getByText('Last run failed')).toBeInTheDocument();
+    });
+  });
+
+  describe('Stage Counts', () => {
+    it('renders funnel with 1 stage', () => {
+      const funnel = createFunnel({
+        stages: [
+          {
+            id: 'stage-1',
+            order: 0,
+            name: 'Only Stage',
+            filter_logic: 'AND',
+            rules: [{ field_path: 'x', operator: 'eq', value: 1 }],
+            match_action: 'output',
+            no_match_action: 'exclude',
+          },
+        ],
+      });
+      render(<FunnelCard funnel={funnel} />);
+
+      expect(screen.getByText('Only Stage')).toBeInTheDocument();
+      expect(screen.getByText('1 rule')).toBeInTheDocument();
+    });
+
+    it('renders funnel with 5 stages', () => {
+      const stages = Array.from({ length: 5 }, (_, i) => ({
+        id: `stage-${i}`,
+        order: i,
+        name: `Stage ${i + 1}`,
+        filter_logic: 'AND' as const,
+        rules: [{ field_path: 'x', operator: 'eq' as const, value: i }],
+        match_action: 'continue' as const,
+        no_match_action: 'exclude' as const,
+      }));
+      const funnel = createFunnel({ stages });
+      render(<FunnelCard funnel={funnel} />);
+
+      stages.forEach((stage) => {
+        expect(screen.getByText(stage.name)).toBeInTheDocument();
+      });
+    });
+
+    it('renders funnel with 10+ stages', () => {
+      const stages = Array.from({ length: 15 }, (_, i) => ({
+        id: `stage-${i}`,
+        order: i,
+        name: `Stage ${i + 1}`,
+        filter_logic: 'AND' as const,
+        rules: [{ field_path: 'x', operator: 'eq' as const, value: i }],
+        match_action: 'continue' as const,
+        no_match_action: 'exclude' as const,
+      }));
+      const funnel = createFunnel({ stages });
+      render(<FunnelCard funnel={funnel} />);
+
+      // Check first and last stage
+      expect(screen.getByText('Stage 1')).toBeInTheDocument();
+      expect(screen.getByText('Stage 15')).toBeInTheDocument();
+    });
+  });
+
+  describe('Callbacks', () => {
+    it('calls onViewFlow when button clicked', () => {
+      const onViewFlow = vi.fn();
+      const funnel = createFunnel();
+      render(<FunnelCard funnel={funnel} onViewFlow={onViewFlow} />);
+
+      const button = screen.getByRole('button', { name: /view flow/i });
+      fireEvent.click(button);
+
+      expect(onViewFlow).toHaveBeenCalledTimes(1);
+      expect(onViewFlow).toHaveBeenCalledWith(funnel);
+    });
+
+    it('does not error when onViewFlow is undefined', () => {
+      const funnel = createFunnel();
+      render(<FunnelCard funnel={funnel} />);
+
+      const button = screen.getByRole('button', { name: /view flow/i });
+      expect(() => fireEvent.click(button)).not.toThrow();
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('has proper ARIA labels', () => {
+      const funnel = createFunnel();
+      const latestRun = createFunnelRun();
+      render(<FunnelCard funnel={funnel} latestRun={latestRun} />);
+
+      expect(screen.getByRole('article')).toHaveAttribute(
+        'aria-label',
+        'Funnel: Test Funnel'
+      );
+
+      expect(screen.getByLabelText(/funnel stages/i)).toBeInTheDocument();
+      expect(screen.getByLabelText(/match results/i)).toBeInTheDocument();
+      expect(screen.getByLabelText(/funnel statistics/i)).toBeInTheDocument();
+
+      const button = screen.getByRole('button');
+      expect(button).toHaveAttribute(
+        'aria-label',
+        'View flow details for Test Funnel'
+      );
+    });
+
+    it('has proper progressbar role for match bar', () => {
+      const funnel = createFunnel();
+      const latestRun = createFunnelRun();
+      render(<FunnelCard funnel={funnel} latestRun={latestRun} />);
+
+      const progressBar = screen.getByRole('progressbar');
+      expect(progressBar).toHaveAttribute('aria-valuemin', '0');
+      expect(progressBar).toHaveAttribute('aria-valuemax', '100');
+      expect(progressBar).toHaveAttribute('aria-label', '235 of 83061 matched');
+    });
+  });
+
+  describe('Custom className', () => {
+    it('applies custom className', () => {
+      const funnel = createFunnel();
+      const { container } = render(
+        <FunnelCard funnel={funnel} className="custom-class" />
+      );
+
+      const article = container.querySelector('article');
+      expect(article).toHaveClass('custom-class');
+    });
+  });
+
+  describe('Edge Cases', () => {
+    it('handles zero matched entities', () => {
+      const funnel = createFunnel();
+      const latestRun = createFunnelRun({
+        total_matched: 0,
+        total_excluded: 100,
+      });
+      render(<FunnelCard funnel={funnel} latestRun={latestRun} />);
+
+      expect(screen.getByText('0 matched')).toBeInTheDocument();
+      expect(screen.getByText('100')).toBeInTheDocument(); // EXCLUDED
+    });
+
+    it('handles zero input entities', () => {
+      const funnel = createFunnel();
+      const latestRun = createFunnelRun({
+        total_input: 0,
+        total_matched: 0,
+        total_excluded: 0,
+      });
+      render(<FunnelCard funnel={funnel} latestRun={latestRun} />);
+
+      expect(screen.getByText('0 matched')).toBeInTheDocument();
+      expect(screen.getAllByText('0')).toHaveLength(3); // INPUT, MATCHED, EXCLUDED
+    });
+
+    it('handles long funnel names', () => {
+      const funnel = createFunnel({
+        name: 'This is a very long funnel name that should still render correctly without breaking the layout',
+      });
+      render(<FunnelCard funnel={funnel} />);
+
+      expect(
+        screen.getByText(
+          'This is a very long funnel name that should still render correctly without breaking the layout'
+        )
+      ).toBeInTheDocument();
+    });
+
+    it('handles long descriptions', () => {
+      const funnel = createFunnel({
+        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.',
+      });
+      render(<FunnelCard funnel={funnel} />);
+
+      expect(screen.getByText(/Lorem ipsum dolor/)).toBeInTheDocument();
+    });
+  });
+});