Fix #1912: Added test for SecondaryCard component

frontend/__tests__/unit/components/SecondaryCard.test.tsx

@@ -0,0 +1,142 @@
+import { faUser } from '@fortawesome/free-solid-svg-icons'
+import { render, screen } from '@testing-library/react'
+import SecondaryCard from 'components/SecondaryCard'
+
+describe('SecondaryCard Component', () => {
+  const defaultProps = {
+    title: 'Test Title',
+    icon: faUser,
+    children: <p>Test children</p>,
+    className: 'custom-class',
+  }
+
+  describe('Renders successfully with minimal required props', () => {
+    it('renders successfully with only a title', () => {
+      render(<SecondaryCard title={defaultProps.title} />)
+      expect(screen.getByText(defaultProps.title)).toBeInTheDocument()
+    })
+
+    it('renders successfully with only children', () => {
+      render(<SecondaryCard>{defaultProps.children}</SecondaryCard>)
+      expect(screen.getByText('Test children')).toBeInTheDocument()
+    })
+
+    it('renders successfully with no props at all', () => {
+      const { container } = render(<SecondaryCard />)
+      expect(container.querySelector('.mb-8')).toBeInTheDocument()
+    })
+  })
+
+  describe('Conditional rendering logic', () => {
+    it('does not render the h2 title element when title prop is not provided', () => {
+      render(<SecondaryCard />)
+      const titleElement = screen.queryByRole('heading')
+      expect(titleElement).not.toBeInTheDocument()
+    })
+
+    it('renders the h2 title element when title prop is provided', () => {
+      render(<SecondaryCard title={defaultProps.title} />)
+      const titleElement = screen.getByRole('heading', { name: 'Test Title' })
+      expect(titleElement).toBeInTheDocument()
+    })
+
+    it('does not render the icon when icon prop is not provided', () => {
+      const { container } = render(<SecondaryCard title={defaultProps.title} />)
+      const iconElement = container.querySelector('svg')
+      expect(iconElement).not.toBeInTheDocument()
+    })
+  })
+
+  describe('Prop-based behavior - different props affect output', () => {
+    it('renders a title and an icon when both are provided', () => {
+      render(<SecondaryCard title={defaultProps.title} icon={defaultProps.icon} />)
+      expect(screen.getByText(defaultProps.title)).toBeInTheDocument()
+      expect(screen.getByRole('img', { hidden: true })).toBeInTheDocument()
+    })
+
+    it('renders children content correctly', () => {
+      render(<SecondaryCard>{defaultProps.children}</SecondaryCard>)
+      expect(screen.getByText('Test children')).toBeInTheDocument()
+    })
+  })
+
+  describe('Text and content rendering', () => {
+    it('displays the correct text for the title', () => {
+      const customTitle = 'My Custom Title'
+      render(<SecondaryCard title={customTitle} />)
+      expect(screen.getByText(customTitle)).toBeInTheDocument()
+    })
+
+    it('renders complex children nodes', () => {
+      const complexChildren = (
+        <div>
+          <span>Nested Content</span>
+          <button>Click Me</button>
+        </div>
+      )
+      render(<SecondaryCard>{complexChildren}</SecondaryCard>)
+      expect(screen.getByText('Nested Content')).toBeInTheDocument()
+      expect(screen.getByRole('button', { name: 'Click Me' })).toBeInTheDocument()
+    })
+  })
+
+  describe('Handles edge cases and invalid inputs', () => {
+    it('handles an empty string for the title prop by not rendering the title element', () => {
+      render(<SecondaryCard title="" />)
+      const titleElement = screen.queryByRole('heading')
+      expect(titleElement).not.toBeInTheDocument()
+    })
+
+    it('handles null children gracefully by rendering nothing for the children', () => {
+      const { container } = render(<SecondaryCard title="Title">{null}</SecondaryCard>)
+      const cardElement = container.firstChild
+      const titleElement = screen.getByRole('heading', { name: 'Title' })
+      expect(titleElement).toBeInTheDocument()
+      expect(cardElement.childNodes.length).toBe(1)
+    })
+  })
+
+  describe('Accessibility roles and labels', () => {
+    it('renders the title within an h2 tag for proper heading structure', () => {
+      render(<SecondaryCard title={defaultProps.title} />)
+      const heading = screen.getByRole('heading', { level: 2, name: defaultProps.title })
+      expect(heading).toBeInTheDocument()
+    })
+  })
+
+  describe('DOM structure / classNames / styles', () => {
+    it('applies the base and custom classNames to the root div', () => {
+      const { container } = render(<SecondaryCard className={defaultProps.className} />)
+      const cardElement = container.firstChild
+      expect(cardElement).toHaveClass(
+        'mb-8',
+        'rounded-lg',
+        'bg-gray-100',
+        'p-6',
+        'shadow-md',
+        'dark:bg-gray-800'
+      )
+      expect(cardElement).toHaveClass(defaultProps.className)
+    })
+
+    it('has the correct classNames for the h2 title element', () => {
+      render(<SecondaryCard title={defaultProps.title} />)
+      const titleElement = screen.getByText(defaultProps.title)
+      expect(titleElement).toHaveClass(
+        'mb-4',
+        'flex',
+        'flex-row',
+        'items-center',
+        'gap-2',
+        'text-2xl',
+        'font-semibold'
+      )
+    })
+
+    it('has the correct className for the icon', () => {
+      render(<SecondaryCard title={defaultProps.title} icon={defaultProps.icon} />)
+      const iconElement = screen.getByRole('img', { hidden: true })
+      expect(iconElement).toHaveClass('h-5', 'w-5')
+    })
+  })
+})