Reorganize frontend tests and add more $locals tests

assets/views/layouts/svelte_layout.html

@@ -11,9 +11,11 @@
 
         const locals = %locals%;
         localStore.set((key, args) => {
-            return locals[args ?
+            const localKey = args ?
                 `'${key}', \`${args}\``
-                : `'${key}'`];
+                : `'${key}'`;
+            // console.debug(localKey + '=' +  locals[localKey])
+            return locals[localKey];
         });
 
         new View({

test/assets/views/AllTests.svelte

@@ -0,0 +1,34 @@
+<script>
+    import {locals} from "../ts/stores.js";
+    import LocalsTest from "./LocalsTest.svelte";
+</script>
+
+<style lang="scss">
+	:global(body) {
+        margin: 0;
+        font-family: sans-serif;
+    }
+
+	.render-mode {
+		text-align: center;
+		background: gray;
+		padding: 8px;
+		margin-bottom: 8px;
+	}
+</style>
+
+<div class="render-mode">{$locals.isPreRender ? 'SSR' : 'CSR'}</div>
+
+<table>
+    <thead>
+        <tr>
+            <th>Name</th>
+            <th>Expected value</th>
+            <th>Actual value</th>
+        </tr>
+    </thead>
+
+    <tbody>
+        <LocalsTest/>
+    </tbody>
+</table>

test/assets/views/LocalsTest.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">
+    import {locals} from '../ts/stores.js';
+    import Test from "./Test.svelte";
+
+    //TODO: binding tests
+</script>
+
+<Test name="$locals" actualValue={$locals} not expectedValue={undefined}/>
+<Test name="\$locals.route" actualValue={$locals.route} not expectedValue={undefined}/>
+<Test name="$locals escaping" actualValue="\$locals.route" not expectedValue="$locals('route')"/>
+<Test name="$locals not escaping" actualValue="$locals.route" expectedValue="$locals('route')"/>
+<Test name="$locals escaping" actualValue={`{\\$locals.escaped}`} not expectedValue={`{$locals('escaped')}`}/>
+<Test name="$locals not escaping" actualValue={`{$locals.escaped}`} expectedValue={`{$locals('escaped')}`}/>
+
+<!-- Inspecting values -->
+<Test name="\$locals.dump string" actualValue={$locals.dump('bonjour')} expectedValue="'bonjour'"/>
+<Test name="\$locals.dump NaN" actualValue={$locals.dump(NaN)} expectedValue="NaN"/>
+
+<!-- Nested locals calls -->
+<Test name="\$locals.dump \$locals.name" actualValue={$locals.dump($locals.app)} not expectedValue={undefined}/>
+<Test name="\$locals.dump \$locals.app.name" actualValue={$locals.dump($locals.app.name)} expectedValue="'Example App'"/>
+
+<!-- Routes (url building) -->
+<Test name="\$locals.route home" actualValue={$locals.route('home')} expectedValue="/"/>
+<Test name="\$locals.route auth" actualValue={$locals.route('auth')} expectedValue="/auth/"/>

test/assets/views/Test.svelte

@@ -0,0 +1,42 @@
+<script lang="ts">
+    export let name: string;
+    export let actualValue: any;
+    export let not: boolean = false;
+    export let expectedValue: any;
+
+    const success = not ?
+        expectedValue !== actualValue :
+        expectedValue === actualValue;
+    const failure = !success;
+</script>
+
+<style lang="scss">
+	tr {
+		font-family: monospace;
+        white-space: nowrap;
+
+		td {
+			padding: 8px;
+		}
+
+		border-left: 2px solid gray;
+
+		&.success > :first-child {
+			border-left: 8px solid green;
+		}
+
+		&.failure > :first-child {
+			border-left: 8px solid red;
+		}
+
+        .not {
+            color: gray;
+        }
+	}
+</style>
+
+<tr class:success class:failure>
+    <td>{name}</td>
+    <td>{#if not}<span class="not">!</span>{/if}{expectedValue}</td>
+    <td>{actualValue}</td>
+</tr>

test/assets/views/home_dep.svelte

@@ -1,26 +0,0 @@
-<script lang="ts">
-    import {locals} from "../ts/stores.js";
-
-    export let depTest = 'Success';
-
-    let locallyDefinedVar = 'correct value';
-</script>
-
-<style>
-    p {
-        color: brown;
-    }
-</style>
-
-
-<p>Simple dep test</p>
-<p>\$locals.</p>
-<p>\$locals.</p>
-
-<p>$locals: {$locals}</p>
-<p>\$locals.route: {$locals.route} <br> {$locals.dump(typeof $locals.route)}</p>
-<p>\$locals.dump: {$locals.dump('bonjour')}</p>
-<p>\$locals.dump: {$locals.dump($locals.app)}</p>
-<p>\$locals.dump: {$locals.dump(NaN)}</p>
-<p>\$locals.route: {$locals.route('auth')}</p>
-<p>\$locals.route: {$locals.route('home')}</p>

test/assets/views/home_test.svelte

@@ -1,61 +0,0 @@
-<script>
-    import {locals} from "../ts/stores.js";
-    import HomeDep from "./home_dep.svelte";
-    import Layout from "./layout.svelte";
-
-    let count = 5;
-
-    function handleClick() {
-        count++;
-    }
-
-    let depTest;
-
-    let mode = ($locals).name === 'locals' ? 'RENDU' : 'PRE RENDU'
-</script>
-
-<style lang="scss">
-	p:last-of-type {
-		color: blueviolet;
-	}
-
-	.style-test {
-		p {
-			color: blue;
-		}
-	}
-</style>
-
-<h1 id="rendertest">{mode}</h1>
-
-<Layout title="Home">
-    <svelte:fragment slot="body">
-        <h1>BONJOUR lol</h1>
-    </svelte:fragment>
-</Layout>
-
-<h1>Hello {count}!</h1>
-
-<button on:click={handleClick}>More hellos!!</button>
-
-<p>Direct access: {$locals.direct}</p>
-
-{#if $locals.route('auth') === '/'}
-    We're home!
-{:else}
-    We're somewhere else... {$locals.route('auth')}
-{/if}
-
-<p>The route to auth is {$locals.route('auth')}</p>
-
-<p>\$locals.notcode</p>
-
-<p>{`{\\$locals.escaped}`}</p>
-
-<div class="style-test">
-    <p>Blue!</p>
-</div>
-
-<HomeDep bind:depTest={depTest}/>
-
-<p>Dependency test: {depTest}</p>