2024 refresh

Added playwright screenshot tests

.github/workflows/playwright.yml

@@ -0,0 +1,30 @@
+name: Playwright Tests
+on:
+  push:
+    branches: [ master ]
+  pull_request:
+    branches: [ master ]
+jobs:
+  test:
+    timeout-minutes: 5
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          show-progress: false
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: 'npm'
+      - name: Install dependencies
+        run: npm ci
+      - name: Install Playwright Browsers
+        run: npx playwright install firefox --with-deps
+      - name: Run Playwright tests
+        run: npx playwright test
+      - uses: actions/upload-artifact@v3
+        if: failure()
+        with:
+          name: playwright-report
+          path: test-results/
+          retention-days: 14

package.json

@@ -1,15 +1,20 @@
 {
   "name": "amb-landingpage",
   "version": "1.1.2",
-  "homepage": "https://github.com/AMB-Coding/amb-landingpage",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/AMB-Coding/amb-landingpage.git"
+  },
+  "homepage": "https://armamachtbock.de",
   "private": true,
+  "type": "module",
   "dependencies": {
-    "@fortawesome/fontawesome-svg-core": "^6.4.0",
-    "@fortawesome/free-brands-svg-icons": "^6.4.0",
-    "@fortawesome/free-solid-svg-icons": "^6.4.0",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
     "@fortawesome/react-fontawesome": "^0.2.0",
-    "@mantine/core": "^6.0.10",
-    "@mantine/hooks": "^6.0.10",
+    "@mantine/core": "^6.0.21",
+    "@mantine/hooks": "^6.0.21",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "use-count-up": "^3.0.1"
@@ -20,12 +25,14 @@
     "preview": "vite preview"
   },
   "devDependencies": {
-    "@types/node": "^18.16.5",
-    "@types/react": "^18.2.6",
-    "@types/react-dom": "^18.2.4",
-    "@vitejs/plugin-react": "^4.0.0",
-    "typescript": "^5.0.4",
-    "vite": "^4.3.5"
+    "@playwright/test": "^1.40.1",
+    "@types/node": "^20.10.6",
+    "@types/react": "^18.2.47",
+    "@types/react-dom": "^18.2.18",
+    "@vitejs/plugin-react": "^4.2.1",
+    "browserslist-to-esbuild": "^2.1.0",
+    "typescript": "^5.3.3",
+    "vite": "^5.0.11"
   },
   "browserslist": {
     "production": [

playwright.config.ts

@@ -0,0 +1,52 @@
+import {defineConfig, devices} from '@playwright/test';
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+	testDir: './tests',
+	/* Run tests in files in parallel */
+	fullyParallel: true,
+	/* Fail the build on CI if you accidentally left test.only in the source code. */
+	forbidOnly: !!process.env.CI,
+	/* Retry on CI only */
+	retries: process.env.CI ? 2 : 0,
+	/* Opt out of parallel tests on CI. */
+	workers: process.env.CI ? 1 : undefined,
+	/* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+	use: {
+		/* Base URL to use in actions like `await page.goto('/')`. */
+		// baseURL: 'http://127.0.0.1:3000',
+
+		/* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+		trace: 'on-first-retry',
+	},
+
+	/* Configure projects for major browsers */
+	projects: [
+		// {
+		//   name: 'chromium',
+		//   use: { ...devices['Desktop Chrome'] },
+		// },
+
+		{
+			name: 'firefox',
+			use: {
+				...devices['Desktop Firefox'],
+				colorScheme: 'dark',
+			},
+		},
+
+		// {
+		//   name: 'webkit',
+		//   use: { ...devices['Desktop Safari'] },
+		// },
+	],
+
+	/* Run your local dev server before starting the tests */
+	webServer: {
+		command: 'npm run dev',
+		port: 5173,
+		reuseExistingServer: !process.env.CI,
+	},
+});

src/components/PageFooter/PageFooter.tsx

@@ -93,7 +93,7 @@ export function PageFooter(): JSX.Element {
 					<Text size={'lg'} className={classes.title}>Arma macht Bock</Text>
 					<ThemeSwitch/>
 				</Group>
-				<Text size={'sm'} className={classes.description}>© 2023 Alf. All rights reserved.</Text>
+				<Text size={'sm'} className={classes.description}>© 2024 Alf. All rights reserved.</Text>
 			</Stack>
 			<Stack spacing={'xs'}>
 				<Group spacing={'xl'} position={'right'}>

src/features/startpage/EventStats.tsx

@@ -7,9 +7,9 @@ export function EventStats(): JSX.Element {
 
 	return (
 		<Group grow mt={'xl'} ref={ref}>
-			<StatCounter countEnd={89} info={"Events in den letzten 365 Tagen"}
+			<StatCounter countEnd={86} info={"Events in den letzten 365 Tagen"}
 						 isCounting={entry?.isIntersecting}/>
-			<StatCounter countEnd={1060} info={"Belegte Slots in den letzten 365 Tagen"}
+			<StatCounter countEnd={707} info={"Belegte Slots in den letzten 365 Tagen"}
 						 isCounting={entry?.isIntersecting}/>
 		</Group>
 	);

tests/page.spec.ts

@@ -0,0 +1,21 @@
+import {expect, test} from '@playwright/test';
+
+test('top', async ({page}) => {
+	await page.goto('/');
+	await expect(page).toHaveScreenshot({threshold: 0});
+});
+
+test('bottom', async ({page}) => {
+	// Intercept network requests for images and replace them with a static image
+	await page.route(/.+gif/, (route) => {
+		route.fulfill({
+			path: './public/favicon-16x16.png',
+		});
+	});
+
+	await page.goto('/');
+	await page.evaluate(() => {
+		window.scrollTo(0, document.body.scrollHeight);
+	});
+	await expect(page).toHaveScreenshot({threshold: 0});
+});

vite.config.ts

@@ -1,10 +1,14 @@
 import {defineConfig} from 'vite';
 import react from '@vitejs/plugin-react';
+import browserslistToEsbuild from 'browserslist-to-esbuild';
 
 // https://vitejs.dev/config/
 // noinspection JSUnusedGlobalSymbols
 export default defineConfig({
 	plugins: [react()],
+	build: {
+		target: browserslistToEsbuild([">0.2%", "not dead", "not op_mini all"]),
+	},
 	base: '/',
 	server: {
 		open: true,