TEST: add test for Footer, Navbar and ProfileIcon

.gitignore

@@ -7,7 +7,7 @@
 
 # testing
 /coverage
-/__tests__/__snapshots__
+./__tests__/__snapshots__
 
 # next.js
 /.next/

__tests__/components/Footer.test.tsx

@@ -0,0 +1,19 @@
+import { Footer } from '@/components/Footer/Footer';
+import { render } from '@testing-library/react';
+
+describe('Footer', () => {
+    it('should render', () => {
+        const { container } = render(<Footer />);
+        expect(container).toHaveTextContent('The contents of this website are deployed from this open sourced repo');
+    });
+
+    it('should have a link to the repo', () => {
+        const { container } = render(<Footer />);
+        expect(container.querySelector('a')).toHaveAttribute('href', '#');
+    });
+
+    it('should have a link to the repo', () => {
+        const { container } = render(<Footer />);
+        expect(container.querySelector('a')).toHaveAttribute('target', '_blank');
+    });
+});

__tests__/components/Navbar.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { Navbar } from '@/components/Navbar/Navbar';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
+
+describe('Navbar', () => {
+    it('should render', () => {
+        const { container } = render(<Navbar />);
+        expect(container).toHaveTextContent('URL Shortener');
+        expect(container.querySelector('a')).toHaveAttribute('href', '#');
+    });
+
+    it('should have dropdown menu', () => {
+        const { container } = render(<Navbar />);
+        expect(container.querySelector('ul')).toHaveTextContent('Profile');
+        expect(container.querySelector('ul')).toHaveTextContent('Dashboard');
+        expect(container.querySelector('ul')).toHaveTextContent('Settings');
+    });
+
+    it('should toggle menu', () => {
+        const { container } = render(<Navbar />);
+        const button = container.querySelector('button');
+        expect(button).toHaveTextContent('Sunny');
+        button?.click();
+        expect(container.querySelector('ul')).toHaveClass('lg:flex space-x-4');
+    });
+});

__tests__/components/ProfileIcon.test.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import ProfileIcon from '@/components/ProfileIcon/ProfileIcon';
+
+describe('ProfileIcon', () => {
+    it('should render', () => {
+        const { container } = render(<ProfileIcon firstName="Sunny" lastName="Sahsi" size={50} />);
+        expect(container).toMatchSnapshot();
+    });
+
+    it('should have the correct initials', () => {
+        const { container } = render(<ProfileIcon firstName="Sunny" lastName="Sahsi" size={50} />);
+        expect(container).toHaveTextContent('SS');
+    });
+});

src/components/ProfileIcon/ProfileIcon.tsx

@@ -1,4 +1,3 @@
-// components/ProfileIcon.tsx
 import React from 'react';
 
 interface ProfileIconProps {