totole/sapper
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper.git synced 2026-01-20 06:15:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

simplify tests

Browse Source
This commit is contained in:
Rich Harris
2018-03-17 13:18:18 -04:00
parent b94481b716
commit 67463683cc
9 changed files with 33 additions and 230 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
test/app/routes/4xx.html
View File

@@ -2,17 +2,5 @@
<title>{{status}}</title> <title>{{status}}</title>
</:Head> </:Head>
<Layout page='home'> <h1>Not found</h1>
<h1>Not found</h1> <p>{{error.message}}</p>
<p>{{error.message}}</p>
</Layout>
<script>
import Layout from './_components/Layout.html';
export default {
components: {
Layout
}
};
</script>

16
test/app/routes/5xx.html
View File

@@ -2,17 +2,5 @@
<title>Internal server error</title> <title>Internal server error</title>
</:Head> </:Head>
<Layout page='home'> <h1>Internal server error</h1>
<h1>Internal server error</h1> <p>{{error.message}}</p>
<p>{{error.message}}</p>
</Layout>
<script>
import Layout from './_components/Layout.html';
export default {
components: {
Layout
}
};
</script>

15
test/app/routes/_components/Layout.html
View File

@@ -1,15 +0,0 @@
<Nav page={{page}}/>
<main>
<slot></slot>
</main>
<script>
import Nav from './Nav.html';
export default {
components: {
Nav
}
};
</script>

57
test/app/routes/_components/Nav.html
View File

@@ -1,57 +0,0 @@
<nav>
<ul>
<li><a href=''>home</a></li>
<li><a href='about'>about</a></li>
<li><a href='slow-preload'>slow preload</a></li>
<li><a href='redirect-from'>redirect</a></li>
<li><a href='blog/nope'>broken link</a></li>
<li><a href='blog/throw-an-error'>error link</a></li>
<li><a rel=prefetch class='{{page === "blog" ? "selected" : ""}}' href='blog'>blog</a></li>
</ul>
</nav>
<style>
nav {
border-bottom: 1px solid rgba(170,30,30,0.1);
font-weight: 300;
padding: 0 1em;
}
ul {
margin: 0;
padding: 0;
}
/* clearfix */
ul::after {
content: '';
display: block;
clear: both;
}
li {
display: block;
float: left;
}
.selected {
position: relative;
display: inline-block;
}
.selected::after {
position: absolute;
content: '';
width: calc(100% - 1em);
height: 2px;
background-color: rgb(170,30,30);
display: block;
bottom: -1px;
}
a {
text-decoration: none;
padding: 1em 0.5em;
display: block;
}
</style>

15
test/app/routes/about.html
View File

@@ -2,24 +2,17 @@
<title>About</title> <title>About</title>
</:Head> </:Head>
<Layout page='about'> <h1>About this site</h1>
<h1>About this site</h1>
<p>This is the 'about' page. There's not much here.</p> <p>This is the 'about' page. There's not much here.</p>
<button class='goto' on:click='goto("blog/what-is-sapper")'>What is Sapper?</button> <button class='goto' on:click='goto("blog/what-is-sapper")'>What is Sapper?</button>
<button class='prefetch' on:click='prefetch("blog/why-the-name")'>Why the name?</button> <button class='prefetch' on:click='prefetch("blog/why-the-name")'>Why the name?</button>
</Layout>
<script> <script>
import Layout from './_components/Layout.html';
import { goto, prefetch } from '../../../runtime.js'; import { goto, prefetch } from '../../../runtime.js';
export default { export default {
components: {
Layout
},
methods: { methods: {
goto, goto,
prefetch prefetch

52
test/app/routes/blog/[slug].html
View File

@@ -2,58 +2,14 @@
<title>{{post.title}}</title> <title>{{post.title}}</title>
</:Head> </:Head>
<Layout page='blog'> <h1>{{post.title}}</h1>
<h1>{{post.title}}</h1>
<div class='content'> <div class='content'>
{{{post.html}}} {{{post.html}}}
</div> </div>
</Layout>
<style>
/*
By default, CSS is locally scoped to the component,
and any unused styles are dead-code-eliminated.
In this page, Svelte can't know which elements are
going to appear inside the {{{post.html}}} block,
so we have to use the :global(...) modifier to target
all elements inside .content
*/
.content :global(h2) {
font-size: 1.4em;
font-weight: 500;
}
.content :global(pre) {
background-color: #f9f9f9;
box-shadow: inset 1px 1px 5px rgba(0,0,0,0.05);
padding: 0.5em;
border-radius: 2px;
overflow-x: auto;
}
.content :global(pre) :global(code) {
background-color: transparent;
padding: 0;
}
.content :global(ul) {
line-height: 1.5;
}
.content :global(li) {
margin: 0 0 0.5em 0;
}
</style>
<script> <script>
import Layout from '../_components/Layout.html';
export default { export default {
components: {
Layout
},
preload({ params, query }) { preload({ params, query }) {
// the `slug` parameter is available because this file // the `slug` parameter is available because this file
// is called [slug].html // is called [slug].html

35
test/app/routes/blog/index.html
View File

@@ -2,35 +2,20 @@
<title>Blog</title> <title>Blog</title>
</:Head> </:Head>
<Layout page='blog'> <h1>Recent posts</h1>
<h1>Recent posts</h1>
<ul> <ul>
{{#each posts as post}} {{#each posts as post}}
<!-- we're using the non-standard `rel=prefetch` attribute to <!-- we're using the non-standard `rel=prefetch` attribute to
tell Sapper to load the data for the page as soon as tell Sapper to load the data for the page as soon as
the user hovers over the link or taps it, instead of the user hovers over the link or taps it, instead of
waiting for the 'click' event --> waiting for the 'click' event -->
<li><a rel='prefetch' href='blog/{{post.slug}}'>{{post.title}}</a></li> <li><a rel='prefetch' href='blog/{{post.slug}}'>{{post.title}}</a></li>
{{/each}} {{/each}}
</ul> </ul>
</Layout>
<style>
ul {
margin: 0 0 1em 0;
line-height: 1.5;
}
</style>
<script> <script>
import Layout from '../_components/Layout.html';
export default { export default {
components: {
Layout
},
preload({ params, query }) { preload({ params, query }) {
return fetch(`blog.json`).then(r => r.json()).then(posts => { return fetch(`blog.json`).then(r => r.json()).then(posts => {
return { posts }; return { posts };

55
test/app/routes/index.html
View File

@@ -2,59 +2,24 @@
<title>Sapper project template</title> <title>Sapper project template</title>
</:Head> </:Head>
<Layout page='home'> <h1>Great success!</h1>
<h1>Great success!</h1>
<figure> <a href='.'>home</a>
<img alt='borat' src='great-success.png'> <a href='about'>about</a>
<figcaption>HIGH FIVE!</figcaption> <a href='slow-preload'>slow preload</a>
</figure> <a href='redirect-from'>redirect</a>
<a href='blog/nope'>broken link</a>
<p><strong>Try editing this file (routes/index.html) to test hot module reloading.</strong></p> <a href='blog/throw-an-error'>error link</a>
</Layout> <a rel=prefetch class='{{page === "blog" ? "selected" : ""}}' href='blog'>blog</a>
<div class='hydrate-test'></div> <div class='hydrate-test'></div>
<style> <style>
h1, figure, p {
text-align: center;
margin: 0 auto;
}
h1 { h1 {
text-align: center;
font-size: 2.8em; font-size: 2.8em;
text-transform: uppercase; text-transform: uppercase;
font-weight: 700; font-weight: 700;
margin: 0 0 0.5em 0; margin: 0 0 0.5em 0;
} }
</style>
figure {
margin: 0 0 1em 0;
}
img {
width: 100%;
max-width: 400px;
margin: 0 0 1em 0;
}
p {
margin: 1em auto;
}
@media (min-width: 480px) {
h1 {
font-size: 4em;
}
}
</style>
<script>
import Layout from './_components/Layout.html';
export default {
components: {
Layout
}
};
</script>

2
test/common/test.js
View File

@@ -39,7 +39,7 @@ describe('sapper', function() {
rimraf.sync('build'); rimraf.sync('build');
rimraf.sync('.sapper'); rimraf.sync('.sapper');
this.timeout(process.env.CI ? 30000 : 5000); this.timeout(process.env.CI ? 30000 : 10000);
// TODO reinstate dev tests // TODO reinstate dev tests
// run({ // run({