full upgrade (#31)

* ✨ chore: update CI workflow to include testing and multi-arch build (#29)

* ✨ chore: remove unused dependencies from package-lock.json and updated to a better local dev environment (#30)

* ✨ test: add unit tests

* ✨ test: add unit tests for whole project

* ✨ feat: add whatwg-fetch for improved fetch support

* ✨ chore: update Node.js version to 22 in workflow

* ✨ refactor: update types and improve email handling tests

* ✨ refactor: remove unused imports

* ✨ fix: normalize image name to lowercase in workflows

* ✨ fix: ensure Docker image names are consistently lowercase

* ✨ chore: update

* ✨ chore: update base URL to use secret variable

* ✨ chore: update to login to ghcr

* ✨ fix: add missing 'fi' to close if statement in workflow

app/__tests__/components/Contact.test.tsx

@@ -0,0 +1,29 @@
+import { render, screen, fireEvent } from '@testing-library/react';
+import Contact from '@/app/components/Contact';
+import '@testing-library/jest-dom';
+
+// Mock the fetch function
+global.fetch = jest.fn(() =>
+  Promise.resolve({
+    json: () => Promise.resolve({ message: 'Email sent' }),
+  })
+) as jest.Mock;
+
+describe('Contact', () => {
+  it('renders the contact form', () => {
+    render(<Contact />);
+    expect(screen.getByPlaceholderText('Name')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Email')).toBeInTheDocument();
+    expect(screen.getByPlaceholderText('Message')).toBeInTheDocument();
+  });
+
+  it('submits the form', async () => {
+    render(<Contact />);
+    fireEvent.change(screen.getByPlaceholderText('Name'), { target: { value: 'John Doe' } });
+    fireEvent.change(screen.getByPlaceholderText('Email'), { target: { value: 'john@example.com' } });
+    fireEvent.change(screen.getByPlaceholderText('Message'), { target: { value: 'Hello!' } });
+    fireEvent.click(screen.getByText('Send'));
+
+    expect(await screen.findByText('Email sent')).toBeInTheDocument();
+  });
+});

app/__tests__/components/Footer.test.tsx

@@ -0,0 +1,10 @@
+import { render, screen } from '@testing-library/react';
+import Footer from '@/app/components/Footer';
+import '@testing-library/jest-dom';
+
+describe('Footer', () => {
+  it('renders the footer', () => {
+    render(<Footer />);
+    expect(screen.getByText('Connect with me on social platforms:')).toBeInTheDocument();
+  });
+});

app/__tests__/components/Header.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from '@testing-library/react';
+import Header from '@/app/components/Header';
+import '@testing-library/jest-dom';
+
+describe('Header', () => {
+  it('renders the header', () => {
+    render(<Header />);
+    expect(screen.getByText('Dennis Konkol')).toBeInTheDocument();
+    
+    const aboutButtons = screen.getAllByText('About');
+    expect(aboutButtons.length).toBeGreaterThan(0);
+
+    const projectsButtons = screen.getAllByText('Projects');
+    expect(projectsButtons.length).toBeGreaterThan(0);
+
+    const contactButtons = screen.getAllByText('Contact');
+    expect(contactButtons.length).toBeGreaterThan(0);
+  });
+
+  it('renders the mobile header', () => {
+    render(<Header />);
+    const openMenuButton = screen.getByLabelText('Open menu');
+    expect(openMenuButton).toBeInTheDocument();
+
+    const closeMenuButton = screen.getByLabelText('Close menu');
+    expect(closeMenuButton).toBeInTheDocument();
+  });
+});

app/__tests__/components/Hero.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from '@testing-library/react';
+import Hero from '@/app/components/Hero';
+import '@testing-library/jest-dom';
+
+describe('Hero', () => {
+  it('renders the hero section', () => {
+    render(<Hero />);
+    expect(screen.getByText('Hi, I’m Dennis')).toBeInTheDocument();
+    expect(screen.getByText('Student & Software Engineer')).toBeInTheDocument();
+    expect(screen.getByText('Based in Osnabrück, Germany')).toBeInTheDocument();
+    expect(screen.getByText('Passionate about technology, coding, and solving real-world problems. I enjoy building innovative solutions and continuously expanding my knowledge.')).toBeInTheDocument();
+    expect(screen.getByText('Currently working on exciting projects that merge creativity with functionality. Always eager to learn and collaborate!')).toBeInTheDocument();
+    expect(screen.getByAltText('Image of Dennis')).toBeInTheDocument();
+  });
+});

app/__tests__/components/Projects.test.tsx

@@ -0,0 +1,44 @@
+import { render, screen, waitFor } from '@testing-library/react';
+import Projects from '@/app/components/Projects';
+import '@testing-library/jest-dom';
+import { mockFetch } from '@/app/__tests__/__mocks__/mock-fetch';
+
+
+describe('Projects', () => {
+    beforeAll(() => {
+      process.env.GHOST_API_URL = 'http://localhost:2368';
+      process.env.GHOST_API_KEY = 'some-key';
+      global.fetch = mockFetch({
+        posts: [
+          {
+            id: '67ac8dfa709c60000117d312',
+            title: 'Just Doing Some Testing',
+            meta_description: 'Hello bla bla bla bla',
+            slug: 'just-doing-some-testing',
+            updated_at: '2025-02-13T14:25:38.000+00:00',
+          },
+          {
+            id: '67aaffc3709c60000117d2d9',
+            title: 'Blockchain Based Voting System',
+            meta_description: 'This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.',
+            slug: 'blockchain-based-voting-system',
+            updated_at: '2025-02-13T16:54:42.000+00:00',
+          },
+        ],
+      });
+    });
+
+  it('renders the projects section', async () => {
+    render(<Projects />);
+    
+    expect(await screen.findByText('Projects')).toBeInTheDocument();
+    
+    await waitFor(() => {
+      expect(screen.getByText('Just Doing Some Testing')).toBeInTheDocument();
+      expect(screen.getByText('Hello bla bla bla bla')).toBeInTheDocument();
+      expect(screen.getByText('Blockchain Based Voting System')).toBeInTheDocument();
+      expect(screen.getByText('This project aims to revolutionize voting systems by leveraging blockchain to ensure security, transparency, and immutability.')).toBeInTheDocument();
+      expect(screen.getByText('More to come')).toBeInTheDocument();
+    });
+  });
+});