diff --git a/src/Card/BaseCard.jsx b/src/Card/BaseCard.jsx
index e5d42e51b1..088cb5aae1 100644
--- a/src/Card/BaseCard.jsx
+++ b/src/Card/BaseCard.jsx
@@ -14,9 +14,9 @@ const BaseCard = React.forwardRef(
bgColor,
textColor,
borderColor,
- hasBody = false,
+ hasBody,
children,
- as: Component = 'div',
+ as: Component,
...props
},
ref,
diff --git a/src/Card/tests/BaseCard.test.jsx b/src/Card/tests/BaseCard.test.jsx
new file mode 100644
index 0000000000..e555793191
--- /dev/null
+++ b/src/Card/tests/BaseCard.test.jsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+
+import BaseCard from '../BaseCard';
+
+describe('BaseCard Component', () => {
+ it('renders a default card', () => {
+ render(Default Card Content);
+ const cardElement = screen.getByText('Default Card Content');
+ expect(cardElement).toBeInTheDocument();
+ expect(cardElement).toHaveClass('card');
+ });
+
+ it('applies the correct background color', () => {
+ render(Card with Background);
+ const cardElement = screen.getByText('Card with Background');
+ expect(cardElement).toHaveClass('bg-primary');
+ });
+
+ it('applies the correct text color', () => {
+ render(Card with Text Color);
+ const cardElement = screen.getByText('Card with Text Color');
+ expect(cardElement).toHaveClass('text-muted');
+ });
+
+ it('applies the correct border color', () => {
+ render(Card with Border Color);
+ const cardElement = screen.getByText('Card with Border Color');
+ expect(cardElement).toHaveClass('border-danger');
+ });
+
+ it('renders children inside CardBody when hasBody is true', () => {
+ render(
+
+ Content in CardBody
+ ,
+ );
+ const cardBodyElement = screen.getByText('Content in CardBody');
+ expect(cardBodyElement).toBeInTheDocument();
+ expect(cardBodyElement.closest('div')).toHaveClass('pgn__card-body');
+ });
+
+ it('renders children directly when hasBody is false', () => {
+ render(
+
+ Direct Content
+ ,
+ );
+ const contentElement = screen.getByText('Direct Content');
+ expect(contentElement).toBeInTheDocument();
+ expect(contentElement.closest('div')).not.toHaveClass('card-body');
+ });
+
+ it('supports a custom tag with the `as` prop', () => {
+ render(
+
+ Custom Tag
+ ,
+ );
+ const sectionElement = screen.getByText('Custom Tag').closest('section');
+ expect(sectionElement).toBeInTheDocument();
+ expect(sectionElement).toHaveClass('card');
+ });
+
+ it('applies additional class names', () => {
+ render(Custom Class);
+ const cardElement = screen.getByText('Custom Class');
+ expect(cardElement).toHaveClass('custom-class');
+ });
+
+ it('uses prefix correctly', () => {
+ render(Prefixed Card);
+ const cardElement = screen.getByText('Prefixed Card');
+ expect(cardElement).toHaveClass('test-prefix-card');
+ });
+
+ it('renders without children', () => {
+ render();
+ const cardElement = document.querySelector('.card');
+ expect(cardElement).toBeInTheDocument();
+ });
+});