add react tutorial specs

Author: bahmutov

cypress/component/component tests/basic/react-tutorial/README.md

@@ -0,0 +1 @@
+Examples from https://reactjs.org/tutorial/tutorial.html

cypress/component/component tests/basic/react-tutorial/shopping-list-spec.js

@@ -0,0 +1,14 @@
+/// <reference types="cypress" />
+import ShoppingList from './shopping-list.jsx'
+import React from 'react'
+import { mount } from 'cypress-react-unit-tests'
+
+describe('Shopping list', () => {
+ beforeEach(() => {
+ cy.viewport(600, 400)
+ })
+ it('renders', () => {
+ mount(<ShoppingList name="Mark" />)
+ cy.contains('h1', 'Mark')
+ })
+})

cypress/component/component tests/basic/react-tutorial/shopping-list.jsx

@@ -0,0 +1,17 @@
+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>
+ )
+ }
+}
+
+// Example usage: <ShoppingList name="Mark" />

cypress/component/component tests/basic/react-tutorial/square1-spec.js

@@ -0,0 +1,13 @@
+/// <reference types="cypress" />
+import Square from './square1.jsx'
+import React from 'react'
+import { mount } from 'cypress-react-unit-tests'
+
+it('renders', () => {
+ mount(<Square />)
+ cy.on('window:alert', cy.stub().as('alerted'))
+ cy.get('.square').click()
+ cy.get('@alerted')
+ .should('have.been.calledOnce')
+ .and('have.been.calledWithExactly', 'click')
+})

cypress/component/component tests/basic/react-tutorial/square1.jsx

@@ -0,0 +1,10 @@
+import React from 'react'
+export default class Square extends React.Component {
+ render() {
+ return (
+ <button className="square" onClick={() => alert('click')}>
+ {this.props.value}
+ </button>
+ )
+ }
+}

cypress/component/component tests/basic/react-tutorial/square2-spec.js

@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+import Square from './square2.jsx'
+import React from 'react'
+import { mount } from 'cypress-react-unit-tests'
+
+it('renders', () => {
+ mount(<Square value="X" />)
+ cy.on('window:alert', cy.stub().as('alerted'))
+ cy.get('.square')
+ .should('have.text', 'X')
+ .click()
+ cy.get('@alerted')
+ .should('have.been.calledOnce')
+ .and('have.been.calledWithExactly', 'click')
+})

cypress/component/component tests/basic/react-tutorial/square2.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+export default class Square extends React.Component {
+ constructor(props) {
+ super(props)
+ this.state = {
+ value: null,
+ }
+ }
+
+ render() {
+ return (
+ <button className="square" onClick={() => alert('click')}>
+ {this.props.value}
+ </button>
+ )
+ }
+}

cypress/component/component tests/basic/react-tutorial/square3-spec.js

@@ -0,0 +1,12 @@
+/// <reference types="cypress" />
+import Square from './square3.jsx'
+import React from 'react'
+import { mount } from 'cypress-react-unit-tests'
+
+it('renders', () => {
+ mount(<Square />)
+ cy.get('.square')
+ .should('have.text', '')
+ .click()
+ cy.contains('.square', 'X')
+})

cypress/component/component tests/basic/react-tutorial/square3.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+export default 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>
+ )
+ }
+}

cypress/component/component tests/basic/react-tutorial/square4-spec.js

@@ -0,0 +1,15 @@
+/// <reference types="cypress" />
+import Square from './square4.jsx'
+import React from 'react'
+import { mount } from 'cypress-react-unit-tests'
+
+it('renders', () => {
+ const onClick = cy.stub()
+ mount(<Square value="O" onClick={onClick} />)
+ cy.get('.square')
+ .should('have.text', 'O')
+ .click()
+ .then(() => {
+ expect(onClick).to.have.been.calledOnce
+ })
+})