This repo is used for the workshop given at the kickoff Meetup of Hacktoberfest 2019 at Greenberry in Utrecht.
Add your info to the people.json
Example format
//...
{
"name": "Ramon Gebben",
"github": "@RamonGebben",
"twitter": "@RamonGebben",
"linkedin": "https://www.linkedin.com/in/ramon-gebben-88039b85"
}
//...
Submit your PR.
A quick look at the files and directories you'll see in this project.
.
โโโ node_modules
โโโ cypress
โโโ fixtures
โโโ integration <--- Integration tests live here
โโโ auth
โโโ sign-up.js
โโโ sign-in.js
โโโ sign-out.js
โโโ src
โโโ components
โโโ MyComponent
โโโ index.js
โโโ index.spec.js
โโโ images
โโโ pages
โโโ route-name.js <--- Pages folder is used by Gatsby to generate pages
โโโ about.js
โโโ templates
โโโ PostTemplate
โโโ index.js
โโโ index.spec.js
โโโ utils
โโโ myUtil
โโโ index.js
โโโ index.spec.js
โโโ .gitignore
โโโ gatsby-browser.js
โโโ gatsby-config.js
โโโ gatsby-node.js
โโโ gatsby-ssr.js
โโโ LICENSE
โโโ package.json
โโโ yarn.lock
โโโ README.md
build Will generate the optimized static website.
yarn build
develop Will start development server
yarn develop
start
Is a short cut to yarn develop
yarn start
serve Uses Gatsby's webserver to serve the static build
yarn serve
lint Ensures proper code format
yarn lint
test Runs all tests
yarn test
Cypress
For end-to-end/integration testing we use Cypress.
All integration tests are kept in /cypress/integration/
folder.
To keep this folder organized, convention is to create folders per flow or type of scenario.
Let's say we have an application with 2 roles. Each role might have a different journey through the signing flow. Both flows would be "sign-in" however the tests should be different, so we would structure the files like so;
/cypress
/integration
/role-admin
- sign-in.js
/role-user
- sign-in.js
Percy Percy is an all-in-one visual review platform. It is integrated with Cypress so we are able to create visual reference points to validate across different versions of the app/website.
Usage:
//...Within a Cypress test
it('should be able to visit to /posts', () => {
cy.visit(`${Cypress.env('appUrl')}/posts`);
// Create snapshot
cy.percySnapshot();
});