add example with dynamic data fetched in the plugin (#681)

Author: bahmutov

examples/fundamentals__dynamic-tests/README.md

@@ -5,6 +5,7 @@ Sometimes you want to iterate through a list of items, and for each item create
 - run same test against different viewport resolutions
 - run same test against different sub-domains of your site
 - generate tests based on the fetched data
+- get the dynamic data from the plugin file before the tests start
 
 ## Note
 
@@ -13,6 +14,7 @@ Sometimes the data to generate tests might be dynamic and come from an external
 1. you can fetch data using a script that runs _before_ Cypress starts. Save the results as a JSON file and load data using `require`. This has an advantage that the data does not change while running the tests, making debugging simpler. See suite called "generated from fixture" for an example.
 2. you can fetch the dynamic data before the tests and save as a local variable or context property, then have multiple tests assert against dynamic data items.
 3. you can get the data to use to create dynamic tests using [`cy.task`](https://on.cypress.io/task)
+4. you can get the data during the plugin file start and place the result into `Cypress.env()` object to pass to the specs
 
 ## Examples
 
@@ -24,3 +26,6 @@ In these repo you can find:
 - [cypress/integration/fixture-spec.js](cypress/integration/fixture-spec.js) uses `require` to load JSON fixture file and generates tests for each item from the fixture.
 - [cypress/integration/request-spec.js](cypress/integration/request-spec.js) fetches a list of users from an external API endpoint and creates a test for each user
 - [cypress/integration/task-spec.js](cypress/integration/task-spec.js) gets a list of items by calling [`cy.task`](https://on.cypress.io/task) and then generating a test for each item
+- [cypress/integration/plugin-spec.js](./cypress/integration/plugin-spec.js) gets the list of users on start up, see [cypress/plugins/index.js](./cypress/plugins/index.js) file. You can see the fetched list in the `Cypress.env()` object
+
+![Cypress env object with fetched users](./images/users.png)

examples/fundamentals__dynamic-tests/cypress/integration/plugin-spec.js

@@ -0,0 +1,30 @@
+/// <reference types="cypress" />
+
+// If we do NOT know the expected number of items we can grab them
+// before the spec starts running using the plugin file.
+// The plugin file places the dynamic list into "Cypress.env()" object
+describe('Test for each user', { retries: 2 }, () => {
+  // Cypress.env() object is set by the time the tests start
+  const users = Cypress.env('users')
+
+  it('has valid users', () => {
+    expect(users).to.be.an('array').and.not.be.empty
+  })
+
+  users.forEach((user) => {
+    it(`has info for user ${user.id}: ${user.email}`, () => {
+      // confirm the user information
+      const url = `https://jsonplaceholder.cypress.io/users/${user.id}`
+
+      // confirm the endpoint returns the "user" object
+      cy.request(url).its('body').should((data) => {
+        // confirm each property explicitly
+        // if any property is missing we will get nice Command Log
+        // history showing the matching properties
+        Object.keys(user).forEach((key) => {
+          expect(data).to.have.property(key, user[key])
+        })
+      })
+    })
+  })
+})

examples/fundamentals__dynamic-tests/cypress/integration/request-spec.js

@@ -7,7 +7,7 @@ describe('dynamic users using request', { retries: 2 }, () => {
 
   before(() => {
     // receive the dynamic list of users
-    cy.request('https://jsonplaceholder.cypress.io/users?limit=3')
+    cy.request('https://jsonplaceholder.cypress.io/users?_limit=10')
     .its('body')
     .should('have.length', 10)
     .invoke('slice', 0, 3)

examples/fundamentals__dynamic-tests/cypress/plugins/index.js

@@ -8,15 +8,35 @@
 // https://on.cypress.io/plugins-guide
 // ***********************************************************
 
+/* eslint-disable no-console */
+const got = require('got')
+const _ = require('lodash')
+
 // This function is called when a project is opened or re-opened (e.g. due to
 // the project's config changing)
 
-module.exports = (on, config) => {
+module.exports = async (on, config) => {
   // `on` is used to hook into various events Cypress emits
   // `config` is the resolved Cypress config
+
   on('task', {
     getData () {
       return ['a', 'b', 'c']
     },
   })
+
+  // you can fetch the dynamic list to use to generate the data
+  // before any tests run (even before the browser opens)
+  const { body } = await got('https://jsonplaceholder.cypress.io/users?_limit=5', {
+    responseType: 'json',
+  })
+
+  // pass the data through the Cypress config object
+  // by storing it in the environment object.
+  // we are only interested in a few properties in each user object
+  config.env.users = _.map(body, (user) => _.pick(user, 'id', 'name', 'email'))
+  console.table(config.env.users)
+
+  // IMPORTANT: return the updated config object
+  return config
 }