ashpie/swaf
1
0
Fork 0
Code Issues 22 Pull Requests Releases 11 Wiki Activity

Reorganize frontend tests and add more $locals tests

Browse Source
This commit is contained in:
Alice Gaudon 2021-05-12 14:47:18 +02:00
parent a4d175addc
commit afd45bd99d
6 changed files with 105 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
assets/views/layouts/svelte_layout.html
View File

@ -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({

34
test/assets/views/AllTests.svelte Normal file
View File

@ -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>

25
test/assets/views/LocalsTest.svelte Normal file
View File

@ -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/"/>

42
test/assets/views/Test.svelte Normal file
View File

@ -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>

26
test/assets/views/home_dep.svelte
View File

@ -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>

61
test/assets/views/home_test.svelte
View File

@ -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>