Initial commit

.gitlab-ci.yml

+stages:
+  - test
+
+variables:
+  npm_config_cache: "$CI_PROJECT_DIR/.npm"
+  CYPRESS_CACHE_FOLDER: "$CI_PROJECT_DIR/cache/Cypress"
+    
+cache: 
+  key: ${CI_COMMIT_REF_SLUG}
+  paths: 
+    - .npm
+    - cache/Cypress 
+    - node_modules
+    
+test:
+  image: cypress/base:10
+  stage: test
+  script:
+    # install dependencies
+    - npm ci
+    
+    # Kjør express-serveren i bakgrunnen
+    - npm start &
+    
+    # Kjør testene
+    - npm test
+    artifacts:
+      when: always
+      paths:
+        - cypress/videos
+        - cypress/screenshots
+      expire_in: 1 day
\ No newline at end of file

README.md

+# BDD-testing med cucumber og cypress
+
+Dette er en superenkel eksempelapplikasjon som er satt opp med BDD-testing med cucumber og cypress. Applikasjonen server en enkel webside med express.js.
+
+### Instruksjoner
+
+1. Klon prosjektet:
+
+```
+git clone https://gitlab.stud.idi.ntnu.no/nilstesd/cypress-bdd-start.git
+```
+
+2. Installer avhengigheter med npm:
+
+```
+cd cypress-bdd-start
+npm install
+```
+
+3. Kjør express-serveren med applikasjonen:
+
+```
+npm start
+```
+
+4. Sjekk at applikasjonen kjører:
+
+[http://localhost:8080](http://localhost:8080)
+
+5. Kjør testene
+
+Det er lagt inn script-definisjon i package.json så vi kan enkelt kjøre testene med:
+
+```
+npm test
+```
+
+Hvis du får feilmelding som sier at cypress executable ikke er funnet kan du kjøre følgende før du prøver å starte cypress på nytt (jeg måtte det):
+
+```
+npx cypress install
+```
+
+(npx er inkludert med npm > v5.2)
+
+6. Sjekk resultatet
+
+Denne testen kjørte nå i en "headless" eller virtuell browser. Dette betyr at vi også kan kjøre testene som endel av et skript, f.eks på en CI-server. 
+Kjøringen vises altså ikke i en nettleser, men vi får en testrapport på konsollet.
+En video fra den virtuelle nettleseren kommer imidlertid i mappen *cypress/video* etter kjøring.
+Ved feil kommer det også skjermdumper under *cypress/screenshots*.

cypress.json

+{
+	"baseUrl": "http://localhost:8080",
+	"testFiles": "**/*.feature"
+} 

cypress/fixtures/testdata.json

+{}
\ No newline at end of file

cypress/integration/betaling.feature

+# language: no
+Egenskap: Betaling
+
+  Som kunde av nettkiosken
+  Ønsker jeg å kunne legge inn betalingsinformasjon
+  Slik at jeg kan få godis i posten
+
+  Scenario: Registrer kjøpet
+    Gitt at jeg har lagt inn varer i handlekurven
+    Og trykket på Gå til betaling
+    Når jeg legger inn navn, adresse, postnummer, poststed og kortnummer
+    Og trykker på Fullfør kjøp
+    Så skal jeg få beskjed om at kjøpet er registrert
+
+  Scenario: Feilmeldinger
+    Gitt at jeg har lagt inn varer i handlekurven
+    Og trykket på Gå til betaling
+    Når jeg legger inn ugyldige verdier i feltene
+    Så skal jeg få feilmeldinger for disse
\ No newline at end of file

cypress/integration/betaling/steps.js

+import { Given, When, Then, And } from "cypress-cucumber-preprocessor/steps";
+
+// Registrer kjøpet
+Given(/^at jeg har lagt inn varer i handlekurven$/, () => {
+    cy.visit('http://localhost:8080');
+
+    cy.get('#product').select('Hubba bubba');
+    cy.get('#quantity').clear().type('4');
+    cy.get('#saveItem').click();
+
+    cy.get('#product').select('Smørbukk');
+    cy.get('#quantity').clear().type('5');
+    cy.get('#saveItem').click();
+});
+
+And(/^trykket på Gå til betaling$/, () => {
+    cy.get('#goToPayment').click();
+});
+
+When(/^jeg legger inn navn, adresse, postnummer, poststed og kortnummer$/, () => {
+    cy.get('#fullName').type('Ola Nordmann').blur();
+    cy.get('#address').type('Hakkebakkeskogen 1').blur();
+    cy.get('#postCode').type('1234').blur();
+    cy.get('#city').type('Skogen').blur();
+    cy.get('#creditCardNo').type('1234567890123456').blur();
+});
+
+And(/^trykker på Fullfør kjøp$/, () => {
+    cy.get('#submit').click();
+});
+
+Then(/^skal jeg få beskjed om at kjøpet er registrert$/, function () {
+    cy.contains('Din ordre er registrert.');
+});
+
+
+// Feilmeldinger
+Given(/^at jeg har lagt inn varer i handlekurven$/, () => {
+    cy.visit('http://localhost:8080');
+
+    cy.get('#product').select('Hubba bubba');
+    cy.get('#quantity').clear().type('4');
+    cy.get('#saveItem').click();
+
+    cy.get('#product').select('Smørbukk');
+    cy.get('#quantity').clear().type('5');
+    cy.get('#saveItem').click();
+});
+
+And(/^trykket på Gå til betaling$/, () => {
+    cy.get('#goToPayment').click();
+});
+
+When(/^jeg legger inn ugyldige verdier i feltene$/, () => {
+    cy.get('#fullName').clear().blur();
+    cy.get('#address').clear().blur();
+    cy.get('#postCode').clear().blur();
+    cy.get('#city').type('Skogen').clear().blur();
+    cy.get('#creditCardNo').clear().blur();
+    cy.get('#submit').click();
+});
+
+Then(/^skal jeg få feilmeldinger for disse$/, function () {
+    cy.contains('#fullNameError', 'Feltet må ha en verdi');
+    cy.contains('#addressError', 'Feltet må ha en verdi');
+    cy.contains('#postCodeError', 'Feltet må ha en verdi');
+    cy.contains('#cityError', 'Feltet må ha en verdi');
+    cy.contains('#creditCardNoError', 'Kredittkortnummeret må bestå av 16 siffer');
+});
\ No newline at end of file

cypress/integration/handlekurv.feature

+# language: no
+Egenskap: Handlekurv
+
+  Som kunde av nettkiosken
+  Ønsker jeg å legge varer i handlekurven
+  Slik at jeg kan få godis i posten
+
+  Scenario: Legge til varer i handlekurven
+    Gitt at jeg har åpnet nettkiosken
+    Når jeg legger inn varer og kvanta
+    Så skal handlekurven inneholde det jeg har lagt inn
+    Og den skal ha riktig totalpris
+
+  Scenario: Slette varer i handlekurven
+    Gitt at jeg har åpnet nettkiosken
+    Og lagt inn varer og kvanta
+    Når jeg sletter varer
+    Så skal ikke handlekurven inneholde det jeg har slettet
+
+  Scenario: Oppdatere kvanta i handlekurven
+    Gitt at jeg har åpnet nettkiosken
+    Og lagt inn varer og kvanta
+    Når jeg oppdaterer kvanta for en vare
+    Så skal handlekurven inneholde riktig kvanta for varen
\ No newline at end of file

cypress/integration/handlekurv/steps.js

+import { Given, When, Then, And } from "cypress-cucumber-preprocessor/steps";
+
+// Legge til varer i handlekurven
+Given(/^at jeg har åpnet nettkiosken$/, () => {
+    cy.visit('http://localhost:8080');
+});
+
+When(/^jeg legger inn varer og kvanta$/, () => {
+    cy.get('#product').select('Hubba bubba');
+    cy.get('#quantity').clear().type('4');
+    cy.get('#saveItem').click();
+
+    cy.get('#product').select('Smørbukk');
+    cy.get('#quantity').clear().type('5');
+    cy.get('#saveItem').click();
+
+    cy.get('#product').select('Stratos');
+    cy.get('#quantity').clear().type('1');
+    cy.get('#saveItem').click();
+
+    cy.get('#product').select('Hobby');
+    cy.get('#quantity').clear().type('2');
+    cy.get('#saveItem').click();
+});
+
+Then(/^skal handlekurven inneholde det jeg har lagt inn$/, () => {
+    cy.contains('#list', 'Hubba bubba');
+    cy.contains('#list', 'Smørbukk');
+    cy.contains('#list', 'Stratos');
+    cy.contains('#list', 'Hobby');
+});
+
+And(/^den skal ha riktig totalpris$/, function () {
+    cy.get('#price').should('have.text', '33');
+});
+
+
+//Slette varer i handlekurven
+Given(/^at jeg har åpnet nettkiosken$/, () => {
+    cy.visit('http://localhost:8080');
+});
+
+And(/^lagt inn varer og kvanta$/, () => {
+    cy.get('#product').select('Hubba bubba');
+    cy.get('#quantity').clear().type('4');
+    cy.get('#saveItem').click();
+
+    cy.get('#product').select('Smørbukk');
+    cy.get('#quantity').clear().type('5');
+    cy.get('#saveItem').click();
+
+    cy.get('#product').select('Stratos');
+    cy.get('#quantity').clear().type('1');
+    cy.get('#saveItem').click();
+
+    cy.get('#product').select('Hobby');
+    cy.get('#quantity').clear().type('2');
+    cy.get('#saveItem').click();
+});
+
+When(/^jeg sletter varer$/, () => {
+    cy.get('#product').select('Stratos');
+    cy.get('#deleteItem').click();
+
+    cy.get('#product').select('Hobby');
+    cy.get('#deleteItem').click();
+});
+
+Then(/^skal ikke handlekurven inneholde det jeg har slettet$/, function () {
+    cy.contains('#list', 'Hubba bubba');
+    cy.contains('#list', 'Smørbukk');
+});
+
+
+//Oppdatere kvanta i handlekurven
+Given(/^at jeg har åpnet nettkiosken$/, () => {
+    cy.visit('http://localhost:8080');
+});
+
+And(/^lagt inn varer og kvanta$/, () => {
+    cy.get('#product').select('Hubba bubba');
+    cy.get('#quantity').clear().type('4');
+    cy.get('#saveItem').click();
+
+    cy.get('#product').select('Smørbukk');
+    cy.get('#quantity').clear().type('5');
+    cy.get('#saveItem').click();
+
+    cy.get('#product').select('Stratos');
+    cy.get('#quantity').clear().type('1');
+    cy.get('#saveItem').click();
+
+    cy.get('#product').select('Hobby');
+    cy.get('#quantity').clear().type('2');
+    cy.get('#saveItem').click();
+});
+
+When(/^jeg oppdaterer kvanta for en vare$/, () => {
+    cy.get('#product').select('Hubba bubba');
+    cy.get('#quantity').clear().type('1');
+    cy.get('#saveItem').click();
+
+    cy.get('#product').select('Smørbukk');
+    cy.get('#quantity').clear().type('1');
+    cy.get('#saveItem').click();
+});
+
+Then(/^skal handlekurven inneholde riktig kvanta for varen$/, function () {
+    cy.contains('#list', '1 Hubba bubba');
+    cy.contains('#list', '1 Smørbukk');
+});
\ No newline at end of file

cypress/plugins/index.js

+const cucumber = require('cypress-cucumber-preprocessor').default;
+
+module.exports = (on, config) => {
+    on('file:preprocessor', cucumber())
+};
\ No newline at end of file

cypress/support/commands.js

+// ***********************************************
+// 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) => { ... })

cypress/support/index.js

+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+// require('./commands')

node_modules/.bin/JSONStream

+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  "$basedir/node"  "$basedir/../JSONStream/bin.js" "$@"
+  ret=$?
+else 
+  node  "$basedir/../JSONStream/bin.js" "$@"
+  ret=$?
+fi
+exit $ret

node_modules/.bin/JSONStream.cmd

+@ECHO off
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+"%_prog%"  "%dp0%\..\JSONStream\bin.js" %*
+ENDLOCAL
+EXIT /b %errorlevel%
+:find_dp0
+SET dp0=%~dp0
+EXIT /b

node_modules/.bin/JSONStream.ps1

+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  & "$basedir/node$exe"  "$basedir/../JSONStream/bin.js" $args
+  $ret=$LASTEXITCODE
+} else {
+  & "node$exe"  "$basedir/../JSONStream/bin.js" $args
+  $ret=$LASTEXITCODE
+}
+exit $ret

node_modules/.bin/acorn

+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  "$basedir/node"  "$basedir/../acorn/bin/acorn" "$@"
+  ret=$?
+else 
+  node  "$basedir/../acorn/bin/acorn" "$@"
+  ret=$?
+fi
+exit $ret

node_modules/.bin/acorn.cmd

+@ECHO off
+SETLOCAL
+CALL :find_dp0
+
+IF EXIST "%dp0%\node.exe" (
+  SET "_prog=%dp0%\node.exe"
+) ELSE (
+  SET "_prog=node"
+  SET PATHEXT=%PATHEXT:;.JS;=;%
+)
+
+"%_prog%"  "%dp0%\..\acorn\bin\acorn" %*
+ENDLOCAL
+EXIT /b %errorlevel%
+:find_dp0
+SET dp0=%~dp0
+EXIT /b

node_modules/.bin/acorn.ps1

+#!/usr/bin/env pwsh
+$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
+
+$exe=""
+if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
+  # Fix case when both the Windows and Linux builds of Node
+  # are installed in the same directory
+  $exe=".exe"
+}
+$ret=0
+if (Test-Path "$basedir/node$exe") {
+  & "$basedir/node$exe"  "$basedir/../acorn/bin/acorn" $args
+  $ret=$LASTEXITCODE
+} else {
+  & "node$exe"  "$basedir/../acorn/bin/acorn" $args
+  $ret=$LASTEXITCODE
+}
+exit $ret

node_modules/.bin/atob

+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*) basedir=`cygpath -w "$basedir"`;;
+esac
+
+if [ -x "$basedir/node" ]; then
+  "$basedir/node"  "$basedir/../atob/bin/atob.js" "$@"
+  ret=$?
+else 
+  node  "$basedir/../atob/bin/atob.js" "$@"
+  ret=$?
+fi
+exit $ret