add counter spec

Author: bahmutov

README.md

@@ -27,6 +27,9 @@ describe('HelloState component', () => {
 
 ## Examples
 
-* [cypress/integration/hello-world-spec.js](cypress/integration/hello-world-spec.js) - testing the simplest React component from [src/hello-world.jsx](src/hello-world.jsx)
-* [cypress/integration/hello-x-spec.js](cypress/integration/hello-x-spec.js) - testing React component with props and state [src/hello-x.jsx](src/hello-x.jsx)
-* [bahmutov/calculator](https://github.com/bahmutov/calculator) tests multiple components
+All components are in [src](src) folder. All tests are in [cypress/integration](cypress/integration) folder.
+
+* [hello-world-spec.js](cypress/integration/hello-world-spec.js) - testing the simplest React component from [hello-world.jsx](src/hello-world.jsx)
+* [hello-x-spec.js](cypress/integration/hello-x-spec.js) - testing React component with props and state [hello-x.jsx](src/hello-x.jsx)
+* [counter-spec.js](cypress/integration/counter-spec.js) clicks on the component and confirms the result
+* separate repo [bahmutov/calculator](https://github.com/bahmutov/calculator) tests multiple components

cypress/integration/counter-spec.js

@@ -0,0 +1,15 @@
+import { Counter } from '../../src/counter.jsx'
+import React from 'react'
+import { mount } from '../../lib'
+
+/* eslint-env mocha */
+describe('Counter', () => {
+ it('counts clicks', () => {
+ mount(<Counter />)
+ cy.contains('count: 0')
+ .click()
+ .contains('count: 1')
+ .click()
+ .contains('count: 2')
+ })
+})

src/counter.jsx

@@ -0,0 +1,20 @@
+import React from 'react'
+
+export class Counter extends React.Component {
+ constructor (props) {
+ super(props)
+ this.state = {
+ count: 0
+ }
+ }
+
+ click () {
+ this.setState({
+ count: this.state.count + 1
+ })
+ }
+
+ render () {
+ return <p onClick={this.click.bind(this)}>count: {this.state.count}</p>
+ }
+}