added support for nthNode (#127)

Author: abhinaba-ghosh

README.md

@@ -27,6 +27,8 @@ Internally, cypress-react-selector uses a library called [resq](https://github.c
 - [Get React Properties from element](#get-react-properties-from-element)
   - [Get Props](#get-props)
   - [Get current state](#get-current-state)
+- [Timeouts](#timeouts)
+- [Fetch indexed node](#fetch-indexed-node)
 - [Use fluent chained queries](#use-fluent-chained-queries)
 - [Sample Tests](#sample-tests)
 - [Community Projects](#community-projects)
@@ -258,6 +260,31 @@ cy.getReact('MyTextInput', {
 }).getCurrentState(); // can return string | boolean | any[] | {}
 ```
 
+## Timeouts
+
+You can configure the [timeouts](https://docs.cypress.io/guides/references/configuration.html#Timeouts) in the `cypress.json` configuration file. Alternatively, you can also pass the `timeout` as a object literal in the react commands like,
+
+```js
+cy.react('MyComponent', { options: { timeout: 50000 } });
+```
+
+## Fetch indexed node
+
+1. `cy.react` returns DOM element, so you can fetch the indexed node by [.eq(index)](https://docs.cypress.io/api/commands/eq.html), like:
+
+```js
+cy.react('MyComponent').eq(0).click();
+```
+
+2. `cy.getReact()` return RESQ node, so you can't fetch it through `.eq()`. You need to use `.nthNode(index)`, like:
+
+```js
+cy.getReact('MyComponent')
+  .nthNode(0)
+  .getProps('name')
+  .should('eq', 'First Item');
+```
+
 ## Use fluent chained queries
 
 :warning: Fluent commands are not working in some special cases. It is being tracked [here](https://github.com/abhinaba-ghosh/cypress-react-selector/issues/48)

cypress/component/components/ProductsList.spec.js

@@ -52,7 +52,7 @@ describe('Selecting by React props and state', () => {
 
     it('find React components', () => {
       cy.log('**cy.getReact**');
-      // returns React component wrapper with props
+      //returns React component wrapper with props
       cy.getReact('AProduct', { props: { name: 'Second item' } })
         .getProps()
         .should('deep.include', { name: 'Second item' });
@@ -69,6 +69,12 @@ describe('Selecting by React props and state', () => {
       cy.getReact('AProduct', { state: { myName: 'Second item' } }).should(
         'exist'
       );
+
+      //find component using index
+      cy.getReact('AProduct')
+        .nthNode(1)
+        .getProps('name')
+        .should('eq', 'Second item');
     });
 
     it('chains getReact', () => {

index.d.ts

@@ -38,8 +38,13 @@ declare namespace Cypress {
      */
     react<E extends Node = HTMLElement>(
       component: string,
-      reactOpts?: {},
-      options?: Partial<Loggable & Timeoutable>
+      reactOpts?: {
+        props?: object;
+        state?: object;
+        exact?: boolean;
+        root?: string;
+        options?: Partial<Loggable & Timeoutable>;
+      }
     ): Chainable<JQuery<E>>;
 
     /**
@@ -54,8 +59,13 @@ declare namespace Cypress {
      */
     getReact(
       component: string,
-      reactOpts?: {},
-      options?: Partial<Loggable & Timeoutable>
+      reactOpts?: {
+        props?: object;
+        state?: object;
+        exact?: boolean;
+        root?: string;
+        options?: Partial<Loggable & Timeoutable>;
+      }
     ): Chainable<RESQNode>;
 
     /**
@@ -78,5 +88,14 @@ declare namespace Cypress {
      * This method should always be used with getReact() method
      */
     getCurrentState(): Chainable<any>;
+
+    /**
+     * Get the nthNode using index
+     * @param index
+     *
+     * @example
+     * cy.getReact('Product').nthNode(0).getProps('name').should('eq', 'First item');
+     */
+    nthNode(index: string): Chainable<any>;
   }
 }

index.js

@@ -4,6 +4,7 @@ const {
   getReact,
   getProps,
   getCurrentState,
+  nthNode,
 } = require('./src/reactHandler');
 
 // add cypress custom commands
@@ -12,3 +13,4 @@ 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('nthNode', { prevSubject: true }, nthNode);

src/reactHandler.js

@@ -6,6 +6,7 @@ const {
   getReactRoot,
   getDefaultCommandOptions,
   checkReactOptsIsValid,
+  getReactNode,
 } = require('./utils');
 
 /**
@@ -253,53 +254,41 @@ exports.getReact = (subject, component, reactOpts = {}) => {
  * @param {*} propName
  */
 exports.getProps = (subject, propName) => {
-  if (!subject || !subject[0].props) {
-    throw new Error(
-      'Previous subject found null. getProps() is a child command. Use with cy.getReact()'
-    );
-  }
-  if (subject.length > 1) {
-    throw new Error(
-      `getProps() works with single React Node. React Node found ${subject.length}`
-    );
-  }
+  const reactNode = getReactNode(subject);
   cy.log(`Finding value for prop **${propName || 'all props'}**`);
   cy.log(
     `Prop value found **${
       propName
-        ? safeStringify(getJsonValue(subject[0].props, propName))
-        : safeStringify(subject[0].props)
+        ? safeStringify(getJsonValue(reactNode.props, propName))
+        : safeStringify(reactNode.props)
     }**`
   );
   const propValue = propName
-    ? cy.wrap(getJsonValue(subject[0].props, propName))
-    : cy.wrap(subject[0].props);
+    ? cy.wrap(getJsonValue(reactNode.props, propName))
+    : cy.wrap(reactNode.props);
   return propValue;
 };
 
 /**
  * get all props or specific props from react node
  * @param {*} subject
- * @param {*} propName
  */
 exports.getCurrentState = (subject) => {
-  if (!subject || !subject[0].state) {
-    throw new Error(
-      'Previous subject found null. getCurrentState() is a child command. Use with cy.getReact()'
-    );
-  }
-  if (subject.length > 1) {
-    throw new Error(
-      `getCurrentState() works with single React Node. React Node found ${subject.length}`
-    );
-  }
+  const reactNode = getReactNode(subject);
   cy.log(`Finding current state of the React component`);
   cy.log(
     `Current state found **${
-      getType(subject[0].state) === 'object'
-        ? safeStringify(subject[0].state)
-        : subject[0].state
+      getType(reactNode.state) === 'object'
+        ? safeStringify(reactNode.state)
+        : reactNode.state
     }**`
   );
-  return cy.wrap(subject[0].state);
+  return cy.wrap(reactNode.state);
 };
+
+/**
+ *  Get nth Node
+ * @param {object} subject
+ * @param {number} pos
+ */
+exports.nthNode = (subject, pos) => cy.wrap(subject).then((e) => e[pos]);

src/utils.js

@@ -88,3 +88,26 @@ exports.checkReactOptsIsValid = (reactOpts) => {
     return true;
   }
 };
+
+/**
+ * Validate and get resq node for fetching props and states
+ * @param {object || object[]} subject
+ */
+exports.getReactNode = (subject) => {
+  if (!subject) {
+    throw new Error(
+      'Previous subject found null. getCurrentState() is a child command. Use with cy.getReact()'
+    );
+  }
+  if (
+    Array.isArray(subject) &&
+    (subject[0].props || subject[0].state) &&
+    subject.length > 1
+  ) {
+    throw new Error(
+      `getCurrentState() works with single React Node. Number of React Node found ${subject.length}. Use nthNode(index) to fetch an unique react node`
+    );
+  }
+
+  return Array.isArray(subject) ? subject[0] : subject;
+};