feat(ui5-tooling-modules): seamless web components support phase 1 #1051
Conversation
petermuessig
force-pushed
the
feat/SeamlessWebComponents
branch
from
bbeb7d0 to
ce85746
Compare
- add aliasing for classes to prevent searching for a class every time
|
I almost don’t dare to say….but…would you eventually need a hand with „the wdi5 issues“?! 😬😅 |
@vobu oh well, yes - I have no clue why in the binding test the list is not available and it states "element is not interactable" - strange that with my change I somehow introduced it, but the initial page of the app is not really changed. Really weird. The shorthand API doesn't work, because of the list is not detected properly on the other view. Grml... And the stupid thing is that locally all works fine - only centrally the issue exists - so I assume it is a race condition... |
|
@vobu: by moving the code into one line into the page object all works fine - now I'm checking when it starts to fail. async iShouldSeeListItems() {
// ui5 api + high-speed aggregation retrieval: https://ui5-community.github.io/wdi5/#/usage?id=getshorthand-conveniences
return (await browser.asControl(this._listPeople).getItems()).length > 0;
} |
|
@vobu: the not interactable issue is always present - this is not the root cause of the issue. This lead me into the wrong direction - the getItems for the list wasn't available as the lookup for the people list doesn't work. Maybe it has to do when looking up the list two times in one test. Checking now... |
|
@vobu: this here somehow doesn't work anymore But if I put it into a page object, it works again - what is the difference here? maybe that expect doesn't get a Promise? The following issue occured with my last code change: it("Other view: PeopleList: items aggregation + amount of items", async function () {
await MainPage.iPressTheNavButton();
expect(onTheOtherPage.iShouldSeeTheList()).toBeTruthy();
expect(onTheOtherPage.iShouldSeeListItems()).toBeTruthy();
// ui5 api + high-speed aggregation retrieval: https://ui5-community.github.io/wdi5/#/usage?id=getshorthand-conveniences
const oList = await browser.asControl(this._listPeople);
const aListItems = await oList.getItems(true);
expect(aListItems.length).toBeGreaterThanOrEqual(1);
});and in the page object: async iShouldSeeListItems() {
// ui5 api + high-speed aggregation retrieval: https://ui5-community.github.io/wdi5/#/usage?id=getshorthand-conveniences
const oList = await browser.asControl(this._listPeople);
return (await oList.getItems(true)).length > 0;
}the following issue occurs with the code above when the list lookup is made in the test. |
|
for now, I'll keep the variant with the page object - this here is the diff which fixes the test issue by moving all lookup calls into an async page object function and using this for the |
|
@vobu: as discussed the testing issue was related to the screensize and the height 100% of the VBox which rendered the Button which should be clicked outside of the visible area which finally led to the issue resolving the list with browser.asControl. |
petermuessig
changed the title
This change enables the direct consumption of UI5 Web Components in OpenUI5/SAPUI5 applications without any change in the OpenUI5/SAPUI5 runtime. UI5 Web Components can be directly accessed declaratively in the XMLView and imperatively in the JavaScript/TypeScript code.
Declarative Usage:
Imperative Usage:
To use the UI5 Web Components seamlessly in OpenUI5/SAPUI5 as UI5 Controls, you need to use the tooling extension
ui5-tooling-modulesand then import your preferred UI5 Web Components npm package, e.g.@ui5/webcomponentsin yourpackage.json.📢 The change also introduces a new showcase of seamless UI5 Web Components in
showcases/ui5-tsapp-webcwhich can be started withpnpm dev-webc:ts.