@meniga/testing

This is a common library for testing using cypress in the meniga world. It has some basic configs and all the external helper utils that are useful for testing

See Cypress docs: https://docs.cypress.io/guides/overview/why-cypress.html#In-a-nutshell

Setup

Step 1

Install cypress as a dev dependency in the root of your repo (Cypress docs recommend using npm. Remember not to commit the package-lock.json file that npm generates.):

npm install --save-dev cypress

Step 2

Add "@meniga/testing" as a dev dependency in the package.json file found in the root of your repo:

Step 3

Add a file called runCypress.js to a folder called e.g. tools/cypress-tests to the root of your repo. In this file import cypress and the runCypress tool from @meniga/testing.

Example:

const chalk = require('chalk')
const inquirer = require('inquirer')
const cypress = require('cypress')
const runCypress = require('@meniga/testing/lib/tools/runCypress')

const init = () => {
  console.log(
    chalk.white.bgBlue.bold(`Let's prepare for running Cypress tests!`)
  )
}

const askQuestions = () => {
  const questions = [
    {
      type: 'list',
      name: 'PACKAGENAME',
      message: 'Which package would you like to test?',
      choices: ['package-1', 'package-2', 'package-3'],
      filter: function(val) {
        /*
         * Note this assumes _cypress folder is inside
         * pacakge, change accordingly when _cypress
         * folder is inside an app
         */
        return './packages/' + val
      }
    },
    {
      name: 'BASEURL',
      type: 'input',
      message:
        'What is the url where your app is running (press enter to use default url http://localhost:9000)?',
      filter: function(val) {
        return val ? val : 'http://localhost:9000'
      }
    },
    {
      type: 'list',
      name: 'OPEN',
      message:
        'Would you like to open the Cypress Test Runner in interactive mode?',
      choices: ['Yes', 'No'],
      filter: function(val) {
        return val === 'Yes'
      }
    },
    {
      type: 'list',
      name: 'REPORT',
      message: 'Would you like to generate a combined Mochawesome report?',
      choices: ['Yes', 'No'],
      filter: function(val) {
        return val === 'Yes'
      }
    },
    {
      type: 'list',
      name: 'DISABLESTUBBING',
      message: 'Would you like to stub API requests or run tests e2e?',
      choices: ['Stub requests', 'e2e'],
      filter: function(val) {
        return val === 'e2e'
      }
    }
  ]
  return inquirer.prompt(questions)
}

const run = async () => {
  init()

  const answers = await askQuestions()
  const { BASEURL, PACKAGENAME, DISABLESTUBBING, OPEN, REPORT } = answers

  runCypress(cypress, PACKAGENAME, BASEURL, OPEN, REPORT, DISABLESTUBBING)
}

run()

Step 4

Add the following script to the pakcage.json file found in the root of your repo:

"scripts": {
  "cypress": "node tools/cypress-tests/runCypress.js",
}

Step 5

Create a basic cypress.json file in the root of your package or application (depending on where you want to run the tests from) - (cypress docs: https://docs.cypress.io/guides/references/configuration.html)

Example

{
  "projectId": "wrapp-index-web",
  "video": false,
  "blacklistHosts": "www.google-analytics.com"
}

Step 6

Create the following folder structure inside a folder called _cypress in your pacakge or app folder

- _cypress
 - fixtures
 - integration
 - plugins
  - index.js
 - support
  - index.js

fixtures

The folder where you add your fixture files Note: if there are fixtures that are used for multiple packages they can be stored in a _fixtures folder that can be created in the root of the directory of your package or app, the fixture files can then be imported to test files and used like this example shows:

import { getSettingsMockResponse } from '<path to _fixtures folder in root>'

describe('some feature', () => {
  beforeEach(() => {
    cy.route('OPTIONS', '**/user/v1/public/settings', getSettingsMockResponse())
  })
})

integration

The folder where you add your *.spec.js files

plugins/index.js

module.exports = require('@meniga/testing/lib/plugins')

support/index.js

require('@meniga/testing/lib/support')

Test

Cypress will run all files matching the following filename syntax *.spec.js in the app or package path provided by the runCypress.js file in your app or package repo (see Step 3)

Run the app you want to test

Run cypress via the following command in the root of your package or application repo:

npm run cypress

Custom cypress functions

cy.authenticateUser(email, password)

A custom command to bypass meniga user login

cy.getId(data-test-id)

This is a shorthand to select dom element based of data-test-id value. Using data-test-id is higly reccomended as described in cypress best practices https://docs.cypress.io/guides/references/best-practices.html#Selecting-Elements

Note: data-test-ids are not added directly to components in mono-cosmic, they are passed to the component from the package or application being tested. A util function can be used to handle adding data-test-ids to mono-cosmic component, see: setDataTestIdName

cy.reportScreenshots()

A custom function to add screenshots of failed test cases to mochawesome reports

cy.visit()

Overwriting cy.visit to enable bypassing login

Utils functions

hexToRgb(hexValue)

Converts hex color code to Rgb, useful when testing the color of DOM elements

Tools functions

runCypress(cypress, testPath, open, report, disableStubbing)

A custom test runner using Cypress Module API (https://docs.cypress.io/guides/guides/module-api.html#cypress-run), where basic cypress config is set, cypress tests run and reports generated. Params:

• cypress: cypress node_module from the repo the tests are run in, so that cypress doesn't need to be a dependency of @meniga/testing
• testPath: the path from the repo the tests are running to the app or package where you want to run tests, e.g. './packages/pfm-challenges' or './apps/bank42-react'
• baseUrl: the url where your app is running
• open: if true, the Cypress Test Runner is opened in interactive mode
• report: if true, a single mochawesome report is generated for all the specs that were run
• disableStubbing: if true, stubbing of requests in Cypress tests is disabled and tests are therefore run end to end.