Commit 01b9c696 authored by Walmyr Filho's avatar Walmyr Filho

Create project

parents
.DS_Store
node_modules
\ No newline at end of file
# Sample App Cypress tests
This project intends to demonstrate the third guideline of [Better Code Hub](http://bettercodehub.com) (Write Code Once) with GUI tests written using [Cypress](http://cypress.io) for a sample web app.
## Pre-requirements
You will need [Node](http://nodejs.org) and NPM to run the tests for this sample app.
> I used the following verion of node when creating this project v10.15.1, and the following version of npm 6.7.0.
> npm is automatically installed once node is installed.
## Installation
Run `npm i` to install the dev dependencies.
## Running tests in interactive mode
Run `npx cypress open` to open cypress, then click the **Run all specs** button to run the tests.
___
Made with 💚 by [Walmyr Lima e Silva Filho](https://walmyr-filho.com).
\ No newline at end of file
{
"name": "Using fixtures to represent data",
"email": "hello@cypress.io",
"body": "Fixtures are a great way to mock data for responses to routes"
}
\ No newline at end of file
/// <reference types="cypress" />
// v1 - Código duplicado
describe("Sample app", () => {
context("Shorten/Expand", () => {
it("shortens a URL", () => {
cy.visit("https://goo.gl/ZYQsTL");
cy.get("input[type='text']").type("https://abcdefghijklmnopqrstuvwxyz.æåø");
cy.contains("Shorten").click();
cy.get("#responseField a").should("contain", "https://foo.bar");
});
it("expands a URL", () => {
cy.visit("https://goo.gl/ZYQsTL");
cy.get("input[type='text']").type("https://abc.de");
cy.contains("Expand").click();
cy.get("#responseField a").should("contain", "https://foo.bar.baz.bah.boo");
});
});
});
// v2 - Eliminação de duplicação de código com o uso de funções
describe("Sample app", () => {
context("Shorten/Expand", () => {
beforeEach(() => cy.visit("https://goo.gl/ZYQsTL"));
it("shortens a URL", () => {
shortenUrl("https://abcdefghijklmnopqrstuvwxyz.æåø");
verifyResponseFieldLinkContainUrl("https://foo.bar");
});
it("expands a URL", () => {
expandUrl("https://abc.de");
verifyResponseFieldLinkContainUrl("https://foo.bar.baz.bah.boo");
});
function shortenUrl(url) {
typeUrl(url);
cy.contains("Shorten").click();
}
function expandUrl(url) {
typeUrl(url);
cy.contains("Expand").click();
}
function typeUrl(url) {
cy.get("input[type='text']").type(url);
}
function verifyResponseFieldLinkContainUrl(url) {
cy.get("#responseField a").should("contain", url);
}
});
});
// v3 - Limpesa de código com o uso de commandos customizados
describe("Sample app", () => {
context("Shorten/Expand", () => {
beforeEach(() => cy.visit("https://goo.gl/ZYQsTL"));
it("shortens a URL", () => {
cy.shortenUrl("https://abcdefghijklmnopqrstuvwxyz.æåø");
cy.verifyResponseFieldLinkContainUrl("https://foo.bar");
});
it("expands a URL", () => {
cy.expandUrl("https://abc.de");
cy.verifyResponseFieldLinkContainUrl("https://foo.bar.baz.bah.boo");
});
});
});
\ No newline at end of file
// ***********************************************************
// This example plugins/index.js can be used to load plugins
//
// You can change the location of this file or turn off loading
// the plugins file with the 'pluginsFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/plugins-guide
// ***********************************************************
// This function is called when a project is opened or re-opened (e.g. due to
// the project's config changing)
module.exports = (on, config) => {
// `on` is used to hook into various events Cypress emits
// `config` is the resolved Cypress config
}
Cypress.Commands.add("shortenUrl", url => {
cy.typeUrl(url);
cy.contains("Shorten").click();
});
Cypress.Commands.add("expandUrl", url => {
cy.typeUrl(url);
cy.contains("Expand").click();
});
Cypress.Commands.add("typeUrl", url => {
cy.get("input[type='text']").type(url);
});
Cypress.Commands.add("verifyResponseFieldLinkContainUrl", url => {
cy.get("#responseField a").should("contain", url);
});
\ No newline at end of file
// ***********************************************************
// This example support/index.js is processed and
// loaded automatically before your test files.
//
// This is a great place to put global configuration and
// behavior that modifies Cypress.
//
// You can change the location of this file or turn off
// automatically serving support files with the
// 'supportFile' configuration option.
//
// You can read more here:
// https://on.cypress.io/configuration
// ***********************************************************
// Import commands.js using ES2015 syntax:
import './commands'
// Alternatively you can use CommonJS syntax:
// require('./commands')
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Byte Size</title>
<link rel="stylesheet" type="text/css" href="public/style.css" />
<link
href="https://fonts.googleapis.com/css?family=Roboto"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css?family=Source+Sans+Pro"
rel="stylesheet"
/>
</head>
<body>
<header>
<img
src="https://s3.amazonaws.com/codecademy-content/courses/intermediate-javascript-requests/bytesize_logo.svg"
alt="logo"
class="logo"
/>
</header>
<main id="main">
<div class="container">
<h1>Enter a URL</h1>
<form id="form" autocomplete="off">
<input type="text" id="input" value="" />
<button id="shorten">Shorten</button>
<button id="expand">Expand</button>
</form>
<div id="responseField"></div>
<form id="file-upload">
<input
type="file"
name="file"
id="file"
class="inputfile"
placeholder="Choose a file"
/>
<label for="file"><strong>Choose a file</strong></label>
</form>
</div>
</main>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script src="public/main.js"></script>
</body>
</html>
This diff is collapsed.
{
"name": "sampleapp",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"cypress": "^3.1.5"
}
}
const $expandButton = $("#expand");
const $shortenButton = $("#shorten");
const $responseField = $("#responseField");
function expandUrl() {
$("#responseField").append(
`<p> Your expanded URL is: </p><a href="https://foo.bar.baz.bah.boo" target="_blank">
https://foo.bar.baz.bah.boo
</a>`
);
}
function shortenUrl() {
$("#responseField").append(
`<p> Your expanded URL is: </p><a href="https://foo.bar" target="_blank">
https://foo.bar
</a>`
);
}
function expand() {
$responseField.empty();
expandUrl();
return false;
}
function shorten() {
$responseField.empty();
shortenUrl();
return false;
}
$expandButton.click(expand);
$shortenButton.click(shorten);
$("[type=file]").on("change", function() {
const file = this.files[0].name;
const placeholder = $(this).attr("placeholder");
if ($(this).val() != "") {
$(this)
.next()
.text(file);
} else {
$(this)
.next()
.text(placeholder);
}
});
header {
height: 60px;
text-align: center;
}
main {
background-color: #0087de;
height: 900px;
text-align: center;
}
h1 {
height: 38px;
font-family: Roboto;
font-size: 32px;
font-weight: 300;
letter-spacing: 0.6px;
text-align: center;
color: #1f233e;
padding-top: 137px;
}
.logo {
width: 110px;
height: 28px;
margin-top: 40px;
object-fit: contain;
}
.container {
width: 400px;
margin: auto;
text-align: center;
}
#input {
width: 219px;
height: 37px;
border-radius: 3.2px;
border: solid 0.8px #1f233e;
background-color: inherit;
display: block;
margin: auto;
font-family: Source Sans Pro;
font-size: 14px;
letter-spacing: 0.2px;
text-align: center;
color: #ffffff;
}
#shorten {
width: 91px;
height: 37px;
border-radius: 3.2px;
border: solid 0.8px #1f233e;
background-color: inherit;
margin-top: 48px;
font-family: Source Sans Pro;
font-size: 14px;
letter-spacing: 0.2px;
text-align: center;
color: #ffffff;
margin-right: -3px;
}
#expand {
width: 91px;
height: 37px;
border-radius: 3.2px;
background-color: #1f233e;
border: solid 0.8px #4a4a4a;
margin-top: 48px;
font-family: Source Sans Pro;
font-size: 14px;
letter-spacing: 0.2px;
text-align: center;
color: #ffffff;
margin-left: -3px;
}
#responseField {
min-width: 191px;
min-height: 120px;
border: solid 2px #ffffff;
margin: auto;
margin-top: 25px;
font-family: Source Sans Pro;
font-size: 16px;
letter-spacing: 0.2px;
text-align: center;
color: #ffffff;
overflow-wrap: break-word;
}
a {
color: #ffffff;
}
#file-upload {
font-family: Source Sans Pro;
padding-top: 25px;
}
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
pointer-events: none;
z-index: -1;
}
.inputfile + label {
background-color: white;
border-radius: 5%;
cursor: pointer;
font-size: 1.25em;
font-weight: 700;
color: black;
display: inline-block;
padding: 14px 20px;
}
.inputfile:focus + label {
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment