parent
bbad42da6f
commit
e7d128a482
GPG Key ID:
4BB075BC1884BA40
@ -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', () => { |
||||
beforeEach(() => { |
||||
cy.visit('/') |
||||
}); |
||||
describe("app should", () => { |
||||
beforeEach(() => { |
||||
cy.visit("/") |
||||
}) |
||||
|
||||
it('has the correct <h1>', () => { |
||||
cy.contains('h1', 'Great success!') |
||||
}); |
||||
it("has the correct <h1>", () => { |
||||
cy.contains("h1", "Great success!") |
||||
}) |
||||
|
||||
it('navigates to /about', () => { |
||||
cy.get('nav a').contains('about').click(); |
||||
cy.url().should('include', '/about'); |
||||
}); |
||||
it("navigates to /about", () => { |
||||
cy.get("nav a") |
||||
.contains("about") |
||||
.click() |
||||
cy.url().should("include", "/about") |
||||
}) |
||||
|
||||
it('navigates to /blog', () => { |
||||
cy.get('nav a').contains('blog').click(); |
||||
cy.url().should('include', '/blog'); |
||||
}); |
||||
}); |
||||
it("navigates to /blog", () => { |
||||
cy.get("nav a") |
||||
.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", |
||||
"description": "TODO", |
||||
"version": "0.0.1", |
||||
"scripts": { |
||||
"dev": "sapper dev", |
||||
"build": "sapper build --legacy", |
||||
"export": "sapper export --legacy", |
||||
"start": "node __sapper__/build", |
||||
"cy:run": "cypress run", |
||||
"cy:open": "cypress open", |
||||
"test": "run-p --race dev cy:run" |
||||
}, |
||||
"dependencies": { |
||||
"compression": "^1.7.1", |
||||
"polka": "next", |
||||
"sirv": "^0.4.0" |
||||
}, |
||||
"devDependencies": { |
||||
"@babel/core": "^7.0.0", |
||||
"@babel/plugin-syntax-dynamic-import": "^7.0.0", |
||||
"@babel/plugin-transform-runtime": "^7.0.0", |
||||
"@babel/preset-env": "^7.0.0", |
||||
"@babel/runtime": "^7.0.0", |
||||
"cypress": "^3.4.1", |
||||
"cypress-jest-adapter": "^0.1.1", |
||||
"npm-run-all": "^4.1.5", |
||||
"rollup": "^1.12.0", |
||||
"rollup-plugin-babel": "^4.0.2", |
||||
"rollup-plugin-commonjs": "^10.0.0", |
||||
"rollup-plugin-node-resolve": "^5.2.0", |
||||
"rollup-plugin-replace": "^2.0.0", |
||||
"rollup-plugin-svelte": "^5.0.1", |
||||
"rollup-plugin-terser": "^4.0.4", |
||||
"sapper": "^0.27.0", |
||||
"svelte": "^3.0.0" |
||||
} |
||||
"name": "clienter", |
||||
"description": "TODO", |
||||
"version": "0.0.1", |
||||
"scripts": { |
||||
"dev": "sapper dev", |
||||
"build": "sapper build --legacy", |
||||
"export": "sapper export --legacy", |
||||
"start": "node __sapper__/build", |
||||
"cy:run": "cypress run", |
||||
"cy:open": "cypress open", |
||||
"test": "run-p --race dev cy:run" |
||||
}, |
||||
"dependencies": { |
||||
"compression": "^1.7.1", |
||||
"graphql-request": "^1.8.2", |
||||
"polka": "next", |
||||
"sirv": "^0.4.0" |
||||
}, |
||||
"devDependencies": { |
||||
"@babel/core": "^7.0.0", |
||||
"@babel/plugin-syntax-dynamic-import": "^7.0.0", |
||||
"@babel/plugin-transform-runtime": "^7.0.0", |
||||
"@babel/preset-env": "^7.0.0", |
||||
"@babel/runtime": "^7.0.0", |
||||
"cypress": "^3.5.0", |
||||
"cypress-jest-adapter": "^0.1.1", |
||||
"npm-run-all": "^4.1.5", |
||||
"rollup": "^1.12.0", |
||||
"rollup-plugin-babel": "^4.0.2", |
||||
"rollup-plugin-commonjs": "^10.0.0", |
||||
"rollup-plugin-node-resolve": "^5.2.0", |
||||
"rollup-plugin-replace": "^2.0.0", |
||||
"rollup-plugin-svelte": "^5.0.1", |
||||
"rollup-plugin-terser": "^4.0.4", |
||||
"sapper": "^0.27.0", |
||||
"svelte": "^3.0.0" |
||||
} |
||||
} |
||||
|
||||
@ -1,60 +1,78 @@ |
||||
<script> |
||||
export let segment; |
||||
export let segment; |
||||
</script> |
||||
|
||||
<style> |
||||
nav { |
||||
border-bottom: 1px solid rgba(255,62,0,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(255,62,0); |
||||
display: block; |
||||
bottom: -1px; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
padding: 1em 0.5em; |
||||
display: block; |
||||
} |
||||
nav { |
||||
border-bottom: 1px solid rgba(255, 62, 0, 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(255, 62, 0); |
||||
display: block; |
||||
bottom: -1px; |
||||
} |
||||
|
||||
a { |
||||
text-decoration: none; |
||||
padding: 1em 0.5em; |
||||
display: block; |
||||
} |
||||
</style> |
||||
|
||||
<nav> |
||||
<ul> |
||||
<li><a class='{segment === undefined ? "selected" : ""}' href='.'>home</a></li> |
||||
<li><a class='{segment === "about" ? "selected" : ""}' href='about'>about</a></li> |
||||
<ul> |
||||
<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 --> |
||||
<li><a rel=prefetch class='{segment === "blog" ? "selected" : ""}' href='blog'>blog</a></li> |
||||
</ul> |
||||
</nav> |
||||
<li> |
||||
<a |
||||
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