test(08-01): add failing tests for Calculator widget and registry constraints (RED)

- calculator-widget.test.tsx: 5 behaviour tests (render, arithmetic, div/0, keyboard, decimal) - widget-registry.test.tsx: DASH-11 structure check for all 8 widget types including new Phase-8 types - Both suites fail (RED baseline) — implementation does not exist yet
2026-07-01 09:54:22 +02:00
parent b885c767fb
commit b751ae7453
2 changed files with 140 additions and 0 deletions
@@ -0,0 +1,85 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+// Mock next-intl — returns the key so tests are locale-agnostic
+vi.mock('next-intl', () => ({
+  useTranslations: () => (key: string) => key,
+}));
+
+// Must import after mocks
+import { CalculatorWidget } from './calculator-widget';
+
+const defaultProps = {
+  instanceId: 'calc-1',
+  config: {},
+  isEditMode: false,
+};
+
+describe('CalculatorWidget', () => {
+  it('renders with initial display "0"', () => {
+    render(<CalculatorWidget {...defaultProps} />);
+    const display = screen.getByLabelText('Anzeige');
+    expect(display).toHaveTextContent('0');
+  });
+
+  it('calculates 7 + 3 = 10', () => {
+    render(<CalculatorWidget {...defaultProps} />);
+
+    fireEvent.click(screen.getByRole('button', { name: '7' }));
+    fireEvent.click(screen.getByRole('button', { name: '+' }));
+    fireEvent.click(screen.getByRole('button', { name: '3' }));
+    fireEvent.click(screen.getByRole('button', { name: /gleich/i }));
+
+    expect(screen.getByLabelText('Anzeige')).toHaveTextContent('10');
+  });
+
+  it('calculates 8 × 2 = 16', () => {
+    render(<CalculatorWidget {...defaultProps} />);
+
+    fireEvent.click(screen.getByRole('button', { name: '8' }));
+    fireEvent.click(screen.getByRole('button', { name: '×' }));
+    fireEvent.click(screen.getByRole('button', { name: '2' }));
+    fireEvent.click(screen.getByRole('button', { name: /gleich/i }));
+
+    expect(screen.getByLabelText('Anzeige')).toHaveTextContent('16');
+  });
+
+  it('shows "Fehler" on division by zero', () => {
+    render(<CalculatorWidget {...defaultProps} />);
+
+    fireEvent.click(screen.getByRole('button', { name: '5' }));
+    fireEvent.click(screen.getByRole('button', { name: '÷' }));
+    fireEvent.click(screen.getByRole('button', { name: '0' }));
+    fireEvent.click(screen.getByRole('button', { name: /gleich/i }));
+
+    expect(screen.getByLabelText('Anzeige')).toHaveTextContent('Fehler');
+  });
+
+  it('handles keyboard input: 5 * 6 Enter = 30', () => {
+    render(<CalculatorWidget {...defaultProps} />);
+
+    const container = screen.getByRole('application');
+
+    fireEvent.keyDown(container, { key: '5' });
+    fireEvent.keyDown(container, { key: '*' });
+    fireEvent.keyDown(container, { key: '6' });
+    fireEvent.keyDown(container, { key: 'Enter' });
+
+    expect(screen.getByLabelText('Anzeige')).toHaveTextContent('30');
+  });
+
+  it('handles decimal comma: 1,5 + 1,5 = 3', () => {
+    render(<CalculatorWidget {...defaultProps} />);
+
+    fireEvent.click(screen.getByRole('button', { name: '1' }));
+    fireEvent.click(screen.getByRole('button', { name: ',' }));
+    fireEvent.click(screen.getByRole('button', { name: '5' }));
+    fireEvent.click(screen.getByRole('button', { name: '+' }));
+    fireEvent.click(screen.getByRole('button', { name: '1' }));
+    fireEvent.click(screen.getByRole('button', { name: ',' }));
+    fireEvent.click(screen.getByRole('button', { name: '5' }));
+    fireEvent.click(screen.getByRole('button', { name: /gleich/i }));
+
+    expect(screen.getByLabelText('Anzeige')).toHaveTextContent('3');
+  });
+});