hamid
43 lines
1.4 KiB
TypeScript
43 lines
1.4 KiB
TypeScript
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();
|
|
});
|
|
});
|