gemini-testing · sonic16x · Oct 28, 2025 · Oct 29, 2025 · Oct 29, 2025 · Oct 29, 2025
diff --git a/lib/constants/index.ts b/lib/constants/index.ts
@@ -13,3 +13,5 @@ export * from './test-statuses';
 export * from './tool-names';
 export * from './two-up-modes';
 export * from './view-modes';
+export * from './pages';
+export * from './expand-modes';
diff --git a/lib/constants/pages.ts b/lib/constants/pages.ts
@@ -0,0 +1,9 @@
+export enum Page {
+    suitesPage = 'suitesPage',
+    visualChecksPage = 'visualChecksPage',
+}
+
+export enum PathNames {
+    suites = '/suites',
+    visualChecks = '/visual-checks',
+}
diff --git a/lib/static/modules/actions/filters.ts b/lib/static/modules/actions/filters.ts
@@ -2,8 +2,7 @@ import actionNames from '@/static/modules/action-names';
 import type {Action} from '@/static/modules/actions/types';
 import {setFilteredBrowsers} from '@/static/modules/query-params';
 import {BrowserItem} from '@/types';
-import {ViewMode} from '@/constants';
-import {Page} from '@/static/new-ui/types/store';
+import {Page, ViewMode} from '@/constants';
 
 interface FilterPayload<T>{
     page: Page;

diff --git a/lib/static/modules/actions/suites-page.ts b/lib/static/modules/actions/suites-page.ts
@@ -1,6 +1,7 @@
 import actionNames from '@/static/modules/action-names';
 import {Action} from '@/static/modules/actions/types';
-import {Page, TreeViewMode} from '@/static/new-ui/types/store';
+import {TreeViewMode} from '@/static/new-ui/types/store';
+import {Page} from '@/constants';
 
 export type SuitesPageSetCurrentTreeNodeAction = Action<typeof actionNames.SUITES_PAGE_SET_CURRENT_SUITE, Partial<{
     treeNodeId: string;

diff --git a/lib/static/modules/actions/visual-checks-page.ts b/lib/static/modules/actions/visual-checks-page.ts
@@ -2,12 +2,15 @@ import actionNames from '@/static/modules/action-names';
 import {Action} from '@/static/modules/actions/types';
 import {DiffModeId, TwoUpFitMode} from '@/constants';
 
-export type VisualChecksPageSetCurrentNamedImageAction = Action<typeof actionNames.VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE, {
-    namedImageId: string;
-}>;
+export type VisualChecksPageSetCurrentNamedImageData = {
+    suiteId?: string;
+    stateName?: string;
+};
+
+export type VisualChecksPageSetCurrentNamedImageAction = Action<typeof actionNames.VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE, VisualChecksPageSetCurrentNamedImageData>;
 
-export const visualChecksPageSetCurrentNamedImage = (namedImageId: string): VisualChecksPageSetCurrentNamedImageAction => {
-    return {type: actionNames.VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE, payload: {namedImageId}};
+export const visualChecksPageSetCurrentNamedImage = (data: VisualChecksPageSetCurrentNamedImageData): VisualChecksPageSetCurrentNamedImageAction => {
+    return {type: actionNames.VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE, payload: data};
 };
 
 export type Toggle2UpDiffVisibilityAction = Action<typeof actionNames.VISUAL_CHECKS_TOGGLE_2UP_DIFF_VISIBILITY, {

diff --git a/lib/static/modules/default-state.ts b/lib/static/modules/default-state.ts
@@ -1,10 +1,7 @@
-import {configDefaults} from '../../constants/defaults';
-import {ViewMode} from '../../constants/view-modes';
-import {DiffModes} from '../../constants/diff-modes';
-import {EXPAND_ERRORS} from '../../constants/expand-modes';
-import {RESULT_KEYS} from '../../constants/group-tests';
-import {ToolName, TwoUpFitMode} from '../../constants';
-import {Page, SortDirection, State, TreeViewMode} from '@/static/new-ui/types/store';
+import {
+    Page, ToolName, TwoUpFitMode, RESULT_KEYS, EXPAND_ERRORS, DiffModes, ViewMode, configDefaults
+} from '@/constants';
+import {SortDirection, State, TreeViewMode} from '@/static/new-ui/types/store';
 import {MIN_SECTION_SIZE_PERCENT} from '../new-ui/features/suites/constants';
 
 export default Object.assign({config: configDefaults}, {
@@ -113,7 +110,8 @@ export default Object.assign({config: configDefaults}, {
             filteredBrowsers: []
         },
         [Page.visualChecksPage]: {
-            currentNamedImageId: null,
+            suiteId: null,
+            stateName: null,
 
             viewMode: ViewMode.ALL,
             nameFilter: '',

diff --git a/lib/static/modules/reducers/filters.ts b/lib/static/modules/reducers/filters.ts
@@ -1,4 +1,5 @@
-import {Page, State} from '@/static/new-ui/types/store';
+import {State} from '@/static/new-ui/types/store';
+import {Page, PathNames} from '@/constants';
 import actionNames from '@/static/modules/action-names';
 import {FiltersAction, InitGuiReportAction, InitStaticReportAction} from '@/static/modules/actions';
 import {DiffModeId, DiffModes, ViewMode} from '@/constants';
@@ -49,7 +50,7 @@ export default (state: State, action: FiltersAction | InitGuiReportAction | Init
                 }
             );
 
-            if (window.location.hash?.startsWith('#/visual-checks')) {
+            if (window.location.hash?.startsWith(`#${PathNames.visualChecks}`)) {
                 newState.app[Page.visualChecksPage].filteredBrowsers = viewQuery.filteredBrowsers as BrowserItem[];
                 newState.app[Page.visualChecksPage].viewMode = viewQuery.viewMode as ViewMode || visualChecksPageViewMode;
                 newState.app[Page.visualChecksPage].nameFilter = viewQuery.testNameFilter as string || '';

diff --git a/lib/static/modules/reducers/sort-tests.ts b/lib/static/modules/reducers/sort-tests.ts
@@ -1,4 +1,5 @@
-import {Page, SortDirection, State} from '@/static/new-ui/types/store';
+import {SortDirection, State} from '@/static/new-ui/types/store';
+import {Page} from '@/constants';
 import {SomeAction} from '@/static/modules/actions/types';
 import actionNames from '@/static/modules/action-names';
 import {applyStateUpdate} from '@/static/modules/utils';

diff --git a/lib/static/modules/reducers/suites-page.ts b/lib/static/modules/reducers/suites-page.ts
@@ -1,4 +1,4 @@
-import {Page, State} from '@/static/new-ui/types/store';
+import {State} from '@/static/new-ui/types/store';
 import actionNames from '@/static/modules/action-names';
 import {applyStateUpdate} from '@/static/modules/utils/state';
 import {SomeAction} from '@/static/modules/actions/types';
@@ -7,7 +7,7 @@ import {findTreeNodeByBrowserId, findTreeNodeById, getGroupId} from '@/static/ne
 import * as localStorageWrapper from '../local-storage-wrapper';
 import {MIN_SECTION_SIZE_PERCENT} from '@/static/new-ui/features/suites/constants';
 import {TIME_TRAVEL_PLAYER_VISIBILITY_KEY, TWO_UP_DIFF_VISIBILITY_KEY, TWO_UP_FIT_MODE_KEY} from '@/constants/local-storage';
-import {TwoUpFitMode} from '@/constants';
+import {Page, TwoUpFitMode} from '@/constants';
 
 const SECTION_SIZES_LOCAL_STORAGE_KEY = 'suites-page-section-sizes';
 

diff --git a/lib/static/modules/reducers/visual-checks-page.ts b/lib/static/modules/reducers/visual-checks-page.ts
@@ -8,7 +8,7 @@ import {TWO_UP_DIFF_VISIBILITY_KEY, TWO_UP_FIT_MODE_KEY} from '@/constants/local
 export default (state: State, action: VisualChecksPageAction): State => {
     switch (action.type) {
         case actionNames.VISUAL_CHECKS_PAGE_SET_CURRENT_NAMED_IMAGE:
-            return applyStateUpdate(state, {app: {visualChecksPage: {currentNamedImageId: action.payload.namedImageId}}}) as State;
+            return applyStateUpdate(state, {app: {visualChecksPage: action.payload}}) as State;
         case actionNames.VISUAL_CHECKS_TOGGLE_2UP_DIFF_VISIBILITY:
             localStorageWrapper.setItem(TWO_UP_DIFF_VISIBILITY_KEY, action.payload.isVisible);
             return applyStateUpdate(state, {

diff --git a/lib/static/modules/search/index.ts b/lib/static/modules/search/index.ts
@@ -1,5 +1,5 @@
 import {setSearchLoading, updateNameFilter, setMatchCaseFilter} from '@/static/modules/actions';
-import {Page} from '@/static/new-ui/types/store';
+import {Page} from '@/constants';
 
 let worker: Worker;
 let searchResult: Set<string> = new Set([]);

diff --git a/lib/static/new-ui/app/App.tsx b/lib/static/new-ui/app/App.tsx
@@ -19,27 +19,28 @@ import {AnalyticsProvider} from '@/static/new-ui/providers/analytics';
 import {MetrikaScript} from '@/static/new-ui/components/MetrikaScript';
 import {ErrorHandler} from '../features/error-handling/components/ErrorHandling';
 import FaviconChanger from '../../components/favicon-changer';
+import {PathNames} from '@/constants';
 
 const toaster = new Toaster();
 
-export function App(): ReactNode {
-    const pages = [
-        {
-            title: 'Suites',
-            url: '/suites',
-            icon: ListCheck,
-            element: <SuitesPage/>,
-            children: [<Route key={'suite'} path='/suites/:suiteId?/:stateName?/:attempt?' element={<SuitesPage/>} />]
-        },
-        {
-            title: 'Visual Checks',
-            url: '/visual-checks',
-            icon: Eye,
-            element: <VisualChecksPage/>,
-            children: [<Route key={'image'} path='/visual-checks/:imageId?/:attempt?' element={<VisualChecksPage/>} />]
-        }
-    ];
+const pages = [
+    {
+        title: 'Suites',
+        url: PathNames.suites,
+        icon: ListCheck,
+        element: <SuitesPage/>,
+        children: [<Route key={'suite'} path='/suites/:suiteId?/:attempt?/:stateName?' element={<SuitesPage/>} />]
+    },
+    {
+        title: 'Visual Checks',
+        url: PathNames.visualChecks,
+        icon: Eye,
+        element: <VisualChecksPage/>,
+        children: [<Route key={'image'} path='/visual-checks/:suiteId?/:attempt?/:stateName?' element={<VisualChecksPage/>} />]
+    }
+];
 
+export function App(): ReactNode {
     const customScripts = (store.getState() as State).config.customScripts;
 
     return <StrictMode>
@@ -56,7 +57,7 @@ export function App(): ReactNode {
                                     <MainLayout pages={pages}>
                                         <LoadingBar/>
                                         <Routes>
-                                            <Route element={<Navigate to={'/suites'}/>} path={'/'}/>
+                                            <Route element={<Navigate to={PathNames.suites}/>} path={'/'}/>
                                             {pages.map(page => (
                                                 <Route element={
                                                     <ErrorHandler.Boundary watchFor={[page.url]} fallback={<ErrorHandler.FallbackAppCrash />}>

diff --git a/lib/static/new-ui/components/GuiniToolbarOverlay/index.tsx b/lib/static/new-ui/components/GuiniToolbarOverlay/index.tsx
@@ -14,7 +14,7 @@ import {
 } from '@/static/modules/actions';
 import {Point} from '@/static/new-ui/types';
 import {useLocation} from 'react-router-dom';
-import {TestStatus} from '@/constants';
+import {TestStatus, PathNames} from '@/constants';
 import {formatCommitPayload} from '@/static/modules/static-image-accepter';
 import {pick} from 'lodash';
 
@@ -43,7 +43,7 @@ export function GuiniToolbarOverlay(): ReactNode {
         const newIsVisible = stagedImages.length > 0 &&
             !isInProgress &&
             !isModalVisible &&
-            ['/suites', '/visual-checks'].some((path) => location.pathname.startsWith(path));
+            [PathNames.suites, PathNames.visualChecks].some((path) => location.pathname.startsWith(path));
         if (Boolean(newIsVisible) !== Boolean(isVisible)) {
             setIsVisible(newIsVisible);
         }

diff --git a/lib/static/new-ui/components/MainLayout/index.tsx b/lib/static/new-ui/components/MainLayout/index.tsx
@@ -15,7 +15,7 @@ import {useAnalytics} from '@/static/new-ui/hooks/useAnalytics';
 import {setSectionSizes} from '../../../modules/actions/suites-page';
 import {ArrowLeftToLine, ArrowRightFromLine} from '@gravity-ui/icons';
 import {isSectionHidden} from '../../features/suites/utils';
-import {Page} from '@/static/new-ui/types/store';
+import {Page, PathNames} from '@/constants';
 
 export enum PanelId {
     Settings = 'settings',
@@ -104,7 +104,7 @@ export function MainLayout(props: MainLayoutProps): ReactNode {
 
     return <AsideHeader
         className={classNames({'aside-header--initialized': isInitialized})}
-        logo={{text: 'Testplane UI', iconSrc: TestplaneIcon, iconSize: 32, onClick: () => navigate('/suites')}}
+        logo={{text: 'Testplane UI', iconSrc: TestplaneIcon, iconSize: 32, onClick: () => navigate(PathNames.suites)}}
         compact={true}
         headerDecoration={false}
         menuItems={menuItems}

diff --git a/lib/static/new-ui/features/suites/components/ScreenshotsTreeViewItem/index.tsx b/lib/static/new-ui/features/suites/components/ScreenshotsTreeViewItem/index.tsx
@@ -5,7 +5,7 @@ import {useDispatch, useSelector} from 'react-redux';
 
 import {AssertViewResult} from '@/static/new-ui/components/AssertViewResult';
 import {ImageEntity} from '@/static/new-ui/types/store';
-import {DiffModeId, EditScreensFeature, TestStatus} from '@/constants';
+import {DiffModeId, EditScreensFeature, TestStatus, Page} from '@/constants';
 import {getAvailableDiffModes} from '@/static/new-ui/utils/diffModes';
 import {
     setDiffMode,
@@ -20,6 +20,7 @@ import {thunkAcceptImages, thunkRevertImages} from '@/static/modules/actions/scr
 import {useAnalytics} from '@/static/new-ui/hooks/useAnalytics';
 import {ErrorHandler} from '../../../error-handling/components/ErrorHandling';
 import {useNavigate, useParams} from 'react-router-dom';
+import {getUrl} from '@/static/new-ui/utils/getUrl';
 
 interface ScreenshotsTreeViewItemProps {
     image: ImageEntity;
@@ -87,7 +88,12 @@ export function ScreenshotsTreeViewItem(props: ScreenshotsTreeViewItemProps): Re
     const imageId = `${currentResult?.parentId} ${props.image.stateName}`;
 
     const onVisualChecks = (): void => {
-        navigate(`/visual-checks/${encodeURIComponent(imageId)}/${currentResult?.attempt}`);
+        navigate(getUrl({
+            page: Page.visualChecksPage,
+            suiteId: suiteId,
+            stateName: props.image.stateName,
+            attempt: currentResult?.attempt
+        }));
     };
 
     useEffect(() => {
@@ -110,7 +116,7 @@ export function ScreenshotsTreeViewItem(props: ScreenshotsTreeViewItemProps): Re
                     {isDiffModeSwitcherVisible && (
                         <div className={styles.diffModeContainer}>
                             <RadioButton onUpdate={onDiffModeChangeHandler} value={diffMode} className={styles.diffModeSwitcher}>
-                                {getAvailableDiffModes('suites').map(diffMode =>
+                                {getAvailableDiffModes(Page.suitesPage).map(diffMode =>
                                     <RadioButton.Option value={diffMode.id} content={diffMode.title} title={diffMode.description} key={diffMode.id}/>
                                 )}
                             </RadioButton>
@@ -120,7 +126,7 @@ export function ScreenshotsTreeViewItem(props: ScreenshotsTreeViewItemProps): Re
                                 onUpdate={([diffMode]): void => onDiffModeChangeHandler(diffMode as DiffModeId)}
                                 multiple={false}
                             >
-                                {getAvailableDiffModes('suites').map(diffMode =>
+                                {getAvailableDiffModes(Page.suitesPage).map(diffMode =>
                                     <Select.Option value={diffMode.id} content={diffMode.title} title={diffMode.description} key={diffMode.id}/>
                                 )}
                             </Select>

diff --git a/lib/static/new-ui/features/suites/components/SuitesPage/index.tsx b/lib/static/new-ui/features/suites/components/SuitesPage/index.tsx
@@ -2,7 +2,6 @@ import classNames from 'classnames';
 import React, {ReactNode, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState} from 'react';
 import {useDispatch, useSelector} from 'react-redux';
 import {useNavigate, useParams} from 'react-router-dom';
-
 import {UiCard} from '@/static/new-ui/components/Card/UiCard';
 import {getAttempt, getCurrentResult, getCurrentResultImages} from '@/static/new-ui/features/suites/selectors';
 import {SplitViewLayout} from '@/static/new-ui/components/SplitViewLayout';
@@ -11,6 +10,7 @@ import {SuiteTitle} from '@/static/new-ui/components/SuiteTitle';
 import * as actions from '@/static/modules/actions';
 import {getIsInitialized} from '@/static/new-ui/store/selectors';
 import {TestControlPanel} from '@/static/new-ui/features/suites/components/TestControlPanel';
+import {TestStatusBar} from '@/static/new-ui/features/suites/components/TestStatusBar';
 
 import styles from './index.module.css';
 import {TestInfoSkeleton} from '@/static/new-ui/features/suites/components/SuitesPage/TestInfoSkeleton';
@@ -28,10 +28,10 @@ import {MIN_SECTION_SIZE_PERCENT} from '../../constants';
 import {SideBar} from '@/static/new-ui/components/SideBar';
 import {getSuitesStatusCounts, getSuitesTreeViewData} from './selectors';
 import {getIconByStatus} from '@/static/new-ui/utils';
-import {Page} from '@/static/new-ui/types/store';
+import {Page} from '@/constants';
 import {usePage} from '@/static/new-ui/hooks/usePage';
 import {changeTestRetry, setCurrentTreeNode, setStrictMatchFilter} from '@/static/modules/actions';
-import {TestStatusBar} from '@/static/new-ui/features/suites/components/TestStatusBar';
+import {getUrl} from '@/static/new-ui/utils/getUrl';
 
 export function SuitesPage(): ReactNode {
     const page = usePage();
@@ -60,13 +60,13 @@ export function SuitesPage(): ReactNode {
     }, [page]);
 
     useEffect(() => {
-        if (currentResult?.parentId && attempt !== null && resultImages.length) {
-            navigate('/' + [
-                'suites',
-                currentResult.parentId as string,
-                params.stateName !== undefined ? params.stateName : resultImages[0].stateName as string,
-                attempt?.toString() as string
-            ].map(encodeURIComponent).join('/'));
+        if (currentResult?.parentId && attempt !== null) {
+            navigate(getUrl({
+                page: Page.suitesPage,
+                attempt,
+                suiteId: currentResult.parentId,
+                stateName: resultImages.length ? resultImages[0].stateName : undefined
+            }));
         }
     }, [currentResult, attempt]);
 
@@ -225,10 +225,10 @@ export function SuitesPage(): ReactNode {
                                     index={currentIndex}
                                     totalItems={visibleTreeNodeIds.length}
                                     onNext={(): void => onPrevNextSuiteHandler(1)}
-                                    onPrevious={(): void => onPrevNextSuiteHandler(-1)}
-                                />
+                                    onPrevious={(): void => onPrevNextSuiteHandler(-1)}/>
                                 <TestControlPanel onAttemptChange={onAttemptChangeHandler}/>
                             </div>
+
                             <TestStatusBar />
                             <TestInfo/>
                         </>}

diff --git a/lib/static/new-ui/features/suites/components/SuitesPage/types.ts b/lib/static/new-ui/features/suites/components/SuitesPage/types.ts
@@ -20,6 +20,8 @@ export interface TreeViewItemData {
     images?: ImageEntity[];
     parentData?: TreeViewItemData;
     skipReason?: string;
+    suiteId?: string;
+    stateName?: string;
 }
 
 export interface TreeRoot {

diff --git a/lib/static/new-ui/features/suites/components/TestSteps/index.tsx b/lib/static/new-ui/features/suites/components/TestSteps/index.tsx
@@ -27,6 +27,8 @@ import {ErrorHandler} from '../../../error-handling/components/ErrorHandling';
 import {goToTimeInSnapshotsPlayer, setCurrentPlayerHighlightTime} from '@/static/modules/actions/snapshots';
 import {setCurrentStep} from '@/static/modules/actions';
 import {useNavigate} from 'react-router-dom';
+import {getUrl} from '@/static/new-ui/utils/getUrl';
+import {Page} from '@/constants';
 
 type TestStepClickHandler = (item: {id: string}) => void
 
@@ -171,13 +173,13 @@ function TestStepsInternal(props: TestStepsProps): ReactNode {
             expandedById: Object.assign({}, props.stepsExpandedById, {[id]: !props.stepsExpandedById[id]})
         });
 
-        if (step.type === StepType.Action) {
-            navigate('/' + [
-                'suites',
-                currentResult?.parentId as string,
-                step.args[0] as string,
-                currentResult?.attempt?.toString() as string
-            ].map(encodeURIComponent).join('/'));
+        if (step.type === StepType.Action && step.title === 'assertView') {
+            navigate(getUrl({
+                page: Page.suitesPage,
+                suiteId: currentResult?.parentId,
+                attempt: currentResult?.attempt,
+                stateName: step.args[0]
+            }));
         }
     }, [items, props.actions, props.stepsExpandedById]);