diff --git a/README.md b/README.md index f59d056c..01cb7da3 100644 --- a/README.md +++ b/README.md @@ -65,8 +65,8 @@ The tutorial consists of the following steps. To start, just open the first link - **[Step 24: Sorting and Grouping](steps/24/README.md "To make our list of invoices even more user-friendly, we sort it alphabetically instead of just showing the order from the data model. Additionally, we introduce groups and add the company that ships the products so that the data is easier to consume.")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-24/index-cdn.html) \| [πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-24.zip)) - **[Step 25: Remote OData Service](steps/25/README.md "So far we have worked with local JSON data, but now we will access a real OData service to visualize remote data.")** (πŸ”— Live Preview *unfeasible* \| [πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-25.zip)) - **[Step 26: Mock Server Configuration](steps/26/README.md "We just ran our app against a real service, but for developing and testing our app we do not want to rely on the availability of the β€œreal” service or put additional load on the system where the data service is located.")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-26/test/mockServer-cdn.html) \| [πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-26.zip)) -- **[Step 27: Unit Test with QUnit](steps/27/README.md "Now that we have a test folder in the app, we can start to increase our test coverage. ")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-27/test/unit/unitTests-cdn.qunit.html) \| [πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-27.zip)) -- **[Step 28: Integration Test with OPA](steps/28/README.md "If we want to test interaction patterns or more visual features of our app, we can also write an integration test. ")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-28/test/integration/opaTests-cdn.qunit.html) \| [πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28.zip)) +- **[Step 27: Unit Test with QUnit](steps/27/README.md "Now that we have a test folder in the app, we can start to increase our test coverage. ")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-27/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=unit/unitTests) \| [πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-27.zip)) +- **[Step 28: Integration Test with OPA](steps/28/README.md "If we want to test interaction patterns or more visual features of our app, we can also write an integration test. ")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-28/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=integration/opaTests) \| [πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28.zip)) - **[Step 29: Debugging Tools](steps/29/README.md "Even though we have added a basic test coverage in the previous steps, it seems like we accidentally broke our app, because it does not display prices to our invoices anymore. We need to debug the issue and fix it before someone finds out.")** (*code remains unchanged from the previous step*) - **[Step 30: Routing and Navigation](steps/30/README.md "So far, we have put all app content on one single page. As we add more and more features, we want to split the content and put it on separate pages.")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-30/test/mockServer-cdn.html) \| [πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-30.zip)) - **[Step 31: Routing with Parameters](steps/31/README.md "We can now navigate between the overview and the detail page, but the actual item that we selected in the overview is not displayed on the detail page yet. A typical use case for our app is to show additional information for the selected item on the detail page. ")** ([πŸ”— Live Preview](https://sap-samples.github.io/ui5-typescript-walkthrough/step-31/test/mockServer-cdn.html) \| [πŸ“₯ Download Solution](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-31.zip)) diff --git a/steps/01/README.md b/steps/01/README.md index 72132ead..493ba4ee 100644 --- a/steps/01/README.md +++ b/steps/01/README.md @@ -57,7 +57,7 @@ In our webapp folder, we create a new HTML file named `index.html` and copy the ### webapp/manifest.json \(New\) -The manifest file, also known as the "descriptor" or "app descriptor," serves as a crucial configuration file for applications, components, and libraries. Stored in the `webapp` folder, this file is read by OpenUI5 to instantiate a component. Although we haven't created a component yet (which is part of [Step 9: COmponent Configuration](../09/README.md)), we need to create the app descriptor already now, because UI5 Tooling , whichwe intend to use for development, also requires an app descriptor. +The manifest file, also known as the "descriptor" or "app descriptor," serves as a crucial configuration file for applications, components, and libraries. Stored in the `webapp` folder, this file is read by OpenUI5 to instantiate a component. Although we haven't created a component yet (which is part of [Step 9: Component Configuration](../09/README.md)), we need to create the app descriptor already now, because UI5 Tooling , whichwe intend to use for development, also requires an app descriptor. Hence, we create a new file called `manifest.json` in the webapp folder and define its essential attributes: diff --git a/steps/27/README.md b/steps/27/README.md index 81addb30..60e83b46 100644 --- a/steps/27/README.md +++ b/steps/27/README.md @@ -17,7 +17,7 @@ Actually, every feature that we added to the app so far, would require a separat *A unit test for our formatters is now available* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 27](https://sap-samples.github.io/ui5-typescript-walkthrough/step-27/test/unit/unitTests-cdn.qunit.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 27](https://sap-samples.github.io/ui5-typescript-walkthrough/step-27/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=unit/unitTests). To download the solution for this step as a zip file, just choose the link here: [πŸ“₯ Download Solution for Step 27](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-27.zip). @@ -40,10 +40,13 @@ The new formatter file just contains one QUnit module for our formatter function Finally, we perform our assertions. We check each branch of the formatter logic by invoking the isolated formatter function with the values that we expect in the data model \(`A`, `B`, `C`, and everything else\). We strictly compare the result of the formatter function with the hard-coded strings that we expect from the resource bundle and give a meaningful error message if the test should fail. +> πŸ“ **Note:**
+> Test code needs to import modules under test (i.e. productive code) via their full namespace (in our case `ui5/walkthrough/`), not via relative paths as test code uses a different namespace (`test-resources/ui5/walkthrough/`). + ```ts import ResourceModel from "sap/ui/model/resource/ResourceModel"; import Controller from "sap/ui/core/mvc/Controller"; -import formatter from "../../../model/formatter"; +import formatter from "ui5/walkthrough/model/formatter"; QUnit.module("Formatting function", {}); @@ -82,79 +85,124 @@ QUnit.test("Should return the translated texts", (assert) => { ### webapp/test/unit/unitTests.qunit.ts \(New\) We create a new `unitTests.qunit.ts` file under `webapp/test/unit/`. -This script loads and executes our formatter test. Before the QUnit test execution can be started we need to wait until the Core has been booted. Therefore, you need to disable the autostart `QUnit.config.autostart = false;`, require the `sap/ui/core/Core` module and use `Core.ready()` to wait until the Core has booted and then you can start the QUnit tests with `QUnit.start()`. +This module will serve as the entry point for all our unit tests. It will be referenced in the test suite that we will set up later on. + +Inside the `unitTests.qunit.ts` file, we import the unit test for the custom formatter. This ensures that any tests related to the custom formatter functionality will be included when running our unit tests. ```ts -/* @sapUiRequire */ -QUnit.config.autostart = false; - -// import all your QUnit tests here -void Promise.all([ - import("sap/ui/core/Core"), // required to wait until Core has booted to start the QUnit tests - import("ui5/walkthrough/test/unit/model/formatter"), -]).then(([{default: Core}]) => Core.ready()).then(() => { - QUnit.start(); -}); +import "./model/formatter"; ``` -> πŸ“ **Note:**
-> The annotation `@sapUiRequire` instructs the UI5 TypeScript transpilation process (executed by `ui5-tooling-transpile`) to use `sap.ui.require` instead of `sap.ui.define` for the transpiled module. This allows to load the module via a ` + > + + +
+
+ + +``` + +*** + +### webapp/test/testsuite.qunit.ts \(New\) + +The `testsuite.qunit.ts` file contains the configuration of our test suite. +Although it comes with a set of defaults, it is recommended to configure the used QUnit version so that potential future updates do not break our tests. +In addition the `sap_horizon` theme is configured in the `ui5` section where the UI5 runtime configuration can be provided. + +The test suite serves as the entry point for all tests within our project such as the previously created `unit/unitTests` (The `.qunit.ts` extension is omitted and will be added automatically during runtime). + +The previously created generic `Test.qunit.html` file is referenced as the test `page` and configured with query parameters so that individual tests can be run. The placeholders `{suite}` and `{name}` are replaced with the suite and test names respectively. + +For more information, read [Test Starter - Concept and Basic Setup](https://sdk.openui5.org/#/topic/22f50c0f0b104bf3ba84620880793d3f). + +> πŸ“ **Note:**
+> There are currently no types available for the test suite configuration. Please refer to [Test Starter - Configuration Options](https://sdk.openui5.org/topic/738ed025b36e484fa99046d0f80552fd) to see all available options. + +```ts +export default { + name: "QUnit test suite for UI5 TypeScript Walkthrough", + defaults: { + page: "ui5://test-resources/ui5/walkthrough/Test.qunit.html?testsuite={suite}&test={name}", + qunit: { + version: 2 + }, + ui5: { + theme: "sap_horizon" + }, + loader: { + paths: { + "ui5/walkthrough": "../" + } + } + }, + tests: { + "unit/unitTests": { + title: "UI5 TypeScript Walkthrough - Unit Tests" + } + } +}; +``` + +*** + +### webapp/test/testsuite.qunit.html \(New\) + +We also create a corresponding `testsuite.qunit.html` in the same folder. - +This is the page we will open in the browser to see a list of all our tests and run them by clicking on the test name. - - +It registers a resource root mapping for the test resources of our project and references the `testsuite.qunit` module we created in the previous step. - +```html + + + + + -
-
- ``` -The so-called QUnit test suite is an HTML page that triggers all QUnit tests for the application. Most of it is generating the layout of the result page that you can see in the preview and we won’t further explain these parts. - -If we now open the `webapp/test/unit/unitTests.qunit.html` file in the browser, we should see our test running and verifying the formatter logic. - -*** +If we now open the `webapp/test/testsuite.qunit.html` file in the browser and select `unit/unitTests`, we should see our test running and verifying the formatter logic. ### Conventions - All unit tests are placed in the webapp/test/unit folder of the app. -- Files in the test suite end with `*.qunit.html`. +- The default naming convention for the test suite is `testsuite.qunit.html` and `testsuite.qunit.js`. When adding additional test suites, the naming must follow the pattern `testsuite..qunit.html` / `testsuite..qunit.ts`. -- The `unitTests.qunit.html` file triggers all unit tests of the app. +- Test files referenced in the test suite end with `.qunit.ts`. - A unit test should be written for formatters, controller logic, and other individual functionality. @@ -172,6 +220,8 @@ If we now open the `webapp/test/unit/unitTests.qunit.html` file in the browser, **Related Information** +[Test Starter](https://sdk.openui5.org/topic/032be2cb2e1d4115af20862673bedcdb.html "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](https://sdk.openui5.org/topic/09d145cd86ee4f8e9d08715f1b364c51.html "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.") [QUnit Home Page](https://qunitjs.com/) diff --git a/steps/27/webapp/test/Test.cdn.qunit.html b/steps/27/webapp/test/Test.cdn.qunit.html new file mode 100644 index 00000000..e851fcf5 --- /dev/null +++ b/steps/27/webapp/test/Test.cdn.qunit.html @@ -0,0 +1,16 @@ + + + + + + + +
+
+ + diff --git a/steps/27/webapp/test/Test.qunit.html b/steps/27/webapp/test/Test.qunit.html new file mode 100644 index 00000000..5e3880e7 --- /dev/null +++ b/steps/27/webapp/test/Test.qunit.html @@ -0,0 +1,16 @@ + + + + + + + +
+
+ + diff --git a/steps/27/webapp/test/testsuite.cdn.qunit.html b/steps/27/webapp/test/testsuite.cdn.qunit.html new file mode 100644 index 00000000..dedcf7e1 --- /dev/null +++ b/steps/27/webapp/test/testsuite.cdn.qunit.html @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/steps/27/webapp/test/testsuite.cdn.qunit.ts b/steps/27/webapp/test/testsuite.cdn.qunit.ts new file mode 100644 index 00000000..006532a2 --- /dev/null +++ b/steps/27/webapp/test/testsuite.cdn.qunit.ts @@ -0,0 +1,22 @@ +export default { + name: "QUnit test suite for UI5 TypeScript Walkthrough", + defaults: { + page: "ui5://test-resources/ui5/walkthrough/Test.cdn.qunit.html?testsuite={suite}&test={name}", + qunit: { + version: 2 + }, + ui5: { + theme: "sap_horizon" + }, + loader: { + paths: { + "ui5/walkthrough": "../" + } + } + }, + tests: { + "unit/unitTests": { + title: "UI5 TypeScript Walkthrough - Unit Tests" + } + } +}; diff --git a/steps/27/webapp/test/testsuite.qunit.html b/steps/27/webapp/test/testsuite.qunit.html new file mode 100644 index 00000000..1fdae632 --- /dev/null +++ b/steps/27/webapp/test/testsuite.qunit.html @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/steps/27/webapp/test/testsuite.qunit.ts b/steps/27/webapp/test/testsuite.qunit.ts new file mode 100644 index 00000000..b07206d0 --- /dev/null +++ b/steps/27/webapp/test/testsuite.qunit.ts @@ -0,0 +1,22 @@ +export default { + name: "QUnit test suite for UI5 TypeScript Walkthrough", + defaults: { + page: "ui5://test-resources/ui5/walkthrough/Test.qunit.html?testsuite={suite}&test={name}", + qunit: { + version: 2 + }, + ui5: { + theme: "sap_horizon" + }, + loader: { + paths: { + "ui5/walkthrough": "../" + } + } + }, + tests: { + "unit/unitTests": { + title: "UI5 TypeScript Walkthrough - Unit Tests" + } + } +}; diff --git a/steps/27/webapp/test/unit/model/formatter.ts b/steps/27/webapp/test/unit/model/formatter.ts index 0471d6a4..a7c40d39 100644 --- a/steps/27/webapp/test/unit/model/formatter.ts +++ b/steps/27/webapp/test/unit/model/formatter.ts @@ -1,6 +1,6 @@ import ResourceModel from "sap/ui/model/resource/ResourceModel"; import Controller from "sap/ui/core/mvc/Controller"; -import formatter from "../../../model/formatter"; +import formatter from "ui5/walkthrough/model/formatter"; QUnit.module("Formatting function", {}); diff --git a/steps/27/webapp/test/unit/unitTests-cdn.qunit.html b/steps/27/webapp/test/unit/unitTests-cdn.qunit.html deleted file mode 100644 index 1e295b7b..00000000 --- a/steps/27/webapp/test/unit/unitTests-cdn.qunit.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - UI5 TypeScript Walkthrough - Unit Tests - - - - - - - - - - - - -
-
- - diff --git a/steps/27/webapp/test/unit/unitTests.qunit.html b/steps/27/webapp/test/unit/unitTests.qunit.html deleted file mode 100644 index f55b0dbd..00000000 --- a/steps/27/webapp/test/unit/unitTests.qunit.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - UI5 TypeScript Walkthrough - Unit Tests - - - - - - - - - - - - -
-
- - diff --git a/steps/27/webapp/test/unit/unitTests.qunit.ts b/steps/27/webapp/test/unit/unitTests.qunit.ts index 37b074ca..37e81f21 100644 --- a/steps/27/webapp/test/unit/unitTests.qunit.ts +++ b/steps/27/webapp/test/unit/unitTests.qunit.ts @@ -1,10 +1 @@ -/* @sapUiRequire */ -QUnit.config.autostart = false; - -// import all your QUnit tests here -void Promise.all([ - import("sap/ui/core/Core"), // required to wait until Core has booted to start the QUnit tests - import("ui5/walkthrough/test/unit/model/formatter"), -]).then(([{default: Core}]) => Core.ready()).then(() => { - QUnit.start(); -}); +import "./model/formatter"; diff --git a/steps/28/README.md b/steps/28/README.md index a5439534..db584f31 100644 --- a/steps/28/README.md +++ b/steps/28/README.md @@ -17,7 +17,7 @@ We haven’t thought about testing our interaction with the app yet, so in this *An OPA test opens the "Hello" dialog from step 16* -You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 28](https://sap-samples.github.io/ui5-typescript-walkthrough/step-28/test/integration/opaTests-cdn.qunit.html). +You can access the live preview by clicking on this link: [πŸ”— Live Preview of Step 28](https://sap-samples.github.io/ui5-typescript-walkthrough/step-28/test/Test.cdn.qunit.html?testsuite=test-resources/ui5/walkthrough/testsuite.cdn.qunit&test=integration/opaTests). To download the solution for this step as a zip file, just choose the link here: [πŸ“₯ Download Solution for Step 28](https://sap-samples.github.io/ui5-typescript-walkthrough/ui5-typescript-walkthrough-step-28.zip). @@ -131,66 +131,33 @@ As you can see, the test case reads like a user story, we actually do not need t ### webapp/test/integration/opaTests.qunit.ts \(New\) We create a new `opaTests.qunit.ts` file under `webapp/test/integration/`. - -This script loads and executes our `NavigationJourney`. Before the QUnit test execution can be started we need to wait until the Core has been booted. Therefore, you need to disable the autostart `QUnit.config.autostart = false;`, require the `sap/ui/core/Core` module and use `Core.ready()` to wait until the Core has booted and then you can start the QUnit tests with `QUnit.start()`. +This module imports our `NavigationJourney` and is the entrypoint for all integration tests in the project. ```ts -/* @sapUiRequire */ -QUnit.config.autostart = false; - -// import all your integration tests here -void Promise.all([ - import("sap/ui/core/Core"), // required to wait until Core has booted to start the QUnit tests - import("ui5/walkthrough/test/integration/NavigationJourney"), -]).then(([{default: Core}]) => Core.ready()).then(() => { - QUnit.start(); -}); +import "./NavigationJourney"; ``` *** -### webapp/test/integration/opaTests.qunit.html \(New\) - -Finally we create a new `opaTests.qunit.html` page under `webapp/test/integration`. - -This HTML page contains our test suite for all OPA tests of the app. We use the same namespace as for our application. - -Then we load the basic QUnit functionality via script tags from OpenUI5 so that we can execute the test journey. Finally we load the `opaTests.qunit`, which then again loads our `NavigationJourney`. - -```html - - - - UI5 TypeScript Walkthrough - Integration Tests - - - - - - - - - - - - -
-
- - +### webapp/test/testsuite.qunit.ts + +Finally we reference the new `integration/opaTests.qunit.ts` in the `testsuite.qunit.ts` file. The `.qunit.ts` extension is omitted and will be added automatically during runtime. + +```ts +export default { + // ... + tests: { + "unit/unitTests": { + title: "UI5 TypeScript Walkthrough - Unit Tests" + }, + "integration/opaTests": { + title: "UI5 TypeScript Walkthrough - Integration Tests" + } + } +}; ``` -When you call the `webapp/test/integration/opaTests.qunit.html` page of your project on the server, you should see the QUnit layout and a test β€œShould see the Hello dialog” is executed immediately. It will load the app component on the right side of the page. There you can see what operations the test is performing on the app, if everything works correctly the button click is triggered, then a dialog is shown and the test case is green. +If we now open the `webapp/test/testsuite.qunit.html` file in the browser and select select `integration/opaTests`, we should see the QUnit layout and a test β€œShould see the Hello dialog” is executed immediately. It will load the app component on the right side of the page. There you can see what operations the test is performing on the app, if everything works correctly the button click is triggered, then a dialog is shown and the test case is green. *** diff --git a/steps/28/webapp/test/Test.cdn.qunit.html b/steps/28/webapp/test/Test.cdn.qunit.html new file mode 100644 index 00000000..e851fcf5 --- /dev/null +++ b/steps/28/webapp/test/Test.cdn.qunit.html @@ -0,0 +1,16 @@ + + + + + + + +
+
+ + diff --git a/steps/28/webapp/test/Test.qunit.html b/steps/28/webapp/test/Test.qunit.html new file mode 100644 index 00000000..5e3880e7 --- /dev/null +++ b/steps/28/webapp/test/Test.qunit.html @@ -0,0 +1,16 @@ + + + + + + + +
+
+ + diff --git a/steps/28/webapp/test/integration/opaTests-cdn.qunit.html b/steps/28/webapp/test/integration/opaTests-cdn.qunit.html deleted file mode 100644 index ccc57278..00000000 --- a/steps/28/webapp/test/integration/opaTests-cdn.qunit.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - UI5 TypeScript Walkthrough - Integration Tests - - - - - - - - - - - - -
-
- - diff --git a/steps/28/webapp/test/integration/opaTests.qunit.html b/steps/28/webapp/test/integration/opaTests.qunit.html deleted file mode 100644 index 71c08333..00000000 --- a/steps/28/webapp/test/integration/opaTests.qunit.html +++ /dev/null @@ -1,30 +0,0 @@ - - - - UI5 TypeScript Walkthrough - Integration Tests - - - - - - - - - - - - -
-
- - diff --git a/steps/28/webapp/test/integration/opaTests.qunit.ts b/steps/28/webapp/test/integration/opaTests.qunit.ts index 785b3b0e..86db5900 100644 --- a/steps/28/webapp/test/integration/opaTests.qunit.ts +++ b/steps/28/webapp/test/integration/opaTests.qunit.ts @@ -1,10 +1 @@ -/* @sapUiRequire */ -QUnit.config.autostart = false; - -// import all your integration tests here -void Promise.all([ - import("sap/ui/core/Core"), // required to wait until Core has booted to start the QUnit tests - import("ui5/walkthrough/test/integration/NavigationJourney"), -]).then(([{default: Core}]) => Core.ready()).then(() => { - QUnit.start(); -}); +import "./NavigationJourney"; diff --git a/steps/28/webapp/test/mockServer.html b/steps/28/webapp/test/mockServer.html index 91c1cddb..1ce73671 100644 --- a/steps/28/webapp/test/mockServer.html +++ b/steps/28/webapp/test/mockServer.html @@ -6,10 +6,10 @@ -
+
diff --git a/steps/28/webapp/test/testsuite.cdn.qunit.html b/steps/28/webapp/test/testsuite.cdn.qunit.html new file mode 100644 index 00000000..dedcf7e1 --- /dev/null +++ b/steps/28/webapp/test/testsuite.cdn.qunit.html @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/steps/28/webapp/test/testsuite.cdn.qunit.ts b/steps/28/webapp/test/testsuite.cdn.qunit.ts new file mode 100644 index 00000000..2262c29d --- /dev/null +++ b/steps/28/webapp/test/testsuite.cdn.qunit.ts @@ -0,0 +1,25 @@ +export default { + name: "QUnit test suite for UI5 TypeScript Walkthrough", + defaults: { + page: "ui5://test-resources/ui5/walkthrough/Test.cdn.qunit.html?testsuite={suite}&test={name}", + qunit: { + version: 2 + }, + ui5: { + theme: "sap_horizon" + }, + loader: { + paths: { + "ui5/walkthrough": "../" + } + } + }, + tests: { + "unit/unitTests": { + title: "UI5 TypeScript Walkthrough - Unit Tests" + }, + "integration/opaTests": { + title: "UI5 TypeScript Walkthrough - Integration Tests" + } + } +}; diff --git a/steps/28/webapp/test/testsuite.qunit.html b/steps/28/webapp/test/testsuite.qunit.html new file mode 100644 index 00000000..1fdae632 --- /dev/null +++ b/steps/28/webapp/test/testsuite.qunit.html @@ -0,0 +1,15 @@ + + + + + + + + + diff --git a/steps/28/webapp/test/testsuite.qunit.ts b/steps/28/webapp/test/testsuite.qunit.ts new file mode 100644 index 00000000..33de10db --- /dev/null +++ b/steps/28/webapp/test/testsuite.qunit.ts @@ -0,0 +1,25 @@ +export default { + name: "QUnit test suite for UI5 TypeScript Walkthrough", + defaults: { + page: "ui5://test-resources/ui5/walkthrough/Test.qunit.html?testsuite={suite}&test={name}", + qunit: { + version: 2 + }, + ui5: { + theme: "sap_horizon" + }, + loader: { + paths: { + "ui5/walkthrough": "../" + } + } + }, + tests: { + "unit/unitTests": { + title: "UI5 TypeScript Walkthrough - Unit Tests" + }, + "integration/opaTests": { + title: "UI5 TypeScript Walkthrough - Integration Tests" + } + } +}; diff --git a/steps/28/webapp/test/unit/model/formatter.ts b/steps/28/webapp/test/unit/model/formatter.ts index 0471d6a4..a7c40d39 100644 --- a/steps/28/webapp/test/unit/model/formatter.ts +++ b/steps/28/webapp/test/unit/model/formatter.ts @@ -1,6 +1,6 @@ import ResourceModel from "sap/ui/model/resource/ResourceModel"; import Controller from "sap/ui/core/mvc/Controller"; -import formatter from "../../../model/formatter"; +import formatter from "ui5/walkthrough/model/formatter"; QUnit.module("Formatting function", {}); diff --git a/steps/28/webapp/test/unit/unitTests-cdn.qunit.html b/steps/28/webapp/test/unit/unitTests-cdn.qunit.html deleted file mode 100644 index 1e295b7b..00000000 --- a/steps/28/webapp/test/unit/unitTests-cdn.qunit.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - UI5 TypeScript Walkthrough - Unit Tests - - - - - - - - - - - - -
-
- - diff --git a/steps/28/webapp/test/unit/unitTests.qunit.html b/steps/28/webapp/test/unit/unitTests.qunit.html deleted file mode 100644 index f55b0dbd..00000000 --- a/steps/28/webapp/test/unit/unitTests.qunit.html +++ /dev/null @@ -1,28 +0,0 @@ - - - - UI5 TypeScript Walkthrough - Unit Tests - - - - - - - - - - - - -
-
- - diff --git a/steps/28/webapp/test/unit/unitTests.qunit.ts b/steps/28/webapp/test/unit/unitTests.qunit.ts index 37b074ca..37e81f21 100644 --- a/steps/28/webapp/test/unit/unitTests.qunit.ts +++ b/steps/28/webapp/test/unit/unitTests.qunit.ts @@ -1,10 +1 @@ -/* @sapUiRequire */ -QUnit.config.autostart = false; - -// import all your QUnit tests here -void Promise.all([ - import("sap/ui/core/Core"), // required to wait until Core has booted to start the QUnit tests - import("ui5/walkthrough/test/unit/model/formatter"), -]).then(([{default: Core}]) => Core.ready()).then(() => { - QUnit.start(); -}); +import "./model/formatter"; diff --git a/steps/28/webapp/view/HelloDialog.fragment.xml b/steps/28/webapp/view/HelloDialog.fragment.xml index b453168b..4fc8b25b 100644 --- a/steps/28/webapp/view/HelloDialog.fragment.xml +++ b/steps/28/webapp/view/HelloDialog.fragment.xml @@ -9,7 +9,7 @@ src="sap-icon://hello-world" size="8rem" class="sapUiMediumMargin"/> - +