From bf0eec08bffff539670f6aba93e3988960cd748d Mon Sep 17 00:00:00 2001
From: Gleb Bahmutov <gleb.bahmutov@gmail.com>
Date: Mon, 11 May 2020 17:27:28 -0400
Subject: [PATCH] add example using cypress-react-selector

---
 README.md                                     |  1 +
 .../src/components/ProductsList.jsx           | 21 +++++++++++++--
 .../src/components/ProductsList.spec.js       | 18 +++++++++++--
 package-lock.json                             | 26 +++++++++++++++++++
 package.json                                  |  1 +
 5 files changed, 63 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index 1300ba9b..79b7de35 100644
--- a/README.md
+++ b/README.md
@@ -144,6 +144,7 @@ Spec | Description
 [tutorial](cypress/component/advanced/tutorial) | A few tests adopted from [ReactJS Tutorial](https://reactjs.org/tutorial/tutorial.html)
 [portal](cypress/component/advanced/portal) | Component test for `ReactDOM.createPortal` feature
 [react-bootstrap](cypress/component/advanced/react-bootstrap) | Confirms [react-bootstrap](https://react-bootstrap.github.io/) components are working
+[select React component](cypress/component/advanced/react-book-example/src/components/ProductsList.spec.js) | Uses [cypress-react-selector](https://github.com/abhinaba-ghosh/cypress-react-selector) to find DOM elements using React component name and state values
 <!-- prettier-ignore-end -->
 
 ### Full examples
diff --git a/cypress/component/advanced/react-book-example/src/components/ProductsList.jsx b/cypress/component/advanced/react-book-example/src/components/ProductsList.jsx
index 7c115c5e..670d900b 100644
--- a/cypress/component/advanced/react-book-example/src/components/ProductsList.jsx
+++ b/cypress/component/advanced/react-book-example/src/components/ProductsList.jsx
@@ -1,10 +1,23 @@
 import React from 'react'
 import { getProducts } from '../products'
 
+class AProduct extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = {
+      name: props.name,
+    }
+  }
+
+  render() {
+    return <div className="product">{this.state.name}</div>
+  }
+}
+
 const Products = ({ products }) => (
   <React.Fragment>
     {products.map(product => (
-      <div>{product.name}</div>
+      <AProduct key={product.id} name={product.name} />
     ))}
   </React.Fragment>
 )
@@ -25,7 +38,11 @@ class ProductsContainer extends React.Component {
   }
 
   render() {
-    return <Products products={this.state.products} />
+    return (
+      <div className="product-container">
+        <Products products={this.state.products} />
+      </div>
+    )
   }
 }
 
diff --git a/cypress/component/advanced/react-book-example/src/components/ProductsList.spec.js b/cypress/component/advanced/react-book-example/src/components/ProductsList.spec.js
index 42cc26e6..47d89e2e 100644
--- a/cypress/component/advanced/react-book-example/src/components/ProductsList.spec.js
+++ b/cypress/component/advanced/react-book-example/src/components/ProductsList.spec.js
@@ -1,4 +1,5 @@
 /// <reference types="cypress" />
+import 'cypress-react-selector'
 import { mount } from 'cypress-react-unit-test'
 import React from 'react'
 import ProductsList from './ProductsList.jsx'
@@ -10,9 +11,22 @@ it('renders without crashing', () => {
     .withArgs('http://myapi.com/products')
     .resolves({
       json: cy.stub().resolves({
-        products: [{ id: 1, name: 'Mocked data' }],
+        products: [
+          { id: 1, name: 'First item' },
+          { id: 2, name: 'Second item' },
+        ],
       }),
     })
   mount(<ProductsList />)
-  cy.contains('Mocked data').should('be.visible')
+  cy.contains('First item').should('be.visible')
+  cy.get('.product').should('have.length', 2)
+
+  // use https://github.com/abhinaba-ghosh/cypress-react-selector
+  // to find DOM elements by React component constructor name or state
+  cy.waitForReact(1000, '#cypress-root')
+  cy.react('ProductsContainer').should('have.class', 'product-container')
+  cy.react('AProduct').should('have.length', 2)
+  cy.react('AProduct', { name: 'Second item' })
+    .should('be.visible')
+    .and('have.text', 'Second item')
 })
diff --git a/package-lock.json b/package-lock.json
index 2ae34c70..c60eb44f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9668,6 +9668,15 @@
         }
       }
     },
+    "cypress-react-selector": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/cypress-react-selector/-/cypress-react-selector-0.1.2.tgz",
+      "integrity": "sha512-sgAFoXRwhmcBWcb7DKYex3jQpq/i2E4iFOPUwyW3Oi43zsP61/YgAPkPb644Xix5JNS3Z8BowFXfZQELRZeIBA==",
+      "dev": true,
+      "requires": {
+        "resq": "^1.7.1"
+      }
+    },
     "d": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/d/-/d-1.0.1.tgz",
@@ -28085,6 +28094,23 @@
         }
       }
     },
+    "resq": {
+      "version": "1.7.1",
+      "resolved": "https://registry.npmjs.org/resq/-/resq-1.7.1.tgz",
+      "integrity": "sha512-09u9Q5SAuJfAW5UoVAmvRtLvCOMaKP+djiixTXsZvPaojGKhuvc0Nfvp84U1rIfopJWEOXi5ywpCFwCk7mj8Xw==",
+      "dev": true,
+      "requires": {
+        "fast-deep-equal": "^2.0.1"
+      },
+      "dependencies": {
+        "fast-deep-equal": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
+          "integrity": "sha1-ewUhjd+WZ79/Nwv3/bLLFf3Qqkk=",
+          "dev": true
+        }
+      }
+    },
     "restore-cursor": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/restore-cursor/-/restore-cursor-1.0.1.tgz",
diff --git a/package.json b/package.json
index 1e075a8e..156780aa 100644
--- a/package.json
+++ b/package.json
@@ -70,6 +70,7 @@
     "css-loader": "2.1.1",
     "cypress": "4.5.0",
     "cypress-plugin-snapshots": "1.4.3",
+    "cypress-react-selector": "0.1.2",
     "date-fns": "2.13.0",
     "husky": "3.1.0",
     "lint-staged": "9.5.0",