refactor

Author: abhinaba-ghosh

README.md

@@ -232,7 +232,7 @@ cy.getReact('MyTextInput', { field: { name: 'email' } })
 cy.getReact('MyTextInput', { field: { name: 'email' } }).getProps();
 ```
 
-![get-props](./screenshots/get-props.png)
+![get-props](./docs/get-props.png)
 
 ### Get current state
 
@@ -267,7 +267,7 @@ Checkout sample tests [here](./cypress/integration)
 
 Use [React Dev Tools](https://chrome.google.com/webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi?hl=en) plugin to easily identify the react component, props and state. Have a look in the below demonstration, how I have used the tool to write the sample test cases.
 
-![react-dev-tools](./screenshots/cy-react-dev-tool.gif)
+![react-dev-tools](./docs/cy-react-dev-tool.gif)
 
 ## Sample Example Project
 

cypress/integration/calculator.spec.js

@@ -0,0 +1,54 @@
+describe('It should validate cypress react selector', () => {
+  before(() => {
+    cy.visit('https://ahfarmer.github.io/calculator/');
+    cy.waitForReact();
+  });
+
+  it('it should validate react selection with component only', () => {
+    cy.react('t').should('have.length', '22');
+  });
+
+  it('it should validate react selection component and props', () => {
+    cy.react('t', { name: '5' }).should('have.text', '5');
+  });
+
+  it('it should validate react selection with wildcard', () => {
+    cy.react('*', { name: '9' }).should('have.text', '9');
+  });
+
+  it('it should validate react selection with cypress find command', () => {
+    cy.react('t', { name: '5' }).find('button').should('have.text', '5');
+  });
+
+  it('should calculate 7 * 6', () => {
+    cy.react('t', { name: '7' }).click();
+    cy.react('t', { name: 'x' }).click();
+    cy.react('t', { name: '6' }).click();
+    cy.react('t', { name: '=' }).click();
+
+    cy.get('.component-display').should('have.text', '42');
+  });
+
+  it('it should validate getProps with specific prop name', () => {
+    cy.getReact('t', { name: '5' }).getProps('name').should('eq', '5');
+  });
+
+  it('it should validate getProps with no specific prop name', () => {
+    cy.getReact('t', { name: '5' })
+      .getProps()
+      .then((props) => {
+        expect(JSON.stringify(props)).to.contain('5');
+      });
+  });
+
+  it('it should validate react chaining', () => {
+    cy.react('t', { name: '5' }).react('button').should('have.text', '5');
+  });
+
+  it('it should validate chained react instances getProps with specific prop name', () => {
+    cy.getReact('t')
+      .getReact('t', { name: '5' })
+      .getProps('name')
+      .should('eq', '5');
+  });
+});

cypress/integration/react-selector.spec.js

@@ -1,16 +1,9 @@
 import { waitForReact } from './src/resqInjector';
-import {
-  react,
-  getReact,
-  getProps,
-  getCurrentState,
-  setProps,
-} from './src/reactHandler';
+import { react, getReact, getProps, getCurrentState } from './src/reactHandler';
 
 // add cypress custom commands
 Cypress.Commands.add('waitForReact', waitForReact);
 Cypress.Commands.add('react', { prevSubject: ['optional', 'element'] }, react);
 Cypress.Commands.add('getReact', { prevSubject: 'optional' }, getReact);
 Cypress.Commands.add('getProps', { prevSubject: true }, getProps);
 Cypress.Commands.add('getCurrentState', { prevSubject: true }, getCurrentState);
-Cypress.Commands.add('setProps', { prevSubject: true }, setProps);

screenshots/cy-react-dev-tool.gif renamed to docs/cy-react-dev-tool.gif

@@ -166,17 +166,3 @@ export const getCurrentState = (subject) => {
   );
   return cy.wrap(subject[0].state);
 };
-
-/**
- * get all props or specific props from react node
- * @param {*} subject
- * @param {*} propName
- */
-export const setProps = (subject, propName) => {
-  cy.log(`subject: ${subject[0].props.brand}`);
-  subject[0].props.brand = 'pop';
-  cy.log(`subject: ${subject[0].props.brand}`);
-  if (!subject || !subject[0].props) {
-    throw new Error('getProps() is a child command. Use with cy.getReact()');
-  }
-};