Gherkin Example

Author: matz3

.gitignore

@@ -58,3 +58,5 @@ typings/
 .env
 
 dist/
+
+report/

html-report.js

@@ -0,0 +1,14 @@
+
+var reporter = require('cucumber-html-reporter');
+
+var options = {
+    theme: 'bootstrap',
+    jsonFile: 'report/cucumber.json',
+    output: 'report/cucumber.html',
+    reportSuiteAsScenarios: true,
+    scenarioTimestamp: true,
+    launchReport: true,
+    metadata: {}
+};
+
+reporter.generate(options);

karma-gherkin.conf.js

@@ -0,0 +1,24 @@
+module.exports = function(config) {
+	"use strict";
+
+	require("./karma.conf")(config);
+	config.set({
+
+		ui5: {
+			logAssertions: true,
+			logHTMLFilePath: true,
+			testpage: "webapp/test/gherkin/gherkinTests.qunit.html"
+		},
+
+		cucumberReporter: {
+			out: "report/cucumber.json"
+		},
+
+		reporters: ["progress", "cucumber"],
+
+		browsers: ["CustomChromeHeadless"],
+
+		singleRun: true
+
+	});
+};

package-lock.json

@@ -8,6 +8,7 @@
 		"lint": "eslint webapp",
 		"karma": "karma start",
 		"karma-ci": "rimraf coverage && karma start karma-ci.conf.js",
+		"karma-gherkin": "rimraf report && karma start karma-gherkin.conf.js && node html-report.js",
 		"watch": "npm run karma",
 		"test": "npm run lint && npm run karma-ci",
 		"build": "ui5 build -a --clean-dest",
@@ -17,10 +18,12 @@
 	"dependencies": {},
 	"devDependencies": {
 		"@ui5/cli": "^2.4.1",
+		"cucumber-html-reporter": "^5.2.0",
 		"eslint": "^7.7.0",
 		"karma": "^4.4.1",
 		"karma-chrome-launcher": "^3.1.0",
 		"karma-coverage": "^2.0.3",
+		"karma-cucumber-reporter": "^1.0.4",
 		"karma-ui5": "^2.2.0",
 		"local-web-server": "^4.2.1",
 		"rimraf": "^3.0.2"

package.json

@@ -0,0 +1,14 @@
+Feature: Filtering
+  Lorem ipsum
+
+  Background:
+    Given I have started the app
+    And   I can see 2 items in the list
+
+  Scenario: Filtering for 'Active' items
+    When I filter for active items
+    Then I can see 1 item in the list
+
+  Scenario: Filtering for 'Completed' items
+    When I filter for completed items
+    Then I can see 1 item in the list

webapp/test/gherkin/Filter.feature

@@ -0,0 +1,74 @@
+sap.ui.define([
+	"sap/base/Log",
+	"sap/ui/test/gherkin/StepDefinitions",
+	"sap/ui/test/Opa5",
+	"sap/ui/test/matchers/AggregationLengthEquals",
+	"sap/ui/test/matchers/PropertyStrictEquals",
+	"sap/ui/test/matchers/Properties",
+	"sap/ui/test/actions/EnterText",
+	"sap/ui/test/actions/Press"
+], function(
+	Log, StepDefinitions, Opa5,
+	AggregationLengthEquals, PropertyStrictEquals, Properties, EnterText, Press
+) {
+	"use strict";
+
+	var sViewName = "sap.ui.demo.todo.view.App";
+	// var sAddToItemInputId = "addTodoItemInput";
+	// var sSearchTodoItemsInputId = "searchTodoItemsInput";
+	var sItemListId = "todoList";
+	// var sClearCompletedId = "clearCompleted";
+
+	var oOpa5 = new Opa5();
+
+	var Steps = StepDefinitions.extend("sap.ui.demo.todo.test.gherkin.Steps", {
+		init: function() {
+
+			this.register(/^I have started the app$/i, function() {
+				oOpa5.iStartMyUIComponent({
+					componentConfig: {
+						name: "sap.ui.demo.todo",
+						async: true,
+						manifest: true
+					}
+				});
+			});
+
+			this.register(/^I can see ([0-9]+) items? in the list$/i, function(sItemCount) {
+				var iItemCount = parseInt(sItemCount, 10);
+				oOpa5.waitFor({
+					id: sItemListId,
+					viewName: sViewName,
+					matchers: [new AggregationLengthEquals({
+						name: "items",
+						length: iItemCount
+					})],
+					success: function() {
+						Opa5.assert.ok(true, "The list has " + iItemCount + " item(s)");
+					},
+					errorMessage: "List does not have expected number of items '" + iItemCount + "'."
+				});
+			});
+
+			this.register(/^I filter for (active|completed) items$/i, function(filterKey) {
+				oOpa5.waitFor({
+					viewName: sViewName,
+					controlType: "sap.m.SegmentedButtonItem",
+					matchers: [
+						new Properties({ key: filterKey })
+					],
+					actions: [new Press()],
+					errorMessage: "SegmentedButton can not be pressed"
+				});
+			});
+
+		},
+
+		closeApplication: function() {
+			Log.info("Closing application");
+		}
+	});
+
+	return Steps;
+
+});

webapp/test/gherkin/Steps.js

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8">
+	<title>Gherkin tests for Todo App</title>
+
+	<script id="sap-ui-bootstrap"
+		src="../../resources/sap-ui-core.js"
+		data-sap-ui-theme="sap_fiori_3"
+		data-sap-ui-resourceroots='{
+			"sap.ui.demo.todo": "../../"
+		}'
+		data-sap-ui-language="EN"
+		data-sap-ui-animation="false"
+		data-sap-ui-compatVersion="edge"
+		data-sap-ui-async="true">
+	</script>
+
+	<link rel="stylesheet" type="text/css" href="../../resources/sap/ui/thirdparty/qunit-2.css">
+
+	<script src="../../resources/sap/ui/thirdparty/qunit-2.js"></script>
+	<script src="../../resources/sap/ui/qunit/qunit-junit.js"></script>
+
+	<script src="gherkinTests.qunit.js"></script>
+</head>
+<body>
+<div id="qunit"></div>
+<div id="qunit-fixture"></div>
+</body>
+</html>