ui phase 6

2026-07-19 09:49:25 +03:30
parent 4c70d8e424
commit a438edeeaa
54 changed files with 1766 additions and 475 deletions
@@ -0,0 +1,42 @@
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '../../theme';
+import PaymentStateCard from './PaymentStateCard';
+
+describe('<PaymentStateCard/> component', () => {
+  it('renders the title and icon', () => {
+    const { container } = render(
+      <ThemeProvider>
+        <PaymentStateCard icon="error" tone="var(--bal-error)" title="Payment failed" />
+      </ThemeProvider>,
+    );
+    expect(screen.getByText('Payment failed')).toBeInTheDocument();
+    expect(container.querySelector('[data-icon="error"]')).toBeInTheDocument();
+  });
+
+  it('renders the body only when provided', () => {
+    const { rerender } = render(
+      <ThemeProvider>
+        <PaymentStateCard icon="pending" tone="var(--bal-warning)" title="Waiting" body="Hang tight" />
+      </ThemeProvider>,
+    );
+    expect(screen.getByText('Hang tight')).toBeInTheDocument();
+
+    rerender(
+      <ThemeProvider>
+        <PaymentStateCard icon="pending" tone="var(--bal-warning)" title="Waiting" />
+      </ThemeProvider>,
+    );
+    expect(screen.queryByText('Hang tight')).not.toBeInTheDocument();
+  });
+
+  it('renders the actions slot', () => {
+    render(
+      <ThemeProvider>
+        <PaymentStateCard icon="verified" tone="var(--bal-success)" title="Done">
+          <button type="button">Continue</button>
+        </PaymentStateCard>
+      </ThemeProvider>,
+    );
+    expect(screen.getByRole('button', { name: 'Continue' })).toBeInTheDocument();
+  });
+});