Loader for server action (#9)

* Readme update

* server action loader

* Fix test

* GlobalTeardown for playwright

README.md

@@ -1,5 +1,19 @@
 # Determine Paper Cost
 
+This project is specifically designed with a **MOBILE**-first approach, with the user interface optimized for mobile screens to provide an enhanced and professional user experience on mobile devices.
+
+## Features and Functionalities
+
+```bash
+-> Email/Password based authentication system
+-> Dynamic paper layer adding (Maximum 10 paper)
+-> Auto focus next field on press 'Enter'
+-> Calculate the price on press 'Enter' from last input field
+-> Price history saved in Supabase
+-> History trash for later recovery
+
+```
+
 ## Tech Stack
 
 ```bash
@@ -18,6 +32,20 @@ Tools
 -> Mixpanel
 ```
 
+## Test Credentials
+
+Can be tested in live app
+
+```js
+// Email
+test@gmail.com
+```
+
+```js
+// Password
+111111
+```
+
 ## After Cloning this project
 
 You will need to install dependency!

playwright.config.ts

@@ -1,16 +1,18 @@
 import { defineConfig, devices } from '@playwright/test'
+import dotenv from 'dotenv'
 
 /**
  * Read environment variables from file.
  * https://github.com/motdotla/dotenv
  */
-// dotenv.config({ path: path.resolve(__dirname, '.env.development') })
+dotenv.config({ path: '.env.development' })
 
 export default defineConfig({
 	testDir: './tests',
 	timeout: 5000,
 	fullyParallel: true,
 	forbidOnly: !!process.env.CI,
+	globalTeardown: './tests/global-teardown.ts',
 	/* Retry on CI only */
 	retries: process.env.CI ? 2 : 1,
 	workers: process.env.CI ? 1 : undefined,
@@ -39,16 +41,6 @@ export default defineConfig({
 			name: 'Mobile Safari',
 			use: { ...devices['iPhone 12'] }
 		}
-
-		/* Test against branded browsers. */
-		// {
-		//   name: 'Microsoft Edge',
-		//   use: { ...devices['Desktop Edge'], channel: 'msedge' },
-		// },
-		// {
-		//   name: 'Google Chrome',
-		//   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
-		// },
 	],
 
 	/* Run your local dev server before starting the tests */

src/lib/elements/FullPageLoader.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import Loader from '$lib/elements/Loader.svelte'
+</script>
+
+<div class="absolute bg-white bg-opacity-80 flex h-full w-full items-center justify-center z-10">
+	<Loader />
+</div>

src/lib/elements/HistoryRow.svelte

@@ -37,6 +37,7 @@
 					<Icon icon="ic:round-settings-backup-restore" />
 				</button>
 				<button
+					data-testid="delete-cost-history"
 					class:hidden={deleteConfirm == cost.id}
 					class="border border-red-300 rounded text-red-600 p-[3px] w-fit disabled:border-gray-200 disabled:cursor-not-allowed disabled:text-opacity-45"
 					on:click|stopPropagation|preventDefault={() => (deleteConfirm = cost.id || '')}
@@ -55,6 +56,7 @@
 						<Icon icon="majesticons:multiply" width="16px" />
 					</button>
 					<button
+						data-testid="confirm-delete"
 						class="border border-green-300 p-[3px] rounded text-green-700 w-fit disabled:border-gray-200 disabled:cursor-not-allowed disabled:text-opacity-45"
 						on:click|stopPropagation|preventDefault={() => dispatch('delete', cost.id)}
 					>

src/lib/elements/Input.svelte

@@ -35,6 +35,6 @@
 
 <style lang="postcss">
 	.input-field {
-		@apply border border-gray-400 w-12 md:w-full p-1 rounded;
+		@apply border border-gray-300 w-12 md:w-full p-1 rounded;
 	}
 </style>

src/routes/(app)/+layout.svelte

@@ -12,6 +12,8 @@
 	import Modal from '$lib/elements/Modal.svelte'
 	import BrandTitle from '$lib/elements/BrandTitle.svelte'
 	import About from '$lib/elements/About.svelte'
+	import { enhance } from '$app/forms'
+	import FullPageLoader from '$lib/elements/FullPageLoader.svelte'
 
 	export let data
 
@@ -26,17 +28,14 @@
 
 	let showSettings = false
 	let showAbout = false
+	let loading = false
 
 	const hideSettings = () => (showSettings = false)
 </script>
 
 <main class="h-[100svh] flex flex-col justify-between">
-	{#if $navigating}
-		<div
-			class="absolute bg-white bg-opacity-80 flex h-full w-full items-center justify-center z-10"
-		>
-			<Loader />
-		</div>
+	{#if $navigating || loading}
+		<FullPageLoader />
 	{/if}
 	{#if showAbout}
 		<Modal bind:show={showAbout}>
@@ -98,7 +97,17 @@
 						showAbout = true
 					}}>About</button
 				>
-				<form method="post" action="/?/logout">
+				<form
+					method="post"
+					action="/?/logout"
+					use:enhance={() => {
+						loading = true
+						return async ({ update }) => {
+							await update()
+							loading = false
+						}
+					}}
+				>
 					<button
 						type="submit"
 						on:click={() => {

src/routes/auth/+layout.svelte

@@ -27,8 +27,7 @@
 
 	<div class="absolute bottom-0 w-full">
 		<p class="text-center text-gray-400">
-			&#x1F4BB;Developed by <a href="https://github.com/prokawsar" target="_blank">ProKawsar</a
-			>&#x1F60E;
+			&#x1F4BB;Developed by <a href="https://github.com/prokawsar" target="_blank">Sheba Queue</a>
 		</p>
 	</div>
 </main>

src/routes/auth/login/+page.svelte

@@ -1,14 +1,18 @@
 <script lang="ts">
+	import { enhance } from '$app/forms'
 	import Button from '$lib/elements/Button.svelte'
+	import FullPageLoader from '$lib/elements/FullPageLoader.svelte'
 	import Input from '$lib/elements/Input.svelte'
 	import { redirect } from '@sveltejs/kit'
 
 	export let data
 	export let form
+
 	$: ({ supabase } = data)
 
 	let email = form?.email || ''
 	let password = ''
+	let loading = false
 
 	const handleOAuthLogin = async () => {
 		const { data, error } = await supabase.auth.signInWithOAuth({
@@ -17,11 +21,9 @@
 				redirectTo: `http://localhost:2000/auth/callback/`
 			}
 		})
-
 		if (error) {
 			return
 		}
-
 		return redirect(300, data.url)
 	}
 </script>
@@ -40,7 +42,18 @@
 		{form?.message ? form?.message : ''}
 	</p>
 
-	<form method="post" action="?/login" class="flex w-full flex-col gap-3 items-center">
+	<form
+		method="post"
+		action="?/login"
+		class="flex w-full flex-col gap-3 items-center"
+		use:enhance={() => {
+			loading = true
+			return async ({ update }) => {
+				await update()
+				loading = false
+			}
+		}}
+	>
 		<Input
 			required
 			type="email"
@@ -66,3 +79,7 @@
 		Contact: <email>[email protected]</email>
 	</p>
 </section>
+
+{#if loading}
+	<FullPageLoader />
+{/if}

svelte.config.js

@@ -10,14 +10,9 @@ const pkg = JSON.parse(json)
 
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
-	// for more information about preprocessors
 	preprocess: vitePreprocess(),
 
 	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
 		adapter: adapter({
 			runtime: 'nodejs20.x'
 		}),

tests/global-teardown.ts

@@ -0,0 +1,30 @@
+import { createClient } from '@supabase/supabase-js'
+
+export const supabase = createClient(
+	process.env.PUBLIC_SUPABASE_URL || '',
+	process.env.PUBLIC_SUPABASE_ANON || ''
+)
+
+export default async function globalTeardown() {
+	await performCleanup()
+}
+
+async function performCleanup() {
+	console.log('Performing cleanup...')
+	await deleteAllHistory()
+	await emptyTrashData()
+}
+
+// For cleanup after test
+export const deleteAllHistory = async () => {
+	const response = await supabase
+		.from('history')
+		.delete()
+		.eq('user', '1d2d6d58-1f0a-44d2-bba2-2bdf60c584b6')
+	return response
+}
+
+export const emptyTrashData = async () => {
+	const response = await supabase.from('history').delete().not('deleted_at', 'is', null)
+	return response
+}

tests/utils.ts

@@ -3,8 +3,9 @@ import type { Page } from '@playwright/test'
 export const login = async (page: Page) => {
 	await page.goto('/auth/login')
 	await page.getByTestId('email').click()
-	await page.getByTestId('email').fill('prokawsar@gmail.com')
+	await page.getByTestId('email').fill('test@gmail.com')
 	await page.getByTestId('password').click()
 	await page.getByTestId('password').fill('11111111')
 	await page.getByRole('button', { name: 'Login' }).click()
+	await page.waitForURL('/')
 }