the-example-app-nodejs/README-TESTING.md

Getting started

Installation

Installing cucumber

Reference:Cucumber

# NPM
npm install --save-dev cucumber

Apickli - REST API integration testing framework with cucumber.js

Installing cypress

Install locally executing:

$ npm install cypress --save-dev

Add in package.json, npm scripts to execute Cypress commands:

{
  "scripts": {
    "cypress:open": "cypress open"
  }
}

Create a file named cypress.json:

{
  "baseUrl": "http://localhost:3007",
  "fixturesFolder": false,
  "integrationFolder": "./test/e2e/specs",
  "supportFile": false
}

Here we're changing the default path used by cypress where tests are defined (integration by default).

https://medium.com/@itortv/how-to-integrate-cypress-and-cucumber-in-your-development-flow-in-just-a-few-weeks-96a46ac9165a

Tutorial

Writing tests of API services

test/ ---- features/ --------- step_definitions/ -------------- apickli-gherkin.js --------- support/ -------------- init.js --------- myapi.feature ---- package.json

Writing tests

We are going to create a test file named 'home.spec.js' to go to the home page.

|----src
    | |----test
    | | |----e2e
    | | | |----specs
    | | | | |----home.spec.js

And with the content:

describe('Go home page', function() {
  it('Does not do much!', function() {
    expect(true).to.equal(true)
  })
})

Executing tests

1. Open a terminal and execute:

   $ npm run cypress:open

   You'll see how the app is opened and one screen to help you to get started:

   

   Press OK, got it! to continue.

2. Below INTEGRATION TESTS you can see the home.spec.js created

3. Click on line home.spec.js

4. You'll see how the test is executed and the result

   

Exercises

Exercise 1: Go to home page and check title

1. Open app

   $ npm run start:dev

2. Edit the test 'home.spec.js' and change it to:

   describe('Go home page', function() {
     it('Visits home page', function() {
       cy.visit('http://localhost:3000')
     })
   })
   

   As you write or change file look at window of cypress (dynamically it changes and re-execute the tests!).

   You'll see how we reach the home page:

   

3. Now we're going to check Hello ContentFul text is shown in page

   describe('Home page test', function() {
       it('finds title', function() {
         cy.visit('http://localhost:3000')
         cy.contains('Hello Contentful')
       })
   })
   

Exercise 2: Go to home page and then click on courses tab

Sometimes you need to access the DOM of web page, and it's not easy (except with Cypress!).

1. Click on open selector button (at left of url location)

2. Click on COURSES tab

   You'll see a complete path to get to the element using Cypress

   

3. Press button of copy to clipboard and paste at the end of test

4. Add click action:

    describe('Home page test', function() {
            it('finds title', function() {
              cy.visit('http://localhost:3000')
              cy.contains('Hello Contentful')
              cy.get('.header__navigation > ul > :nth-child(2) > a').click()
            })
    })
   

   

Exercise 3: Add an assertion to verify we've two courses available

describe('Home page test', function() {
        it('finds title', function() {
          cy.visit('http://localhost:3000')
          cy.contains('Hello Contentful')
          cy.get('.header__navigation > ul > :nth-child(2) > a').click()
          cy.get('.courses > h1').should('have.text', 'All courses (2)')
        })
})

Or better if we can count how many cards are:

describe('Home page test', function() {
        it('finds title', function() {
          cy.visit('http://localhost:3000')
          cy.contains('Hello Contentful')
          cy.get('.header__navigation > ul > :nth-child(2) > a').click()
          cy.get('.course-card').its('length').should('eq', 2)
        })
})