test: add playwright with basic tests for home page

app/components/Analytics/Analytics.tsx

@@ -0,0 +1,7 @@
+import { Paper } from '@mui/material';
+
+export function Analytics() {
+  return (
+    <Paper sx={{ width: '100%', height: 'calc(100vh - 50px)' }}>To do</Paper>
+  );
+}

app/page.spec.ts

@@ -0,0 +1,37 @@
+import { expect, test } from '@playwright/test';
+import 'dotenv/config';
+
+test.describe('Home component tests', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto(`http://localhost:${process.env.PORT}/`);
+  });
+
+  test('should display Dashboard content by default', async ({ page }) => {
+    await expect(page.locator('text=Dashboard')).toBeVisible();
+  });
+
+  test('should switch to Dashboard content when Dashboard tab is clicked', async ({
+    page
+  }) => {
+    await page.click('text=Analytics');
+    await page.click('text=Dashboard');
+
+    await expect(page.locator('text=Dashboard')).toBeVisible();
+  });
+
+  test('should switch to Analytics content when Analytics tab is clicked', async ({
+    page
+  }) => {
+    await page.click('text=Analytics');
+
+    await expect(page.locator('text=Analytics')).toBeVisible();
+  });
+
+  test('should switch to Settings content when Settings tab is clicked', async ({
+    page
+  }) => {
+    await page.click('text=Settings');
+
+    await expect(page.locator('text=Settings')).toBeVisible();
+  });
+});

app/page.tsx

@@ -1,20 +1,13 @@
 'use client';
 
 import { TabContext, TabList, TabPanel } from '@mui/lab';
-import { Paper, Tab } from '@mui/material';
+import { Tab } from '@mui/material';
 import { Suspense, useState } from 'react';
 import { ProfileContextProvider } from '../contexts/ProfileContextProvider';
+import { Analytics } from './components/Analytics/Analytics';
 import Dashboard from './components/Dashboard/Dashboard';
 import Settings from './components/Settings/Settings';
 
-function Analytics() {
-  return (
-    <Paper sx={{ width: '100%', height: 'calc(100vh - 50px)' }}>
-      Analytics
-    </Paper>
-  );
-}
-
 enum TabValue {
   DASHBOARD = 'DASHBOARD',
   ANALYTICS = 'ANALYTICS',