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;
-}) => {
-  const [disabled, setDisabled] = useState(true);
-  useEffect(() => {
-    const handleUpdate: any = (event) => {
-      const isDisabled = props.disabledCondition(event);
-      setDisabled(!isDisabled);
+  model: Editor;
+};
 
-      return () => {
-        designer.removeEvent('modelUpdate', handleUpdate);
+const UndoAndRedo = ({ configuration, disabledCondition, model }: UndoAndRedo) => {
+  const [disabled, setDisabled] = useState(true);
+
+  useEffect(() => {
+    if (model?.isMapLoadded()) {
+      const handleUpdate: any = (event) => {
+        const isDisabled = disabledCondition(event);
+        setDisabled(!isDisabled);
+
+        return () => {
+          designer.removeEvent('modelUpdate', handleUpdate);
+        };
       };
-    };
-    designer.addEvent('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');
+  });
+});