Improve the behavior of the auto mode button

src/components/schedule/auto-mode/auto-mode-button/AutoModeButton.vue

@@ -1,11 +1,9 @@
 <template>
-  <VCardActions>
-    <VBtn v-if="loading" loading variant="tonal" color="tertiary"> </VBtn>
-    <ButtonError v-else-if="error" :error="error"></ButtonError>
-    <ButtonAutoMode v-else-if="autoMode"></ButtonAutoMode>
-    <ButtonOff v-else-if="autoMode === false"></ButtonOff>
-    <VBtn v-else variant="tonal" color="error"> Unknown </VBtn>
-  </VCardActions>
+  <VBtn v-if="loading" loading variant="tonal" color="tertiary"> </VBtn>
+  <ButtonError v-else-if="error" :error="error"></ButtonError>
+  <ButtonAutoMode v-else-if="autoMode"></ButtonAutoMode>
+  <ButtonOff v-else-if="autoMode === false"></ButtonOff>
+  <VBtn v-else variant="tonal" color="error"> Unknown </VBtn>
 </template>
 
 <script setup lang="ts">

src/components/schedule/auto-mode/auto-mode-button/__tests__/AutoModeButton.test.ts

@@ -0,0 +1,58 @@
+import { describe, it, expect, vi } from "vitest";
+import { ref } from "vue";
+import { mount } from "@vue/test-utils";
+import fc from "fast-check";
+
+import { fcError, fcUndefinedOr } from "@/graphql/tests/arbitraries";
+import { onReady } from "@/utils/on-ready";
+
+import AutoModeButton from "../AutoModeButton.vue";
+import { useAutoMode } from "../use-auto-mode";
+
+vi.mock("../use-auto-mode", () => ({ useAutoMode: vi.fn() }));
+
+const fcReturns = () =>
+  fc
+    .record({
+      autoMode: fcUndefinedOr(fc.boolean()).map((v) => ref(v)),
+      pulling: fc.constant(ref(false)),
+      loading: fc.boolean().map((v) => ref(v)),
+      error: fcUndefinedOr(fcError).map((v) => ref(v)),
+    })
+    .map((ret) => onReady(ret, Promise.resolve()));
+
+describe("AutoModeButton", () => {
+  it("Property test", () => {
+    fc.assert(
+      fc.property(fcReturns(), (ret) => {
+        vi.mocked(useAutoMode).mockReturnValue(ret);
+        const wrapper = mount(AutoModeButton, {
+          global: {
+            stubs: {
+              ButtonOff: true,
+              ButtonAutoMode: true,
+              ButtonError: true,
+            },
+          },
+        });
+
+        if (ret.loading.value) {
+          const button = wrapper.findComponent({ name: "VBtn" });
+          expect(button.exists()).toBe(true);
+          expect(button.props()["loading"]).toBe(true);
+        } else if (ret.error.value) {
+          const button = wrapper.findComponent({ name: "ButtonError" });
+          expect(button.exists()).toBe(true);
+          expect(button.props("error")).toEqual(ret.error.value);
+        } else if (ret.autoMode.value === true) {
+          expect(wrapper.findComponent({ name: "ButtonAutoMode" }).exists()).toBe(true);
+        } else if (ret.autoMode.value === false) {
+          expect(wrapper.findComponent({ name: "ButtonOff" }).exists()).toBe(true);
+        } else {
+          expect(wrapper.html()).toContain("Unknown");
+        }
+        wrapper.unmount();
+      }),
+    );
+  });
+});

src/components/schedule/auto-mode/auto-mode-button/modes/auto-mode/Button.vue

@@ -32,9 +32,8 @@ import DialogQueue from "./queue/Dialog.vue";
 const { mobile } = useDisplay();
 const menuComponent = computed(() => (mobile.value ? VBottomSheet : VMenu));
 
-const { data: mode, then: then1 } = useSubscribeScheduleAutoModeMode();
-const { pulling, then: then2 } = useAutoMode();
-await Promise.all([then1(), then2()]);
+const { data: mode } = useSubscribeScheduleAutoModeMode();
+const { pulling } = useAutoMode();
 </script>
 
 <style scoped>