From fd6c53144eea9708abc9175de2de8afedd76e735 Mon Sep 17 00:00:00 2001 From: J Long Date: Fri, 5 Apr 2024 12:46:10 +0100 Subject: [PATCH] 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. +