test: add create space test

frontend/appflowy_flutter/integration_test/mobile/cloud/cloud_runner.dart

@@ -1,9 +1,11 @@
 import 'document/publish_test.dart' as publish_test;
 import 'document/share_link_test.dart' as share_link_test;
+import 'space/space_test.dart' as space_test;
 import 'workspace/workspace_operations_test.dart' as workspace_operations_test;
 
 Future<void> main() async {
   workspace_operations_test.main();
   share_link_test.main();
   publish_test.main();
+  space_test.main();
 }

frontend/appflowy_flutter/integration_test/mobile/cloud/space/space_test.dart

@@ -1,4 +1,14 @@
 import 'package:appflowy/env/cloud_env.dart';
+import 'package:appflowy/generated/locale_keys.g.dart';
+import 'package:appflowy/mobile/presentation/home/space/manage_space_widget.dart';
+import 'package:appflowy/mobile/presentation/home/space/mobile_space_menu.dart';
+import 'package:appflowy/mobile/presentation/home/space/widgets.dart';
+import 'package:appflowy/shared/icon_emoji_picker/icon_picker.dart';
+import 'package:appflowy/workspace/application/sidebar/space/space_bloc.dart';
+import 'package:appflowy/workspace/application/view/view_ext.dart';
+import 'package:appflowy/workspace/presentation/home/menu/sidebar/space/space_icon_popup.dart';
+import 'package:easy_localization/easy_localization.dart';
+import 'package:flutter/material.dart';
 import 'package:flutter_test/flutter_test.dart';
 import 'package:integration_test/integration_test.dart';
 
@@ -7,13 +17,87 @@ import '../../../shared/util.dart';
 void main() {
   IntegrationTestWidgetsFlutterBinding.ensureInitialized();
 
-  group('workspace operations:', () {
-    testWidgets('create a new workspace', (tester) async {
+  group('space operations:', () {
+    testWidgets('create a new space', (tester) async {
       await tester.initializeAppFlowy(
         cloudType: AuthenticatorType.appflowyCloudSelfHost,
       );
       await tester.tapGoogleLoginInButton();
       await tester.expectToSeeHomePageWithGetStartedPage();
+
+      // create a new space
+      // click the space menu
+      final spaceMenu = find.byType(MobileSpaceMenu);
+      await tester.tapButton(spaceMenu);
+
+      // click the create a new space button
+      final createNewSpaceButton = find.text(
+        LocaleKeys.space_createNewSpace.tr(),
+      );
+      await tester.pumpUntilFound(createNewSpaceButton);
+      await tester.tapButton(createNewSpaceButton);
+
+      // input the new space name
+      final inputField = find.descendant(
+        of: find.byType(ManageSpaceWidget),
+        matching: find.byType(TextField),
+      );
+      const newSpaceName = 'AppFlowy';
+      await tester.enterText(inputField, newSpaceName);
+      await tester.pumpAndSettle();
+
+      // change the space permission to private
+      final permissionOption = find.byType(ManageSpacePermissionOption);
+      await tester.tapButton(permissionOption);
+      await tester.pumpAndSettle();
+
+      final privateOption = find.text(LocaleKeys.space_privatePermission.tr());
+      await tester.tapButton(privateOption);
+      await tester.pumpAndSettle();
+
+      // change the space icon color
+      final color = builtInSpaceColors[1];
+      final iconOption = find.descendant(
+        of: find.byType(ManageSpaceIconOption),
+        matching: find.byWidgetPredicate(
+          (w) => w is SpaceColorItem && w.color == color,
+        ),
+      );
+      await tester.tapButton(iconOption);
+      await tester.pumpAndSettle();
+
+      // change the space icon
+      final icon = kIconGroups![0].icons[1];
+      final iconItem = find.descendant(
+        of: find.byType(ManageSpaceIconOption),
+        matching: find.byWidgetPredicate(
+          (w) => w is SpaceIconItem && w.icon == icon,
+        ),
+      );
+      await tester.tapButton(iconItem);
+      await tester.pumpAndSettle();
+
+      // click the done button
+      final doneButton = find.text(LocaleKeys.button_done.tr());
+      await tester.tapButton(doneButton);
+      await tester.pumpAndSettle();
+
+      // wait 100ms for the space to be created
+      await tester.wait(100);
+
+      // verify the space is created
+      await tester.tapButton(spaceMenu);
+      final spaceItems = find.byType(MobileSpaceMenuItem);
+      // expect to see 3 space items, 2 are built-in, 1 is the new space
+      expect(spaceItems, findsNWidgets(3));
+      // convert the space item to a widget
+      final spaceWidget =
+          tester.widgetList<MobileSpaceMenuItem>(spaceItems).last;
+      final space = spaceWidget.space;
+      expect(space.name, newSpaceName);
+      expect(space.spacePermission, SpacePermission.private);
+      expect(space.spaceIcon, icon.iconPath);
+      expect(space.spaceIconColor, color);
     });
   });
 }

frontend/appflowy_flutter/lib/mobile/presentation/home/space/mobile_space_menu.dart

@@ -43,7 +43,7 @@ class MobileSpaceMenu extends StatelessWidget {
               for (final space in state.spaces)
                 SizedBox(
                   height: SpaceUIConstants.itemHeight,
-                  child: _SidebarSpaceMenuItem(
+                  child: MobileSpaceMenuItem(
                     space: space,
                     isSelected: state.currentSpace?.id == space.id,
                   ),
@@ -66,8 +66,9 @@ class MobileSpaceMenu extends StatelessWidget {
   }
 }
 
-class _SidebarSpaceMenuItem extends StatelessWidget {
-  const _SidebarSpaceMenuItem({
+class MobileSpaceMenuItem extends StatelessWidget {
+  const MobileSpaceMenuItem({
+    super.key,
     required this.space,
     required this.isSelected,
   });

frontend/appflowy_flutter/lib/mobile/presentation/home/space/widgets.dart

@@ -158,7 +158,7 @@ class _ManageSpaceIconOptionState extends State<ManageSpaceIconOption> {
                 scrollDirection: Axis.horizontal,
                 child: Row(
                   children: builtInSpaceColors.map((color) {
-                    return _SpaceColorItem(
+                    return SpaceColorItem(
                       color: color,
                       selectedColor: selectedColor,
                       onSelected: (color) => widget.selectedColor.value = color,
@@ -247,7 +247,7 @@ class _ManageSpaceIconOptionState extends State<ManageSpaceIconOption> {
                 spacing: 10.0,
                 runSpacing: 8.0,
                 children: iconGroup.icons.map((icon) {
-                  return _SpaceIconItem(
+                  return SpaceIconItem(
                     icon: icon,
                     isSelected: selectedIcon?.name == icon.name,
                     selectedColor: selectedColor,
@@ -267,8 +267,9 @@ class _ManageSpaceIconOptionState extends State<ManageSpaceIconOption> {
   }
 }
 
-class _SpaceIconItem extends StatelessWidget {
-  const _SpaceIconItem({
+class SpaceIconItem extends StatelessWidget {
+  const SpaceIconItem({
+    super.key,
     required this.icon,
     required this.onSelectedIcon,
     required this.isSelected,
@@ -317,8 +318,9 @@ class _SpaceIconItem extends StatelessWidget {
   }
 }
 
-class _SpaceColorItem extends StatelessWidget {
-  const _SpaceColorItem({
+class SpaceColorItem extends StatelessWidget {
+  const SpaceColorItem({
+    super.key,
     required this.color,
     required this.selectedColor,
     required this.onSelected,