First commit test features

.circleci/config.yml

@@ -0,0 +1,33 @@
+version: 2
+jobs:
+  build:
+    docker:
+      - image: cypress/base:8
+    steps:
+      - checkout
+      - restore_cache: # special step to restore the dependency cache 
+          key: dependency-cache-{{ checksum "package.json" }}
+      - run:
+          name: install-npm-wee
+          command: npm install
+      - save_cache: # special step to save the dependency cache
+          key: dependency-cache-{{ checksum "package.json" }}
+          paths:
+            - ./node_modules
+      - run:
+          name: clone-e2e-test
+          command: git clone https://github.com/contentful/the-example-app-e2e-tests.git ./test/e2e
+      - run:
+          name: install-e2e-test
+          command: cd ./test/e2e && npm install
+      - run:
+          name: test
+          command: npm run test
+      - store_artifacts:
+          path: /tmp/artifact-1
+
+          destination: artifact-file-cypress-result_`date +%Y-%m-%d_%H-%M-%S`
+
+      - store_artifacts:
+          path: /tmp/artifacts
+

.idea/encodings.xml

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="Encoding" addBOMForNewFiles="with NO BOM" />
+</project>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/the-example-app-nodejs.iml" filepath="$PROJECT_DIR$/.idea/the-example-app-nodejs.iml" />
+    </modules>
+  </component>
+</project>

.idea/the-example-app-nodejs.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

.idea/workspace.xml

@@ -0,0 +1,172 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ChangeListManager">
+    <list default="true" id="7f693907-6d19-4a62-aa98-e7c1d2e159d6" name="Default Changelist" comment="" />
+    <option name="EXCLUDED_CONVERTED_TO_IGNORED" value="true" />
+    <option name="SHOW_DIALOG" value="false" />
+    <option name="HIGHLIGHT_CONFLICTS" value="true" />
+    <option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
+    <option name="LAST_RESOLUTION" value="IGNORE" />
+  </component>
+  <component name="FileEditorManager">
+    <leaf>
+      <file pinned="false" current-in-tab="true">
+        <entry file="file://$PROJECT_DIR$/README-TESTING.md">
+          <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
+            <state split_layout="SPLIT">
+              <first_editor relative-caret-position="380">
+                <caret line="26" column="21" selection-start-line="26" selection-start-column="21" selection-end-line="26" selection-end-column="21" />
+              </first_editor>
+              <second_editor />
+            </state>
+          </provider>
+        </entry>
+      </file>
+      <file pinned="false" current-in-tab="false">
+        <entry file="file://$PROJECT_DIR$/package.json">
+          <provider selected="true" editor-type-id="text-editor">
+            <state relative-caret-position="300">
+              <caret line="20" column="34" selection-start-line="20" selection-start-column="34" selection-end-line="20" selection-end-column="34" />
+            </state>
+          </provider>
+        </entry>
+      </file>
+    </leaf>
+  </component>
+  <component name="Git.Settings">
+    <option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
+  </component>
+  <component name="IdeDocumentHistory">
+    <option name="CHANGED_PATHS">
+      <list>
+        <option value="$PROJECT_DIR$/README-TESTING.md" />
+        <option value="$PROJECT_DIR$/package.json" />
+      </list>
+    </option>
+  </component>
+  <component name="ProjectFrameBounds" extendedState="6" fullScreen="true">
+    <option name="y" value="23" />
+    <option name="width" value="1680" />
+    <option name="height" value="1027" />
+  </component>
+  <component name="ProjectView">
+    <navigator proportions="" version="1">
+      <foldersAlwaysOnTop value="true" />
+    </navigator>
+    <panes>
+      <pane id="PackagesPane" />
+      <pane id="Scope" />
+      <pane id="ProjectPane">
+        <subPane>
+          <expand>
+            <path>
+              <item name="the-example-app-nodejs" type="b2602c69:ProjectViewProjectNode" />
+              <item name="the-example-app-nodejs" type="462c0819:PsiDirectoryNode" />
+            </path>
+          </expand>
+          <select />
+        </subPane>
+      </pane>
+    </panes>
+  </component>
+  <component name="PropertiesComponent">
+    <property name="last_opened_file_path" value="$PROJECT_DIR$" />
+    <property name="settings.editor.selected.configurable" value="configurable.group.appearance" />
+  </component>
+  <component name="RecentsManager">
+    <key name="MoveFile.RECENT_KEYS">
+      <recent name="$PROJECT_DIR$" />
+      <recent name="$PROJECT_DIR$/test" />
+    </key>
+  </component>
+  <component name="RunDashboard">
+    <option name="ruleStates">
+      <list>
+        <RuleState>
+          <option name="name" value="ConfigurationTypeDashboardGroupingRule" />
+        </RuleState>
+        <RuleState>
+          <option name="name" value="StatusDashboardGroupingRule" />
+        </RuleState>
+      </list>
+    </option>
+  </component>
+  <component name="SvnConfiguration">
+    <configuration />
+  </component>
+  <component name="TaskManager">
+    <task active="true" id="Default" summary="Default task">
+      <changelist id="7f693907-6d19-4a62-aa98-e7c1d2e159d6" name="Default Changelist" comment="" />
+      <created>1556820779270</created>
+      <option name="number" value="Default" />
+      <option name="presentableId" value="Default" />
+      <updated>1556820779270</updated>
+    </task>
+    <servers />
+  </component>
+  <component name="ToolWindowManager">
+    <frame x="0" y="0" width="1680" height="1050" extended-state="6" />
+    <layout>
+      <window_info id="Image Layers" />
+      <window_info id="Designer" />
+      <window_info id="UI Designer" />
+      <window_info id="Capture Tool" />
+      <window_info id="Favorites" side_tool="true" />
+      <window_info content_ui="combo" id="Project" order="0" visible="true" weight="0.24969475" />
+      <window_info id="Structure" order="1" side_tool="true" weight="0.25" />
+      <window_info anchor="bottom" id="Version Control" />
+      <window_info active="true" anchor="bottom" id="Terminal" visible="true" weight="0.32959184" />
+      <window_info anchor="bottom" id="Event Log" side_tool="true" />
+      <window_info anchor="bottom" id="Message" order="0" />
+      <window_info anchor="bottom" id="Find" order="1" />
+      <window_info anchor="bottom" id="Run" order="2" />
+      <window_info anchor="bottom" id="Debug" order="3" weight="0.4" />
+      <window_info anchor="bottom" id="Cvs" order="4" weight="0.25" />
+      <window_info anchor="bottom" id="Inspection" order="5" weight="0.4" />
+      <window_info anchor="bottom" id="TODO" order="6" />
+      <window_info anchor="right" id="Palette" />
+      <window_info anchor="right" id="Theme Preview" />
+      <window_info anchor="right" id="Capture Analysis" />
+      <window_info anchor="right" id="Palette&#9;" />
+      <window_info anchor="right" id="Maven" />
+      <window_info anchor="right" id="Commander" internal_type="SLIDING" order="0" type="SLIDING" weight="0.4" />
+      <window_info anchor="right" id="Ant Build" order="1" weight="0.25" />
+      <window_info anchor="right" content_ui="combo" id="Hierarchy" order="2" weight="0.25" />
+    </layout>
+  </component>
+  <component name="editorHistoryManager">
+    <entry file="file://$PROJECT_DIR$/package.json">
+      <provider selected="true" editor-type-id="text-editor">
+        <state relative-caret-position="300">
+          <caret line="20" column="34" selection-start-line="20" selection-start-column="34" selection-end-line="20" selection-end-column="34" />
+        </state>
+      </provider>
+    </entry>
+    <entry file="file://$PROJECT_DIR$/README-TESTING.md">
+      <provider selected="true" editor-type-id="split-provider[text-editor;markdown-preview-editor]">
+        <state split_layout="SPLIT">
+          <first_editor relative-caret-position="380">
+            <caret line="26" column="21" selection-start-line="26" selection-start-column="21" selection-end-line="26" selection-end-column="21" />
+          </first_editor>
+          <second_editor />
+        </state>
+      </provider>
+    </entry>
+  </component>
+  <component name="masterDetails">
+    <states>
+      <state key="ProjectJDKs.UI">
+        <settings>
+          <last-edited>1.8</last-edited>
+          <splitter-proportions>
+            <option name="proportions">
+              <list>
+                <option value="0.2" />
+              </list>
+            </option>
+          </splitter-proportions>
+        </settings>
+      </state>
+    </states>
+  </component>
+</project>

DockerJenkinsfile

@@ -1,38 +0,0 @@
-pipeline {
-    agent {
-        node {
-            label 'docker' //Agent needs to have Docker Engine installed
-        }
-    }
-    stages {
-        stage('Docker Stop') {
-            steps {
-                // Stop Docker if running
-                sh 'docker stop the-example-app | true' //Not important, just logistics
-            }
-        }
-        stage('Docker RM') {
-            steps {
-                // Rm Docker image to build a new one from scratch
-                sh 'docker rm the-example-app | true' //Not important, just logistics
-            }
-        }
-        stage('Checkout') {
-            steps {
-                // Get some code from a GIT repository
-                git 'https://git.agile611.com/Agile611/the-example-app-nodejs.git'
-            }
-        }
-        stage('Docker Build') {
-            steps {
-                sh 'docker build -t the-example-app.nodejs .'
-            }
-        }
-        stage('Docker Run') {
-            steps {
-                // Run Docker image on port 3000
-                sh 'docker run -p 3000:3000 --name the-example-app -d the-example-app.nodejs'
-            }
-        }
-    }
-}

Jenkinsfile

@@ -1,33 +0,0 @@
-pipeline {
-    agent {
-        node {
-            label 'agent1'
-        }
-    }
- 
-   tools {
-        // Install the NodeJS version configured as "nodejs8170" and add it to the path.
-        nodejs "nodejs8170"
-  }
- 
-    stages {
-        stage('Checkout') {
-            steps {
-                // Get some code from a GitHub repository
-                git 'https://git.agile611.com/Agile611/the-example-app-nodejs.git'
-            }
-        }
-        stage('Install') {
-            steps {
-                // Install NPM Dependencies
-                sh 'npm install'
-            }
-        }
-        stage('Run') {
-            steps {
-                // Run server on port 3000
-                sh 'npm run start:dev'
-            }
-        }
-    }
-}

README-TESTING.md

@@ -0,0 +1,201 @@
+
+
+# Getting started
+
+
+# Installation
+
+## Installing cucumber
+
+Reference:[Cucumber](https://cucumber.io/docs)
+
+
+```shell
+# NPM
+npm install --save-dev cucumber
+```
+
+[Apickli - REST API integration testing framework with cucumber.js](https://github.com/apickli/apickli)
+
+
+## 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:
+
+    ![help started cypress](img/cypress-start.png)
+
+    Press *OK, got it!* to continue.
+    
+1. Below **INTEGRATION TESTS** you can see the home.spec.js created
+1. Click on line **home.spec.js**
+1. You'll see how the test is executed and the result
+
+    ![cypress first execution](img/cypress-first-execution.png)
+
+
+# Exercises
+
+## Exercise 1: Go to home page and check title
+
+1. Open app
+
+    ``$ npm run start:dev``
+
+1. 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:
+
+   ![cypress-example-home-1](img/cypress-example-home-1.png)
+
+1. 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)
+1. Click on COURSES tab
+   
+   You'll see a complete path to get to the element using Cypress
+   
+    ![cypress-open-selector-select-element](img/cypress-open-selector-select-element.png)
+
+1. Press button of copy to clipboard and paste at the end of test
+1. 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()
+            })
+    })
+   ```
+   
+   ![cypress-open-selector-select-element-click](img/cypress-open-selector-select-element-click.png)
+
+
+## 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)
+        })
+})
+```
+
+ ![cypress-example-courses-length](img/cypress-example-courses-length.png)
+

README.md

@@ -19,6 +19,7 @@ Without any changes, this app is connected to a Contentful space with read-only
 Clone the repo and install the dependencies.
 
 ```bash
+git clone https://github.com/contentful/the-example-app.nodejs.git
 cd the-example-app.nodejs
 ```
 
@@ -42,7 +43,7 @@ You can also run this app as a Docker container:
 Step 1: Clone the repo
 
 ```bash
-git clone https://git.agile611.com/Agile611/the-example-app-nodejs.git
+git clone https://github.com/contentful/the-example-app.nodejs.git
 ```
 
 Step 2: Build the Docker image

package.json

@@ -17,7 +17,8 @@
     "test:integration": "jest test/integration",
     "test:integration:watch": "jest test/integration --watch",
     "test:unit": "jest test/unit",
-    "test:unit:watch": "jest test/unit --watch"
+    "test:unit:watch": "jest test/unit --watch",
+    "cypress:open": "cypress open"
   },
   "engines": {
     "node": ">=8.9.3"
@@ -38,6 +39,7 @@
   "devDependencies": {
     "cheerio": "^1.0.0-rc.2",
     "cookie": "^0.3.1",
+    "cypress": "^3.2.0",
     "eslint": "^4.18.1",
     "eslint-config-standard": "^11.0.0",
     "eslint-plugin-import": "^2.8.0",

variables.env

@@ -1,7 +1,7 @@
-NODE_ENV=master
-CONTENTFUL_SPACE_ID=9a9saj5xvssa
-CONTENTFUL_DELIVERY_TOKEN=dhq4W2V2OXCCiwe2ez8KPvRTlRYlMnHwlnlJ27AGBZ4
-CONTENTFUL_PREVIEW_TOKEN=CIaIDWM0DsSLeiOYSFfYVxILef5IiVgtSTjTrBu4tJg
+NODE_ENV=development
+CONTENTFUL_SPACE_ID=qz0n5cdakyl9
+CONTENTFUL_DELIVERY_TOKEN=580d5944194846b690dd89b630a1cb98a0eef6a19b860ef71efc37ee8076ddb8
+CONTENTFUL_PREVIEW_TOKEN=e8fc39d9661c7468d0285a7ff949f7a23539dd2e686fcb7bd84dc01b392d698b
 CONTENTFUL_DELIVERY_API_HOST=cdn.contentful.com
 CONTENTFUL_PREVIEW_API_HOST=preview.contentful.com
 PORT=3000