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 >
   <DM3 {...props} />
</div>

BUGS:

• [ ] (PRIO1) After login, the hidden menu is shown at the bottom of the component (even if the component was fitted into the screen size, now there is a scrollbar on the right) (see picture 01). --> REQ: never the unused menu must be shown, and the component must never require a scrollbar if it is fitted 100% into the window. We must ensure that no special CSS setting is needed to have it work. !!! This is a new bug that did not exist in the former version!!

• [ ] (PRIO1) When pressing the network or wallet select button in the header, we have a color mismatch (see picture 02) --> REQ: no change of any color when a button is pressed !!! This is a new bug that did not exist in the former version!!

• [ ] (PRIO2) The Preferences Dialog is not centered on the screen but goes below the bottom ... (see picture 03) --> REQ: it must always fit into the window and is centered. Attention: If the component is only a small widget (e.g. if embedded), the Preferences Dialog must be big enough ...

• [ ] (PRIO2) Not productive "Property Screens" must be deactivated in the productive version (at the moment only "dm3 Profile" is productive --> REQ: only dm3 Profile is selectable

• [ ] (PRIO2) UX in the Preferences Dialog is not correct. There is an "X" button to close the dialog if no Property Screen is open. If a screen is open (like dm3 profile), the back button (arrow) is there but only closes the screen --> REQ: there must be always the arrow button (no "X" button) and the arrow button closes the dialog (see https://www.figma.com/file/MrIgq5agEw1AX2JaxQ1JBs/dm3-embedded?type=design&node-id=85-2774&mode=design)

• [ ] (PRIO3) Description texts on "Property Screens" must fit the Header --> REQ: if the text is not yet correctly defined in Figma, set dummy text but not the text from the "spam protection"

• [ ] (PRIO1) The component doesn't fit into the given space, it is much bigger than the given space --> REQ: I need to use this component like any other REACT component. If I fit it into a container (an embedding component), it must fit! It is a must, otherwise others cannot use the component in their app. Also, non-default external CSS configs or similar are not the solution. It must work "out-of-the-box"! Example: I made a page design with 4 areas (see picture 04). When I add the DM3 component to one of these (let's say the red one), it fails (see picture 05) or another (see picture 06). The used code you can find at (code 01).

• [ ] (PRIO3) in the ColorTheme definition, a variable has a spelling error: "chatBakgroundColor"

PICTURES

01

02

03

04

05

06

Code

01

interface ColoredComponentProps {
  color: string;
  children: React.ReactNode;
}

const ColoredComponent: React.FC<ColoredComponentProps> = ({ color, children }) => {
  return (
    <div style={{ backgroundColor: color, color: 'white', height: '100%', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
      {children}
    </div>
  );
};

...

    <div style={{ display: 'flex', flexDirection: 'column', height: '100vh', overflow: 'hidden' }}>
      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
        <div style={{ flex: 1, overflow: 'auto' }}>
           <ColoredComponent color="yellow">Gelbe Demo-Komponente</ColoredComponent>
        </div>

        <div style={{ flex: 1, overflow: 'auto' }}>
           <DM3 {...dm3Props} />
        </div>
      </div>

      <div style={{ display: 'flex', flex: 1, overflow: 'hidden' }}>
        <div style={{ flex: 1, overflow: 'auto' }}>
           <ColoredComponent color="blue">Blaue Demo-Komponente</ColoredComponent>
        </div>

        <div style={{ flex: 1, overflow: 'auto' }}>
           <ColoredComponent color="green">Grüne Demo-Komponente</ColoredComponent>
        </div>
      </div>
    </div>