test(CAlertHeading, CAlertLink): align to canonical cross-framework cases (#492)

Rewrite the alert subcomponent suites with behavior-named it() descriptions
shared verbatim with Vue (render the element/class, render content, apply a
custom class, and — for the heading — render as a custom element). Replaces
snapshot-only coverage with explicit assertions.

Author: mrholek

packages/coreui-react/src/components/alert/__tests__/CAlertHeading.spec.tsx

@@ -3,18 +3,25 @@ import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { CAlertHeading } from '../index'
 
-test('loads and displays CAlertHeading component', async () => {
-  const { container } = render(<CAlertHeading>Test</CAlertHeading>)
-  expect(container).toMatchSnapshot()
-})
+describe('CAlertHeading', () => {
+  it('should render an alert heading', () => {
+    const { container } = render(<CAlertHeading>Test</CAlertHeading>)
+    expect(container.firstChild).toHaveClass('alert-heading')
+    expect(container.firstChild?.nodeName).toBe('H4')
+  })
+
+  it('should render its content', () => {
+    const { getByText } = render(<CAlertHeading>Hello World!</CAlertHeading>)
+    expect(getByText('Hello World!')).toBeInTheDocument()
+  })
+
+  it('should apply a custom class name', () => {
+    const { container } = render(<CAlertHeading className="bazinga">Test</CAlertHeading>)
+    expect(container.firstChild).toHaveClass('bazinga')
+  })
 
-test('CAlertHeading customize', async () => {
-  const { container } = render(
-    <CAlertHeading as="h3" className="bazinga">
-      Test
-    </CAlertHeading>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('alert-heading')
+  it('should render as a custom element', () => {
+    const { container } = render(<CAlertHeading as="h2">Test</CAlertHeading>)
+    expect(container.firstChild?.nodeName).toBe('H2')
+  })
 })

packages/coreui-react/src/components/alert/__tests__/CAlertLink.spec.tsx

@@ -3,18 +3,20 @@ import { render } from '@testing-library/react'
 import '@testing-library/jest-dom'
 import { CAlertLink } from '../index'
 
-test('loads and displays CAlertLink component', async () => {
-  const { container } = render(<CAlertLink>Test</CAlertLink>)
-  expect(container).toMatchSnapshot()
-})
+describe('CAlertLink', () => {
+  it('should render an alert link', () => {
+    const { container } = render(<CAlertLink>Test</CAlertLink>)
+    expect(container.firstChild).toHaveClass('alert-link')
+    expect(container.firstChild?.nodeName).toBe('A')
+  })
+
+  it('should render its content', () => {
+    const { getByText } = render(<CAlertLink>Hello World!</CAlertLink>)
+    expect(getByText('Hello World!')).toBeInTheDocument()
+  })
 
-test('CAlertLink customize', async () => {
-  const { container } = render(
-    <CAlertLink className="bazinga" href="/bazinga">
-      Test
-    </CAlertLink>
-  )
-  expect(container).toMatchSnapshot()
-  expect(container.firstChild).toHaveClass('bazinga')
-  expect(container.firstChild).toHaveClass('alert-link')
+  it('should apply a custom class name', () => {
+    const { container } = render(<CAlertLink className="bazinga">Test</CAlertLink>)
+    expect(container.firstChild).toHaveClass('bazinga')
+  })
 })