feat: Initial setup facilitating testing

12 files changed, 81 insertions, 8 deletions

diff --git a/apps/kit/playwright.config.ts b/apps/kit/playwright.config.ts
index 6ad3a7f..5926752 100644
--- a/apps/kit/playwright.config.ts
+++ b/apps/kit/playwright.config.ts
@@ -2,8 +2,8 @@ import type { PlaywrightTestConfig } from '@playwright/test';
 
 const config: PlaywrightTestConfig = {
 	webServer: {
-		command: 'npm run build && npm run preview',
-		port: 4173
+		command: 'pnpm run dev',
+		port: 5173
 	}
 };
 
diff --git a/apps/kit/src/actions/pwKey.ts b/apps/kit/src/actions/pwKey.ts
new file mode 100644
index 0000000..a2f22e7
--- /dev/null
+++ b/apps/kit/src/actions/pwKey.ts
@@ -0,0 +1,10 @@
+import { is_development, is_testing } from "$lib/configuration";
+
+export default function pwKey(node: HTMLElement, value: string | undefined) {
+    if (!value) return;
+    if (!is_testing()) {
+        if (is_development()) console.warn("VITE_TESTING is false, so not setting pw-key attributes");
+        return;
+    }
+    node.setAttribute("pw-key", value);
+}
\ No newline at end of file
diff --git a/apps/kit/src/lib/components/alert.svelte b/apps/kit/src/lib/components/alert.svelte
index 31e7357..fd57105 100644
--- a/apps/kit/src/lib/components/alert.svelte
+++ b/apps/kit/src/lib/components/alert.svelte
@@ -2,6 +2,7 @@
     import { random_string } from "$lib/helpers";
     import { createEventDispatcher } from "svelte";
     import { onMount } from "svelte";
+    import pwKey from "$actions/pwKey";
     import { Temporal } from "temporal-polyfill";
     import { ExclamationTriangleIcon, CheckCircleIcon, InformationCircleIcon, XCircleIcon, XMarkIcon } from "./icons";
 
@@ -61,10 +62,12 @@
     $: cooldownEnabled =
         id.indexOf(noCooldownSetting) === -1 && closeable && (closeableCooldown === "~" || parseInt(closeableCooldown) > 0);
     /**
-     * Sets this alerts visibility state, when this is false it is removed from the dom using svelte a {#if} block.
+     * Sets this alerts visibility state, when this is false it is removed from the dom using an {#if} block.
      */
     export let visible = closeableCooldown === "~" || parseInt(closeableCooldown) > 0 ? false : true;
 
+    export let _pwKey: string | undefined = undefined;
+
     const cooldownStorageKey = "lastseen--" + id;
 
     $: switch (type) {
@@ -160,7 +163,7 @@
 </script>
 
 {#if visible}
-    <div class="rounded-md bg-{colorClassPart}-50 p-4 {$$restProps.class ?? ''}">
+    <div class="rounded-md bg-{colorClassPart}-50 p-4 {$$restProps.class ?? ''}" use:pwKey={_pwKey}>
         <div class="flex">
             <div class="flex-shrink-0">
                 <svelte:component this={iconComponent} class="text-{colorClassPart}-400" />
diff --git a/apps/kit/src/lib/components/button.svelte b/apps/kit/src/lib/components/button.svelte
index d345b37..cbc09e2 100644
--- a/apps/kit/src/lib/components/button.svelte
+++ b/apps/kit/src/lib/components/button.svelte
@@ -4,6 +4,8 @@
 </script>
 
 <script lang="ts">
+    import pwKey from "$actions/pwKey";
+
     import { SpinnerIcon } from "./icons";
 
     export let kind = "primary" as ButtonKind;
@@ -18,6 +20,7 @@
     export let text: string;
     export let loading = false;
     export let fullWidth = false;
+    export let _pwKey: string | undefined = undefined;
 
     let sizeClasses = "";
     let kindClasses = "";
@@ -70,9 +73,9 @@
 
 {#if href}
     <a
+        use:pwKey={_pwKey}
         {...shared_props}
         {href}
-        on:click
         class="{sizeClasses} {kindClasses} {loading ? 'disabled:' : ''} {$$restProps.class ?? ''} {fullWidth
             ? 'w-full justify-center'
             : ''} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2"
@@ -84,8 +87,11 @@
     </a>
 {:else}
     <button
+        use:pwKey={_pwKey}
         {...shared_props}
-        class="{sizeClasses} {kindClasses} {$$restProps.class ?? ''} {fullWidth
+        on:click
+        class="{sizeClasses} {kindClasses} {$$restProps.class ?? ''}
+        {fullWidth
             ? 'w-full justify-center'
             : ''} inline-flex items-center border font-medium rounded shadow-sm focus:outline-none focus:ring-2"
     >
diff --git a/apps/kit/src/lib/components/checkbox.svelte b/apps/kit/src/lib/components/checkbox.svelte
index 311d154..b2fcddb 100644
--- a/apps/kit/src/lib/components/checkbox.svelte
+++ b/apps/kit/src/lib/components/checkbox.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import pwKey from "$actions/pwKey";
     import { random_string } from "$lib/helpers";
 
     export let label: string;
@@ -6,11 +7,13 @@
     export let name: string | undefined = undefined;
     export let disabled: boolean | null = null;
     export let checked: boolean;
+    export let _pwKey: string | undefined = undefined;
 </script>
 
 <div class="flex items-center">
     <input
         {name}
+        use:pwKey={_pwKey}
         {disabled}
         {id}
         type="checkbox"
diff --git a/apps/kit/src/lib/components/input.svelte b/apps/kit/src/lib/components/input.svelte
index 999c565..c0ed654 100644
--- a/apps/kit/src/lib/components/input.svelte
+++ b/apps/kit/src/lib/components/input.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import pwKey from "$actions/pwKey";
     import { random_string } from "$lib/helpers";
     import { ExclamationCircleIcon } from "./icons";
 
@@ -18,6 +19,7 @@
     export let addon: string | undefined = undefined;
     export let value: string | undefined;
     export let wrapperClass: string | undefined = undefined;
+    export let _pwKey: string | undefined = undefined;
 
     $: ariaErrorDescribedBy = id + "__" + "error";
     $: attributes = {
@@ -70,6 +72,7 @@
         {/if}
         <input
             use:typeAction
+            use:pwKey={_pwKey}
             {name}
             {id}
             {...attributes}
diff --git a/apps/kit/src/lib/components/locale-switcher.svelte b/apps/kit/src/lib/components/locale-switcher.svelte
index 2e2d339..f880bfb 100644
--- a/apps/kit/src/lib/components/locale-switcher.svelte
+++ b/apps/kit/src/lib/components/locale-switcher.svelte
@@ -1,4 +1,5 @@
 <script lang="ts">
+    import pwKey from "$actions/pwKey";
     import { browser } from "$app/environment";
     import { page } from "$app/stores";
     import { CookieNames } from "$lib/configuration";
@@ -8,6 +9,8 @@
     import { loadLocaleAsync } from "$lib/i18n/i18n-util.async";
     import Cookies from "js-cookie";
 
+    export let _pwKey: string | undefined = undefined;
+
     async function switch_locale(newLocale: Locales) {
         if (!newLocale || $locale === newLocale) return;
         await loadLocaleAsync(newLocale);
@@ -42,6 +45,7 @@
 </script>
 
 <select
+    use:pwKey={_pwKey}
     on:change={on_change}
     class="mt-1 mr-1 block border-none py-2 pl-3 pr-10 text-base rounded-md right-0 absolute focus:outline-none focus:ring-teal-500 sm:text-sm"
 >
diff --git a/apps/kit/src/lib/components/switch.svelte b/apps/kit/src/lib/components/switch.svelte
index c958b0f..16da23a 100644
--- a/apps/kit/src/lib/components/switch.svelte
+++ b/apps/kit/src/lib/components/switch.svelte
@@ -3,12 +3,17 @@
 </script>
 
 <script lang="ts">
+    import pwKey from "$actions/pwKey";
+
+
     export let enabled = false;
     export let type: SwitchType = "default";
     export let srText = "Use setting";
     export let label: string | undefined = undefined;
     export let description: string | undefined = undefined;
     export let rightAlignedLabelDescription = false;
+    export let _pwKey:string|undefined = undefined;
+
     $: colorClass = enabled
         ? "bg-teal-600 focus:ring-teal-500"
         : "bg-gray-200 focus:ring-teal-500";
@@ -41,6 +46,7 @@
             class="group relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer items-center justify-center rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2"
             role="switch"
             aria-checked={enabled}
+            use:pwKey={_pwKey}
             on:click={toggle}
         >
             <span class="sr-only">{srText}</span>
@@ -63,6 +69,7 @@
             class="{colorClass} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
             role="switch"
             aria-checked={enabled}
+            use:pwKey={_pwKey}
             on:click={toggle}
         >
             <span class="sr-only">{srText}</span>
@@ -113,6 +120,7 @@
             class="{colorClass} relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-offset-2"
             role="switch"
             aria-checked={enabled}
+            use:pwKey={_pwKey}
             on:click={toggle}
         >
             <span class="sr-only">{srText}</span>
diff --git a/apps/kit/src/lib/configuration.ts b/apps/kit/src/lib/configuration.ts
index fa828ca..5a6a1bf 100644
--- a/apps/kit/src/lib/configuration.ts
+++ b/apps/kit/src/lib/configuration.ts
@@ -9,10 +9,13 @@ export function api_base(path: string = ""): string {
 }
 
 export function is_development(): boolean {
-    // @ts-ignore
     return import.meta.env.DEV;
 }
 
+export function is_testing(): boolean {
+    return import.meta.env.VITE_TESTING;
+}
+
 export function is_debug(): boolean {
     return localStorage.getItem(StorageKeys.debug) !== "true";
 }
@@ -23,6 +26,22 @@ export const CookieNames = {
     session: "go_session"
 };
 
+export function get_test_context(): TestContext {
+    return {
+        user: {
+            username: import.meta.env.VITE_TEST_USERNAME,
+            password: import.meta.env.VITE_TEST_PASSWORD
+        }
+    }
+}
+
+export interface TestContext {
+    user: {
+        username: string,
+        password: string
+    }
+}
+
 export const QueryKeys = {
     labels: "labels",
     categories: "categories",
diff --git a/apps/kit/src/lib/helpers.ts b/apps/kit/src/lib/helpers.ts
index 6f52dc6..38376e5 100644
--- a/apps/kit/src/lib/helpers.ts
+++ b/apps/kit/src/lib/helpers.ts
@@ -20,6 +20,10 @@ export function get_default_sorted(unsorted: Array<TimeEntryDto>): Array<TimeEnt
     });
 }
 
+export function get_element_by_pw_key(key: string): HTMLElement | null {
+    return document.querySelector("[pw-key='" + key + "']");
+}
+
 export function is_email(value: string): boolean {
     return EMAIL_REGEX.test(String(value).toLowerCase());
 }
diff --git a/apps/kit/svelte.config.js b/apps/kit/svelte.config.js
index 98b08a1..7a41f1c 100644
--- a/apps/kit/svelte.config.js
+++ b/apps/kit/svelte.config.js
@@ -10,6 +10,9 @@ const config = {
     ],
     kit: {
         adapter: adapter(),
+        alias: {
+            "$actions": "src/actions"
+        },
         prerender: {
             enabled: false,
         }
diff --git a/apps/kit/tsconfig.json b/apps/kit/tsconfig.json
index d784754..bb8cf41 100644
--- a/apps/kit/tsconfig.json
+++ b/apps/kit/tsconfig.json
@@ -14,9 +14,19 @@
       "dom",
       "es6"
     ],
+    "baseUrl": "./",
     "paths": {
+      "$lib": [
+        "src/lib"
+      ],
       "$lib/*": [
-        "./src/lib/*"
+        "src/lib/*"
+      ],
+      "$actions": [
+        "src/actions"
+      ],
+      "$actions/*": [
+        "src/actions/*"
       ],
     },
   },