@bernierllc/email-campaign-management 1.0.1

package/__tests__/components/MetricsOverview.test.tsx

@@ -0,0 +1,200 @@
+/*
+Copyright (c) 2025 Bernier LLC
+
+This file is licensed to the client under a limited-use license.
+The client may use and modify this code *only within the scope of the project it was delivered for*.
+Redistribution or use in other products or commercial offerings is not permitted without written consent from Bernier LLC.
+*/
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { MetricsOverview } from '../../src/components/CampaignDashboard/MetricsOverview';
+import { CampaignMetrics } from '../../src/types';
+
+const createMockMetrics = (overrides: Partial<CampaignMetrics> = {}): CampaignMetrics => ({
+  campaignId: 'campaign-123',
+  sent: 10000,
+  delivered: 9500,
+  bounced: 500,
+  opened: 4500,
+  clicked: 1200,
+  converted: 300,
+  unsubscribed: 50,
+  openRate: 45.0,
+  clickRate: 12.0,
+  conversionRate: 3.0,
+  lastUpdated: new Date('2025-01-15'),
+  ...overrides
+});
+
+describe('MetricsOverview', () => {
+  describe('rendering', () => {
+    it('should render without crashing', () => {
+      const metrics = createMockMetrics();
+      render(<MetricsOverview metrics={metrics} />);
+      expect(screen.getByText('Sent')).toBeInTheDocument();
+    });
+
+    it('should render with metrics-overview class', () => {
+      const metrics = createMockMetrics();
+      const { container } = render(<MetricsOverview metrics={metrics} />);
+      expect(container.querySelector('.metrics-overview')).toBeInTheDocument();
+    });
+
+    it('should render all four metric cards', () => {
+      const metrics = createMockMetrics();
+      const { container } = render(<MetricsOverview metrics={metrics} />);
+      const cards = container.querySelectorAll('.metric-card');
+      expect(cards).toHaveLength(4);
+    });
+  });
+
+  describe('sent metrics', () => {
+    it('should display sent count', () => {
+      const metrics = createMockMetrics({ sent: 10000 });
+      render(<MetricsOverview metrics={metrics} />);
+      expect(screen.getByText('10,000')).toBeInTheDocument();
+    });
+
+    it('should display "Sent" label', () => {
+      const metrics = createMockMetrics();
+      render(<MetricsOverview metrics={metrics} />);
+      expect(screen.getByText('Sent')).toBeInTheDocument();
+    });
+
+    it('should handle zero sent', () => {
+      const metrics = createMockMetrics({ sent: 0 });
+      render(<MetricsOverview metrics={metrics} />);
+      expect(screen.getByText('0')).toBeInTheDocument();
+    });
+  });
+
+  describe('opened metrics', () => {
+    it('should display opened count', () => {
+      const metrics = createMockMetrics({ opened: 4500 });
+      render(<MetricsOverview metrics={metrics} />);
+      expect(screen.getByText('4,500')).toBeInTheDocument();
+    });
+
+    it('should display "Opened" label', () => {
+      const metrics = createMockMetrics();
+      render(<MetricsOverview metrics={metrics} />);
+      expect(screen.getByText('Opened')).toBeInTheDocument();
+    });
+
+    it('should display open rate percentage', () => {
+      const metrics = createMockMetrics({ openRate: 45.0 });
+      render(<MetricsOverview metrics={metrics} />);
+      expect(screen.getByText('45.00%')).toBeInTheDocument();
+    });
+  });
+
+  describe('clicked metrics', () => {
+    it('should display clicked count', () => {
+      const metrics = createMockMetrics({ clicked: 1200 });
+      render(<MetricsOverview metrics={metrics} />);
+      expect(screen.getByText('1,200')).toBeInTheDocument();
+    });
+
+    it('should display "Clicked" label', () => {
+      const metrics = createMockMetrics();
+      render(<MetricsOverview metrics={metrics} />);
+      expect(screen.getByText('Clicked')).toBeInTheDocument();
+    });
+
+    it('should display click rate percentage', () => {
+      const metrics = createMockMetrics({ clickRate: 12.0 });
+      render(<MetricsOverview metrics={metrics} />);
+      expect(screen.getByText('12.00%')).toBeInTheDocument();
+    });
+  });
+
+  describe('converted metrics', () => {
+    it('should display converted count', () => {
+      const metrics = createMockMetrics({ converted: 300 });
+      render(<MetricsOverview metrics={metrics} />);
+      expect(screen.getByText('300')).toBeInTheDocument();
+    });
+
+    it('should display "Converted" label', () => {
+      const metrics = createMockMetrics();
+      render(<MetricsOverview metrics={metrics} />);
+      expect(screen.getByText('Converted')).toBeInTheDocument();
+    });
+
+    it('should display conversion rate percentage', () => {
+      const metrics = createMockMetrics({ conversionRate: 3.0 });
+      render(<MetricsOverview metrics={metrics} />);
+      expect(screen.getByText('3.00%')).toBeInTheDocument();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle very large numbers', () => {
+      const metrics = createMockMetrics({
+        sent: 1000000,
+        opened: 500000,
+        clicked: 250000,
+        converted: 50000
+      });
+      render(<MetricsOverview metrics={metrics} />);
+      expect(screen.getByText('1,000,000')).toBeInTheDocument();
+      expect(screen.getByText('500,000')).toBeInTheDocument();
+    });
+
+    it('should handle decimal rates', () => {
+      const metrics = createMockMetrics({
+        openRate: 45.5,
+        clickRate: 12.3,
+        conversionRate: 3.7
+      });
+      render(<MetricsOverview metrics={metrics} />);
+      // formatPercentage likely rounds or truncates
+      expect(screen.getByText(/45/)).toBeInTheDocument();
+    });
+
+    it('should handle zero rates', () => {
+      const metrics = createMockMetrics({
+        openRate: 0,
+        clickRate: 0,
+        conversionRate: 0
+      });
+      render(<MetricsOverview metrics={metrics} />);
+      const zeroPercents = screen.getAllByText('0.00%');
+      expect(zeroPercents.length).toBeGreaterThanOrEqual(3);
+    });
+
+    it('should handle 100% rates', () => {
+      const metrics = createMockMetrics({
+        openRate: 100,
+        clickRate: 100,
+        conversionRate: 100
+      });
+      render(<MetricsOverview metrics={metrics} />);
+      const fullPercents = screen.getAllByText('100.00%');
+      expect(fullPercents.length).toBeGreaterThanOrEqual(3);
+    });
+  });
+
+  describe('re-rendering', () => {
+    it('should update when metrics change', () => {
+      const initialMetrics = createMockMetrics({ sent: 1000 });
+      const { rerender } = render(<MetricsOverview metrics={initialMetrics} />);
+      expect(screen.getByText('1,000')).toBeInTheDocument();
+
+      const updatedMetrics = createMockMetrics({ sent: 2000 });
+      rerender(<MetricsOverview metrics={updatedMetrics} />);
+      expect(screen.getByText('2,000')).toBeInTheDocument();
+    });
+
+    it('should update rates when they change', () => {
+      const initialMetrics = createMockMetrics({ openRate: 10 });
+      const { rerender } = render(<MetricsOverview metrics={initialMetrics} />);
+      expect(screen.getByText('10.00%')).toBeInTheDocument();
+
+      const updatedMetrics = createMockMetrics({ openRate: 50 });
+      rerender(<MetricsOverview metrics={updatedMetrics} />);
+      expect(screen.getByText('50.00%')).toBeInTheDocument();
+    });
+  });
+});

package/__tests__/components/PerformanceChart.test.tsx

@@ -0,0 +1,206 @@
+/*
+Copyright (c) 2025 Bernier LLC
+
+This file is licensed to the client under a limited-use license.
+The client may use and modify this code *only within the scope of the project it was delivered for*.
+Redistribution or use in other products or commercial offerings is not permitted without written consent from Bernier LLC.
+*/
+
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { PerformanceChart, PerformanceChartProps } from '../../src/components/CampaignDashboard/PerformanceChart';
+import { CampaignMetrics } from '../../src/types';
+
+const createMockMetrics = (overrides: Partial<CampaignMetrics> = {}): CampaignMetrics => ({
+  campaignId: 'campaign-123',
+  sent: 10000,
+  delivered: 9500,
+  bounced: 500,
+  opened: 4500,
+  clicked: 1200,
+  converted: 300,
+  unsubscribed: 50,
+  openRate: 45.0,
+  clickRate: 12.0,
+  conversionRate: 3.0,
+  lastUpdated: new Date('2025-01-15'),
+  ...overrides
+});
+
+describe('PerformanceChart', () => {
+  describe('rendering', () => {
+    it('should render without crashing', () => {
+      const metrics = createMockMetrics();
+      render(<PerformanceChart metrics={metrics} type="open_rate" />);
+      expect(screen.getByText('Open Rate')).toBeInTheDocument();
+    });
+
+    it('should render with performance-chart class', () => {
+      const metrics = createMockMetrics();
+      const { container } = render(<PerformanceChart metrics={metrics} type="open_rate" />);
+      expect(container.querySelector('.performance-chart')).toBeInTheDocument();
+    });
+
+    it('should render chart placeholder', () => {
+      const metrics = createMockMetrics();
+      const { container } = render(<PerformanceChart metrics={metrics} type="open_rate" />);
+      expect(container.querySelector('.chart-placeholder')).toBeInTheDocument();
+    });
+  });
+
+  describe('open_rate type', () => {
+    it('should display "Open Rate" title', () => {
+      const metrics = createMockMetrics({ openRate: 45.5 });
+      render(<PerformanceChart metrics={metrics} type="open_rate" />);
+      expect(screen.getByRole('heading', { name: 'Open Rate' })).toBeInTheDocument();
+    });
+
+    it('should display the open rate value', () => {
+      const metrics = createMockMetrics({ openRate: 45.5 });
+      render(<PerformanceChart metrics={metrics} type="open_rate" />);
+      expect(screen.getByText('Chart: 45.50%')).toBeInTheDocument();
+    });
+
+    it('should format open rate with two decimal places', () => {
+      const metrics = createMockMetrics({ openRate: 33.333 });
+      render(<PerformanceChart metrics={metrics} type="open_rate" />);
+      expect(screen.getByText('Chart: 33.33%')).toBeInTheDocument();
+    });
+
+    it('should handle zero open rate', () => {
+      const metrics = createMockMetrics({ openRate: 0 });
+      render(<PerformanceChart metrics={metrics} type="open_rate" />);
+      expect(screen.getByText('Chart: 0.00%')).toBeInTheDocument();
+    });
+
+    it('should handle 100% open rate', () => {
+      const metrics = createMockMetrics({ openRate: 100 });
+      render(<PerformanceChart metrics={metrics} type="open_rate" />);
+      expect(screen.getByText('Chart: 100.00%')).toBeInTheDocument();
+    });
+  });
+
+  describe('click_rate type', () => {
+    it('should display "Click Rate" title', () => {
+      const metrics = createMockMetrics({ clickRate: 12.3 });
+      render(<PerformanceChart metrics={metrics} type="click_rate" />);
+      expect(screen.getByRole('heading', { name: 'Click Rate' })).toBeInTheDocument();
+    });
+
+    it('should display the click rate value', () => {
+      const metrics = createMockMetrics({ clickRate: 12.3 });
+      render(<PerformanceChart metrics={metrics} type="click_rate" />);
+      expect(screen.getByText('Chart: 12.30%')).toBeInTheDocument();
+    });
+
+    it('should format click rate with two decimal places', () => {
+      const metrics = createMockMetrics({ clickRate: 8.765 });
+      render(<PerformanceChart metrics={metrics} type="click_rate" />);
+      expect(screen.getByText('Chart: 8.77%')).toBeInTheDocument();
+    });
+
+    it('should handle zero click rate', () => {
+      const metrics = createMockMetrics({ clickRate: 0 });
+      render(<PerformanceChart metrics={metrics} type="click_rate" />);
+      expect(screen.getByText('Chart: 0.00%')).toBeInTheDocument();
+    });
+
+    it('should handle high click rate', () => {
+      const metrics = createMockMetrics({ clickRate: 85.5 });
+      render(<PerformanceChart metrics={metrics} type="click_rate" />);
+      expect(screen.getByText('Chart: 85.50%')).toBeInTheDocument();
+    });
+  });
+
+  describe('conversion_rate type', () => {
+    it('should display "Conversion Rate" title', () => {
+      const metrics = createMockMetrics({ conversionRate: 3.5 });
+      render(<PerformanceChart metrics={metrics} type="conversion_rate" />);
+      expect(screen.getByRole('heading', { name: 'Conversion Rate' })).toBeInTheDocument();
+    });
+
+    it('should display the conversion rate value', () => {
+      const metrics = createMockMetrics({ conversionRate: 3.5 });
+      render(<PerformanceChart metrics={metrics} type="conversion_rate" />);
+      expect(screen.getByText('Chart: 3.50%')).toBeInTheDocument();
+    });
+
+    it('should format conversion rate with two decimal places', () => {
+      const metrics = createMockMetrics({ conversionRate: 2.125 });
+      render(<PerformanceChart metrics={metrics} type="conversion_rate" />);
+      expect(screen.getByText('Chart: 2.13%')).toBeInTheDocument();
+    });
+
+    it('should handle zero conversion rate', () => {
+      const metrics = createMockMetrics({ conversionRate: 0 });
+      render(<PerformanceChart metrics={metrics} type="conversion_rate" />);
+      expect(screen.getByText('Chart: 0.00%')).toBeInTheDocument();
+    });
+
+    it('should handle very small conversion rate', () => {
+      const metrics = createMockMetrics({ conversionRate: 0.01 });
+      render(<PerformanceChart metrics={metrics} type="conversion_rate" />);
+      expect(screen.getByText('Chart: 0.01%')).toBeInTheDocument();
+    });
+  });
+
+  describe('placeholder text', () => {
+    it('should show integration note in placeholder', () => {
+      const metrics = createMockMetrics();
+      render(<PerformanceChart metrics={metrics} type="open_rate" />);
+      expect(screen.getByText(/Integration with recharts or similar library needed/)).toBeInTheDocument();
+    });
+  });
+
+  describe('edge cases', () => {
+    it('should handle metrics with very large values', () => {
+      const metrics = createMockMetrics({
+        openRate: 99.99,
+        clickRate: 88.88,
+        conversionRate: 77.77
+      });
+      render(<PerformanceChart metrics={metrics} type="open_rate" />);
+      expect(screen.getByText('Chart: 99.99%')).toBeInTheDocument();
+    });
+
+    it('should handle metrics with decimal precision', () => {
+      const metrics = createMockMetrics({
+        openRate: 45.555555
+      });
+      render(<PerformanceChart metrics={metrics} type="open_rate" />);
+      expect(screen.getByText('Chart: 45.56%')).toBeInTheDocument();
+    });
+
+    it('should render correctly with different campaign IDs', () => {
+      const metrics1 = createMockMetrics({ campaignId: 'campaign-1', openRate: 50 });
+      const metrics2 = createMockMetrics({ campaignId: 'campaign-2', openRate: 60 });
+
+      const { rerender } = render(<PerformanceChart metrics={metrics1} type="open_rate" />);
+      expect(screen.getByText('Chart: 50.00%')).toBeInTheDocument();
+
+      rerender(<PerformanceChart metrics={metrics2} type="open_rate" />);
+      expect(screen.getByText('Chart: 60.00%')).toBeInTheDocument();
+    });
+  });
+
+  describe('prop type variations', () => {
+    it('should handle each rate type correctly', () => {
+      const metrics = createMockMetrics({
+        openRate: 10,
+        clickRate: 20,
+        conversionRate: 30
+      });
+
+      const types: PerformanceChartProps['type'][] = ['open_rate', 'click_rate', 'conversion_rate'];
+      const expectedTitles = ['Open Rate', 'Click Rate', 'Conversion Rate'];
+      const expectedValues = ['Chart: 10.00%', 'Chart: 20.00%', 'Chart: 30.00%'];
+
+      types.forEach((type, index) => {
+        const { unmount } = render(<PerformanceChart metrics={metrics} type={type} />);
+        expect(screen.getByRole('heading', { name: expectedTitles[index] })).toBeInTheDocument();
+        expect(screen.getByText(expectedValues[index])).toBeInTheDocument();
+        unmount();
+      });
+    });
+  });
+});