BUG: UI-Testing (NPM Package)

[steffenkux]

TESTED VERSION: NPM-Package @dm3-org/dm3-messenger-widget

PRIO1 ... critical bug, blocks usage PRIO2 ... bug, but doesn't block usage PRIO3 ... not nice, not critical for release

Integration: New REACT app, added package, added .env, added component in App.ts.

<div className="dm3-container">
   <DM3 {...props} />
</div>

with CSS

.dm3-container {
  width: 100%; /*  mandatory property  */
  height: 100%; /*  mandatory property  */
  position: relative; /*  mandatory property  */
  border-radius: 25px; /*  optional property  */
  overflow: hidden; /*  needed only when border-radius property is set */
}

BUGS:

• [x] (PRIO1) If the component is not too big (see picture 01), it is not usable. The formatted text is unreadable and the button is not visible at all, the rainbow buttons are outside the component. As this is a major use-case of the embedded component, always a correct start screen (professional looking) must be shown --> REQ: if the component is too small to show the picture, the text, and the login button, the picture must be hidden and the rest formatted to be visible and usable.

• [x] (PRIO1) After login, if the component starts, it shows the information to fetch the conversations. The whole screen is darkened and the info is shown centralized on the full window (see picture 02) --> REQ: This must only cover the component. The embedding app must not be covered.

• [ ] (PRIO2) The hamburger menu is deactivated when in the mode without contacts (did we define this as a temporary work-around?) --> REQ: as the user needs to open the property dialog to configure the profile (and in future notifications and other properties as well), the menu must be available.

• [ ] (PRIO3) The configure profile overlay is not shown in the mode without contacts --> REQ: we need another internal notification approach (will be defined in a separate issue)

• [x] (PRIO2) If the component size is bad, the hamburger menu is hidden behind the rainbow buttons (see picture 03) --> REQ: Hamburger menu must be visible/available always

• [x] (PRIO2) Calling "Configure Profile" opens the old configure profile dialog instead of the new "Preferences Dialog" with the "Profile" page --> REQ: the old dialog must be removed and the new page called.

• [x] (PRIO2) The "Preferences Dialog" does not fit into the current screen (see picture 04) --> REQ: must fit.

• [x] (PRIO3) The "Add Conversation" dialog is not centered (see picture 05) --> REQ: must be centered.

PICTURES:

01

02

03

04

05