🧪 improving rules test e2e stability (#3512)

packages/desktop-client/src/components/ManageRules.tsx

@@ -21,6 +21,7 @@ import { type NewRuleEntity } from 'loot-core/src/types/models';
 import { useAccounts } from '../hooks/useAccounts';
 import { useCategories } from '../hooks/useCategories';
 import { usePayees } from '../hooks/usePayees';
+import { useSchedules } from '../hooks/useSchedules';
 import { useSelected, SelectedProvider } from '../hooks/useSelected';
 import { theme } from '../style';
 
@@ -32,7 +33,6 @@ import { Text } from './common/Text';
 import { View } from './common/View';
 import { RulesHeader } from './rules/RulesHeader';
 import { RulesList } from './rules/RulesList';
-import { SchedulesQuery } from './rules/SchedulesQuery';
 import { SimpleTable } from './rules/SimpleTable';
 
 function mapValue(
@@ -97,23 +97,23 @@ function ruleToString(rule, data) {
   );
 }
 
-type ManageRulesContentProps = {
+type ManageRulesProps = {
   isModal: boolean;
   payeeId: string | null;
   setLoading?: Dispatch<SetStateAction<boolean>>;
 };
 
-function ManageRulesContent({
+export function ManageRules({
   isModal,
   payeeId,
-  setLoading,
-}: ManageRulesContentProps) {
+  setLoading = () => {},
+}: ManageRulesProps) {
   const [allRules, setAllRules] = useState([]);
   const [page, setPage] = useState(0);
   const [filter, setFilter] = useState('');
   const dispatch = useDispatch();
 
-  const { data: schedules } = SchedulesQuery.useQuery();
+  const { data: schedules = [] } = useSchedules();
   const { list: categories } = useCategories();
   const payees = usePayees();
   const accounts = useAccounts();
@@ -353,25 +353,3 @@ function EmptyMessage({ text, style }) {
     </View>
   );
 }
-
-type ManageRulesProps = {
-  isModal: boolean;
-  payeeId: string | null;
-  setLoading?: Dispatch<SetStateAction<boolean>>;
-};
-
-export function ManageRules({
-  isModal,
-  payeeId,
-  setLoading = () => {},
-}: ManageRulesProps) {
-  return (
-    <SchedulesQuery.Provider>
-      <ManageRulesContent
-        isModal={isModal}
-        payeeId={payeeId}
-        setLoading={setLoading}
-      />
-    </SchedulesQuery.Provider>
-  );
-}

packages/desktop-client/src/components/reports/reports/CashFlow.tsx

@@ -58,7 +58,7 @@ export function CashFlow() {
 }
 
 type CashFlowInnerProps = {
-  widget: CashFlowWidget;
+  widget?: CashFlowWidget;
 };
 
 function CashFlowInner({ widget }: CashFlowInnerProps) {
@@ -142,8 +142,12 @@ function CashFlowInner({ widget }: CashFlowInnerProps) {
   const { isNarrowWidth } = useResponsive();
 
   async function onSaveWidget() {
+    if (!widget) {
+      throw new Error('No widget that could be saved.');
+    }
+
     await send('dashboard-update-widget', {
-      id: widget?.id,
+      id: widget.id,
       meta: {
         ...(widget.meta ?? {}),
         conditions,

packages/desktop-client/src/components/reports/reports/Spending.tsx

@@ -55,7 +55,7 @@ export function Spending() {
 }
 
 type SpendingInternalProps = {
-  widget: SpendingWidget;
+  widget?: SpendingWidget;
 };
 
 function SpendingInternal({ widget }: SpendingInternalProps) {
@@ -133,8 +133,12 @@ function SpendingInternal({ widget }: SpendingInternalProps) {
   const { isNarrowWidth } = useResponsive();
 
   async function onSaveWidget() {
+    if (!widget) {
+      throw new Error('No widget that could be saved.');
+    }
+
     await send('dashboard-update-widget', {
-      id: widget?.id,
+      id: widget.id,
       meta: {
         ...(widget.meta ?? {}),
         conditions,

packages/desktop-client/src/components/rules/ScheduleValue.tsx

@@ -5,8 +5,8 @@ import { describeSchedule } from 'loot-core/src/shared/schedules';
 import { type ScheduleEntity } from 'loot-core/src/types/models';
 
 import { usePayees } from '../../hooks/usePayees';
+import { useSchedules } from '../../hooks/useSchedules';
 
-import { SchedulesQuery } from './SchedulesQuery';
 import { Value } from './Value';
 
 type ScheduleValueProps = {
@@ -16,7 +16,7 @@ type ScheduleValueProps = {
 export function ScheduleValue({ value }: ScheduleValueProps) {
   const payees = usePayees();
   const byId = getPayeesById(payees);
-  const { data: schedules } = SchedulesQuery.useQuery();
+  const { data: schedules } = useSchedules();
 
   return (
     <Value

packages/desktop-client/src/hooks/useSchedules.ts

@@ -0,0 +1,7 @@
+import { useQuery } from 'loot-core/client/query-hooks';
+import { q } from 'loot-core/shared/query';
+import { type ScheduleEntity } from 'loot-core/types/models';
+
+export function useSchedules() {
+  return useQuery<ScheduleEntity[]>(() => q('schedules').select('*'), []);
+}

packages/loot-core/src/client/query-hooks.ts

@@ -0,0 +1,54 @@
+import { useState, useMemo, useEffect, type DependencyList } from 'react';
+
+import { type Query } from '../shared/query';
+
+import { liveQuery, type LiveQuery } from './query-helpers';
+
+/** @deprecated: please use `useQuery`; usage is the same - only the returned value is different (object instead of only the data) */
+export function useLiveQuery<Response = unknown>(
+  makeQuery: () => Query,
+  deps: DependencyList,
+): Response | null {
+  const { data } = useQuery<Response>(makeQuery, deps);
+  return data;
+}
+
+export function useQuery<Response = unknown>(
+  makeQuery: () => Query,
+  deps: DependencyList,
+): {
+  data: null | Response;
+  overrideData: (newData: Response) => void;
+  isLoading: boolean;
+} {
+  const [data, setData] = useState<null | Response>(null);
+  const [isLoading, setIsLoading] = useState(true);
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  const query = useMemo(makeQuery, deps);
+
+  useEffect(() => {
+    setIsLoading(true);
+
+    let live: null | LiveQuery<Response> = liveQuery<Response>(
+      query,
+      async data => {
+        if (live) {
+          setIsLoading(false);
+          setData(data);
+        }
+      },
+    );
+
+    return () => {
+      setIsLoading(false);
+      live?.unsubscribe();
+      live = null;
+    };
+  }, [query]);
+
+  return {
+    data,
+    overrideData: setData,
+    isLoading,
+  };
+}

upcoming-release-notes/3512.md

@@ -0,0 +1,6 @@
+---
+category: Maintenance
+authors: [MatissJanis]
+---
+
+e2e: improve rules test stability.