From fd6c53144eea9708abc9175de2de8afedd76e735 Mon Sep 17 00:00:00 2001 From: J Long Date: Fri, 5 Apr 2024 12:46:10 +0100 Subject: [PATCH 1/6] Update configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md Changes to support adding Karma to a SAPUI5 Project. --- ...-platform-job-in-the-job-editor-4c26bfb.md | 130 +++++++----------- 1 file changed, 50 insertions(+), 80 deletions(-) diff --git a/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md b/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md index 6c9f403..8c1ece9 100644 --- a/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md +++ b/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md @@ -511,9 +511,7 @@ Depending on your configuration, the SAP Fiori for the ABAP platform pipeline ca ## \(Optional\) Configure the Additional Unit Test Stage -Before running the **Additional Unit Tests** stage in your job, add the test configuration to your project. - - +Before running the **Additional Unit Tests** stage in your job, add the Karma test configuration to your project. @@ -521,103 +519,75 @@ Before running the **Additional Unit Tests** stage in your job, add the test con - You’re an administrator of SAP Continuous Integration and Delivery. -- In your repository, you have an SAPUI5/SAP Fiori project. See [Create an SAP Fiori Project](https://help.sap.com/viewer/9d1db9835307451daa8c930fbd9ab264/Cloud/en-US/46664de4d6944471b6c29a0681bfd0fc.html). - - +- In your repository, you have an SAPUI5/SAP Fiori project. See [Create an SAP Fiori Project](https://developers.sap.com/tutorials/appstudio-fioriapps-create.html). +- Google Chrome installed, runnung headless Chrome is a way to run the Chrome browser in a headless environment without the full browser UI. ## Procedure -1. Make sure that the following dependencies and scripts are part of your `package.json` file: +The following steps will introduce [Karma](https://github.com/SAP/karma-ui5), a plugin to help test your SAPUI5 project. + +1. Append the following Karma dependencies to your project: + ```BASH + npm install --save-dev karma karma-ui5 karma-chrome-launcher karma-coverage ``` + +2. Append the following Karma script to your `package.json`: + + ```JSON { (...) - "devDependencies": { - (...) - "karma": "^5.0.4", - "karma-chrome-launcher": "^3.1.0", - "karma-coverage": "^2.0.2", - "karma-ui5": "^2.1.0" - }, "scripts": { (...) - "test": "karma start", + "test": "karma start" } } ``` -2. To describe that the tests should use a custom web driver launcher to connect to a remote Chrome browser, add a file named `karma.conf.js` to the same folder as your `package.json` file. +3. In order to load and test the project, add a file called `karma.conf.js` to the same folder as your `package.json` file. + +4. Add the following minimal configuration to your `karma.conf.js` file: + + ```JS + module.exports = function(config) { + config.set({ + frameworks: ["ui5"], + ui5: { + configPath: "ui5.yaml" + }, + browsers: ["ChromeHeadless"], + customLaunchers: { + ChromeHeadlessCustom: { + base: 'ChromeHeadless', + flags: ['--window-size=1920,1080'] + } + }, + browserConsoleLogOptions: { + level: "error" + }, + singleRun: true, + proxies: { + '/base/webapp/resources': 'http://127.0.0.1:' + config.port + '/resources', + '/base/webapp/test-resources': 'http://127.0.0.1:' + config.port + '/test-resources' + } + }); + }; + ``` -3. Add the following minimal configuration to your `karma.conf.js` file: + The `ui5` property is configured using `configPath` which is loading the default UI5 resources. If a mock server is later added to the project, the `configPath` should be updated to `ui5-mock.yaml` to reflect this new configuration, refer to [Installing MockServer Guide](https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/253805578f04461a9741983a630ce4f1.html?locale=en-USstate%3DPRODUCTION) + +5. To validate everything is working, run the new `test` script; - ``` + ```BASH + npm run test ``` - module.exports = function(config) { - config.set({ - frameworks: ["ui5"], - ui5: { - url: "https://ui5.sap.com" - }, - browsers: ["ChromeHeadless"], - browserConsoleLogOptions: { - level: "error" - }, - singleRun: true - }); - }; - ``` - - ``` -4. To report the coverage and see the coverage data in the logs, add the following additional configuration to the file: - - ``` - ``` - module.exports = function(config) { - config.set({ - - frameworks: ["ui5"], - ui5: { - url: "https://ui5.sap.com" - }, - preprocessors: { - "{webapp,webapp/!(test)}/!(mock*).js": ["coverage"] - }, - coverageReporter: { - includeAllSources: true, - reporters: [ - { - type: "html", - dir: "coverage" - }, - { - type: "text" - } - ], - check: { - each: { - statements: , - branches: , - functions: , - lines: - } - } - }, - reporters: ["progress", "coverage"], + Review the console log, the ChromeHeadless browser is now connected but no tests were executed since we haven't added a test plan yet. - browsers: ["ChromeHeadless"], - browserConsoleLogOptions: { - level: "error" - }, - singleRun: true - }); - }; - ``` - ``` - - For ``, enter the percentage of your code that you want to cover with tests. If the defined threshold isn’t met, the build breaks. +6. Refer to the [SAPUI5 Overview and Testing Strategy Guide](https://sapui5.hana.ondemand.com/sdk/#/topic/ab134ef3932c4b42898c79c10341e8b5) to add a unit and integration tests to your project. + From 5ec19b759aebc8d9db108a874f2fa1d9f01a404e Mon Sep 17 00:00:00 2001 From: J Long Date: Fri, 5 Apr 2024 15:52:28 +0100 Subject: [PATCH 2/6] Update docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md Co-authored-by: Austin Devine --- ...fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md b/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md index 8c1ece9..6c19c7d 100644 --- a/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md +++ b/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md @@ -556,7 +556,7 @@ The following steps will introduce [Karma](https://github.com/SAP/karma-ui5), a config.set({ frameworks: ["ui5"], ui5: { - configPath: "ui5.yaml" + configPath: "ui5-mock.yaml". // change to ui5.yaml if project does not exist. }, browsers: ["ChromeHeadless"], customLaunchers: { From 1985157c0bb2b3fd437852cd543dd5ea66dbc668 Mon Sep 17 00:00:00 2001 From: J Long Date: Mon, 8 Apr 2024 09:19:50 +0100 Subject: [PATCH 3/6] Update docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md Co-authored-by: Oliver Feldmann --- ...-platform-job-in-the-job-editor-4c26bfb.md | 50 +++++++++---------- 1 file changed, 25 insertions(+), 25 deletions(-) diff --git a/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md b/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md index 6c19c7d..f52e137 100644 --- a/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md +++ b/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md @@ -551,31 +551,31 @@ The following steps will introduce [Karma](https://github.com/SAP/karma-ui5), a 4. Add the following minimal configuration to your `karma.conf.js` file: - ```JS - module.exports = function(config) { - config.set({ - frameworks: ["ui5"], - ui5: { - configPath: "ui5-mock.yaml". // change to ui5.yaml if project does not exist. - }, - browsers: ["ChromeHeadless"], - customLaunchers: { - ChromeHeadlessCustom: { - base: 'ChromeHeadless', - flags: ['--window-size=1920,1080'] - } - }, - browserConsoleLogOptions: { - level: "error" - }, - singleRun: true, - proxies: { - '/base/webapp/resources': 'http://127.0.0.1:' + config.port + '/resources', - '/base/webapp/test-resources': 'http://127.0.0.1:' + config.port + '/test-resources' - } - }); - }; - ``` + ```JS + module.exports = function(config) { + config.set({ + frameworks: ["ui5"], + ui5: { + configPath: "ui5-mock.yaml". // change to ui5.yaml if project does not exist. + }, + browsers: ["ChromeHeadless"], + customLaunchers: { + ChromeHeadlessCustom: { + base: 'ChromeHeadless', + flags: ['--window-size=1920,1080'] + } + }, + browserConsoleLogOptions: { + level: "error" + }, + singleRun: true, + proxies: { + '/base/webapp/resources': 'http://127.0.0.1:' + config.port + '/resources', + '/base/webapp/test-resources': 'http://127.0.0.1:' + config.port + '/test-resources' + } + }); + }; + ``` The `ui5` property is configured using `configPath` which is loading the default UI5 resources. If a mock server is later added to the project, the `configPath` should be updated to `ui5-mock.yaml` to reflect this new configuration, refer to [Installing MockServer Guide](https://help.sap.com/docs/SAP_FIORI_tools/17d50220bcd848aa854c9c182d65b699/253805578f04461a9741983a630ce4f1.html?locale=en-USstate%3DPRODUCTION) From 28b3cbf379c563476e3b0f323f9cc2e485f71e34 Mon Sep 17 00:00:00 2001 From: J Long Date: Mon, 8 Apr 2024 09:20:04 +0100 Subject: [PATCH 4/6] Update docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md Co-authored-by: Oliver Feldmann --- ...fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md b/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md index f52e137..5e847ad 100644 --- a/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md +++ b/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md @@ -587,7 +587,7 @@ The following steps will introduce [Karma](https://github.com/SAP/karma-ui5), a Review the console log, the ChromeHeadless browser is now connected but no tests were executed since we haven't added a test plan yet. -6. Refer to the [SAPUI5 Overview and Testing Strategy Guide](https://sapui5.hana.ondemand.com/sdk/#/topic/ab134ef3932c4b42898c79c10341e8b5) to add a unit and integration tests to your project. +6. Refer to the [SAPUI5 Overview and Testing Strategy Guide](https://sapui5.hana.ondemand.com/sdk/#/topic/ab134ef3932c4b42898c79c10341e8b5) to add unit and integration tests to your project. From 358342a18fe292140fd0dfb12d207ba95c4457e0 Mon Sep 17 00:00:00 2001 From: J Long Date: Mon, 8 Apr 2024 10:23:15 +0100 Subject: [PATCH 5/6] Update docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md Co-authored-by: dimitrij-afonitschkin <131276293+dimitrij-afonitschkin@users.noreply.github.com> --- ...fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md b/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md index 5e847ad..50189fb 100644 --- a/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md +++ b/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md @@ -557,7 +557,7 @@ The following steps will introduce [Karma](https://github.com/SAP/karma-ui5), a frameworks: ["ui5"], ui5: { configPath: "ui5-mock.yaml". // change to ui5.yaml if project does not exist. - }, + }, browsers: ["ChromeHeadless"], customLaunchers: { ChromeHeadlessCustom: { From 7818208a6fe4b0388542e56880bc30a3d698fc3e Mon Sep 17 00:00:00 2001 From: J Long Date: Mon, 8 Apr 2024 12:05:11 +0100 Subject: [PATCH 6/6] Update docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md Co-authored-by: Austin Devine --- ...fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md b/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md index 50189fb..e94336d 100644 --- a/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md +++ b/docs/cicd/configure-an-sap-fiori-for-the-abap-platform-job-in-the-job-editor-4c26bfb.md @@ -556,7 +556,7 @@ The following steps will introduce [Karma](https://github.com/SAP/karma-ui5), a config.set({ frameworks: ["ui5"], ui5: { - configPath: "ui5-mock.yaml". // change to ui5.yaml if project does not exist. + configPath: "ui5-mock.yaml". // change to ui5.yaml if ui5-mock.yaml does not exist. }, browsers: ["ChromeHeadless"], customLaunchers: {