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(); + }); +});