diff --git a/.gitignore b/.gitignore
index 0afa3a3..eef19c9 100644
--- a/.gitignore
+++ b/.gitignore
@@ -7,7 +7,7 @@
# testing
/coverage
-/__tests__/__snapshots__
+./__tests__/__snapshots__
# next.js
/.next/
diff --git a/__tests__/components/Footer.test.tsx b/__tests__/components/Footer.test.tsx
new file mode 100644
index 0000000..a920cc8
--- /dev/null
+++ b/__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();
+ 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();
+ expect(container.querySelector('a')).toHaveAttribute('href', '#');
+ });
+
+ it('should have a link to the repo', () => {
+ const { container } = render();
+ expect(container.querySelector('a')).toHaveAttribute('target', '_blank');
+ });
+});
diff --git a/__tests__/components/Navbar.test.tsx b/__tests__/components/Navbar.test.tsx
new file mode 100644
index 0000000..5c24100
--- /dev/null
+++ b/__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();
+ expect(container).toHaveTextContent('URL Shortener');
+ expect(container.querySelector('a')).toHaveAttribute('href', '#');
+ });
+
+ it('should have dropdown menu', () => {
+ const { container } = render();
+ 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();
+ const button = container.querySelector('button');
+ expect(button).toHaveTextContent('Sunny');
+ button?.click();
+ expect(container.querySelector('ul')).toHaveClass('lg:flex space-x-4');
+ });
+});
diff --git a/__tests__/components/ProfileIcon.test.tsx b/__tests__/components/ProfileIcon.test.tsx
new file mode 100644
index 0000000..fe2ba6e
--- /dev/null
+++ b/__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();
+ expect(container).toMatchSnapshot();
+ });
+
+ it('should have the correct initials', () => {
+ const { container } = render();
+ expect(container).toHaveTextContent('SS');
+ });
+});
diff --git a/src/components/ProfileIcon/ProfileIcon.tsx b/src/components/ProfileIcon/ProfileIcon.tsx
index c0208fb..e06f9b4 100644
--- a/src/components/ProfileIcon/ProfileIcon.tsx
+++ b/src/components/ProfileIcon/ProfileIcon.tsx
@@ -1,4 +1,3 @@
-// components/ProfileIcon.tsx
import React from 'react';
interface ProfileIconProps {