Skip to content

Commit 01ef73a

Browse files
refactor: added tests
1 parent ac63c17 commit 01ef73a

File tree

1 file changed

+81
-0
lines changed

1 file changed

+81
-0
lines changed

src/Card/tests/BaseCard.test.jsx

+81
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
import React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import BaseCard from '../BaseCard';
4+
5+
describe('BaseCard Component', () => {
6+
test('renders a default card', () => {
7+
render(<BaseCard>Default Card Content</BaseCard>);
8+
const cardElement = screen.getByText('Default Card Content');
9+
expect(cardElement).toBeInTheDocument();
10+
expect(cardElement).toHaveClass('card');
11+
});
12+
13+
test('applies the correct background color', () => {
14+
render(<BaseCard bgColor="primary">Card with Background</BaseCard>);
15+
const cardElement = screen.getByText('Card with Background');
16+
expect(cardElement).toHaveClass('bg-primary');
17+
});
18+
19+
test('applies the correct text color', () => {
20+
render(<BaseCard textColor="muted">Card with Text Color</BaseCard>);
21+
const cardElement = screen.getByText('Card with Text Color');
22+
expect(cardElement).toHaveClass('text-muted');
23+
});
24+
25+
test('applies the correct border color', () => {
26+
render(<BaseCard borderColor="danger">Card with Border Color</BaseCard>);
27+
const cardElement = screen.getByText('Card with Border Color');
28+
expect(cardElement).toHaveClass('border-danger');
29+
});
30+
31+
test('renders children inside CardBody when hasBody is true', () => {
32+
render(
33+
<BaseCard hasBody>
34+
<span>Content in CardBody</span>
35+
</BaseCard>,
36+
);
37+
const cardBodyElement = screen.getByText('Content in CardBody');
38+
expect(cardBodyElement).toBeInTheDocument();
39+
expect(cardBodyElement.closest('div')).toHaveClass('pgn__card-body');
40+
});
41+
42+
test('renders children directly when hasBody is false', () => {
43+
render(
44+
<BaseCard>
45+
<span>Direct Content</span>
46+
</BaseCard>,
47+
);
48+
const contentElement = screen.getByText('Direct Content');
49+
expect(contentElement).toBeInTheDocument();
50+
expect(contentElement.closest('div')).not.toHaveClass('card-body');
51+
});
52+
53+
test('supports a custom tag with the `as` prop', () => {
54+
render(
55+
<BaseCard as="section">
56+
<span>Custom Tag</span>
57+
</BaseCard>,
58+
);
59+
const sectionElement = screen.getByText('Custom Tag').closest('section');
60+
expect(sectionElement).toBeInTheDocument();
61+
expect(sectionElement).toHaveClass('card');
62+
});
63+
64+
test('applies additional class names', () => {
65+
render(<BaseCard className="custom-class">Custom Class</BaseCard>);
66+
const cardElement = screen.getByText('Custom Class');
67+
expect(cardElement).toHaveClass('custom-class');
68+
});
69+
70+
test('uses prefix correctly', () => {
71+
render(<BaseCard prefix="test-prefix">Prefixed Card</BaseCard>);
72+
const cardElement = screen.getByText('Prefixed Card');
73+
expect(cardElement).toHaveClass('test-prefix-card');
74+
});
75+
76+
test('renders without children', () => {
77+
render(<BaseCard />);
78+
const cardElement = document.querySelector('.card');
79+
expect(cardElement).toBeInTheDocument();
80+
});
81+
});

0 commit comments

Comments
 (0)