add counter spec

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>
+  }
+}