add more examples from React tutorial

Author: bahmutov

cypress.json

@@ -4,7 +4,7 @@
  "video": false,
  "projectId": "z9dxah",
  "mountMode": true,
- "ignoreTestFiles": "*.css",
+ "testFiles": "**/*spec.js",
  "env": {
  "cypress-react-unit-test": {
  "react": "node_modules/react/umd/react.development.js",

cypress/integration/tutorial/README.md

@@ -0,0 +1,3 @@
+React tutorial from https://reactjs.org/tutorial/tutorial.html
+
+Just following the tutorial and writing Cypress component tests

cypress/integration/tutorial/shopping-list-spec.js

@@ -0,0 +1,14 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from "cypress-react-unit-tests";
+import ShoppingList from './shopping-list.jsx'
+
+describe('Shopping list', () => {
+ beforeEach(() => {
+ cy.viewport(600, 600)
+ })
+ it('shows FB list', () => {
+ mount(<ShoppingList name="Facebook" />)
+ cy.get('li').should('have.length', 3)
+ })
+})

cypress/integration/tutorial/shopping-list.jsx

@@ -0,0 +1,16 @@
+import React from "react";
+
+export default class ShoppingList extends React.Component {
+ render() {
+ return (
+ <div className="shopping-list">
+ <h1>Shopping List for {this.props.name}</h1>
+ <ul>
+ <li>Instagram</li>
+ <li>WhatsApp</li>
+ <li>Oculus</li>
+ </ul>
+ </div>
+ );
+ }
+}

cypress/integration/tutorial/square-spec.js

@@ -0,0 +1,35 @@
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from "cypress-react-unit-tests";
+
+// let's put React component right in the spec file
+class Square extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ value: null,
+ };
+ }
+
+ render() {
+ return (
+ <button
+ className="square"
+ onClick={() => this.setState({value: 'X'})}
+ >
+ {this.state.value}
+ </button>
+ );
+ }
+}
+
+describe('Square', () => {
+ it('changes value on click', () => {
+ const selector = 'button.square'
+ mount(<Square />)
+ // initially button is blank
+ cy.get(selector).should('have.text', '')
+ // but it changes text on click
+ cy.get(selector).click().should('have.text', 'X')
+ })
+})

cypress/integration/tutorial/tic-tac-toe-spec.js

@@ -0,0 +1,140 @@
+// entire game from the tutorial inside the spec for simplicity
+// the code taken from https://codepen.io/gaearon/pen/LyyXgK
+/// <reference types="cypress" />
+import React from 'react'
+import { mount } from "cypress-react-unit-tests";
+
+// TODO add styles somehow
+
+function calculateWinner(squares) {
+ const lines = [
+ [0, 1, 2],
+ [3, 4, 5],
+ [6, 7, 8],
+ [0, 3, 6],
+ [1, 4, 7],
+ [2, 5, 8],
+ [0, 4, 8],
+ [2, 4, 6],
+ ];
+ for (let i = 0; i < lines.length; i++) {
+ const [a, b, c] = lines[i];
+ if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
+ return squares[a];
+ }
+ }
+ return null;
+}
+
+function Square(props) {
+ return (
+ <button className="square" onClick={props.onClick}>
+ {props.value}
+ </button>
+ );
+}
+
+class Board extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ squares: Array(9).fill(null),
+ xIsNext: true,
+ };
+ }
+
+ handleClick(i) {
+ const squares = this.state.squares.slice();
+ if (calculateWinner(squares) || squares[i]) {
+ return;
+ }
+ squares[i] = this.state.xIsNext ? 'X' : 'O';
+ this.setState({
+ squares: squares,
+ xIsNext: !this.state.xIsNext,
+ });
+ }
+
+ renderSquare(i) {
+ return (
+ <Square
+ value={this.state.squares[i]}
+ onClick={() => this.handleClick(i)}
+ />
+ );
+ }
+
+ render() {
+ const winner = calculateWinner(this.state.squares);
+ let status;
+ if (winner) {
+ status = 'Winner: ' + winner;
+ } else {
+ status = 'Next player: ' + (this.state.xIsNext ? 'X' : 'O');
+ }
+
+ return (
+ <div>
+ <div className="status">{status}</div>
+ <div className="board-row">
+ {this.renderSquare(0)}
+ {this.renderSquare(1)}
+ {this.renderSquare(2)}
+ </div>
+ <div className="board-row">
+ {this.renderSquare(3)}
+ {this.renderSquare(4)}
+ {this.renderSquare(5)}
+ </div>
+ <div className="board-row">
+ {this.renderSquare(6)}
+ {this.renderSquare(7)}
+ {this.renderSquare(8)}
+ </div>
+ </div>
+ );
+ }
+}
+
+class Game extends React.Component {
+ render() {
+ return (
+ <div className="game">
+ <div className="game-board">
+ <Board />
+ </div>
+ <div className="game-info">
+ <div>{/* status */}</div>
+ <ol>{/* TODO */}</ol>
+ </div>
+ </div>
+ );
+ }
+}
+
+describe('Tic Tac Toe', () => {
+ /**
+ * Clicks on a square, give
+ * @param {number} row 0 based
+ * @param {number} column 0 based
+ */
+ const clickSquare = (row, column) =>
+ cy.get('.square').eq(row * 3 + column)
+
+ beforeEach(() => {
+ cy.viewport(200, 200)
+ })
+ it('starts and lets X win', () => {
+ mount(<Game />)
+ cy.contains('.status', 'Next player: X')
+ clickSquare(0, 0).click()
+ cy.contains('.status', 'Next player: O')
+ clickSquare(0, 1).click()
+
+ clickSquare(1, 0).click()
+ clickSquare(1, 1).click()
+
+ clickSquare(2, 0).click()
+ cy.contains('.status', 'Winner: X')
+ })
+})