OpenUI5 Documentation Update 26.09.2024

SAP · Sep 26, 2024 · 22139e0 · 22139e0
1 parent c6d34d3
commit 22139e0
Show file tree

Hide file tree

Showing 7 changed files with 87 additions and 48 deletions.
diff --git a/docs/Concept_and_Basic_Setup_22f50c0.md b/docs/Concept_and_Basic_Setup_22f50c0.md
@@ -10,26 +10,29 @@ view on: [demo kit nightly build](https://sdk.openui5.org/nightly/#/topic/22f50c
 
 ## Concept and Basic Setup
 
-To a apply the Test Starter concept to your OpenUI5 project, you need to create a test suite and a generic test page which allows executing one or multiple test modules.
+To a apply the Test Starter concept to your OpenUI5 project, you need to create a test suite and a generic test page that allows for the running of one or multiple test modules.
+
+> ### Note:  
+> For OpenUI5 applications, the test suite and the generic test page are typically placed in the `webapp/test` folder. The code samples in the next sections use `<NAMESPACE>` as a placeholder for your OpenUI5 project namespace. Please, replace this placeholder with your OpenUI5 project namespace defined in the `sap.app/id` property in the `manifest.json` file by replacing the '.' with '/', for example `my/ui5app`.
+
 
-For OpenUI5 applications the test suite and the generic test page are typically placed in the `webapp/test` folder. The following code samples uses `<NAMESPACE>` as a placeholder for your OpenUI5 project namespace. Please, replace this placeholder with your OpenUI5 project namespace defined in the `sap.app/id` property in the `manifest.json` file by replacing the '.' with '/', for example `my/ui5app`.
 
 ***
 
 <a name="loio22f50c0f0b104bf3ba84620880793d3f__section_v1s_4qg_vcc"/>
 
-### The OpenUI5 Test Suite
+### The UI5 Test Suite
 
-An Test Suite configures the environment for the tests. A Test Suite consists of a `*.qunit.html` page often named `testsuite.qunit.htm`l and a corresponding `*.qunit.js` module often named`testsuite.qunit.js`.
+A test suite configures the environment for the tests. It consists of a `*.qunit.html` page often named `testsuite.qunit.htm`l and a corresponding `*.qunit.js` module often named `testsuite.qunit.js`.
 
 ***
 
-#### The OpenUI5 Test Suite Page
+#### The UI5 Test Suite Page
 
-The Test Suite page uses the `sap/ui/test/starter/createSuite.js` script to initialize the test suite in a CSP compliant way, based on the externalized test configuration provided in the Test Suite module.
+The test suite page uses the `sap/ui/test/starter/createSuite.js` script to initialize the test suite in a way which is compliant to the content security policy, based on the externalized test configuration provided in the test suite module.
 
 ```
-```html
+
 <!DOCTYPE html>
 <html>
 <head>
@@ -47,19 +50,19 @@ The Test Suite page uses the `sap/ui/test/starter/createSuite.js` script to init
 <body>
 </body>
 </html>
-```
+
 ```
 
 ***
 
 ***
 
-#### The OpenUI5 Test Suite Module
+#### The UI5 Test Suite Module
 
-The OpenUI5 Test Suite module represents the configuration file for the OpenUI5 Test Suite. The module must return a configuration object in the following structure:
+The test suite module represents the configuration file for the UI5 test suite. The module must return a configuration object in the following structure:
 
 ```
-```js
+
 sap.ui.define(function() {
 	"use strict";
 
@@ -89,22 +92,21 @@ sap.ui.define(function() {
 		tests: {}
 	};
 });
-```
 
 ```
 
-The `tests` object is empty for now. For more information on how to add add a defined test module to an existing test suite, see [Creating a QUnit Test](Creating_a_QUnit_Test_7080029.md).
+The `tests` object is empty for now. For more information on how to add a defined test module to an existing test suite, see [Creating a QUnit Test](Creating_a_QUnit_Test_7080029.md).
 
 ***
 
 <a name="loio22f50c0f0b104bf3ba84620880793d3f__section_gts_ptg_vcc"/>
 
 ### The Generic Test Page
 
-The generic test page executes one or multiple test modules. Typically this file is named`test.qunit.html`. The generic test page is configured in the test suite module. It will be called with the test suite and test name in order to run a test.
+The generic test page runs one or multiple test modules. Typically this file is named `test.qunit.html`. The generic test page is configured in the test suite module. It will be called with the test suite and test name in order to run a test.
 
 ```
-```html
+
 <!DOCTYPE html>
 <html>
 <head>

diff --git a/docs/Configuration_Options_738ed02.md b/docs/Configuration_Options_738ed02.md
@@ -15,10 +15,10 @@ The OpenUI5 Test Suite module contains the configuration for the OpenUI5 Test Su
 The following options are available on the `defaults` and the individual test configuration objects:
 
 > ### Note:  
-> The values used in the following code are the default values and used as a fallback for options that are not defined in the configuration file \(neither in the `defaults` object, nor in an individual test configuration object\).
+> The values used in the following code are the default values and are used as a fallback for options that are not defined in the configuration file \(neither in the `defaults` object, nor in an individual test configuration object\).
 
 ```
-```js
+
 {
 	/*
 	 * ID(s) of the module(s) to load.
@@ -180,5 +180,4 @@ The following options are available on the `defaults` and the individual test co
 	skip: false
 };
 ```
-```
 
diff --git a/docs/Creating_a_QUnit_Test_7080029.md b/docs/Creating_a_QUnit_Test_7080029.md
@@ -10,24 +10,24 @@ view on: [demo kit nightly build](https://sdk.openui5.org/nightly/#/topic/708002
 
 ## Creating a QUnit Test
 
+
+
 ***
 
 ### Prerequisites
 
-As a prerequisite for creating a test, you need to have created a OpenUI5 application \(such as `myapp`\). Once you have done this, continue with the steps described below.
+As a prerequisite for creating a test, you need to have created a OpenUI5 application project that contains a test suite. Once you have done this, continue with the steps described below.
 
 ***
 
-### Creating a Test Page
+### Creating a Test Module
 
-Create a QUnit test module `myqunittest.qunit.js` in the folder `test-resources/`.
+Create a file `MyTest.qunit.js` in the folder `webapp/test/unit`.
 
 > ### Note:  
-> The file name `XYZ.qunit.js` is a recommendation to clearly indicate that this is a QUnit test. Technically, the `.qunit` name extension is not required.
+> You can use the file template shown below. This code snippet shows a basic QUnit test template.
 
-You can use the file template shown below. This code snippet shows a basic QUnit test template which is used for OpenUI5 control tests.
-
-Each test file represents a UI5 module.
+Each test file normally represents a OpenUI5 module, which is being tested.
 
 ```js
 /*global QUnit */
@@ -36,22 +36,22 @@ sap.ui.define([], function() {
 
         QUnit.module("Module A"); 
 
-        QUnit.test("1. a basic test example", 2, function (assert) {
-                assert.ok(true, "this test is fine"); 
-                var value = "hello1"; 
-                assert.equal(value, "hello1", "We expect value to be 'hello1'"); 
-        });
+        QUnit.test("Basic test example", function(assert) {
+			assert.ok(true, "this test is fine"); 
+			var value = "hello1"; 
+			assert.equal(value, "hello1", "We expect value to be 'hello1'"); 
+	});
 
 });
 ```
 
-This QUnit test file does not include the OpenUI5 bootstrap \(`sap-ui-core.js`\). The test starter ensures that the QUnit tests are loaded within an HTML page.
+QUnit test files do not include the OpenUI5 bootstrap \(`sap-ui-core.js`\). Instead, the test starter ensures that the QUnit tests are loaded within an HTML page.
 
 ***
 
-### Writing Test Functions
+### Writing Tests
 
-Write your test code \(like in the following example\) into the template introduced in the previous section:
+Write your test code \(as shown in the following example\) into the template introduced in the previous section:
 
 ```js
 /*global QUnit */
@@ -146,5 +146,41 @@ sap.ui.define(["sap/m/Button", "sap/ui/qunit/QUnitUtils", "sap/ui/qunit/utils/cr
 		QUnitUtils.triggerKeydown("myButton", "ENTER");
 		assert.ok(true, "this test is not executed asynchronously");
 	});
+});
+
+```
+
+***
+
+<a name="loio708002929ea548fd9433954a9275eb5f__section_hp4_xhn_vcc"/>
+
+### Adding a QUnit Test Module to a Test Suite
+
+In order to run a QUnit test, the corresponding module needs to be added to a test suite.
+
 ```
 
+sap.ui.define(function() {
+	"use strict";
+
+	return {
+
+		// ...
+
+		tests: {
+			"unit/MyTest": {
+				title: "Unit tests for <NAMESPACE>"
+			},
+		}
+	};
+});
+```
+
+***
+
+<a name="loio708002929ea548fd9433954a9275eb5f__section_irf_23n_vcc"/>
+
+### Running a QUnit Test
+
+Open the test suite `html` file in your desired browser to run the newly created test module.
+
diff --git a/docs/Frame_Options_62d9c4d.md b/docs/Frame_Options_62d9c4d.md
@@ -15,13 +15,13 @@ The `frame-options` configuration of OpenUI5 is a client-side feature that is us
 > ### Note:  
 > OpenUI5's `frame-options` configuration is **not** the same as the `X-Frame-Options` HTTP response header.
 > 
-> OpenUI5's `frame-options` is a front-end JavaScript feature that supports all browsers in the UI5 compatibility list. When set to `"deny"` or `"trusted"`, it places an invisible block layer over the page, preventing user interaction by disabling event propagation, e.g. for mouse and keyboard events. However, the page content remains visible.
+> **OpenUI5's `frame-options`** is a front-end JavaScript feature that supports all browsers in the UI5 compatibility list. When set to `"deny"` or `"trusted"`, it places an invisible block layer over the page, preventing user interaction by disabling event propagation, e.g. for mouse and keyboard events. However, the page content remains visible.
 > 
-> In contrast, the `X-Frame-Options` header is a back-end feature sent via HTTP response headers. It prevents the page from loading at the browser level if framing is not allowed. Although it supports `DENY` and `SAMEORIGIN`, it lacks comprehensive support for `ALLOW-FROM`, which is now deprecated in most browsers. This header must be set by the back end and may not be fully supported by all browsers.
+> In contrast, the **`X-Frame-Options` header** is a back-end feature sent via HTTP response headers. It prevents the page from loading at the browser level if framing is not allowed. Although it supports `DENY` and `SAMEORIGIN`, it lacks comprehensive support for `ALLOW-FROM`, which is now deprecated in most browsers. This header must be set by the back end and may not be fully supported by all browsers.
 > 
-> Additionally, the more recent **Content-Security-Policy \(CSP\)** header, also sent by the back end, includes the `frame-ancestors` directive, which provides better control over trusted sites and should be preferred over `X-Frame-Options` for embedding restrictions.
+> Additionally, the more recent **Content-Security-Policy \(CSP\) header**, also sent by the back end, includes the `frame-ancestors` directive, which provides better control over trusted sites and should be preferred over `X-Frame-Options` for embedding restrictions.
 
-OpenUI5 provides the following configuration options for `frame-options`to specify whether the target application is allowed to be used if it's embedded in a separate frame:
+OpenUI5 provides the following configuration options for `frame-options` to specify whether the target application is allowed to be used if it's embedded in a separate frame:
 
 
 <table>

diff --git a/docs/Test_Starter_032be2c.md b/docs/Test_Starter_032be2c.md
@@ -10,7 +10,7 @@ view on: [demo kit nightly build](https://sdk.openui5.org/nightly/#/topic/032be2
 
 ## Test Starter
 
-The Test Starter is a concept intended to simplify the test setup for OpenUI5 applications and libraries by orchestrating your QUnit and Opa5 tests..
+The Test Starter is a concept intended to simplify the test setup for OpenUI5 applications and libraries by orchestrating your QUnit and OPA5 tests.
 
 ***
 
@@ -21,15 +21,15 @@ The Test Starter is a concept intended to simplify the test setup for OpenUI5 ap
 Using the Test Starter concept in your project:
 
 -   reduces the boiler plate code that is needed to write a QUnit test;
--   ensures the loading of the most commonly used testing frameworks \(for example, QUnit, Sinon, qunit-reporter\);
--   ensures these testing frameworks and your test modules are loaded fully asynchronously and in a CSP compliant way;
--   allows moving the configuration of the testing frameworks out of the test code encouraging fully AMD compliant test modules.
+-   ensures the loading of the most commonly used testing frameworks \(for example, QUnit, Sinon.JS, qunit-reporter\);
+-   ensures these testing frameworks and your test modules are loaded completely asynchronously and in compliance with the content security policy;
+-   allows moving the configuration of the testing frameworks out of the test code.
 
 -   **[Concept and Basic Setup](Concept_and_Basic_Setup_22f50c0.md "To a apply the Test Starter concept to your OpenUI5 project, you need to
-		create a test suite and a generic test page which allows executing one or multiple test
-		modules.")**  
-To a apply the Test Starter concept to your OpenUI5 project, you need to create a test suite and a generic test page which allows executing one or multiple test modules.
+		create a test suite and a generic test page that allows for the running of one or multiple
+		test modules.")**  
+To a apply the Test Starter concept to your OpenUI5 project, you need to create a test suite and a generic test page that allows for the running of one or multiple test modules.
 -   **[Configuration Options](Configuration_Options_738ed02.md "The OpenUI5 Test Suite module contains the configuration for
-		the OpenUI5 Test Suite. ")**  
+		the OpenUI5 Test Suite.")**  
 The OpenUI5 Test Suite module contains the configuration for the OpenUI5 Test Suite.
 
diff --git a/docs/Testing_7cdee40.md b/docs/Testing_7cdee40.md
@@ -41,8 +41,8 @@ We recommend OPA5 for integration tests. OPA5 is part of OpenUI5. It is built on
 WebdriverIO \(WDIO\) is a hugely popular end-to-end testing framework. It can work with any web app but lacks the awareness of the web framework that the application uses. wdi5, which is a WDIO plugin, bridges this gap and provides two key benefits, namely control locators and synchronization with the web framework. wdi5 uses a real browser and interacts with your app the same way a real user would.
 
 -   **[Test Starter](Test_Starter_032be2c.md "The Test Starter is a concept intended to simplify the test setup for OpenUI5 applications and
-		libraries by orchestrating your QUnit and Opa5 tests..")**  
-The Test Starter is a concept intended to simplify the test setup for OpenUI5 applications and libraries by orchestrating your QUnit and Opa5 tests..
+		libraries by orchestrating your QUnit and OPA5 tests.")**  
+The Test Starter is a concept intended to simplify the test setup for OpenUI5 applications and libraries by orchestrating your QUnit and OPA5 tests.
 -   **[Unit Testing with QUnit](Unit_Testing_with_QUnit_09d145c.md "QUnit is a powerful, easy-to-use JavaScript unit testing framework. It is used by the
 		jQuery, jQuery UI and jQuery Mobile projects and is capable of testing any generic
 		JavaScript code. It supports asynchronous tests out-of-the-box.")**  

diff --git a/docs/Unit_Testing_with_QUnit_09d145c.md b/docs/Unit_Testing_with_QUnit_09d145c.md
@@ -21,7 +21,9 @@ QUnit is a powerful, easy-to-use JavaScript unit testing framework. It is used b
 
 QUnit tests provide good support for asynchronous testing. These types of tests are often needed for UI functional tests, for example if you have to wait until rendering is done, animations are complete, or a backend call returns. In addition, a QUnit test page can be executed standalone in the browser without the need of an additional "tool". This makes the creation and execution of single QUnit tests much easier. Finally, QUnit is closely related to jQuery, which is also a fundamental part of OpenUI5.
 
--   **[Creating a QUnit Test](Creating_a_QUnit_Test_7080029.md "")**  
+-   **[Creating a QUnit Test](Creating_a_QUnit_Test_7080029.md "
+
+	")**  
 
 -   **[Code Coverage Measurement](Code_Coverage_Measurement_7ef3242.md "You can measure the code coverage either via HTML or JavaScript code using a code coverage tool like Istanbul (default)
 		or Blanket.js (legacy).")**