diff --git a/packages/rmf-dashboard-framework/src/components/robots/utils.ts b/packages/rmf-dashboard-framework/src/components/robots/utils.ts
index 1a9c7f752..df9d6e946 100644
--- a/packages/rmf-dashboard-framework/src/components/robots/utils.ts
+++ b/packages/rmf-dashboard-framework/src/components/robots/utils.ts
@@ -1,5 +1,4 @@
 import { ApiServerModelsRmfApiRobotStateStatus as Status2 } from 'api-client';
-import { RobotMode as RmfRobotMode } from 'rmf-models/ros/rmf_fleet_msgs/msg';
 
 /**
  * Returns a uniquely identifiable string representing a robot.
@@ -28,26 +27,3 @@ export function robotStatusToUpperCase(status: Status2): string {
       return `UNKNOWN (${status})`;
   }
 }
-
-export function robotModeToString(robotMode: RmfRobotMode): string {
-  switch (robotMode.mode) {
-    case RmfRobotMode.MODE_CHARGING:
-      return 'Charging';
-    case RmfRobotMode.MODE_DOCKING:
-      return 'Docking';
-    case RmfRobotMode.MODE_EMERGENCY:
-      return 'Emergency';
-    case RmfRobotMode.MODE_GOING_HOME:
-      return 'Going Home';
-    case RmfRobotMode.MODE_IDLE:
-      return 'Idle';
-    case RmfRobotMode.MODE_MOVING:
-      return 'Moving';
-    case RmfRobotMode.MODE_PAUSED:
-      return 'Paused';
-    case RmfRobotMode.MODE_WAITING:
-      return 'Waiting';
-    default:
-      return `Unknown (${robotMode.mode})`;
-  }
-}
diff --git a/packages/rmf-dashboard-framework/src/components/tasks/types/compose-clean.stories.tsx b/packages/rmf-dashboard-framework/src/components/tasks/types/compose-clean.stories.tsx
new file mode 100644
index 000000000..d19e963f1
--- /dev/null
+++ b/packages/rmf-dashboard-framework/src/components/tasks/types/compose-clean.stories.tsx
@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { ComposeCleanTaskForm, makeDefaultComposeCleanTaskDescription } from './compose-clean';
+
+export default {
+  title: 'Tasks/ComposeCleanTaskForm',
+  component: ComposeCleanTaskForm,
+} satisfies Meta;
+
+type Story = StoryObj<typeof ComposeCleanTaskForm>;
+
+export const Default: Story = {
+  args: {
+    taskDesc: makeDefaultComposeCleanTaskDescription(),
+    cleaningZones: ['clean_zone_1', 'clean_zone_2'],
+    onChange: () => {},
+    onValidate: () => {},
+  },
+};
diff --git a/packages/rmf-dashboard-framework/src/components/tasks/types/compose-clean.test.tsx b/packages/rmf-dashboard-framework/src/components/tasks/types/compose-clean.test.tsx
new file mode 100644
index 000000000..da7150882
--- /dev/null
+++ b/packages/rmf-dashboard-framework/src/components/tasks/types/compose-clean.test.tsx
@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import { describe, expect, it, vi } from 'vitest';
+
+import { ComposeCleanTaskForm, makeDefaultComposeCleanTaskDescription } from './compose-clean';
+
+describe('Compose clean task form', () => {
+  it('Renders compose clean task form', async () => {
+    const onChange = vi.fn();
+    const onValidate = vi.fn();
+
+    render(
+      <ComposeCleanTaskForm
+        taskDesc={makeDefaultComposeCleanTaskDescription()}
+        cleaningZones={['test_clean_1', 'test_clean_2']}
+        onChange={onChange}
+        onValidate={onValidate}
+      />,
+    );
+
+    expect(screen.getByText('Cleaning Zone')).toBeDefined();
+  });
+});
diff --git a/packages/rmf-dashboard-framework/src/components/tasks/types/compose-clean.tsx b/packages/rmf-dashboard-framework/src/components/tasks/types/compose-clean.tsx
index 6865f944b..53840c5fc 100644
--- a/packages/rmf-dashboard-framework/src/components/tasks/types/compose-clean.tsx
+++ b/packages/rmf-dashboard-framework/src/components/tasks/types/compose-clean.tsx
@@ -149,7 +149,14 @@ export function ComposeCleanTaskForm({
         taskDesc.phases[0].activity.description.activities[1].description.description.zone = zone;
         onInputChange(taskDesc);
       }}
-      renderInput={(params) => <TextField {...params} label="Cleaning Zone" required={true} />}
+      renderInput={(params) => (
+        <TextField
+          data-testid="cleaning-zone-input"
+          {...params}
+          label="Cleaning Zone"
+          required={true}
+        />
+      )}
     />
   );
 }