tests

src/pages/ComponentsPage/components/CardComponents.tsx

@@ -12,7 +12,7 @@ interface CardComponentsProps extends PropsWithClassName, PropsWithTestId {}
 
 const CardComponents = ({
   className,
-  testId = 'components-badge',
+  testId = 'components-card',
 }: CardComponentsProps): JSX.Element => {
   const columnHelper = createColumnHelper<ComponentProperty>();
   const cardData: ComponentProperty[] = [

src/pages/ComponentsPage/components/__tests__/CardComponents.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from 'test/test-utils';
+import CardComponents from '../CardComponents';
+
+describe('CardComponents', () => {
+  it('should render successfully', async () => {
+    // ARRANGE
+    render(<CardComponents />);
+    await screen.findByTestId('components-card');
+
+    // ASSERT
+    expect(screen.getByTestId('components-card')).toBeDefined();
+  });
+
+  it('should use custom testId', async () => {
+    // ARRANGE
+    render(<CardComponents testId="custom-testId" />);
+    await screen.findByTestId('custom-testId');
+
+    // ASSERT
+    expect(screen.getByTestId('custom-testId')).toBeDefined();
+  });
+
+  it('should use custom className', async () => {
+    // ARRANGE
+    render(<CardComponents className="custom-className" />);
+    await screen.findByTestId('components-card');
+
+    // ASSERT
+    expect(screen.getByTestId('components-card').classList).toContain('custom-className');
+  });
+});