add timers tests

Author: bahmutov

cypress/component/component tests/advanced/timers/README.md

@@ -0,0 +1 @@
+example from https://reactjs.org/docs/testing-recipes.html#timers

cypress/component/component tests/advanced/timers/card-spec.js

@@ -0,0 +1,27 @@
+/// <reference types="cypress" />
+import Card from './card.jsx'
+import React from 'react'
+import { mount } from 'cypress-react-unit-tests'
+
+// NOTE: seems our clock control does not work with effect hooks
+it.skip('should select null after timing out', () => {
+ const onSelect = cy.stub()
+ cy.clock()
+ mount(<Card onSelect={onSelect} />)
+ cy.tick(100).then(() => {
+ expect(onSelect).to.not.have.been.called
+ })
+ cy.tick(5000).then(() => {
+ expect(onSelect).to.have.been.calledWith(null)
+ })
+})
+
+it('should accept selections', () => {
+ const onSelect = cy.stub()
+ mount(<Card onSelect={onSelect} />)
+ cy.get("[data-testid='2']")
+ .click()
+ .then(() => {
+ expect(onSelect).to.have.been.calledWith(2)
+ })
+})

cypress/component/component tests/advanced/timers/card-without-effect-spec.js

@@ -0,0 +1,44 @@
+/// <reference types="cypress" />
+import Card from './card-without-effect.jsx'
+import React from 'react'
+import { mount } from 'cypress-react-unit-tests'
+import { unmountComponentAtNode } from 'react-dom'
+
+it('should select null after timing out', () => {
+ const onSelect = cy.stub()
+ cy.clock()
+ mount(<Card onSelect={onSelect} />)
+ cy.tick(100).then(() => {
+ expect(onSelect).to.not.have.been.called
+ })
+ cy.tick(5000).then(() => {
+ expect(onSelect).to.have.been.calledWith(null)
+ })
+})
+
+it('should cleanup on being removed', () => {
+ const onSelect = cy.stub()
+ cy.clock()
+ mount(<Card onSelect={onSelect} />)
+ cy.tick(100).then(() => {
+ expect(onSelect).to.not.have.been.called
+ })
+
+ cy.get('#cypress-jsdom').then($el => {
+ unmountComponentAtNode($el[0])
+ })
+
+ cy.tick(5000).then(() => {
+ expect(onSelect).to.not.have.been.called
+ })
+})
+
+it('should accept selections', () => {
+ const onSelect = cy.stub()
+ mount(<Card onSelect={onSelect} />)
+ cy.get("[data-testid='2']")
+ .click()
+ .then(() => {
+ expect(onSelect).to.have.been.calledWith(2)
+ })
+})

cypress/component/component tests/advanced/timers/card-without-effect.jsx

@@ -0,0 +1,25 @@
+import React, { Component } from 'react'
+
+export default class Card extends Component {
+ componentDidMount() {
+ this._timeoutID = setTimeout(() => {
+ this.props.onSelect(null)
+ }, 5000)
+ }
+
+ componentWillUnmount() {
+ clearTimeout(this._timeoutID)
+ }
+
+ render() {
+ return [1, 2, 3, 4].map(choice => (
+ <button
+ key={choice}
+ data-testid={choice}
+ onClick={() => this.props.onSelect(choice)}
+ >
+ {choice}
+ </button>
+ ))
+ }
+}

cypress/component/component tests/advanced/timers/card.jsx

@@ -0,0 +1,22 @@
+import React, { useEffect } from 'react'
+
+export default function Card(props) {
+ useEffect(() => {
+ const timeoutID = setTimeout(() => {
+ props.onSelect(null)
+ }, 5000)
+ return () => {
+ clearTimeout(timeoutID)
+ }
+ }, [props.onSelect])
+
+ return [1, 2, 3, 4].map(choice => (
+ <button
+ key={choice}
+ data-testid={choice}
+ onClick={() => props.onSelect(choice)}
+ >
+ {choice}
+ </button>
+ ))
+}