test: (SectionHeader) add section header test

lib/components/molecules/SectionHeader/SectionHeader.spec.tsx

@@ -0,0 +1,33 @@
+import { screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import React from 'react';
+import SectionHeader from '.';
+import { render } from '../../__test__/test-utils';
+
+describe('SectionHeader', () => {
+  it('matches snapshot', () => {
+    const { container } = render(
+      <SectionHeader title="Test" description="This is a test" />
+    );
+    expect(container).toMatchSnapshot();
+  });
+
+  it('renders correctly with title and description', () => {
+    render(<SectionHeader title="Test" description="This is a test" />);
+    expect(screen.getByText('Test')).toBeInTheDocument();
+    expect(screen.getByText('This is a test')).toBeInTheDocument();
+  });
+
+  it('renders only title when no description is provided', () => {
+    render(<SectionHeader title="Test Title" />);
+    expect(screen.getByText('Test Title')).toBeInTheDocument();
+    expect(screen.queryByText('This is a test')).not.toBeInTheDocument();
+  });
+
+  it('returns null when no title is provided', () => {
+    const { container } = render(
+      <SectionHeader description="Description only" />
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+});

lib/components/molecules/SectionHeader/__snapshots__/SectionHeader.spec.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SectionHeader matches snapshot 1`] = `
+<div>
+  <div
+    class="css-view-175oi2r r-marginBottom-1ifxtd0"
+  >
+    <div
+      class="css-text-146c3p1 r-fontSize-1ui5ee8 r-marginBottom-5oul0u"
+      dir="auto"
+      style="font-weight: 700; color: rgb(0, 0, 0);"
+    >
+      Test
+    </div>
+    <div
+      class="css-text-146c3p1 r-fontSize-1x35g6"
+      dir="auto"
+      style="color: rgba(0, 0, 0, 0.8);"
+    >
+      This is a test
+    </div>
+  </div>
+</div>
+`;