Performance logs module

.eslintrc

@@ -39,7 +39,9 @@
     "alert": true,
     "MutationObserver": true,
     "DOMException": true,
-    "cy": true
+    "cy": true,
+    "Cypress": true,
+    "performance": true,
   },
   "parser": "babel-eslint"
 }

.gitignore

@@ -1,7 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
-/node_modules
+node_modules
 /.pnp
 .pnp.js
 
@@ -23,4 +23,6 @@ yarn-debug.log*
 yarn-error.log*
 
 .idea
-cypress/videos
+cypress/videos
+cypress/screenshots
+performanceLogs.json

README.md

@@ -1,3 +1,4 @@
+[![Build Status](https://dev.azure.com/SaxoUniversity/azure-cypress-react/_apis/build/status/nishants.azure-cypress-react?branchName=master)](https://dev.azure.com/SaxoUniversity/azure-cypress-react/_build/latest?definitionId=6&branchName=master)
 **To setup basic pipleine : [here](./01-setup-react-website.md)**
 
 ### Adding Cypress tests to CI/CD pipeline
@@ -62,13 +63,11 @@ In this step, we will setup cypress tests for the project. As part of this we wi
   npm run cypress:run
   ```
 
-
-
 ## Preparing run script for ci
 
 - In ci if we run a command the build waits for the command to finish.
 
-- We need to accomplish 
+- We need to accomplish
 
   - run node node server
   - run cypress tests
@@ -80,21 +79,19 @@ In this step, we will setup cypress tests for the project. As part of this we wi
   npm install npm-run-all --save
   ```
 
-
-
-- we will use following command : 
+* we will use following command :
 
   ```bash
   npm-run-all -p --race start cypress:run
   ```
 
-  this command will : 
+  this command will :
 
   - execute `npm start`
   - execute `cypress:run`
   - and stop node server when cypress tests have finished
 
-- Now lets add a cypress command that can start the node server and run tests 
+* Now lets add a cypress command that can start the node server and run tests
 
   ```json
     "scripts": {
@@ -103,44 +100,41 @@ In this step, we will setup cypress tests for the project. As part of this we wi
       "cypress:ci": "npm-run-all -p --race start cypress:run",
   ```
 
-- Now add a build step to `` 
+* Now add a build step to ``
 
   ```yaml
   - script: npm run cypress:ci
     displayName: 'Running cypress tests'
   ```
 
-- So our file looks like 
+* So our file looks like
 
-- ```yaml
-  # This sets trigger to any update in master  
+* ```yaml
+  # This sets trigger to any update in master
   # trigger:
   # - master
-  
+
   #  Defines the host for agent (MS hosted)
   pool:
     vmImage: 'ubuntu-latest'
-  
+
   #  Build steps for the pipeline
   steps:
-  - script: npm ci
-    displayName: 'Installing node modules'
-
-  - script: npm run lint
-    displayName: 'Checking for lint errors'
-
-  - script: npm run build
-    displayName: 'Running webpack build'
-
-  - script: npm run cypress:ci
-    displayName: 'Running cypress tests'
-
-  # Save artifacts to refer them in release builds
-  - task: PublishPipelineArtifact@1
-    inputs:
-      path: $(Agent.BuildDirectory)/s/build
-      artifact: react-static-website-build-artifacts
-  ```
+    - script: npm ci
+      displayName: 'Installing node modules'
 
+    - script: npm run lint
+      displayName: 'Checking for lint errors'
 
+    - script: npm run build
+      displayName: 'Running webpack build'
 
+    - script: npm run cypress:ci
+      displayName: 'Running cypress tests'
+
+    # Save artifacts to refer them in release builds
+    - task: PublishPipelineArtifact@1
+      inputs:
+        path: $(Agent.BuildDirectory)/s/build
+        artifact: react-static-website-build-artifacts
+  ```

cypress/integration/another_spec.js

@@ -0,0 +1,42 @@
+describe('AnotherTest', () => {
+  describe('describe block', () => {
+    it('One more test', () => {
+      cy.visit('http://localhost:3000/');
+
+      cy.url().should('include', '#/portfolio');
+    });
+    describe('inner describe', () => {
+      it('deeply nested test', () => {
+        cy.visit('http://localhost:3000/');
+
+        cy.url().should('include', '#/portfolio');
+      });
+    });
+  });
+  describe('describe block 2', () => {
+    it('One more test', () => {
+      cy.visit('http://localhost:3000/');
+
+      cy.url().should('include', '#/portfolio');
+    });
+    describe('inner describe 2', () => {
+      it('deeply nested test 2', () => {
+        cy.visit('http://localhost:3000/');
+
+        cy.url().should('include', '#/portfolio');
+      });
+    });
+  });
+
+  it('Check if page loads', () => {
+    cy.visit('http://localhost:3000/');
+
+    cy.url().should('include', '#/portfolio');
+  });
+
+  it('Just another test', () => {
+    cy.visit('http://localhost:3000/');
+
+    cy.url().should('include', '#/portfolio');
+  });
+});

cypress/integration/homepage_spec.js

@@ -4,4 +4,16 @@ describe('Homepage', () => {
 
     cy.url().should('include', '#/portfolio');
   });
+
+  it('Just another test', () => {
+    cy.visit('http://localhost:3000/');
+
+    cy.url().should('include', '#/portfolio');
+  });
+
+  it('One more test', () => {
+    cy.visit('http://localhost:3000/');
+
+    cy.url().should('include', '#/portfolio');
+  });
 });

cypress/plugins/index.js

@@ -1,17 +1,10 @@
-// ***********************************************************
-// This example plugins/index.js can be used to load plugins
-//
-// You can change the location of this file or turn off loading
-// the plugins file with the 'pluginsFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/plugins-guide
-// ***********************************************************
+const perflog = require('perflog');
 
-// This function is called when a project is opened or re-opened (e.g. due to
-// the project's config changing)
+perflog.enable({
+  output: './build/logs/perfLog.json',
+  enabled: process.env.perflog
+});
 
-module.exports = (/* on, config */) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
+module.exports = (on /* ,config */) => {
+  on('task', { ...perflog.getTasksHandlers() });
 };

cypress/support/commands.js

@@ -1,25 +1,6 @@
-// ***********************************************
-// This example commands.js shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add("login", (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+const { events } = require('perflog');
+
+Cypress.on('command:start', events.commandStarted);
+Cypress.on('command:end', events.commandEnded);
+Cypress.on('test:before:run', events.testStarted);
+Cypress.on('test:after:run', events.testEnded);