feat: !WIP sign-up page test

WIP because playwright currently does not pick up on ts paths

2 files changed, 44 insertions, 29 deletions

diff --git a/apps/kit/src/routes/(main)/(public)/sign-in/+page.svelte b/apps/kit/src/routes/(main)/(public)/sign-in/+page.svelte
index 07ed0e0..101b49d 100644
--- a/apps/kit/src/routes/(main)/(public)/sign-in/+page.svelte
+++ b/apps/kit/src/routes/(main)/(public)/sign-in/+page.svelte
@@ -5,6 +5,18 @@
         USER_DISABLED = "user-disabled",
     }
     export const messageQueryKey = "m";
+    export const signInPageTestKeys = {
+        passwordInput: "password-input",
+        usernameInput: "username-input",
+        rememberMeCheckbox: "remember-me-checkbox",
+        signUpForm: "login-form",
+        userInactivityAlert: Message.USER_INACTIVITY + "-alert",
+        userDisabledAlert: Message.USER_DISABLED + "-alert",
+        afterPasswordResetAlert: Message.AFTER_PASSWORD_RESET + "-alert",
+        formErrorAlert: "form-error-alert",
+        resetPasswordAnchor: "reset-password-anchor",
+        signUpAnchor: "sign-up-anchor",
+    };
 </script>
 
 <script lang="ts">
@@ -14,6 +26,7 @@
     import LL from "$lib/i18n/i18n-svelte";
     import type { ErrorResult } from "$lib/models/ErrorResult";
     import type { LoginPayload } from "$lib/models/LoginPayload";
+    import pwKey from "$actions/pwKey";
     import { onMount } from "svelte";
 
     let loading = false;
@@ -25,34 +38,31 @@
         persist: true,
     } as LoginPayload;
 
-    let error = {
+    let errorData = {
         text: "",
         title: "",
     } as ErrorResult;
+    $: showErrorAlert = (errorData?.text.length ?? 0 + errorData?.title.length ?? 0) > 0;
 
     onMount(() => {
         const searcher = new URLSearchParams(window.location.search);
         if (searcher.get(messageQueryKey)) {
             messageType = searcher.get(messageQueryKey) as Message;
             searcher.delete(messageQueryKey);
-            history.replaceState(
-                null,
-                "",
-                window.location.origin + window.location.pathname
-            );
+            history.replaceState(null, "", window.location.origin + window.location.pathname);
         }
     });
 
     async function submitFormAsync() {
-        error = { text: "", title: "" };
+        errorData = { text: "", title: "" };
         loading = true;
         data.persist = !data.persist;
         const loginResponse = await login(data);
         if (loginResponse.ok) {
             await goto("/home");
         } else {
-            error.title = loginResponse.data.title;
-            error.text = loginResponse.data.text;
+            errorData.title = loginResponse.data.title;
+            errorData.text = loginResponse.data.text;
         }
         loading = false;
     }
@@ -64,18 +74,21 @@
             {#if messageType === "after-password-reset"}
                 <Alert
                     title={$LL.signInPage.yourNewPasswordIsApplied()}
+                    _pwKey={signInPageTestKeys.afterPasswordResetAlert}
                     message={$LL.signInPage.signInBelow()}
                     closeable
                 />
             {:else if messageType === "user-disabled"}
                 <Alert
                     title={$LL.signInPage.yourAccountIsDisabled()}
+                    _pwKey={signInPageTestKeys.userDisabledAlert}
                     message={$LL.signInPage.contactYourAdminIfDisabled()}
                     closeable
                 />
             {:else if messageType === "user-inactivity"}
                 <Alert
                     title={$LL.signInPage.youHaveReachedInactivityLimit()}
+                    _pwKey={signInPageTestKeys.userInactivityAlert}
                     message={$LL.signInPage.feelFreeToSignInAgain()}
                     closeable
                 />
@@ -88,31 +101,19 @@
         </h2>
         <p class="mt-2 text-sm text-gray-600">
             {$LL.or().toLowerCase()}
-            <a href="/sign-up" class="link"
-                >{$LL.createANewAccount().toLowerCase()}</a
-            >
+            <a href="/sign-up" use:pwKey={signInPageTestKeys.signUpAnchor} class="link">{$LL.createANewAccount().toLowerCase()}</a>
         </p>
     </div>
     <div class="mt-8 sm:mx-auto sm:w-full sm:max-w-md">
         <div class="bg-white py-8 px-4 shadow sm:rounded-lg sm:px-10">
-            {#if error.text || error.title}
-                <div class="rounded-md bg-red-50 p-3 mb-3">
-                    {#if error.title}
-                        <h3 class="text-sm font-medium text-red-600">
-                            {error.title}
-                        </h3>
-                    {/if}
-                    {#if error.text}
-                        <div class="mt-2 text-sm text-red-500">
-                            {error.text}
-                        </div>
-                    {/if}
-                </div>
+            {#if showErrorAlert}
+                <Alert title={errorData.title} message={errorData.text} type="error" _pwKey={signInPageTestKeys.formErrorAlert} />
             {/if}
-            <form class="space-y-6" on:submit|preventDefault={submitFormAsync}>
+            <form class="space-y-6" use:pwKey={signInPageTestKeys.signUpForm} on:submit|preventDefault={submitFormAsync}>
                 <Input
-                    id="email"
-                    name="email"
+                    id="username"
+                    _pwKey={signInPageTestKeys.usernameInput}
+                    name="username"
                     type="email"
                     label={$LL.emailAddress()}
                     required
@@ -124,6 +125,7 @@
                     name="password"
                     type="password"
                     label={$LL.password()}
+                    _pwKey={signInPageTestKeys.passwordInput}
                     autocomplete="current-password"
                     required
                     bind:value={data.password}
@@ -132,12 +134,13 @@
                 <div class="flex items-center justify-between">
                     <Checkbox
                         id="remember-me"
+                        _pwKey={signInPageTestKeys.rememberMeCheckbox}
                         name="remember-me"
                         bind:checked={data.persist}
                         label={$LL.signInPage.notMyComputer()}
                     />
                     <div class="text-sm">
-                        <a href="/reset-password" class="link">
+                        <a href="/reset-password" class="link" use:pwKey={signInPageTestKeys.resetPasswordAnchor}>
                             {$LL.signInPage.resetPassword()}
                         </a>
                     </div>
diff --git a/apps/kit/src/routes/(main)/(public)/sign-in/test.ts b/apps/kit/src/routes/(main)/(public)/sign-in/test.ts
new file mode 100644
index 0000000..27af2ea
--- /dev/null
+++ b/apps/kit/src/routes/(main)/(public)/sign-in/test.ts
@@ -0,0 +1,12 @@
+import { get_test_context } from "$lib/configuration";
+import { get_element_by_pw_key } from "$lib/helpers";
+import { test, expect } from "@playwright/test";
+import { signInPageTestKeys } from "./+page.svelte";
+
+const context = get_test_context();
+
+test("form loads", async ({ page }) => {
+    await page.goto("/sign-up");
+    const formElement = get_element_by_pw_key(signInPageTestKeys.signUpForm);
+    expect(formElement).toBeTruthy();
+});
\ No newline at end of file