feat(homepagePlaceholders): added unit tests

package.json

@@ -45,6 +45,7 @@
     "@tailwindcss/typography": "^0.5.7",
     "@testing-library/jest-dom": "^6.6.1",
     "@testing-library/react": "^16.0.1",
+    "@types/jest": "^29.5.13",
     "@types/lodash": "^4.14.202",
     "@types/mdx": "^2.0.11",
     "@types/react": "^18.2.21",

src/lib/home/Components/CarouselBanner/CarouselBanner.test.tsx

@@ -1,12 +1,12 @@
-// ExampleComponent.test.tsx
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import CarouselBanner from './CarouselBanner';
 
-test('renders Example Component text', () => {
-  render(<CarouselBanner />);
-
-  // Check if the component renders the expected text
-  const headingElement = screen.getByText(/Carousel Banner/i);
-  expect(headingElement).toBeInTheDocument();
+describe('CarouselBanner Component', () => {
+  test('renders the CarouselBanner component', () => {
+    render(<CarouselBanner />);
+    const element = screen.getByTestId('carousel-banner');
+    expect(element).toBeInTheDocument();
+  });
 });

src/lib/home/Components/CarouselBanner/CarouselBanner.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 
 const CarouselBanner: React.FC = () => {
   return (
-    <div className="carousel-banner text-center p-4">
+    <div
+      data-testid="carousel-banner"
+      className="carousel-banner text-center p-4"
+    >
       <h1 className="text-2xl font-bold">Carousel Banner</h1>
     </div>
   );

src/lib/home/Components/ContentSpotlight/ContentSpotlight.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ContentSpotlight from './ContentSpotlight';
+
+describe('ContentSpotlight Component', () => {
+  test('renders the CarouselBanner component', () => {
+    render(<ContentSpotlight />);
+    const element = screen.getByTestId('content-spotlight');
+    expect(element).toBeInTheDocument();
+  });
+});

src/lib/home/Components/ContentSpotlight/ContentSpotlight.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 
 const ContentSpotlight: React.FC = () => {
   return (
-    <div className="content-spotlight   text-center p-4">
+    <div
+      data-testid="content-spotlight"
+      className="content-spotlight   text-center p-4"
+    >
       <h1 className="text-2xl font-bold">Content Spotlight</h1>
     </div>
   );

src/lib/home/Components/PhotoDivider/PhotoDivider.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import PhotoDivider from './PhotoDivider';
+
+describe('PhotoDivider Component', () => {
+  test('renders the PhotoDivider component', () => {
+    render(<PhotoDivider />);
+    const element = screen.getByTestId('photo-divider');
+    expect(element).toBeInTheDocument();
+  });
+});

src/lib/home/Components/PhotoDivider/PhotoDivider.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const PhotoDivider: React.FC = () => {
   return (
-    <div className="photo-divider text-center p-4">
+    <div data-testid="photo-divider" className="photo-divider text-center p-4">
       <h1 className="text-2xl font-bold">Photo Divider</h1>
     </div>
   );

src/lib/home/Components/QuickLinks/QuickLinks.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import QuickLinks from './QuickLinks';
+
+describe('PhotoDivider Component', () => {
+  test('renders the PhotoDivider component', () => {
+    render(<QuickLinks />);
+    const element = screen.getByTestId('quick-links');
+    expect(element).toBeInTheDocument();
+  });
+});

src/lib/home/Components/QuickLinks/QuickLinks.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const QuickLinks: React.FC = () => {
   return (
-    <div className="quick-links text-center p-4">
+    <div data-testid="quick-links" className="quick-links text-center p-4">
       <h1 className="text-2xl font-bold">Quick Links</h1>
     </div>
   );

src/lib/home/Components/QuoteSpotlight/QuoteSpotlight.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import QuoteSpotlight from './QuoteSpotlight';
+
+describe('PhotoDivider Component', () => {
+  test('renders the PhotoDivider component', () => {
+    render(<QuoteSpotlight />);
+    const element = screen.getByTestId('quote-spotlight');
+    expect(element).toBeInTheDocument();
+  });
+});

src/lib/home/Components/QuoteSpotlight/QuoteSpotlight.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 
 const QuoteSpotlight: React.FC = () => {
   return (
-    <div className="quote-spotlight text-center p-4">
+    <div
+      data-testid="quote-spotlight"
+      className="quote-spotlight text-center p-4"
+    >
       <h1 className="text-2xl font-bold">Quote Spotlight</h1>
     </div>
   );

src/lib/home/Components/ResourcesCallout/ResourcesCallout.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import ResourcesCallout from './ResourcesCallout';
+
+describe('PhotoDivider Component', () => {
+  test('renders the PhotoDivider component', () => {
+    render(<ResourcesCallout />);
+    const element = screen.getByTestId('resources-callout');
+    expect(element).toBeInTheDocument();
+  });
+});

src/lib/home/Components/ResourcesCallout/ResourcesCallout.tsx

@@ -2,7 +2,10 @@ import React from 'react';
 
 const ResourcesCallout: React.FC = () => {
   return (
-    <div className="resources-callout text-center p-4">
+    <div
+      data-testid="resources-callout"
+      className="resources-callout text-center p-4"
+    >
       <h1 className="text-2xl font-bold">Resources Callout</h1>
     </div>
   );

tsconfig.json

@@ -1,11 +1,7 @@
 {
   "compilerOptions": {
     "target": "es6",
-    "lib": [
-      "dom",
-      "dom.iterable",
-      "esnext"
-    ],
+    "lib": ["dom", "dom.iterable", "esnext"],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -19,23 +15,14 @@
     "jsx": "preserve",
     "incremental": true,
     "paths": {
-      "@/*": [
-        "./src/*"
-      ]
+      "@/*": ["./src/*"]
     },
     "plugins": [
       {
         "name": "next"
       }
     ]
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ],
-  "exclude": [
-    "node_modules"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules", "**/*.test.ts"]
 }