Reorganize frontend tests and add more $locals tests
This commit is contained in:
parent
a4d175addc
commit
afd45bd99d
|
|
@ -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({
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -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/"/>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
|
|
@ -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>
|
||||
Loading…
Reference in New Issue