From 814b4fe0ae776632047e9536cb456b50a37ad0f8 Mon Sep 17 00:00:00 2001
From: MartinBraquet <martin.braquet@gmail.com>
Date: Mon, 4 Aug 2025 14:25:44 +0200
Subject: [PATCH] Add tests

---
 .github/workflows/ci.yaml               | 10 +++++++++-
 tests/LoadingSpinner.test.tsx           | 14 +++++---------
 tests/playwright/LoadingSpinner.test.ts |  8 ++++++++
 3 files changed, 22 insertions(+), 10 deletions(-)
 create mode 100644 tests/playwright/LoadingSpinner.test.ts

diff --git a/.github/workflows/ci.yaml b/.github/workflows/ci.yaml
index 447a5501..21fcda71 100644
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@@ -42,6 +42,14 @@ jobs:
       # Optional: Playwright E2E tests
       - name: Install Playwright deps
         run: npx playwright install --with-deps
+#        npm install @playwright/test
+#       npx playwright install
 
       - name: Run E2E tests
-        run: npx playwright test
+        run: |
+          npm start &
+          npx wait-on http://localhost:3000
+          npx playwright test tests/playwright
+          SERVER_PID=$(fuser -k 3000/tcp)
+          echo $SERVER_PID
+          kill $SERVER_PID
diff --git a/tests/LoadingSpinner.test.tsx b/tests/LoadingSpinner.test.tsx
index e75836f0..d8c1be0d 100644
--- a/tests/LoadingSpinner.test.tsx
+++ b/tests/LoadingSpinner.test.tsx
@@ -1,17 +1,13 @@
-import { render, screen } from '@testing-library/react';
+import {render, screen} from '@testing-library/react';
 import LoadingSpinner from '../lib/client/LoadingSpinner';
+import '@testing-library/jest-dom';
 
 describe('LoadingSpinner', () => {
   it('renders a loading spinner', () => {
-    render(<LoadingSpinner />);
-    
-    // Check if the spinner container is rendered with the correct classes
-    const spinnerContainer = screen.getByTestId('spinner-container');
-    expect(spinnerContainer).toBeInTheDocument();
-    expect(spinnerContainer).toHaveClass('flex', 'items-center', 'justify-center', 'min-h-screen');
-    
+    render(<LoadingSpinner/>);
+
     // Check if the spinner has the correct classes
     const spinner = screen.getByTestId('spinner');
-    expect(spinner).toHaveClass('w-12', 'h-12', 'border-4', 'border-gray-300', 'border-t-gray-800', 'rounded-full', 'animate-spin');
+    expect(spinner).toHaveClass('animate-spin');
   });
 });
diff --git a/tests/playwright/LoadingSpinner.test.ts b/tests/playwright/LoadingSpinner.test.ts
new file mode 100644
index 00000000..9df680e3
--- /dev/null
+++ b/tests/playwright/LoadingSpinner.test.ts
@@ -0,0 +1,8 @@
+import {expect, test} from '@playwright/test';
+
+test('shows loading spinner on load', async ({page}) => {
+  await page.goto('http://localhost:3000/profiles'); // Adjust this to your route
+
+  const spinner = page.locator('[data-testid="spinner"]');
+  await expect(spinner).toBeVisible();
+});