totole/sapper
1
0
Fork 0
mirror of https://github.com/kevin-DL/sapper.git synced 2026-01-12 03:05:12 +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>
</:Head>
<Layout page='home'>
<h1>Not found</h1>
<p>{{error.message}}</p>
</Layout>
<script>
import Layout from './_components/Layout.html';
export default {
components: {
Layout
}
};
</script>
<h1>Not found</h1>
<p>{{error.message}}</p>

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

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

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>
</: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='prefetch' on:click='prefetch("blog/why-the-name")'>Why the name?</button>
</Layout>
<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>
<script>
import Layout from './_components/Layout.html';
import { goto, prefetch } from '../../../runtime.js';
export default {
components: {
Layout
},
methods: {
goto,
prefetch

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

@@ -2,58 +2,14 @@
<title>{{post.title}}</title>
</:Head>
<Layout page='blog'>
<h1>{{post.title}}</h1>
<h1>{{post.title}}</h1>
<div class='content'>
{{{post.html}}}
</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>
<div class='content'>
{{{post.html}}}
</div>
<script>
import Layout from '../_components/Layout.html';
export default {
components: {
Layout
},
preload({ params, query }) {
// the `slug` parameter is available because this file
// is called [slug].html

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

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

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

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

2
test/common/test.js
View File

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