UI5 Web Components Enablement in OpenUI5: Testing of UI5 Control Wrappers

[ilhan007]

Background

As part of the "Retrofit" topic, we aim to reuse the UI5 Web Components as UI5 Controls. In order to do this, we need to ensure the quality of the also UI5 Control wrappers from the sap,.ui.webc.main and sap.ui.webc.fiori libraries - Button, Link, Label, Badge etc.

General recommendation on using the new libraries:

The bread and butter UI elements are available as UI5 controls (as part of sap.m) and as UI5 Web Components (as part of sap.ui.webc.main). Which UI elements should I use from now on?: If you are running in an environment using the UI5 controls, stick to them. If you start from scratch or build your application in the context of other applications using UI5 Web Components, use the UI5 Web Components control wrappers. All other UI libraries can be freely combined.

Your Task

Test each control wrapper within your ownership in standalone and composite use-cases. Note: as of now the target is to not mix "sap.m" and "sap.ui.webc.main", so you need to focus on testing the wrappers in combination with other, for example the sap.ui.layout library (as aggregations in Form, HorizontalLayout, VerticalLayout)

Hints on testing:

• compare "sap.ui.webc.main" to "sap.m" counterparts for functional and visual issues
• test the control wrapper API
• test generic props like "enabled", "visible" ("busy is still under work, so you can skip this one")

After the testing, list the=found issues for further analysis and prioritisation.

Part of: https://github.com/SAP/ui5-webcomponents/issues/2925

[petyabegovska]

Resulting visual differences between ui5 controls and webc control wrappers (in scope of team B ownership):

1. sap.m.Title font-size CSS attribute is resulting to 16px in comparison sap.ui.webc.main.Title text font size resulting to 22px in cozy form factor.
2. sap.m.Select input field width depends on the length of the text of the selected option compared to sap.ui.webc.main.Select, which has width and min-width over the host elements. As a result of that the text in the sap.ui.webc.main.Select input field and options will get truncatedif it is too long sooner than in the sap.m.Select control.
3. The list items in the drop down of a sap.ui.webc.main.Select control have bigger hight then the same with sap.m.Select control.
4. There are no default values for text-on and text-off for the sap.ui.webc.main.Switch.
5. sap.ui.webc.main.Button instances used as content to a sap.m.Bar control shouldn't have a border when displayed.
6. sap.ui.layout.ResponsiveFlowLayout content aggregation should center sap.ui.webc.main.Button control instances similar to what is done with sap.m.Button instances. 7 sap.ui.layout.HorizontalLayout content aggregation should center sap.ui.webc.main.Button control instances similar to what is done with sap.m.Button instances.

[stbodurov]

Hello @SAP/ui5-webcomponents-core,

We have found the following Issues in RL scope:

MultiInput:

• Suggestions don't work. InputSuggestions is not imported in thirdparty/MultiInput.js (even though it is in thirdparty/Input.js, they work only for Input).

Page:

• ? The webC Page has side paddings by default, which don't exist in sap.m.Page (users can manually add them). E.g. putting a webc.fiori.Wizard inside a webc Page, results in paddings around the wizard. This is not the case for sap.m.Page. Perhaps they are not meant to be nested?
• The webc page uses the default scrollbar, in sap.m it is styled

Table:

• When busy=true, there are two busy indicators shown at the same time - the busy property exists both on core.Control and webc.Table

Wizard:

• The visible property in the webC WizardStep hides the step, in UI5 it does nothing.
• The busy and blocked properties don't visually blur the whole height and width of a wizard step.

Layout Controls (sap.ui.layout):

• enabledPropagator doesn't seem to work when component wrappers are passed as content to a verticalLayout.

Applicable to Web Components as well:

• Left and right arrow navigarion for controls like Tokenizer and RatingIndicator acts inverted in RTL mode. E.g. pressing ArrowLeft moves focus to the right token, instead of the left one. In UI5 this seems to be handled by special events: onsapnext, onsapprevious.

Regards, Stanislav

[ilhan007]

Testing of UI5 Control wrappers has been done by @SAP/ui5-webcomponents-topic-b @SAP/ui5-webcomponents-topic-rl @SAP/ui5-webcomponents-topic-p @SAP/ui5-webcomponents-topic-rd and verified. No major bugs found.