parent
bbad42da6f
commit
e7d128a482
@ -0,0 +1,24 @@ |
|||||||
|
/// <reference types="Cypress" />
|
||||||
|
|
||||||
|
describe("registration should", () => { |
||||||
|
it.only("handle its form", () => { |
||||||
|
cy.visit("/register") |
||||||
|
|
||||||
|
cy.get("form") |
||||||
|
.contains("Login") |
||||||
|
.next("input") |
||||||
|
.type("mylogin") |
||||||
|
|
||||||
|
cy.get("form") |
||||||
|
.contains("Password") |
||||||
|
.next("input") |
||||||
|
.type("mypassword") |
||||||
|
|
||||||
|
cy.get("form") |
||||||
|
.contains("Submit") |
||||||
|
.click() |
||||||
|
|
||||||
|
cy.url().should("not.contain", "?") |
||||||
|
cy.get("#output").should("contain", "mylogin") |
||||||
|
}) |
||||||
|
}) |
@ -1,19 +1,30 @@ |
|||||||
describe('Sapper template app', () => { |
describe("app should", () => { |
||||||
beforeEach(() => { |
beforeEach(() => { |
||||||
cy.visit('/') |
cy.visit("/") |
||||||
}); |
}) |
||||||
|
|
||||||
it('has the correct <h1>', () => { |
it("has the correct <h1>", () => { |
||||||
cy.contains('h1', 'Great success!') |
cy.contains("h1", "Great success!") |
||||||
}); |
}) |
||||||
|
|
||||||
it('navigates to /about', () => { |
it("navigates to /about", () => { |
||||||
cy.get('nav a').contains('about').click(); |
cy.get("nav a") |
||||||
cy.url().should('include', '/about'); |
.contains("about") |
||||||
}); |
.click() |
||||||
|
cy.url().should("include", "/about") |
||||||
|
}) |
||||||
|
|
||||||
it('navigates to /blog', () => { |
it("navigates to /blog", () => { |
||||||
cy.get('nav a').contains('blog').click(); |
cy.get("nav a") |
||||||
cy.url().should('include', '/blog'); |
.contains("blog") |
||||||
}); |
.click() |
||||||
}); |
cy.url().should("include", "/blog") |
||||||
|
}) |
||||||
|
|
||||||
|
it("navigate to /register", () => { |
||||||
|
cy.get("nav a") |
||||||
|
.contains("Register") |
||||||
|
.click() |
||||||
|
cy.url().should("include", "/register") |
||||||
|
}) |
||||||
|
}) |
||||||
|
File diff suppressed because it is too large
Load Diff
@ -1,38 +1,39 @@ |
|||||||
{ |
{ |
||||||
"name": "clienter", |
"name": "clienter", |
||||||
"description": "TODO", |
"description": "TODO", |
||||||
"version": "0.0.1", |
"version": "0.0.1", |
||||||
"scripts": { |
"scripts": { |
||||||
"dev": "sapper dev", |
"dev": "sapper dev", |
||||||
"build": "sapper build --legacy", |
"build": "sapper build --legacy", |
||||||
"export": "sapper export --legacy", |
"export": "sapper export --legacy", |
||||||
"start": "node __sapper__/build", |
"start": "node __sapper__/build", |
||||||
"cy:run": "cypress run", |
"cy:run": "cypress run", |
||||||
"cy:open": "cypress open", |
"cy:open": "cypress open", |
||||||
"test": "run-p --race dev cy:run" |
"test": "run-p --race dev cy:run" |
||||||
}, |
}, |
||||||
"dependencies": { |
"dependencies": { |
||||||
"compression": "^1.7.1", |
"compression": "^1.7.1", |
||||||
"polka": "next", |
"graphql-request": "^1.8.2", |
||||||
"sirv": "^0.4.0" |
"polka": "next", |
||||||
}, |
"sirv": "^0.4.0" |
||||||
"devDependencies": { |
}, |
||||||
"@babel/core": "^7.0.0", |
"devDependencies": { |
||||||
"@babel/plugin-syntax-dynamic-import": "^7.0.0", |
"@babel/core": "^7.0.0", |
||||||
"@babel/plugin-transform-runtime": "^7.0.0", |
"@babel/plugin-syntax-dynamic-import": "^7.0.0", |
||||||
"@babel/preset-env": "^7.0.0", |
"@babel/plugin-transform-runtime": "^7.0.0", |
||||||
"@babel/runtime": "^7.0.0", |
"@babel/preset-env": "^7.0.0", |
||||||
"cypress": "^3.4.1", |
"@babel/runtime": "^7.0.0", |
||||||
"cypress-jest-adapter": "^0.1.1", |
"cypress": "^3.5.0", |
||||||
"npm-run-all": "^4.1.5", |
"cypress-jest-adapter": "^0.1.1", |
||||||
"rollup": "^1.12.0", |
"npm-run-all": "^4.1.5", |
||||||
"rollup-plugin-babel": "^4.0.2", |
"rollup": "^1.12.0", |
||||||
"rollup-plugin-commonjs": "^10.0.0", |
"rollup-plugin-babel": "^4.0.2", |
||||||
"rollup-plugin-node-resolve": "^5.2.0", |
"rollup-plugin-commonjs": "^10.0.0", |
||||||
"rollup-plugin-replace": "^2.0.0", |
"rollup-plugin-node-resolve": "^5.2.0", |
||||||
"rollup-plugin-svelte": "^5.0.1", |
"rollup-plugin-replace": "^2.0.0", |
||||||
"rollup-plugin-terser": "^4.0.4", |
"rollup-plugin-svelte": "^5.0.1", |
||||||
"sapper": "^0.27.0", |
"rollup-plugin-terser": "^4.0.4", |
||||||
"svelte": "^3.0.0" |
"sapper": "^0.27.0", |
||||||
} |
"svelte": "^3.0.0" |
||||||
|
} |
||||||
} |
} |
||||||
|
@ -1,60 +1,78 @@ |
|||||||
<script> |
<script> |
||||||
export let segment; |
export let segment; |
||||||
</script> |
</script> |
||||||
|
|
||||||
<style> |
<style> |
||||||
nav { |
nav { |
||||||
border-bottom: 1px solid rgba(255,62,0,0.1); |
border-bottom: 1px solid rgba(255, 62, 0, 0.1); |
||||||
font-weight: 300; |
font-weight: 300; |
||||||
padding: 0 1em; |
padding: 0 1em; |
||||||
} |
} |
||||||
|
|
||||||
ul { |
ul { |
||||||
margin: 0; |
margin: 0; |
||||||
padding: 0; |
padding: 0; |
||||||
} |
} |
||||||
|
|
||||||
/* clearfix */ |
/* clearfix */ |
||||||
ul::after { |
ul::after { |
||||||
content: ''; |
content: ""; |
||||||
display: block; |
display: block; |
||||||
clear: both; |
clear: both; |
||||||
} |
} |
||||||
|
|
||||||
li { |
li { |
||||||
display: block; |
display: block; |
||||||
float: left; |
float: left; |
||||||
} |
} |
||||||
|
|
||||||
.selected { |
.selected { |
||||||
position: relative; |
position: relative; |
||||||
display: inline-block; |
display: inline-block; |
||||||
} |
} |
||||||
|
|
||||||
.selected::after { |
.selected::after { |
||||||
position: absolute; |
position: absolute; |
||||||
content: ''; |
content: ""; |
||||||
width: calc(100% - 1em); |
width: calc(100% - 1em); |
||||||
height: 2px; |
height: 2px; |
||||||
background-color: rgb(255,62,0); |
background-color: rgb(255, 62, 0); |
||||||
display: block; |
display: block; |
||||||
bottom: -1px; |
bottom: -1px; |
||||||
} |
} |
||||||
|
|
||||||
a { |
a { |
||||||
text-decoration: none; |
text-decoration: none; |
||||||
padding: 1em 0.5em; |
padding: 1em 0.5em; |
||||||
display: block; |
display: block; |
||||||
} |
} |
||||||
</style> |
</style> |
||||||
|
|
||||||
<nav> |
<nav> |
||||||
<ul> |
<ul> |
||||||
<li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li> |
<li> |
||||||
<li><a class='{segment === "about" ? "selected" : ""}' href='about'>about</a></li> |
<a class={segment === undefined ? 'selected' : ''} href=".">home</a> |
||||||
|
</li> |
||||||
|
|
||||||
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches |
<li> |
||||||
|
<a class={segment === 'about' ? 'selected' : ''} href="about">about</a> |
||||||
|
</li> |
||||||
|
|
||||||
|
<!-- for the blog link, we're using rel=prefetch so that Sapper prefetches |
||||||
the blog data when we hover over the link or tap it on a touchscreen --> |
the blog data when we hover over the link or tap it on a touchscreen --> |
||||||
<li><a rel=prefetch class='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li> |
<li> |
||||||
</ul> |
<a |
||||||
</nav> |
rel="prefetch" |
||||||
|
class={segment === 'blog' ? 'selected' : ''} |
||||||
|
href="blog"> |
||||||
|
blog |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
|
||||||
|
<li> |
||||||
|
<a class={segment === 'register' ? 'selected' : ''} href="register"> |
||||||
|
Register |
||||||
|
</a> |
||||||
|
</li> |
||||||
|
</ul> |
||||||
|
</nav> |
||||||
|
@ -0,0 +1,57 @@ |
|||||||
|
<script> |
||||||
|
import { request } from "graphql-request" |
||||||
|
|
||||||
|
const uri = "http://localhost:4000/graphql" |
||||||
|
const createUserMutation = ` |
||||||
|
mutation ($email: String!, $password: String!) { |
||||||
|
createUser(email: $email, password: $password) { |
||||||
|
email |
||||||
|
id |
||||||
|
} |
||||||
|
}` |
||||||
|
|
||||||
|
const handleSubmit = () => { |
||||||
|
response = getResponse() |
||||||
|
} |
||||||
|
|
||||||
|
const getResponse = async () => { |
||||||
|
if (email && password) { |
||||||
|
const res = await request(uri, createUserMutation, { email, password }) |
||||||
|
return res.createUser |
||||||
|
} |
||||||
|
} |
||||||
|
// function handleSubmit() { |
||||||
|
// console.log("HANDLE") |
||||||
|
// } |
||||||
|
|
||||||
|
let email |
||||||
|
let password |
||||||
|
let response |
||||||
|
</script> |
||||||
|
|
||||||
|
<svelte:head> |
||||||
|
<title>User Registration</title> |
||||||
|
</svelte:head> |
||||||
|
|
||||||
|
<h1>User Registration</h1> |
||||||
|
|
||||||
|
<form on:submit|preventDefault="{handleSubmit}"> |
||||||
|
<label>Login</label> |
||||||
|
<input bind:value="{email}" type="text" />{email} |
||||||
|
<br /> |
||||||
|
|
||||||
|
<label>Password</label> |
||||||
|
<input bind:value="{password}" type="text" />{password} |
||||||
|
|
||||||
|
<br /> |
||||||
|
<button type="submit">Submit</button> |
||||||
|
</form> |
||||||
|
|
||||||
|
{#await response} |
||||||
|
<p>...waiting</p> |
||||||
|
{:then user} |
||||||
|
<p>The user ID is {{...user}.id}</p> |
||||||
|
<p id="output">The user email is {{...user}.email}</p> |
||||||
|
{:catch error} |
||||||
|
<p style="color: red">{error.message}</p> |
||||||
|
{/await} |
Loading…
Reference in new issue