explicit test with styled-components, closes #40

Author: bahmutov

README.md

@@ -102,6 +102,7 @@ Spec | Description
 [unmount](cypress/component/basic/unmount) | Verifies the component's behavior when it is unmounted from the DOM
 [use-lodash-fp](cypress/component/basic/use-lodash-fp) | Imports and tests methods from `lodash/fp` dependency
 [document-spec](cypress/component/basic/document) | Checks `document` dimensions from the component
+[styled-components](cypress/component/basic/styled-components) | Test components that use [styled-components](https://www.styled-components.com/)
 <!-- prettier-ignore-end -->
 
 plus a few smaller sanity specs in [cypress/component/basic](cypress/component/basic) folder.

cypress/component/basic/react-book-by-chris-noring/thinking-in-components/App.css

@@ -2,7 +2,6 @@
 import { mount } from 'cypress-react-unit-test'
 import React, { Component } from 'react'
 import Todos from './Todos'
-import './App.css'
 
 const todos = [
   {

cypress/component/basic/react-book-by-chris-noring/thinking-in-components/Todos-spec.js

@@ -0,0 +1,3 @@
+https://softchris.github.io/books/react/thinkingincomponents/
+
+Components are using [styled-components](https://www.styled-components.com/)

cypress/component/basic/styled-components/README.md

@@ -0,0 +1,20 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from 'cypress-react-unit-test'
+import Todo from './Todo'
+
+it('renders Todo', () => {
+  const todo = {
+    title: 'clean',
+    done: false,
+    id: 1,
+  }
+  const handleChecked = cy.stub()
+  mount(<Todo todo={todo} key={todo.id} handleChecked={handleChecked} />)
+  cy.contains('clean')
+  cy.get('input[type=checkbox]')
+    .check()
+    .then(() => {
+      expect(handleChecked).to.have.been.calledOnce
+    })
+})

cypress/component/basic/styled-components/Todo-spec.js

@@ -0,0 +1,31 @@
+import React from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+
+const TodoContainer = styled.div`
+  box-shadow: 0 0 5px gray;
+  padding: 30px;
+  margin-bottom: 10px;
+`
+
+const Todo = ({ todo, handleChecked }) => (
+  <TodoContainer key={todo.id} data-cy="todo">
+    <input
+      type="checkbox"
+      onChange={() => handleChecked(todo)}
+      checked={todo.done}
+    />
+    {todo.title}
+  </TodoContainer>
+)
+
+Todo.propTypes = {
+  todo: PropTypes.shape({
+    title: PropTypes.string,
+    done: PropTypes.bool,
+    id: PropTypes.number,
+  }),
+  handleChecked: PropTypes.func,
+}
+
+export default Todo

cypress/component/basic/styled-components/Todo.js

@@ -0,0 +1,34 @@
+/// <reference types="cypress" />
+import { mount } from 'cypress-react-unit-test'
+import React, { Component } from 'react'
+import Todos from './Todos'
+
+const todos = [
+  {
+    title: 'clean',
+    done: false,
+    id: 1,
+  },
+  {
+    title: 'do the dishes',
+    done: true,
+    id: 2,
+  },
+]
+
+class App extends Component {
+  render() {
+    return <Todos todos={todos} />
+  }
+}
+
+it('renders todos', () => {
+  cy.viewport(400, 500)
+  mount(<App />)
+  cy.contains('[data-cy="todo"]', 'clean')
+    .find('input[type=checkbox]')
+    .should('not.be.checked')
+  cy.contains('[data-cy="todo"]', 'do the dishes')
+    .find('input[type=checkbox]')
+    .should('be.checked')
+})

cypress/component/basic/styled-components/Todos-spec.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import styled from 'styled-components'
+import PropTypes from 'prop-types'
+
+import Todo from './Todo'
+
+const TodosContainer = styled.div`
+  padding: 30px;
+`
+
+class Todos extends Component {
+  static propTypes = {
+    todos: PropTypes.array.isRequired,
+  }
+
+  state = {
+    todos: this.props.todos,
+  }
+
+  handleChecked = todo => {
+    const newTodos = this.state.todos.map(t => {
+      if (t.id === todo.id) {
+        return { ...t, done: !t.done }
+      }
+      return t
+    })
+
+    this.setState({
+      todos: newTodos,
+    })
+  }
+
+  render() {
+    return (
+      <TodosContainer>
+        <h2>Todos</h2>
+        {this.state.todos.map(todo => (
+          <Todo todo={todo} key={todo.id} handleChecked={this.handleChecked} />
+        ))}
+      </TodosContainer>
+    )
+  }
+}
+
+export default Todos