Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

This closes #29, adds cypress for e2e tests. #43

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions .all-contributorsrc
Original file line number Diff line number Diff line change
Expand Up @@ -97,6 +97,15 @@
"contributions": [
"doc"
]
},
{
"login": "josenaranjo",
"name": "Jose Luis Naranjo",
"avatar_url": "https://avatars2.githubusercontent.com/u/3025600?v=4",
"profile": "https://co.linkedin.com/in/josenaranjo/en",
"contributions": [
"code"
]
}
]
}
16 changes: 13 additions & 3 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# Flexbox playground

[![All Contributors](https://img.shields.io/badge/all_contributors-9-orange.svg?style=flat-square)](#contributors)
[![All Contributors](https://img.shields.io/badge/all_contributors-10-orange.svg?style=flat-square)](#contributors)

# How to run the app - Available Scripts

Expand Down Expand Up @@ -45,6 +45,17 @@ yarn eject
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.

# e2e tests

The following command opens the cypress console from which you can run the tests.

```
yarn test:e2e
```

<center><img src="https://docs.cypress.io/img/guides/testing-your-app-home-page-spec.049e17f2.png"/></center>


## How to contribute?

---
Expand Down Expand Up @@ -103,8 +114,7 @@ Thanks goes to these wonderful people ([emoji key](https://github.com/kentcdodds
<!-- prettier-ignore -->
| [<img src="https://avatars3.githubusercontent.com/u/18565471?v=4" width="100px;"/><br /><sub><b>Angela Ordoñez</b></sub>](http://angelitaooo.github.io)<br />[📖](https://github.com/react-medellin/flexbox-playground/commits?author=angelitaooo "Documentation") [🔧](#tool-angelitaooo "Tools") | [<img src="https://avatars3.githubusercontent.com/u/8260962?v=4" width="100px;"/><br /><sub><b>Daniel Correa</b></sub>](https://danielcb29.github.io/)<br />[📖](https://github.com/react-medellin/flexbox-playground/commits?author=danielcb29 "Documentation") | [<img src="https://avatars1.githubusercontent.com/u/23706543?v=4" width="100px;"/><br /><sub><b>Simon Hoyos</b></sub>](https://www.linkedin.com/in/simonhoyos/)<br />[💬](#question-shmesa22 "Answering Questions") [💻](https://github.com/react-medellin/flexbox-playground/commits?author=shmesa22 "Code") [📋](#eventOrganizing-shmesa22 "Event Organizing") [👀](#review-shmesa22 "Reviewed Pull Requests") [✅](#tutorial-shmesa22 "Tutorials") | [<img src="https://avatars0.githubusercontent.com/u/19338528?v=4" width="100px;"/><br /><sub><b>Robin Hurtado Abadia</b></sub>](http://robinhurtado.surge.sh)<br />[💻](https://github.com/react-medellin/flexbox-playground/commits?author=robinHurtado "Code") | [<img src="https://avatars2.githubusercontent.com/u/16061815?v=4" width="100px;"/><br /><sub><b>Maria Camila Gomez Restrepo</b></sub>](http://www.camigomez.me/)<br />[📖](https://github.com/react-medellin/flexbox-playground/commits?author=camigomez35 "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/33497419?v=4" width="100px;"/><br /><sub><b>William Gómez Ortega</b></sub>](http://www.williamgomez.me)<br />[🐛](https://github.com/react-medellin/flexbox-playground/issues?q=author%3Awilliamegomez "Bug reports") [💻](https://github.com/react-medellin/flexbox-playground/commits?author=williamegomez "Code") [📖](https://github.com/react-medellin/flexbox-playground/commits?author=williamegomez "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/3844042?v=4" width="100px;"/><br /><sub><b>kritokrator</b></sub>](https://github.com/kritokrator)<br />[📖](https://github.com/react-medellin/flexbox-playground/commits?author=kritokrator "Documentation") |
| :---: | :---: | :---: | :---: | :---: | :---: | :---: |
| [<img src="https://avatars2.githubusercontent.com/u/27037672?v=4" width="100px;"/><br /><sub><b>Jose Mario Gutierrez</b></sub>](https://github.com/josemariogutierrez)<br />[💻](https://github.com/react-medellin/flexbox-playground/commits?author=josemariogutierrez "Code") [🎨](#design-josemariogutierrez "Design") | [<img src="https://avatars2.githubusercontent.com/u/28201235?v=4" width="100px;"/><br /><sub><b>jsnavarroc</b></sub>](https://github.com/jsnavarroc)<br />[📖](https://github.com/react-medellin/flexbox-playground/commits?author=jsnavarroc "Documentation") |

| [<img src="https://avatars2.githubusercontent.com/u/27037672?v=4" width="100px;"/><br /><sub><b>Jose Mario Gutierrez</b></sub>](https://github.com/josemariogutierrez)<br />[💻](https://github.com/react-medellin/flexbox-playground/commits?author=josemariogutierrez "Code") [🎨](#design-josemariogutierrez "Design") | [<img src="https://avatars2.githubusercontent.com/u/28201235?v=4" width="100px;"/><br /><sub><b>jsnavarroc</b></sub>](https://github.com/jsnavarroc)<br />[📖](https://github.com/react-medellin/flexbox-playground/commits?author=jsnavarroc "Documentation") | [<img src="https://avatars2.githubusercontent.com/u/3025600?v=4" width="100px;"/><br /><sub><b>Jose Luis Naranjo</b></sub>](https://co.linkedin.com/in/josenaranjo/en)<br />[💻](https://github.com/react-medellin/flexbox-playground/commits?author=josenaranjo "Code") |
<!-- ALL-CONTRIBUTORS-LIST:END -->

This project follows the [all-contributors](https://github.com/kentcdodds/all-contributors) specification. Contributions of any kind welcome!
1 change: 1 addition & 0 deletions cypress.json
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
{}
5 changes: 5 additions & 0 deletions cypress/fixtures/example.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
{
"name": "Using fixtures to represent data",
"email": "[email protected]",
"body": "Fixtures are a great way to mock data for responses to routes"
}
24 changes: 24 additions & 0 deletions cypress/integration/flexbox/boxes.spec.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
/// <reference types="Cypress" />

context('Actions', () => {
beforeEach(() => {
cy.visit('http://localhost:3000/')
})

it('Set boxes width and height', () => {

cy.get('#change-width-box')
.clear()
.type('80').should('have.value', '80')


cy.get('#change-height-box')
.clear()
.type('80').should('have.value', '80')

cy.get('[data-e2e=box-0]')
.should('have.attr', 'width', '80')
.should('have.attr', 'height', '80')

})
})
17 changes: 17 additions & 0 deletions cypress/plugins/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
// ***********************************************************
// 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
}
25 changes: 25 additions & 0 deletions cypress/support/commands.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
// ***********************************************
// This example commands.js shows you how to
// create various custom commands and overwrite
// existing commands.
//
// For more comprehensive examples of custom
// commands please read more here:
// https://on.cypress.io/custom-commands
// ***********************************************
//
//
// -- This is a parent command --
// Cypress.Commands.add("login", (email, password) => { ... })
//
//
// -- This is a child command --
// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
//
//
// -- This is a dual command --
// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
//
//
// -- This is will overwrite an existing command --
// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
20 changes: 20 additions & 0 deletions cypress/support/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
// ***********************************************************
// 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')
4 changes: 3 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,7 @@
"predeploy": "yarn build",
"deploy": "gh-pages -d build",
"test": "react-scripts test --env=jsdom",
"test:e2e": "npx cypress open",
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You can just do cypress open

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried it command not found: cypress. I think it depends if you installed globally or not.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
"test:e2e": "npx cypress open",
"test:e2e": "cypress open",

"eject": "react-scripts eject",
"contributors:add": "all-contributors add",
"contributors:generate": "all-contributors generate"
Expand All @@ -31,6 +32,7 @@
"devDependencies": {
"all-contributors-cli": "^5.4.0",
"babel-preset-stage-1": "^6.24.1",
"cypress": "^3.1.0",
"gh-pages": "2.0.1"
}
}
}
2 changes: 1 addition & 1 deletion src/FlexBox.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ const Container = styled.div`

const displayBoxes = ({ numberBoxes, width, height }) =>
Array.from({ length: numberBoxes }, (_, i) =>
<Box primary={i % 2 === 0} width={width} height={height} key={i}/>);
<Box data-e2e={`box-${i}`} primary={i % 2 === 0} width={width} height={height} key={i}/>);
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👌


export const FlexBox = (props) => (
<Container {...props}>
Expand Down
Loading