feat(testing): add wdi5 e2e scope #23
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -81,11 +81,11 @@ Now, let's get the TypeScript compiler and the UI5 type definitions: | |
| npm install --save-dev typescript @types/[email protected] | ||
| ``` | ||
|
|
||
| When you are developing a SAPUI5 application (i.e. also using control libraries which are not available in OpenUI5), use the `@sapui5/types` types instead of the `@types/openui5` ones. | ||
|
|
||
| > **Remark:** There are also `@openui5/types` types available - how do they differ from the `@types/openui5` ones?<br> | ||
| The content is basically the same, one difference is in versioning: while the types in the `@openui5` namespace are exactly in sync with the respective OpenUI5 patch release, the ones in the `@types` namespace follow the DefinitelyTyped versioning and are only released *once* per minor release of OpenUI5 ([more details here](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/openui5#versioning)), not for every patch. In practice it shouldn't make any difference what you use, but note that in the `@types` namespace there is usually only the `*.*.0` patch release available.<br> | ||
| The other small difference is [described in detail here](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/openui5#jquery-and-qunit-references-and-their-versions). In essence, UI5 declares the jQuery and QUnit types as dependencies to make sure the type definitions are also loaded because types from those libraries are in some places exposed in UI5 APIs. The difference is that for `@types/openui5` the *latest* version of those types is referenced and for `@openui5/types` the *best matching* version is referenced. But in practice also this difference should not be something to worry about. To enforce using a specific version of the jQuery/QUnit types with the `@types/openui5` type definitions, you can always do e.g.: | ||
| > ```sh | ||
| > npm install --save-dev @types/[email protected] @types/[email protected] | ||
| > ``` | ||
|
|
@@ -127,18 +127,16 @@ So we need to add a `tsconfig.json` configuration file to configure the right la | |
| } | ||
| ``` | ||
|
|
||
| > **Note:** when you use the `@sapui5/types` (or `@openui5/types`) types instead, you need to add the following section to tsconfig.json: | ||
| > | ||
| > ```json | ||
| > "typeRoots": [ | ||
| > "./node_modules/@types", | ||
| > "./node_modules/@sapui5/types" | ||
| > ], | ||
| >``` | ||
| > | ||
| > Why? TypeScript automatically finds all type definition files in a dependency starting with `@types/...` (i.e. all `.d.ts` files in `node_modules/@types/...`). The jQuery d.ts files are there and found, but the SAPUI5 types are only available in a package starting with `@sapui5/...`, hence TypeScript must be explicitly pointed to these types. As this disables the automatic loading of other types from `node_modules/@types/...`, this path must also be given as a type root. | ||
|
There was a problem hiding this comment. Hm, after removing the "types" section, this sentence does no longer apply. However, I think the current recommendation is using |
||
|
|
||
| There are additional settings in this file, e.g. telling the compiler which files to compile (all matching `./webapp/**/*`) and how the modules should be resolved (`"moduleResolution": "node"`). And a couple of compiler options which are not so important right now. They determine how exactly the compiler behaves. The "paths" section informs TypeScript about the mapping of namespaces used in the app. | ||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| /* eslint-disable @typescript-eslint/no-unsafe-call */ | ||
| /* eslint-disable @typescript-eslint/no-unsafe-member-access */ | ||
| import AppPage from "./pages/AppPage"; | ||
|
|
||
| describe("Hello!", () => { | ||
| it("Should open the Hello dialog", async () => { | ||
| await AppPage.iPressTheSayHelloWithDialogButton(); | ||
| const dialogVisible = await AppPage.iShouldSeeTheHelloDialog(); | ||
| expect(dialogVisible).toBeTruthy(); | ||
| }); | ||
|
|
||
| it("Should close the Hello dialog", async () => { | ||
| await AppPage.iPressTheOkButtonInTheDialog(); | ||
| const dialogNotVisible = await AppPage.iShouldNotSeeTheHelloDialog(); | ||
| expect(dialogNotVisible).toBeTruthy(); | ||
| }); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| /* eslint-disable @typescript-eslint/no-unsafe-return */ | ||
| /* eslint-disable @typescript-eslint/no-unsafe-call */ | ||
| /* eslint-disable @typescript-eslint/no-unsafe-member-access */ | ||
| /* eslint-disable @typescript-eslint/no-unsafe-assignment */ | ||
| import Button from "sap/m/Button"; | ||
| import MessageBox from "sap/m/MessageBox"; | ||
|
|
||
| import { buttonLocator, dialogLocator, OKButtonLocator } from "./locators"; | ||
|
|
||
| class AppPage { | ||
| async iPressTheSayHelloWithDialogButton() { | ||
| const button = await browser.asControl<Button>(buttonLocator); | ||
| await button.press(); | ||
| } | ||
|
|
||
| async iShouldSeeTheHelloDialog(): Promise<boolean> { | ||
| const dialog = await browser.asControl<MessageBox>(dialogLocator); | ||
| return await dialog.getVisible<boolean>(); | ||
| } | ||
|
|
||
| async iPressTheOkButtonInTheDialog() { | ||
| await browser.asControl(OKButtonLocator).press(); | ||
| } | ||
|
|
||
| async iShouldNotSeeTheHelloDialog(): Promise<boolean> { | ||
| const dialog = await browser.asControl<MessageBox>(dialogLocator); | ||
| // this returns "null" as the message box is not | ||
| // part of the DOM after being close, so | ||
| // no methods can be executed on the control | ||
| const visible = await dialog.isInitialized(); | ||
| return visible; | ||
| } | ||
| } | ||
|
|
||
| export default new AppPage(); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| export const buttonLocator = { | ||
| selector: { | ||
| id: "container-ui5.typescript.helloworld---app--helloButton" | ||
| } | ||
| }; | ||
|
|
||
| export const dialogLocator = { | ||
| selector: { | ||
| controlType: "sap.m.Dialog", | ||
| properties: { | ||
| type: "Message" | ||
| }, | ||
| searchOpenDialogs: true | ||
| } | ||
| }; | ||
|
|
||
| export const OKButtonLocator = { | ||
| selector: { | ||
| controlType: "sap.m.Button", | ||
| properties: { | ||
| text: "OK" | ||
| }, | ||
| searchOpenDialogs: true | ||
| } | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "moduleResolution": "node", | ||
| "types": ["node", "@types/openui5", "@wdio/globals/types", "@wdio/mocha-framework", "wdio-ui5-service/esm"], | ||
| "target": "es2019" | ||
| } | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.