fix: remember diffMode and collapsible sections state in localStorage (#760)

shadowusr · web-flow · commit 4ad8f4a0c34f · 2026-03-20T23:00:48.000+03:00
* fix: remember diff mode on suites and visual checks pages

* fix: remember collapsible sections state on suites page in local storage
diff --git a/lib/constants/local-storage.ts b/lib/constants/local-storage.ts
@@ -7,6 +7,9 @@ export const TIME_TRAVEL_PLAYER_VISIBILITY_KEY = 'time-travel-player-visibility'
 export const TWO_UP_DIFF_VISIBILITY_KEY = '2up-diff-visibility';
 export const TWO_UP_FIT_MODE_KEY = '2up-fit-mode';
 export const HIDE_TREE_VIEW_SCREENSHOTS = 'hide-tree-view-screenshots';
+export const SUITES_PAGE_DIFF_MODE_KEY = 'app.suitesPage.diffMode';
+export const VISUAL_CHECKS_PAGE_DIFF_MODE_KEY = 'app.visualChecksPage.diffMode';
+export const SUITES_PAGE_EXPANDED_SECTIONS_KEY = 'app.suitesPage.expandedSectionsById';
 
 export enum UiMode {
     Old = 'old',
diff --git a/lib/static/modules/local-storage-wrapper.js b/lib/static/modules/local-storage-wrapper.js
@@ -50,6 +50,5 @@ export function getItem(key, defaultValue) {
  * @returns {boolean}
  */
 export function hasItem(key) {
-    // eslint-disable-next-line no-prototype-builtins
-    return window.localStorage.hasOwnProperty(_getStorageKey(key));
+    return window.localStorage.getItem(_getStorageKey(key)) !== null;
 }
diff --git a/lib/static/modules/middlewares/local-storage.js b/lib/static/modules/middlewares/local-storage.js
@@ -1,5 +1,6 @@
 import * as localStorageWrapper from '../local-storage-wrapper';
 import actionNames from '../action-names';
+import {SUITES_PAGE_DIFF_MODE_KEY, VISUAL_CHECKS_PAGE_DIFF_MODE_KEY} from '../../../constants/local-storage';
 
 export default store => next => action => {
     const result = next(action);
@@ -11,13 +12,17 @@ export default store => next => action => {
         // as the filter is applied from the previous opening of another report
         localStorageWrapper.setItem('view', {
             expand: view.expand,
-            diffMode: view.diffMode,
             strictMatchFilter: view.strictMatchFilter
         });
 
+        if (action.type === actionNames.SET_DIFF_MODE) {
+            localStorageWrapper.setItem(SUITES_PAGE_DIFF_MODE_KEY, action.payload.diffModeId);
+        }
+        if (action.type === actionNames.VISUAL_CHECKS_SET_DIFF_MODE) {
+            localStorageWrapper.setItem(VISUAL_CHECKS_PAGE_DIFF_MODE_KEY, action.payload.diffModeId);
+        }
         localStorageWrapper.setItem('app.suitesPage.viewMode', app.suitesPage.viewMode);
         localStorageWrapper.setItem('app.visualChecksPage.viewMode', app.visualChecksPage.viewMode);
-        localStorageWrapper.setItem('app.visualChecksPage.diffMode', app.visualChecksPage.diffMode);
     }
 
     return result;
diff --git a/lib/static/modules/reducers/filters.ts b/lib/static/modules/reducers/filters.ts
@@ -1,5 +1,5 @@
 import {State} from '@/static/new-ui/types/store';
-import {Page, PathNames} from '@/constants';
+import {Page, PathNames, VISUAL_CHECKS_PAGE_DIFF_MODE_KEY} from '@/constants';
 import actionNames from '@/static/modules/action-names';
 import {FiltersAction, InitGuiReportAction, InitStaticReportAction} from '@/static/modules/actions';
 import {DiffModeId, DiffModes, ViewMode} from '@/constants';
@@ -28,7 +28,7 @@ export default (state: State, action: FiltersAction | InitGuiReportAction | Init
         case actionNames.INIT_STATIC_REPORT: {
             const suitesPageViewMode = localStorageWrapper.getItem('app.suitesPage.viewMode', ViewMode.ALL) as ViewMode;
             const visualChecksPageViewMode = localStorageWrapper.getItem('app.visualChecksPage.viewMode', ViewMode.ALL) as ViewMode;
-            const visualChecksPageDiffMode = localStorageWrapper.getItem('app.visualChecksPage.diffMode', DiffModes.TWO_UP_INTERACTIVE.id) as DiffModeId;
+            const visualChecksPageDiffMode = localStorageWrapper.getItem(VISUAL_CHECKS_PAGE_DIFF_MODE_KEY, DiffModes.TWO_UP_INTERACTIVE.id) as DiffModeId;
 
             const viewQuery = getViewQuery(window.location.search);
 
diff --git a/lib/static/modules/reducers/suites-page.ts b/lib/static/modules/reducers/suites-page.ts
@@ -6,7 +6,12 @@ import {getSuitesTreeViewData} from '@/static/new-ui/features/suites/components/
 import {findTreeNodeByBrowserId, findTreeNodeById, getGroupId} from '@/static/new-ui/features/suites/utils';
 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 {
+    SUITES_PAGE_EXPANDED_SECTIONS_KEY,
+    TIME_TRAVEL_PLAYER_VISIBILITY_KEY,
+    TWO_UP_DIFF_VISIBILITY_KEY,
+    TWO_UP_FIT_MODE_KEY
+} from '@/constants/local-storage';
 import {Page, TwoUpFitMode} from '@/constants';
 
 const SECTION_SIZES_LOCAL_STORAGE_KEY = 'suites-page-section-sizes';
@@ -62,6 +67,7 @@ export default (state: State, action: SomeAction): State => {
             const isSnapshotsPlayerVisible = Boolean(localStorageWrapper.getItem(TIME_TRAVEL_PLAYER_VISIBILITY_KEY, true));
             const is2UpDiffVisible = Boolean(localStorageWrapper.getItem(TWO_UP_DIFF_VISIBILITY_KEY, true));
             const twoUpFitMode = localStorageWrapper.getItem(TWO_UP_FIT_MODE_KEY, TwoUpFitMode.FitToView) as TwoUpFitMode;
+            const expandedSectionsById = localStorageWrapper.getItem(SUITES_PAGE_EXPANDED_SECTIONS_KEY, {}) as Record<string, boolean>;
 
             return applyStateUpdate(state, {
                 app: {
@@ -73,6 +79,7 @@ export default (state: State, action: SomeAction): State => {
                 ui: {
                     suitesPage: {
                         expandedTreeNodesById,
+                        expandedSectionsById,
                         treeViewMode,
                         sectionSizes: suitesSectionSizes,
                         isSnapshotsPlayerVisible
@@ -131,12 +138,16 @@ export default (state: State, action: SomeAction): State => {
             }) as State;
         }
         case actionNames.SUITES_PAGE_SET_SECTION_EXPANDED: {
+            const expandedSectionsById = {
+                ...state.ui.suitesPage.expandedSectionsById,
+                [action.payload.sectionId]: action.payload.isExpanded
+            };
+            localStorageWrapper.setItem(SUITES_PAGE_EXPANDED_SECTIONS_KEY, expandedSectionsById);
+
             return applyStateUpdate(state, {
                 ui: {
                     suitesPage: {
-                        expandedSectionsById: {
-                            [action.payload.sectionId]: action.payload.isExpanded
-                        }
+                        expandedSectionsById
                     }
                 }
             }) as State;
diff --git a/lib/static/modules/reducers/view.js b/lib/static/modules/reducers/view.js
@@ -1,6 +1,7 @@
 import * as localStorageWrapper from '../local-storage-wrapper';
 import actionNames from '../action-names';
 import {EXPAND_ALL, COLLAPSE_ALL, EXPAND_ERRORS, EXPAND_RETRIES} from '../../../constants/expand-modes';
+import {SUITES_PAGE_DIFF_MODE_KEY} from '../../../constants/local-storage';
 import {getViewQuery} from '@/static/modules/custom-queries';
 
 export default (state, action) => {
@@ -10,8 +11,9 @@ export default (state, action) => {
             const {baseHost, defaultView: viewMode, diffMode} = state.config;
             const viewQuery = getViewQuery(window.location.search);
             const lsView = localStorageWrapper.getItem('view', {});
+            const suitesPageDiffMode = localStorageWrapper.getItem(SUITES_PAGE_DIFF_MODE_KEY, diffMode);
 
-            return {...state, view: {...state.view, viewMode, diffMode, baseHost, ...lsView, ...viewQuery}};
+            return {...state, view: {...state.view, viewMode, baseHost, ...lsView, ...viewQuery, diffMode: suitesPageDiffMode}};
         }
 
         case actionNames.VIEW_UPDATE_BASE_HOST: {
diff --git a/lib/static/modules/reducers/visual-checks-page.ts b/lib/static/modules/reducers/visual-checks-page.ts
@@ -3,7 +3,10 @@ import actionNames from '@/static/modules/action-names';
 import {applyStateUpdate} from '@/static/modules/utils/state';
 import {VisualChecksPageAction} from '@/static/modules/actions';
 import * as localStorageWrapper from '../local-storage-wrapper';
-import {TWO_UP_DIFF_VISIBILITY_KEY, TWO_UP_FIT_MODE_KEY} from '@/constants/local-storage';
+import {
+    TWO_UP_DIFF_VISIBILITY_KEY,
+    TWO_UP_FIT_MODE_KEY
+} from '@/constants/local-storage';
 
 export default (state: State, action: VisualChecksPageAction): State => {
     switch (action.type) {
diff --git a/lib/static/new-ui/features/suites/components/CollapsibleSection/index.tsx b/lib/static/new-ui/features/suites/components/CollapsibleSection/index.tsx
@@ -35,7 +35,7 @@ export function CollapsibleSectionInternal(props: CollapsibleSectionInternalProp
         <Disclosure.Summary>
             {(): ReactElement => {
                 return <Flex gap={2} alignItems={'center'} onClick={onUpdateHandler} className={styles.summary}>
-                    <h3 className="text-header-1">{props.title}</h3>
+                    <h3 className="text-header-1" data-section-state={props.expanded ? 'opened' : 'closed'}>{props.title}</h3>
                     <ChevronUp className={classNames(styles.expandArrow, {[styles['expand-arrow--expanded']]: props.expanded})}/>
                 </Flex>;
             }}
diff --git a/lib/static/new-ui/features/suites/components/ScreenshotsTreeViewItem/index.tsx b/lib/static/new-ui/features/suites/components/ScreenshotsTreeViewItem/index.tsx
@@ -142,14 +142,15 @@ export function ScreenshotsTreeViewItem(props: ScreenshotsTreeViewItemProps): Re
                         <AssertViewStatus image={props.image}/>
                     )}
                     {isDiffModeSwitcherVisible && (
-                        <div className={styles.diffModeContainer}>
+                        <div className={styles.diffModeContainer} data-qa="suites-diff-mode-container">
                             <RadioButton onUpdate={onDiffModeChangeHandler} value={diffMode} className={styles.diffModeSwitcher}>
                                 {getAvailableDiffModes(Page.suitesPage).map(diffMode =>
                                     <RadioButton.Option value={diffMode.id} content={diffMode.title} title={diffMode.description} key={diffMode.id}/>
                                 )}
                             </RadioButton>
                             <Select
                                 className={styles.diffModeSelect}
+                                qa="suites-diff-mode-select"
                                 label={<Icon data={ArrowRightArrowLeft}/> as unknown as string} value={[diffMode]}
                                 onUpdate={([diffMode]): void => onDiffModeChangeHandler(diffMode as DiffModeId)}
                                 multiple={false}
diff --git a/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/VisualChecksStickyHeader.tsx b/lib/static/new-ui/features/visual-checks/components/VisualChecksPage/VisualChecksStickyHeader.tsx
@@ -228,7 +228,7 @@ export function VisualChecksStickyHeader({currentNamedImage, treeData, onImageCh
                 <AssertViewStatus image={currentImage}/>
                 <Divider orientation={'vertical'}/>
                 <Flex gap={2}>
-                    <Select className={styles.diffModeSelect} label={<Icon data={ArrowRightArrowLeft}/> as unknown as string} value={[diffMode]} onUpdate={([diffMode]): void => onChangeHandler(diffMode as DiffModeId)} multiple={false}>
+                    <Select className={styles.diffModeSelect} qa="visual-checks-diff-mode-select" label={<Icon data={ArrowRightArrowLeft}/> as unknown as string} value={[diffMode]} onUpdate={([diffMode]): void => onChangeHandler(diffMode as DiffModeId)} multiple={false}>
                         {getAvailableDiffModes(Page.visualChecksPage).map(diffMode =>
                             <Select.Option value={diffMode.id} content={diffMode.title} title={diffMode.description} key={diffMode.id}/>
                         )}
diff --git a/test/func/common.testplane.conf.js b/test/func/common.testplane.conf.js
@@ -4,6 +4,7 @@ const {GRID_URL, CHROME_BINARY_PATH} = require('./utils/constants');
 
 module.exports.getCommonConfig = (projectDir) => ({
     gridUrl: GRID_URL,
+    testsPerSession: 1,
 
     screenshotsDir: path.resolve(projectDir, 'screens'),
 
diff --git a/test/func/fixtures/testplane/.testplane.conf.js b/test/func/fixtures/testplane/.testplane.conf.js
@@ -9,6 +9,25 @@ module.exports = _.merge(getFixturesConfig(__dirname, 'testplane'), {
         'hermione-test-repeater': {
             enabled: true,
             repeat: 1
-        }
+        },
+        'html-reporter-tester': {
+                enabled: true,
+                path: 'report',
+                diffMode: '3-up-scaled-to-fit',
+                generateBadges: () => [
+                    {
+                        title: 'TASK-128',
+                        icon: 'LogoYandexTracker'
+                    },
+                    {
+                        title: 'master',
+                        icon: 'BranchesRight'
+                    },
+                    null,
+                    {
+                        icon: 'BranchesRight'
+                    }
+                ]
+            }
     }
 });
diff --git a/test/func/tests/common/new-ui/diff-mode.testplane.js b/test/func/tests/common/new-ui/diff-mode.testplane.js
@@ -0,0 +1,89 @@
+if (process.env.TOOL === 'testplane') {
+    describe(process.env.TOOL || 'Default', () => {
+        describe('New UI', () => {
+            describe('Diff mode', () => {
+                const navigateToFailedTest = async (browser) => {
+                    const testElement = await browser.$('[data-list-item="failed describe/test with image comparison diff/chrome"]');
+                    await testElement.click();
+                };
+
+                const navigateToVisualChecks = async (browser) => {
+                    const menuItem = await browser.$('[data-qa="visual-checks-page-menu-item"]');
+                    await menuItem.click();
+                };
+
+                const selectDiffModeOption = async (browser, selectQa, optionText) => {
+                    const select = await browser.$(`[data-qa="${selectQa}"]`);
+                    await select.waitForDisplayed();
+                    await select.click();
+
+                    const option = await browser.$(`//*[@role="option"][normalize-space()="${optionText}"]`);
+                    await option.click();
+                };
+
+                const getSelectText = async (browser, selectQa) => {
+                    const select = await browser.$(`[data-qa="${selectQa}"]`);
+                    await select.waitForDisplayed();
+                    return select.getText();
+                };
+
+                describe('Suites page', () => {
+                    it('should use config value as default diff mode', async ({browser}) => {
+                        await navigateToFailedTest(browser);
+
+                        const selectText = await getSelectText(browser, 'suites-diff-mode-select');
+                        expect(selectText).toContain('SbS (fit screen)');
+                    });
+
+                    it('should preserve diff mode after page refresh', async ({browser}) => {
+                        await navigateToFailedTest(browser);
+
+                        await selectDiffModeOption(browser, 'suites-diff-mode-select', 'Switch');
+
+                        const selectTextBefore = await getSelectText(browser, 'suites-diff-mode-select');
+                        expect(selectTextBefore).toContain('Switch');
+
+                        await browser.refresh();
+                        await navigateToFailedTest(browser);
+
+                        const selectTextAfter = await getSelectText(browser, 'suites-diff-mode-select');
+                        expect(selectTextAfter).toContain('Switch');
+                    });
+                });
+
+                describe('Visual checks page', () => {
+                    it('should default to 2-up interactive', async ({browser}) => {
+                        await navigateToVisualChecks(browser);
+
+                        const selectText = await getSelectText(browser, 'visual-checks-diff-mode-select');
+                        expect(selectText).toContain('2-up Interactive');
+                    });
+
+                    it('should preserve diff mode after page refresh', async ({browser}) => {
+                        await navigateToVisualChecks(browser);
+
+                        await selectDiffModeOption(browser, 'visual-checks-diff-mode-select', 'Swipe');
+
+                        const selectTextBefore = await getSelectText(browser, 'visual-checks-diff-mode-select');
+                        expect(selectTextBefore).toContain('Swipe');
+
+                        await browser.refresh();
+
+                        const selectTextAfter = await getSelectText(browser, 'visual-checks-diff-mode-select');
+                        expect(selectTextAfter).toContain('Swipe');
+                    });
+
+                    it('should have diff mode independent from suites page', async ({browser}) => {
+                        await navigateToFailedTest(browser);
+                        await selectDiffModeOption(browser, 'suites-diff-mode-select', 'Switch');
+
+                        await navigateToVisualChecks(browser);
+
+                        const selectText = await getSelectText(browser, 'visual-checks-diff-mode-select');
+                        expect(selectText).toContain('2-up Interactive');
+                    });
+                });
+            });
+        });
+    });
+}
diff --git a/test/func/tests/common/new-ui/suites-page/collapsible-sections.testplane.js b/test/func/tests/common/new-ui/suites-page/collapsible-sections.testplane.js
@@ -0,0 +1,63 @@
+if (process.env.TOOL === 'testplane') {
+    describe(process.env.TOOL || 'Default', () => {
+        describe('New UI', () => {
+            describe('Suites page', () => {
+                describe('Collapsible sections state', () => {
+                    const navigateToFailedTest = async (browser) => {
+                        const testElement = await browser.$('[data-list-item="failed describe/test with image comparison diff/chrome"]');
+                        await testElement.click();
+                    };
+
+                    const getSectionTitleElement = async (browser, sectionTitle) => {
+                        const title = await browser.$(`h3*=${sectionTitle}`);
+                        await title.waitForDisplayed({timeout: 10000});
+
+                        return title;
+                    };
+
+                    const getSectionState = async (browser, sectionTitle) => {
+                        const title = await getSectionTitleElement(browser, sectionTitle);
+                        return title.getAttribute('data-section-state');
+                    };
+
+                    const toggleSection = async (browser, sectionTitle) => {
+                        const title = await getSectionTitleElement(browser, sectionTitle);
+                        await title.click();
+                    };
+
+                    const waitForSectionStateChange = async (browser, sectionTitle, initialState) => {
+                        await browser.waitUntil(async () => {
+                            const currentState = await getSectionState(browser, sectionTitle);
+
+                            return currentState !== initialState;
+                        }, {
+                            timeout: 3000,
+                            timeoutMsg: `Section "${sectionTitle}" state did not change`
+                        });
+                    };
+
+                    ['Actions', 'Metadata'].forEach((sectionTitle) => {
+                        it(`should preserve ${sectionTitle} section state after page refresh`, async ({browser}) => {
+                            await navigateToFailedTest(browser);
+
+                            const initialState = await getSectionState(browser, sectionTitle);
+
+                            await toggleSection(browser, sectionTitle);
+                            await waitForSectionStateChange(browser, sectionTitle, initialState);
+
+                            const stateAfterToggle = await getSectionState(browser, sectionTitle);
+                            expect(stateAfterToggle).toBe('closed');
+
+                            await browser.refresh();
+                            await navigateToFailedTest(browser);
+
+                            const stateAfterRefresh = await getSectionState(browser, sectionTitle);
+
+                            expect(stateAfterRefresh).toBe(stateAfterToggle);
+                        });
+                    });
+                });
+            });
+        });
+    });
+}
diff --git a/test/unit/lib/static/modules/middlewares/local-storage.js b/test/unit/lib/static/modules/middlewares/local-storage.js
@@ -2,7 +2,6 @@ const proxyquire = require('proxyquire');
 const actionNames = require('lib/static/modules/action-names').default;
 const defaultState = require('lib/static/modules/default-state').default;
 const {ViewMode} = require('lib/constants/view-modes');
-const {DiffModes} = require('lib/constants/diff-modes');
 const {EXPAND_ERRORS} = require('lib/constants/expand-modes');
 const {mkStatePageFilters} = require('../../state-utils');
 
@@ -64,7 +63,6 @@ describe('lib/static/modules/middlewares/local-storage', () => {
 
                 assert.calledWith(localStorageWrapper.setItem, 'view', {
                     expand: EXPAND_ERRORS,
-                    diffMode: DiffModes.THREE_UP.id,
                     strictMatchFilter: false
                 });
 

Original file line number	Diff line number	Diff line change
`@@ -50,6 +50,5 @@ export function getItem(key, defaultValue) {`
`50`	`50`	`* @returns {boolean}`
`51`	`51`	`*/`
`52`	`52`	`export function hasItem(key) {`
`53`		`- // eslint-disable-next-line no-prototype-builtins`
`54`		`- return window.localStorage.hasOwnProperty(_getStorageKey(key));`
	`53`	`+ return window.localStorage.getItem(_getStorageKey(key)) !== null;`
`55`	`54`	`}`