diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Area-Graph-and-checks-the-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Area-Graph-and-checks-the-visuals-1-chromium-linux.png index 0983aad009..87f8c13770 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Area-Graph-and-checks-the-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Area-Graph-and-checks-the-visuals-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Area-Graph-and-checks-the-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Area-Graph-and-checks-the-visuals-2-chromium-linux.png index bb4c02a15f..dc4248219c 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Area-Graph-and-checks-the-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Area-Graph-and-checks-the-visuals-2-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Area-Graph-and-checks-the-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Area-Graph-and-checks-the-visuals-3-chromium-linux.png index b7f94ac7ce..b6dc188fef 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Area-Graph-and-checks-the-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Area-Graph-and-checks-the-visuals-3-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Bar-Graph-and-checks-the-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Bar-Graph-and-checks-the-visuals-1-chromium-linux.png index cd10018312..a53ed6816c 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Bar-Graph-and-checks-the-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Bar-Graph-and-checks-the-visuals-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Bar-Graph-and-checks-the-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Bar-Graph-and-checks-the-visuals-2-chromium-linux.png index 8b510febad..b8f8752463 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Bar-Graph-and-checks-the-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Bar-Graph-and-checks-the-visuals-2-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Bar-Graph-and-checks-the-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Bar-Graph-and-checks-the-visuals-3-chromium-linux.png index e2cb537e4e..744c3de0a9 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Bar-Graph-and-checks-the-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Bar-Graph-and-checks-the-visuals-3-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-1-chromium-linux.png index f3fa4d36a3..6609c16aa9 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-2-chromium-linux.png index 1a2f068f6f..a70bfa7aac 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-2-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-3-chromium-linux.png index 1ec401b348..703d1bb26e 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Data-Table-and-checks-the-visuals-3-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-1-chromium-linux.png index d681c7fea0..9a2997e239 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-2-chromium-linux.png index 4746376457..d132bf9803 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-2-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-3-chromium-linux.png index 822444dca8..d4aeb94caa 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Donut-Graph-and-checks-the-visuals-3-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Line-Graph-and-checks-the-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Line-Graph-and-checks-the-visuals-1-chromium-linux.png index 2adfda1334..bcfe8f26fd 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Line-Graph-and-checks-the-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Line-Graph-and-checks-the-visuals-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Line-Graph-and-checks-the-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Line-Graph-and-checks-the-visuals-2-chromium-linux.png index 20639eb852..6c6cedff6f 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Line-Graph-and-checks-the-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Line-Graph-and-checks-the-visuals-2-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Line-Graph-and-checks-the-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Line-Graph-and-checks-the-visuals-3-chromium-linux.png index 4c3bf5a985..4535d704c3 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Line-Graph-and-checks-the-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Switches-to-Line-Graph-and-checks-the-visuals-3-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-labels-button-shows-the-labels-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-labels-button-shows-the-labels-1-chromium-linux.png index c82bf9b834..f83529c3c1 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-labels-button-shows-the-labels-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-labels-button-shows-the-labels-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-labels-button-shows-the-labels-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-labels-button-shows-the-labels-2-chromium-linux.png index c35f536a9d..d4cbbd6139 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-labels-button-shows-the-labels-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-labels-button-shows-the-labels-2-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-legend-button-shows-the-legend-side-bar-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-legend-button-shows-the-legend-side-bar-1-chromium-linux.png index a3ab838499..d1440df61f 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-legend-button-shows-the-legend-side-bar-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-legend-button-shows-the-legend-side-bar-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-legend-button-shows-the-legend-side-bar-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-legend-button-shows-the-legend-side-bar-2-chromium-linux.png index e6bbe79f09..491045ba4a 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-legend-button-shows-the-legend-side-bar-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-legend-button-shows-the-legend-side-bar-2-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-summary-button-shows-the-summary-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-summary-button-shows-the-summary-1-chromium-linux.png index ce8a351488..21c3d69651 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-summary-button-shows-the-summary-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-summary-button-shows-the-summary-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-summary-button-shows-the-summary-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-summary-button-shows-the-summary-2-chromium-linux.png index 9a4da0882c..03d423f4d1 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-summary-button-shows-the-summary-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-custom-reports-Validates-that-show-summary-button-shows-the-summary-2-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png index 70139db509..a1f676acf1 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-and-cash-flow-reports-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-1-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-1-chromium-linux.png index 175aac2b84..61525c62ad 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-1-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-1-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png index 9add928c01..10e649086c 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-2-chromium-linux.png differ diff --git a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-3-chromium-linux.png b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-3-chromium-linux.png index 8160a02309..2d508c9e69 100644 Binary files a/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-3-chromium-linux.png and b/packages/desktop-client/e2e/reports.test.ts-snapshots/Reports-loads-net-worth-graph-and-checks-visuals-3-chromium-linux.png differ diff --git a/packages/desktop-client/src/components/App.tsx b/packages/desktop-client/src/components/App.tsx index 76e8449e44..c71b55cc1d 100644 --- a/packages/desktop-client/src/components/App.tsx +++ b/packages/desktop-client/src/components/App.tsx @@ -15,7 +15,6 @@ import { styles } from '@actual-app/components/styles'; import { View } from '@actual-app/components/view'; import { init as initConnection, send } from 'loot-core/platform/client/fetch'; -import * as Platform from 'loot-core/shared/platform'; import { AppBackground } from './AppBackground'; import { BudgetMonthCountProvider } from './budget/BudgetMonthCountContext'; @@ -33,6 +32,7 @@ import { loadBudget, } from '@desktop-client/budgetfiles/budgetfilesSlice'; import { handleGlobalEvents } from '@desktop-client/global-events'; +import { useIsTestEnv } from '@desktop-client/hooks/useIsTestEnv'; import { useMetadataPref } from '@desktop-client/hooks/useMetadataPref'; import { SpreadsheetProvider } from '@desktop-client/hooks/useSpreadsheet'; import { setI18NextLanguage } from '@desktop-client/i18n'; @@ -171,6 +171,7 @@ function ErrorFallback({ error }: FallbackProps) { export function App() { const store = useStore(); + const isTestEnv = useIsTestEnv(); useEffect(() => handleGlobalEvents(store), [store]); @@ -233,8 +234,9 @@ export function App() { }} > - {process.env.REACT_APP_REVIEW_ID && - !Platform.isPlaywright && } + {process.env.REACT_APP_REVIEW_ID && !isTestEnv && ( + + )} diff --git a/packages/desktop-client/src/components/Titlebar.tsx b/packages/desktop-client/src/components/Titlebar.tsx index 623d2273c7..5a3e0b1b2d 100644 --- a/packages/desktop-client/src/components/Titlebar.tsx +++ b/packages/desktop-client/src/components/Titlebar.tsx @@ -35,6 +35,7 @@ import { ThemeSelector } from './ThemeSelector'; import { sync } from '@desktop-client/app/appSlice'; import { useGlobalPref } from '@desktop-client/hooks/useGlobalPref'; +import { useIsTestEnv } from '@desktop-client/hooks/useIsTestEnv'; import { useMetadataPref } from '@desktop-client/hooks/useMetadataPref'; import { useNavigate } from '@desktop-client/hooks/useNavigate'; import { useSheetValue } from '@desktop-client/hooks/useSheetValue'; @@ -276,6 +277,7 @@ export function Titlebar({ style }: TitlebarProps) { const { isNarrowWidth } = useResponsive(); const serverURL = useServerURL(); const [floatingSidebar] = useGlobalPref('floatingSidebar'); + const isTestEnv = useIsTestEnv(); return isNarrowWidth ? null : ( - {isDevelopmentEnvironment() && !Platform.isPlaywright && ( - - )} + {isDevelopmentEnvironment() && !isTestEnv && } {serverURL ? : null} diff --git a/packages/desktop-client/src/components/accounts/BalanceHistoryGraph.tsx b/packages/desktop-client/src/components/accounts/BalanceHistoryGraph.tsx index 22ea3cbf47..edc2e48a32 100644 --- a/packages/desktop-client/src/components/accounts/BalanceHistoryGraph.tsx +++ b/packages/desktop-client/src/components/accounts/BalanceHistoryGraph.tsx @@ -19,6 +19,7 @@ import * as monthUtils from 'loot-core/shared/months'; import { integerToCurrency } from 'loot-core/shared/util'; import { PrivacyFilter } from '@desktop-client/components/PrivacyFilter'; +import { useRechartsAnimation } from '@desktop-client/components/reports/chart-theme'; import { LoadingIndicator } from '@desktop-client/components/reports/LoadingIndicator'; import { useLocale } from '@desktop-client/hooks/useLocale'; import * as query from '@desktop-client/queries'; @@ -38,6 +39,7 @@ export function BalanceHistoryGraph({ ref, }: BalanceHistoryGraphProps) { const locale = useLocale(); + const animationProps = useRechartsAnimation({ isAnimationActive: false }); const [balanceData, setBalanceData] = useState< Array<{ date: string; balance: number }> >([]); @@ -281,7 +283,7 @@ export function BalanceHistoryGraph({ dataKey="balance" stroke={color} strokeWidth={2} - animationDuration={0} + {...animationProps} fill={ color === theme.noticeTextLight ? 'url(#fillLight)' diff --git a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx index cd98aedceb..e695ef2da7 100644 --- a/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx +++ b/packages/desktop-client/src/components/mobile/MobileNavTabs.tsx @@ -26,8 +26,7 @@ import { theme } from '@actual-app/components/theme'; import { View } from '@actual-app/components/view'; import { useDrag } from '@use-gesture/react'; -import * as Platform from 'loot-core/shared/platform'; - +import { useIsTestEnv } from '@desktop-client/hooks/useIsTestEnv'; import { useScrollListener } from '@desktop-client/hooks/useScrollListener'; import { useSyncServerStatus } from '@desktop-client/hooks/useSyncServerStatus'; @@ -45,8 +44,8 @@ export function MobileNavTabs() { const { t } = useTranslation(); const { isNarrowWidth } = useResponsive(); const syncServerStatus = useSyncServerStatus(); - const isUsingServer = - syncServerStatus !== 'no-server' || Platform.isPlaywright; + const isTestEnv = useIsTestEnv(); + const isUsingServer = syncServerStatus !== 'no-server' || isTestEnv; const [navbarState, setNavbarState] = useState<'default' | 'open' | 'hidden'>( 'default', ); diff --git a/packages/desktop-client/src/components/reports/chart-theme.ts b/packages/desktop-client/src/components/reports/chart-theme.ts index caed4dd709..0015fddfd5 100644 --- a/packages/desktop-client/src/components/reports/chart-theme.ts +++ b/packages/desktop-client/src/components/reports/chart-theme.ts @@ -1,5 +1,7 @@ import { theme } from '@actual-app/components/theme'; +import { useIsTestEnv } from '@desktop-client/hooks/useIsTestEnv'; + const colorFades = { blueFadeStart: 'rgba(229, 245, 255, 1)', blueFadeEnd: 'rgba(229, 245, 255, 0)', @@ -135,3 +137,22 @@ export function getColorScale(name: string): string[] { }; return name ? scales[name] : scales.grayscale; } + +export function useRechartsAnimation(defaults?: { + animationDuration?: number; + isAnimationActive?: boolean; +}) { + const isTestEnv = useIsTestEnv(); + + if (isTestEnv) { + return { + isAnimationActive: false, + animationDuration: 0, + }; + } + + return { + isAnimationActive: defaults?.isAnimationActive ?? true, + animationDuration: defaults?.animationDuration, + }; +} diff --git a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx index bd202ce4ce..105f8f7d64 100644 --- a/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/AreaGraph.tsx @@ -23,6 +23,7 @@ import { import { adjustTextSize } from './adjustTextSize'; import { renderCustomLabel } from './renderCustomLabel'; +import { useRechartsAnimation } from '@desktop-client/components/reports/chart-theme'; import { Container } from '@desktop-client/components/reports/Container'; import { type FormatType, useFormat } from '@desktop-client/hooks/useFormat'; import { usePrivacyMode } from '@desktop-client/hooks/usePrivacyMode'; @@ -161,6 +162,7 @@ export function AreaGraph({ showTooltip = true, }: AreaGraphProps) { const format = useFormat(); + const animationProps = useRechartsAnimation({ isAnimationActive: false }); const privacyMode = usePrivacyMode(); const dataMax = Math.max(...data.intervalData.map(i => i[balanceTypeOp])); @@ -303,7 +305,7 @@ export function AreaGraph({ type="linear" dot={false} activeDot={false} - animationDuration={0} + {...animationProps} dataKey={balanceTypeOp} stroke={`url(#stroke${balanceTypeOp})`} fill={`url(#fill${balanceTypeOp})`} diff --git a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx index 0d0b9fe2b5..e319b7f05a 100644 --- a/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/BarGraph.tsx @@ -27,6 +27,7 @@ import { adjustTextSize } from './adjustTextSize'; import { renderCustomLabel } from './renderCustomLabel'; import { showActivity } from './showActivity'; +import { useRechartsAnimation } from '@desktop-client/components/reports/chart-theme'; import { Container } from '@desktop-client/components/reports/Container'; import { getCustomTick } from '@desktop-client/components/reports/getCustomTick'; import { numberFormatterTooltip } from '@desktop-client/components/reports/numberFormatter'; @@ -173,6 +174,7 @@ export function BarGraph({ showOffBudget, showTooltip = true, }: BarGraphProps) { + const animationProps = useRechartsAnimation(); const navigate = useNavigate(); const categories = useCategories(); const accounts = useAccounts(); @@ -270,6 +272,7 @@ export function BarGraph({ getVal(val)} stackId="a" + {...animationProps} onMouseLeave={() => setPointer('')} onMouseEnter={() => !['Group', 'Interval'].includes(groupBy) && diff --git a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx index 87c49325c0..b501e5de58 100644 --- a/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/BarLineGraph.tsx @@ -16,6 +16,7 @@ import { } from 'recharts'; import { PrivacyFilter } from '@desktop-client/components/PrivacyFilter'; +import { useRechartsAnimation } from '@desktop-client/components/reports/chart-theme'; import { Container } from '@desktop-client/components/reports/Container'; import { numberFormatterTooltip } from '@desktop-client/components/reports/numberFormatter'; import { useFormat } from '@desktop-client/hooks/useFormat'; @@ -88,6 +89,7 @@ export function BarLineGraph({ showTooltip = true, }: BarLineGraphProps) { const format = useFormat(); + const animationProps = useRechartsAnimation(); const tickFormatter = tick => { return `${format(Math.round(tick), 'financial')}`; // Formats the tick values as strings with commas }; @@ -120,8 +122,18 @@ export function BarLineGraph({ {!compact && } {!compact && } {!compact && } - - + + ) diff --git a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx index c68c06906a..bec8f31113 100644 --- a/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/CashFlowGraph.tsx @@ -16,7 +16,10 @@ import { YAxis, } from 'recharts'; -import { chartTheme } from '@desktop-client/components/reports/chart-theme'; +import { + chartTheme, + useRechartsAnimation, +} from '@desktop-client/components/reports/chart-theme'; import { Container } from '@desktop-client/components/reports/Container'; import { type FormatType, useFormat } from '@desktop-client/hooks/useFormat'; import { useLocale } from '@desktop-client/hooks/useLocale'; @@ -130,6 +133,9 @@ export function CashFlowGraph({ const privacyMode = usePrivacyMode(); const [yAxisIsHovered, setYAxisIsHovered] = useState(false); const format = useFormat(); + const animationProps = useRechartsAnimation({ + animationDuration: ANIMATION_DURATION, + }); const data = graphData.expenses.map((row, idx) => ({ date: row.x, @@ -189,14 +195,14 @@ export function CashFlowGraph({ stackId="a" fill={chartTheme.colors.blue} maxBarSize={MAX_BAR_SIZE} - animationDuration={ANIMATION_DURATION} + {...animationProps} /> )} diff --git a/packages/desktop-client/src/components/reports/graphs/CrossoverGraph.tsx b/packages/desktop-client/src/components/reports/graphs/CrossoverGraph.tsx index a6379b7cb9..a277debcf8 100644 --- a/packages/desktop-client/src/components/reports/graphs/CrossoverGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/CrossoverGraph.tsx @@ -15,6 +15,7 @@ import { ReferenceLine, } from 'recharts'; +import { useRechartsAnimation } from '@desktop-client/components/reports/chart-theme'; import { Container } from '@desktop-client/components/reports/Container'; import { useFormat } from '@desktop-client/hooks/useFormat'; import { usePrivacyMode } from '@desktop-client/hooks/usePrivacyMode'; @@ -45,6 +46,7 @@ export function CrossoverGraph({ const { t } = useTranslation(); const privacyMode = usePrivacyMode(); const format = useFormat(); + const animationProps = useRechartsAnimation({ isAnimationActive: false }); const tickFormatter = (tick: number) => { if (privacyMode) { @@ -176,7 +178,7 @@ export function CrossoverGraph({ dot={false} stroke={theme.reportsBlue} strokeWidth={2} - animationDuration={0} + {...animationProps} /> diff --git a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx index 31ad3d6395..93e8534d0b 100644 --- a/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/DonutGraph.tsx @@ -17,6 +17,7 @@ import { renderCustomLabel } from './renderCustomLabel'; import { showActivity } from './showActivity'; import { PrivacyFilter } from '@desktop-client/components/PrivacyFilter'; +import { useRechartsAnimation } from '@desktop-client/components/reports/chart-theme'; import { Container } from '@desktop-client/components/reports/Container'; import { useAccounts } from '@desktop-client/hooks/useAccounts'; import { useCategories } from '@desktop-client/hooks/useCategories'; @@ -238,6 +239,7 @@ export function DonutGraph({ showTooltip = true, }: DonutGraphProps) { const format = useFormat(); + const animationProps = useRechartsAnimation({ isAnimationActive: false }); const yAxis = groupBy === 'Interval' ? 'date' : 'name'; const splitData = groupBy === 'Interval' ? 'intervalData' : 'data'; @@ -289,7 +291,7 @@ export function DonutGraph({ } dataKey={val => getVal(val)} nameKey={yAxis} - isAnimationActive={false} + {...animationProps} data={ data[splitData]?.map(item => ({ ...item, diff --git a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx index 8d54ddf89a..81e0e22894 100644 --- a/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/LineGraph.tsx @@ -22,6 +22,7 @@ import { import { showActivity } from './showActivity'; +import { useRechartsAnimation } from '@desktop-client/components/reports/chart-theme'; import { Container } from '@desktop-client/components/reports/Container'; import { getCustomTick } from '@desktop-client/components/reports/getCustomTick'; import { numberFormatterTooltip } from '@desktop-client/components/reports/numberFormatter'; @@ -147,6 +148,7 @@ export function LineGraph({ showTooltip = true, interval, }: LineGraphProps) { + const animationProps = useRechartsAnimation(); const navigate = useNavigate(); const categories = useCategories(); const accounts = useAccounts(); @@ -241,6 +243,7 @@ export function LineGraph({ type="monotone" dataKey={entry.name} stroke={entry.color} + {...animationProps} activeDot={{ r: entry.name === tooltip && !compact ? 8 : 3, onMouseEnter: () => { diff --git a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx index f87529471d..46b5666875 100644 --- a/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/NetWorthGraph.tsx @@ -18,6 +18,7 @@ import { import { computePadding } from './util/computePadding'; +import { useRechartsAnimation } from '@desktop-client/components/reports/chart-theme'; import { Container } from '@desktop-client/components/reports/Container'; import { numberFormatterTooltip } from '@desktop-client/components/reports/numberFormatter'; import { useFormat } from '@desktop-client/hooks/useFormat'; @@ -55,6 +56,7 @@ export function NetWorthGraph({ const privacyMode = usePrivacyMode(); const id = useId(); const format = useFormat(); + const animationProps = useRechartsAnimation({ isAnimationActive: false }); // Use more aggressive smoothening for high-frequency data const interpolationType = @@ -227,7 +229,7 @@ export function NetWorthGraph({ type={interpolationType} dot={false} activeDot={false} - animationDuration={0} + {...animationProps} dataKey="y" stroke={theme.reportsBlue} strokeWidth={2} diff --git a/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx b/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx index 23e70cbf23..79fe97e446 100644 --- a/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/SpendingGraph.tsx @@ -18,6 +18,7 @@ import { type SpendingEntity } from 'loot-core/types/models'; import { computePadding } from './util/computePadding'; +import { useRechartsAnimation } from '@desktop-client/components/reports/chart-theme'; import { Container } from '@desktop-client/components/reports/Container'; import { numberFormatterTooltip } from '@desktop-client/components/reports/numberFormatter'; import { useFormat, type FormatType } from '@desktop-client/hooks/useFormat'; @@ -148,6 +149,7 @@ export function SpendingGraph({ compareTo, }: SpendingGraphProps) { const privacyMode = usePrivacyMode(); + const animationProps = useRechartsAnimation({ isAnimationActive: false }); const balanceTypeOp = 'cumulative'; const format = useFormat(); @@ -302,7 +304,7 @@ export function SpendingGraph({ fillOpacity: 1, r: 10, }} - animationDuration={0} + {...animationProps} dataKey={val => getVal(val, compare)} stroke={`url(#stroke${balanceTypeOp})`} strokeWidth={3} @@ -313,7 +315,7 @@ export function SpendingGraph({ type="linear" dot={false} activeDot={false} - animationDuration={0} + {...animationProps} dataKey={val => getVal(val, selection)} stroke={theme.reportsGray} strokeDasharray="10 10" diff --git a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx index b4702207ae..9ba60604fa 100644 --- a/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx +++ b/packages/desktop-client/src/components/reports/graphs/StackedBarGraph.tsx @@ -24,6 +24,7 @@ import { import { renderCustomLabel } from './renderCustomLabel'; import { showActivity } from './showActivity'; +import { useRechartsAnimation } from '@desktop-client/components/reports/chart-theme'; import { Container } from '@desktop-client/components/reports/Container'; import { getCustomTick } from '@desktop-client/components/reports/getCustomTick'; import { numberFormatterTooltip } from '@desktop-client/components/reports/numberFormatter'; @@ -178,6 +179,7 @@ export function StackedBarGraph({ showTooltip = true, interval, }: StackedBarGraphProps) { + const animationProps = useRechartsAnimation(); const navigate = useNavigate(); const categories = useCategories(); const accounts = useAccounts(); @@ -257,6 +259,7 @@ export function StackedBarGraph({ dataKey={entry.name} stackId="a" fill={entry.color} + {...animationProps} onMouseLeave={() => { setPointer(''); setTooltip(''); diff --git a/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx b/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx index 17dc01b6c9..5fcc6ecd4c 100644 --- a/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx +++ b/packages/desktop-client/src/components/reports/reports/CashFlowCard.tsx @@ -19,7 +19,10 @@ import { defaultTimeFrame } from './CashFlow'; import { PrivacyFilter } from '@desktop-client/components/PrivacyFilter'; import { Change } from '@desktop-client/components/reports/Change'; -import { chartTheme } from '@desktop-client/components/reports/chart-theme'; +import { + chartTheme, + useRechartsAnimation, +} from '@desktop-client/components/reports/chart-theme'; import { Container } from '@desktop-client/components/reports/Container'; import { DateRange } from '@desktop-client/components/reports/DateRange'; import { LoadingIndicator } from '@desktop-client/components/reports/LoadingIndicator'; @@ -111,6 +114,7 @@ export function CashFlowCard({ onRemove, }: CashFlowCardProps) { const { t } = useTranslation(); + const animationProps = useRechartsAnimation(); const [latestTransaction, setLatestTransaction] = useState(''); const [nameMenuOpen, setNameMenuOpen] = useState(false); @@ -224,6 +228,7 @@ export function CashFlowCard({ dataKey="income" fill={chartTheme.colors.blue} barSize={14} + {...animationProps} > >({ onDrop, titleAccount, }: AccountProps) { + const isTestEnv = useIsTestEnv(); const { t } = useTranslation(); const type = account ? account.closed @@ -281,7 +282,7 @@ export function Account>({ ); - if (!needsTooltip || Platform.isPlaywright) { + if (!needsTooltip || isTestEnv) { return accountRow; } diff --git a/packages/desktop-client/src/components/sidebar/PrimaryButtons.tsx b/packages/desktop-client/src/components/sidebar/PrimaryButtons.tsx index f1cebeda14..2c957af14e 100644 --- a/packages/desktop-client/src/components/sidebar/PrimaryButtons.tsx +++ b/packages/desktop-client/src/components/sidebar/PrimaryButtons.tsx @@ -16,11 +16,10 @@ import { import { SvgCalendar3 } from '@actual-app/components/icons/v2'; import { View } from '@actual-app/components/view'; -import * as Platform from 'loot-core/shared/platform'; - import { Item } from './Item'; import { SecondaryItem } from './SecondaryItem'; +import { useIsTestEnv } from '@desktop-client/hooks/useIsTestEnv'; import { useSyncServerStatus } from '@desktop-client/hooks/useSyncServerStatus'; export function PrimaryButtons() { @@ -30,8 +29,8 @@ export function PrimaryButtons() { const location = useLocation(); const syncServerStatus = useSyncServerStatus(); - const isUsingServer = - syncServerStatus !== 'no-server' || Platform.isPlaywright; + const isTestEnv = useIsTestEnv(); + const isUsingServer = syncServerStatus !== 'no-server' || isTestEnv; const isActive = [ '/payees', diff --git a/packages/desktop-client/src/hooks/useIsTestEnv.ts b/packages/desktop-client/src/hooks/useIsTestEnv.ts new file mode 100644 index 0000000000..d26af07295 --- /dev/null +++ b/packages/desktop-client/src/hooks/useIsTestEnv.ts @@ -0,0 +1,5 @@ +import * as Platform from 'loot-core/shared/platform'; + +export function useIsTestEnv(): boolean { + return Platform.isPlaywright; +} diff --git a/upcoming-release-notes/6193.md b/upcoming-release-notes/6193.md new file mode 100644 index 0000000000..2e00a43974 --- /dev/null +++ b/upcoming-release-notes/6193.md @@ -0,0 +1,6 @@ +--- +category: Maintenance +authors: [matt-fidd] +--- + +Fix flaky charts VRT tests