Enable e2e tests for PRs (#1)

.github/workflows/PR.yml

@@ -8,6 +8,13 @@ concurrency:
   group: ${{ github.head_ref }}
   cancel-in-progress: true
 
+env:
+  DATABASE_URL: ${{ secrets.DATABASE_URL }}
+  REDIS_TOKEN: ${{ secrets.REDIS_TOKEN }}
+  REDIS_URL: ${{ secrets.REDIS_URL }}
+  PUBLIC_THUMBOR_URL: ${{ secrets.PUBLIC_THUMBOR_URL }}
+  THUMBOR_UPLOAD_URL: ${{ secrets.THUMBOR_UPLOAD_URL }}
+  IS_CI: true
 jobs:
   INSTALL:
     name: Install Dependencies
@@ -20,7 +27,7 @@ jobs:
           version: 8.9.2
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'pnpm'
       - name: Install
         run: |
@@ -37,34 +44,20 @@ jobs:
           version: 8.9.2
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'pnpm'
       - name: Install
         run: |
           pnpm install
       - name: Prisma Generate
         run: |
-          pnpm prisma:gen:prod
+          pnpm prisma:gen:ci
       - name: Lint
-        env:
-          DATABASE_URL: postgres://admin:pass123@localhost:6500/sk-db
-          REDIS_TOKEN: ''
-          REDIS_URL: redis://default:redispw@localhost:6379
-          PUBLIC_THUMBOR_URL: http://localhost:6501
-          THUMBOR_UPLOAD_URL: http://localhost:6501/image
-          IS_CI: true
         run: |
-          pnpm run lint
+          pnpm lint
       - name: Check
-        env:
-          DATABASE_URL: postgres://admin:pass123@localhost:6500/sk-db
-          REDIS_TOKEN: ''
-          REDIS_URL: redis://default:redispw@localhost:6379
-          PUBLIC_THUMBOR_URL: http://localhost:6501
-          THUMBOR_UPLOAD_URL: http://localhost:6501/image
-          IS_CI: true
         run: |
-          pnpm run check
+          pnpm check
   UNIT_TEST:
     name: Run Unit Tests
     environment: CI
@@ -77,17 +70,17 @@ jobs:
           version: 8.9.2
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'pnpm'
       - name: Install
         run: |
           pnpm install
       - name: Prisma Generate
         run: |
-          pnpm prisma:gen:prod
+          pnpm prisma:gen:dev
       - name: Unit Test
         run: |
-          pnpm run test:unit
+          pnpm test:unit
   E2E_TEST:
     name: Run E2E Tests
     environment: CI
@@ -103,24 +96,23 @@ jobs:
           version: 8.9.2
       - uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
           cache: 'pnpm'
       - name: Install
         run: |
           pnpm install
       - name: Prisma Generate
         run: |
-          pnpm prisma:gen:prod
+          pnpm prisma:gen:ci
+      - name: Prisma Push
+        run: |
+          pnpm prisma:push:dev
       - name: Install Playwright Browsers
         run: |
           pnpm playwright install-deps chromium
+      - name: Seed Database
+        run: |
+          pnpm psql:seed
       - name: Integration Test
-        env:
-          DATABASE_URL: postgres://admin:pass123@localhost:6500/sk-db
-          REDIS_TOKEN: ''
-          REDIS_URL: redis://default:redispw@localhost:6379
-          PUBLIC_THUMBOR_URL: http://localhost:6501
-          THUMBOR_UPLOAD_URL: http://localhost:6501/image
-          IS_CI: true
         run: |
           pnpm run test:integration:ci

.nvmrc

@@ -1 +1 @@
-v18.18.2
+v20

README.md

@@ -1,12 +1,10 @@
 # SvelteKit Template
 
-This is a complete Sveltekit Template designed to help you release you SvelteKit App using the following services
+This is a complete Sveltekit Template designed to help you release you SvelteKit App using the following services:
 
     - TypeScript, ESLint, Prettier & Husky for pre-commit hooks
     - Lucia Auth with a production-ready Sign Up/In/Out flow and Delete Account flow
     - Prisma integration
     - Playwright for E2E Tests in Github Actions and for local development
     - Github Actions (including Linting, Type-Verification, Unit & E2E Tests)
-    - SWA-Adapter configuration
-    - Image hosting using thumbor
-    - (prod) Neon.Tech integration with SWA Edge Functions & Prisma
+    - Image hosting & processing using thumbor

docker-compose.yaml

@@ -54,5 +54,3 @@ services:
       - POSTGRES_DB=sk-db
     ports:
       - 6500:5432
-    volumes:
-      - ./sk-db-dump.sql:/docker-entrypoint-initdb.d/init.sql      

package.json

@@ -1,5 +1,5 @@
 {
-	"name": "svelte-meetup-clone",
+	"name": "sveltekit-template",
 	"version": "0.0.1",
 	"private": true,
 	"type": "module",

prisma/seed.js

@@ -5,9 +5,6 @@ import { v4 as uuid } from 'uuid';
 import fetch from 'node-fetch';
 import { faker } from '@faker-js/faker';
 import sharp from 'sharp';
-import { BlobServiceClient } from '@azure/storage-blob';
-
-console.info('process.env.DATABASE_URL: ', process.env.DATABASE_URL);
 const db = new PrismaClient({
 	datasources: {
 		db: {
@@ -37,21 +34,21 @@ const auth = lucia({
 
 async function createImageSet(type) {
 	const id = uuid();
-	const imgXL = await fetch('https://picsum.photos/736')
+	const image = await fetch('https://picsum.photos/736')
 		.then((response) => response.arrayBuffer())
 		.then((buffer) => sharp(buffer).webp({ quality: 80 }).toBuffer());
 
-	const path = `${type}/${id}.webp`;
-	await fetch(`${process.env.THUMBOR_URL}/${path}`, {
+	const path = `${type}/${id}`;
+	await fetch(`${process.env.THUMBOR_UPLOAD_URL}/${path}`, {
 		method: 'PUT',
 		headers: {
 			'Content-Type': 'image/webp',
 			Slug: `${id}.webp`
 		},
-		body: imgXL
+		body: image
 	});
 
-	return { path: `${process.env.THUMBOR_URL}/${type}/${id}`, id: id };
+	return { path: `${process.env.THUMBOR_UPLOAD_URL}/${type}/${id}`, id: id };
 }
 
 async function freshInit() {
@@ -69,11 +66,11 @@ async function freshInit() {
 	await auth.createUser({
 		key: {
 			providerId: 'username',
-			providerUserId: 'admin@test.com',
+			providerUserId: 'admin@dle.dev',
 			password: 'adminadmin'
 		},
 		attributes: {
-			email: 'admin@test.com',
+			email: 'admin@dle.dev',
 			firstName: 'Svelte',
 			lastName: 'Kit',
 			bio: "I'm a full-stack web developer.",
@@ -85,8 +82,8 @@ async function freshInit() {
 		}
 	});
 
-	// Create 100 users
-	for (let i = 0; i < 100; i++) {
+	// Create 10 users
+	for (let i = 0; i < 10; i++) {
 		const { path, id } = await createImageSet('avatars');
 		const image = await db.image.create({
 			data: {

src/lib/components/atoms/media/image.svelte

@@ -6,10 +6,6 @@
 	export let height = 196;
 	let clazz: string = '';
 	export { clazz as class };
-	type Sizes = {
-		maxWidth: number;
-		widthSlot: number;
-	}[];
 </script>
 
 {#if src !== null}

src/lib/components/molecues/user/myUserDetails.svelte

@@ -7,13 +7,13 @@
 	import Avatar from '@components/atoms/media/avatar.svelte';
 	import TextEdit from '@components/molecues/textEdit.svelte';
 	import { editUserSchema, type EditUserSchema } from '@lib/schemas/forms';
-	import { convertFileToBase64, convertToWebP } from '@lib/utils/imageUtils';
+	import { convertFileToBase64 } from '@lib/utils/imageUtils';
 	import type { IUserRepository, UserRepositoryMethods } from '@lib/utils/RepositoryMethods';
+	import type { ActionResult } from '@sveltejs/kit';
 	import classNames from 'classnames';
+	import { writable } from 'svelte/store';
 	import type { ZodValidation } from 'sveltekit-superforms';
 	import { superForm } from 'sveltekit-superforms/client';
-	import { writable } from 'svelte/store';
-	import type { ActionResult } from '@sveltejs/kit';
 	export let editUserForm;
 	export let userData: IUserRepository[UserRepositoryMethods.FindUserById];
 	const user = writable({ ...userData, isBase64: false });

src/lib/components/organisms/modals/modalConfigs.ts

@@ -9,6 +9,3 @@ export const signUpModalConfig: ModalSettings = {
 	type: 'component',
 	component: 'signUp'
 };
-
-
-

src/lib/components/organisms/modals/signUpModal.svelte

@@ -2,21 +2,21 @@
 </script>
 
 <script lang="ts">
+	import Text from '@components/atoms/forms/text.svelte';
 	import type { SuperValidated, ZodValidation } from 'sveltekit-superforms';
 	import { superForm } from 'sveltekit-superforms/client';
-	import Text from '@components/atoms/forms/text.svelte';
 
 	import { FileDropzone, getModalStore } from '@skeletonlabs/skeleton';
 
-	import classNames from 'classnames';
-	import { signUpSchema, type SignUpSchema } from '@lib/schemas/forms';
 	import SimpleButton from '@components/atoms/buttons/simpleButton.svelte';
 	import IconLoading from '@components/atoms/icons/IconLoading.svelte';
-	import type { ActionResult } from '@sveltejs/kit';
-	import { getErrorModal } from './modalUtils';
-	import { convertFileToBase64, convertToWebP } from '@lib/utils/imageUtils';
 	import IconUpload from '@components/atoms/icons/IconUpload.svelte';
+	import { signUpSchema, type SignUpSchema } from '@lib/schemas/forms';
+	import { convertFileToBase64 } from '@lib/utils/imageUtils';
+	import type { ActionResult } from '@sveltejs/kit';
+	import classNames from 'classnames';
 	import { onMount } from 'svelte';
+	import { getErrorModal } from './modalUtils';
 
 	export let formData: SuperValidated<SignUpSchema>;
 	const modalStore = getModalStore();

src/lib/components/organisms/navbar.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
 	import classNames from 'classnames';
 
-	import NavbarLink from '@components/atoms/nav/navbarLink.svelte';
-
 	import { enhance } from '$app/forms';
 	import SimpleButton from '@components/atoms/buttons/simpleButton.svelte';
 	import IconCheckFalse from '@components/atoms/icons/IconCheckFalse.svelte';
 	import IconMenu from '@components/atoms/icons/IconMenu.svelte';
+	import Avatar from '@components/atoms/media/avatar.svelte';
 	import type { IUserRepository, UserRepositoryMethods } from '@lib/utils/RepositoryMethods';
 	import {
 		Drawer,
@@ -16,9 +15,6 @@
 		type DrawerSettings
 	} from '@skeletonlabs/skeleton';
 	import { logInModalConfig as signInModalConfig, signUpModalConfig } from './modals/modalConfigs';
-	import Avatar from '@components/atoms/media/avatar.svelte';
-	import { goto } from '$app/navigation';
-	import { getErrorModal } from './modals/modalUtils';
 
 	const drawerStore = getDrawerStore();
 	const modalStore = getModalStore();
@@ -51,18 +47,6 @@
 	function close(): void {
 		drawerStore.close();
 	}
-	async function deleteAccount() {
-		const res = await fetch('/home', {
-			method: 'DELETE'
-		});
-		if (res.ok) {
-			goto('/');
-		} else {
-			modalStore.trigger(
-				getErrorModal('Something went wrong while deleting your account. Please try again later')
-			);
-		}
-	}
 </script>
 
 <nav

src/lib/server/repository/ImageRepository.ts

@@ -1,6 +1,4 @@
-import {
-	THUMBOR_UPLOAD_URL
-} from '$env/static/private';
+import { THUMBOR_UPLOAD_URL } from '$env/static/private';
 import { v4 as uuid } from 'uuid';
 import { db } from './prismaClient';
 class ImageRepository {