Add unit test.

packages/editor/src/components/action-widget/button/undo-and-redo/index.tsx

@@ -17,29 +17,39 @@
  */
 import React, { useEffect, useState } from 'react';
 import ActionConfig from '../../../../classes/action/action-config';
+import Editor from '../../../../classes/model/editor';
 import { ToolbarMenuItem } from '../../../toolbar';
 
-const UndoAndRedo = (props: {
+type UndoAndRedo = {
   configuration: ActionConfig;
   disabledCondition: (event) => boolean;
-}) => {
+  model: Editor;
+};
+
+const UndoAndRedo = ({ configuration, disabledCondition, model }: UndoAndRedo) => {
   const [disabled, setDisabled] = useState(true);
+
   useEffect(() => {
+    if (model?.isMapLoadded()) {
       const handleUpdate: any = (event) => {
-      const isDisabled = props.disabledCondition(event);
+        const isDisabled = disabledCondition(event);
         setDisabled(!isDisabled);
 
         return () => {
           designer.removeEvent('modelUpdate', handleUpdate);
         };
       };
+
+      if (model.getDesigner()) {
         designer.addEvent('modelUpdate', handleUpdate);
-  }, []);
+      }
+    }
+  }, [model?.isMapLoadded()]);
 
   return (
     <ToolbarMenuItem
       configuration={{
-        ...props.configuration,
+        ...configuration,
         disabled: () => disabled,
       }}
     ></ToolbarMenuItem>

packages/editor/src/components/app-bar/index.tsx

@@ -116,6 +116,7 @@ const AppBar = ({ model, mapInfo, capability, onAction, accountConfig }: AppBarP
             onClick: () => designer.undo(),
           }}
           disabledCondition={(event) => event.undoSteps > 0}
+          model={model}
         />
       ),
       visible: !capability.isHidden('undo-changes'),
@@ -133,6 +134,7 @@ const AppBar = ({ model, mapInfo, capability, onAction, accountConfig }: AppBarP
             onClick: () => designer.redo(),
           }}
           disabledCondition={(event) => event.redoSteps > 0}
+          model={model}
         />
       ),
       visible: !capability.isHidden('redo-changes'),

packages/editor/test/playground/map-render/js/editor.tsx

@@ -31,7 +31,6 @@ const initialization = (designer: Designer) => {
 };
 
 const persistence = new LocalStorageManager('samples/{id}.wxml', false, false);
-const mapId = 'welcome';
 const options: EditorOptions = {
   mode: 'edition-owner',
   locale: 'en',

packages/editor/test/unit/toolbar/toolbar.test.tsx

@@ -273,20 +273,21 @@ describe('Toolbar', () => {
   });
 });
 
-// describe('AppBar', () => {
-//   it('When render it displays a menu', () => {
-//     const capacity = new Capability('edition-owner', false);
-//     const model = new Editor(null);
+describe('AppBar', () => {
+  it('When render it displays a menu', () => {
+    const capacity = new Capability('edition-owner', false);
+    const model = new Editor(null);
 
-//     render(
-//       <IntlProvider>
-//         <AppBar
-//           mapInfo={new MapInfoImpl('welcome', 'Develop Map Title', false)}
-//           capability={capacity}
-//           model={model}
-//         />,
-//       </IntlProvider>
-//     );
-//     screen.getByRole('menubar');
-//   });
-// });
+    render(
+      <IntlProvider locale="en">
+        <AppBar
+          mapInfo={new MapInfoImpl('welcome', 'Develop Map Title', false)}
+          capability={capacity}
+          model={model}
+        />
+        ,
+      </IntlProvider>,
+    );
+    screen.getByRole('menubar');
+  });
+});