chore: re-write view-modes and diff-modes to typescript

.mocharc.js

@@ -1,6 +1,7 @@
 "use strict";
 
 module.exports = {
+    extension: ["js", "jsx", "ts", "tsx"],
     recursive: true,
     require: ["./test/ts-node", "./test/setup", "./test/assert-ext", "jsdom-global/register"],
 };

lib/config/index.js

@@ -6,7 +6,7 @@ const chalk = require('chalk');
 
 const {logger} = require('../common-utils');
 const {config: configDefaults} = require('../constants/defaults');
-const diffModes = require('../constants/diff-modes');
+const {DiffModes} = require('../constants/diff-modes');
 const saveFormats = require('../constants/save-formats');
 const {assertCustomGui} = require('./custom-gui-asserts');
 
@@ -120,7 +120,7 @@ const assertDiffMode = (diffMode) => {
         throw new Error(`"diffMode" option must be a string, but got ${typeof diffMode}`);
     }
 
-    const availableValues = Object.values(diffModes).map(v => v.id);
+    const availableValues = Object.values(DiffModes).map(v => v.id);
 
     if (!availableValues.includes(diffMode)) {
         throw new Error(`"diffMode" must be one of "${availableValues.join('", "')}", but got "${diffMode}"`);

lib/constants/defaults.js

@@ -1,15 +1,15 @@
 'use strict';
 
-const diffModes = require('./diff-modes');
-const viewModes = require('./view-modes');
+const {DiffModes} = require('./diff-modes');
+const {ViewMode} = require('./view-modes');
 
 module.exports = {
     CIRCLE_RADIUS: 150,
     config: {
         saveErrorDetails: false,
         commandsWithShortHistory: [],
-        defaultView: viewModes.ALL,
-        diffMode: diffModes.THREE_UP.id,
+        defaultView: ViewMode.ALL,
+        diffMode: DiffModes.THREE_UP.id,
         baseHost: '',
         lazyLoadOffset: null,
         errorPatterns: [],

lib/constants/diff-modes.ts

@@ -1,4 +1,6 @@
-module.exports = {
+import {ValueOf} from 'type-fest';
+
+export const DiffModes = {
     THREE_UP: {
         id: '3-up',
         title: '3-up',
@@ -34,4 +36,8 @@ module.exports = {
         title: 'Onion skin',
         description: 'move slider'
     }
-};
+} as const;
+
+export type DiffModes = typeof DiffModes;
+
+export type DiffMode = ValueOf<DiffModes>;

lib/constants/index.ts

@@ -1 +1,3 @@
+export * from './diff-modes';
 export * from './test-statuses';
+export * from './view-modes';

lib/constants/view-modes.ts

@@ -1,9 +1,7 @@
-'use strict';
-
-module.exports = {
-    ALL: 'all',
-    PASSED: 'passed',
-    FAILED: 'failed',
-    RETRIED: 'retried',
-    SKIPPED: 'skipped'
-};
+export enum ViewMode {
+    ALL = 'all',
+    PASSED = 'passed',
+    FAILED = 'failed',
+    RETRIED = 'retried',
+    SKIPPED = 'skipped',
+}

lib/static/components/controls/common-controls.jsx

@@ -9,8 +9,8 @@ import GroupTestsSelect from './selects/group-tests';
 import BaseHostInput from './base-host-input';
 import MenuBar from './menu-bar';
 import ReportInfo from './report-info';
-import viewModes from '../../../constants/view-modes';
-import diffModes from '../../../constants/diff-modes';
+import {ViewMode} from '../../../constants/view-modes';
+import {DiffModes} from '../../../constants/diff-modes';
 import {EXPAND_ALL, COLLAPSE_ALL, EXPAND_ERRORS, EXPAND_RETRIES} from '../../../constants/expand-modes';
 
 class ControlButtons extends Component {
@@ -23,7 +23,7 @@ class ControlButtons extends Component {
                     label="Show tests"
                     value={view.viewMode}
                     handler={actions.changeViewMode}
-                    options = {Object.values(viewModes).map((value) => ({value, text: capitalize(value)}))}
+                    options = {Object.values(ViewMode).map((value) => ({value, text: capitalize(value)}))}
                 />
                 <div className="control-group">
                     <ControlButton
@@ -56,7 +56,7 @@ class ControlButtons extends Component {
                     label="Diff mode"
                     value={view.diffMode}
                     handler={actions.changeDiffMode}
-                    options = {Object.values(diffModes).map((dm) => {
+                    options = {Object.values(DiffModes).map((dm) => {
                         return {value: dm.id, text: dm.title};
                     })}
                     extendClassNames="diff-mode"

lib/static/components/modals/screenshot-accepter/header.jsx

@@ -9,7 +9,7 @@ import ArrowsClose from '../../icons/arrows-close';
 import ControlButton from '../../controls/control-button';
 import ControlSelect from '../../controls/selects/control';
 import RetrySwitcher from '../../retry-switcher';
-import diffModes from '../../../../constants/diff-modes';
+import {DiffModes} from '../../../../constants/diff-modes';
 
 export default class ScreenshotAccepterHeader extends Component {
     static propTypes = {
@@ -165,7 +165,7 @@ export default class ScreenshotAccepterHeader extends Component {
                             label="Diff mode"
                             value={view.diffMode}
                             handler={actions.changeDiffMode}
-                            options = {Object.values(diffModes).map((dm) => {
+                            options = {Object.values(DiffModes).map((dm) => {
                                 return {value: dm.id, text: dm.title};
                             })}
                             extendClassNames="screenshot-accepter__diff-mode-select"

lib/static/components/section/title/browser.jsx

@@ -6,7 +6,7 @@ import {bindActionCreators} from 'redux';
 import {get} from 'lodash';
 import * as actions from '../../../modules/actions';
 import {appendQuery} from '../../../modules/query-params';
-import viewModes from '../../../../constants/view-modes';
+import {ViewMode} from '../../../../constants/view-modes';
 import {EXPAND_ALL} from '../../../../constants/expand-modes';
 import {getToggledCheckboxState} from '../../../../common-utils';
 import ViewInBrowserIcon from '../../icons/view-in-browser';
@@ -19,7 +19,7 @@ const BrowserTitle = (props) => {
             testNameFilter: props.testName,
             strictMatchFilter: true,
             retryIndex: props.retryIndex,
-            viewModes: viewModes.ALL,
+            viewModes: ViewMode.ALL,
             expand: EXPAND_ALL
         });
     };

lib/static/components/state/state-fail/index.jsx

@@ -8,7 +8,7 @@ import ResizedScreenshot from '../screenshot/resized';
 import SwipeDiff from './swipe-diff';
 import SwitchDiff from './switch-diff';
 import OnionSkinDiff from './onion-skin-diff';
-import diffModes from '../../../../constants/diff-modes';
+import {DiffModes} from '../../../../constants/diff-modes';
 import {types} from '../../modals';
 import useFitImages from './useFitImages';
 
@@ -41,7 +41,7 @@ const StateFail = ({image, diffMode: diffModeProp, isScreenshotAccepterOpened})
     };
 
     const renderDiffModeItems = () => {
-        const diffModeItems = Object.values(diffModes).map(renderDiffModeItem);
+        const diffModeItems = Object.values(DiffModes).map(renderDiffModeItem);
 
         return (
             <ul className="diff-modes">
@@ -103,29 +103,29 @@ const StateFail = ({image, diffMode: diffModeProp, isScreenshotAccepterOpened})
         const {expectedImg, actualImg} = image;
 
         switch (diffMode) {
-            case diffModes.ONLY_DIFF.id:
+            case DiffModes.ONLY_DIFF.id:
                 return renderOnlyDiff();
 
-            case diffModes.SWITCH.id:
+            case DiffModes.SWITCH.id:
                 return <SwitchDiff image1={expectedImg} image2={actualImg} />;
 
-            case diffModes.SWIPE.id:
+            case DiffModes.SWIPE.id:
                 return <SwipeDiff image1={expectedImg} image2={actualImg} />;
 
-            case diffModes.ONION_SKIN.id:
+            case DiffModes.ONION_SKIN.id:
                 return <OnionSkinDiff image1={expectedImg} image2={actualImg} />;
 
-            case diffModes.THREE_UP_SCALED.id:
+            case DiffModes.THREE_UP_SCALED.id:
                 return <div className="image-box__scaled">
                     {renderThreeImages()}
                 </div>;
 
-            case diffModes.THREE_UP_SCALED_TO_FIT.id:
+            case DiffModes.THREE_UP_SCALED_TO_FIT.id:
                 return <div className="image-box__scaled">
                     {renderThreeImages(fitWidths)}
                 </div>;
 
-            case diffModes.THREE_UP.id:
+            case DiffModes.THREE_UP.id:
             default:
                 return renderThreeImages();
         }

lib/static/components/suites.jsx

@@ -8,7 +8,7 @@ import {bindActionCreators} from 'redux';
 
 import * as actions from '../modules/actions';
 import SectionCommon from './section/section-common';
-import viewModes from '../../constants/view-modes';
+import {ViewMode} from '../../constants/view-modes';
 import {getVisibleRootSuiteIds} from '../modules/selectors/tree';
 
 class Suites extends Component {
@@ -89,7 +89,7 @@ class Suites extends Component {
             msgs.push(`test name should match to "${testNameFilter}" ${strictMatchFilter ? '' : 'not '}strictly;`);
         }
 
-        if (viewMode !== viewModes.ALL) {
+        if (viewMode !== ViewMode.ALL) {
             msgs.push(`test should be ${viewMode} due to selected view mode;`);
         }
 

lib/static/modules/actions.js

@@ -5,7 +5,7 @@ import StaticTestsTreeBuilder from '../../tests-tree-builder/static';
 import actionNames from './action-names';
 import {types as modalTypes} from '../components/modals';
 import {QUEUED} from '../../constants/test-statuses';
-import diffModes from '../../constants/diff-modes';
+import {DiffModes} from '../../constants/diff-modes';
 import {getHttpErrorMessage} from './utils';
 import {fetchDataFromDatabases, mergeDatabases, connectToDatabase, getMainDatabaseUrl, getSuitesTableRows} from '../../db-utils/client';
 import {setFilteredBrowsers} from './query-params';
@@ -263,25 +263,25 @@ export const setStrictMatchFilter = (strictMatchFilter) => {
 
 export function changeDiffMode(mode) {
     switch (mode) {
-        case diffModes.ONLY_DIFF.id:
+        case DiffModes.ONLY_DIFF.id:
             return {type: actionNames.VIEW_ONLY_DIFF};
 
-        case diffModes.SWITCH.id:
+        case DiffModes.SWITCH.id:
             return {type: actionNames.VIEW_SWITCH_DIFF};
 
-        case diffModes.SWIPE.id:
+        case DiffModes.SWIPE.id:
             return {type: actionNames.VIEW_SWIPE_DIFF};
 
-        case diffModes.ONION_SKIN.id:
+        case DiffModes.ONION_SKIN.id:
             return {type: actionNames.VIEW_ONION_SKIN_DIFF};
 
-        case diffModes.THREE_UP_SCALED.id:
+        case DiffModes.THREE_UP_SCALED.id:
             return {type: actionNames.VIEW_THREE_UP_SCALED_DIFF};
 
-        case diffModes.THREE_UP_SCALED_TO_FIT.id:
+        case DiffModes.THREE_UP_SCALED_TO_FIT.id:
             return {type: actionNames.VIEW_THREE_UP_SCALED_TO_FIT_DIFF};
 
-        case diffModes.THREE_UP.id:
+        case DiffModes.THREE_UP.id:
         default:
             return {type: actionNames.VIEW_THREE_UP_DIFF};
     }

lib/static/modules/custom-queries.js

@@ -2,10 +2,10 @@
 
 import {parseQuery, decodeBrowsers} from './query-params';
 import {pick, has} from 'lodash';
-import viewModes from '../../constants/view-modes';
+import {ViewMode} from '../../constants/view-modes';
 import {config} from '../../constants/defaults';
 
-const allowedViewModes = new Set(Object.values(viewModes));
+const allowedViewModes = new Set(Object.values(ViewMode));
 
 export function getViewQuery(queryString) {
     const query = parseQuery(queryString, {browser: 'filteredBrowsers'});

lib/static/modules/default-state.js

@@ -1,8 +1,8 @@
 'use strict';
 
 const defaults = require('../../constants/defaults');
-const viewModes = require('../../constants/view-modes');
-const diffModes = require('../../constants/diff-modes');
+const {ViewMode} = require('../../constants/view-modes');
+const {DiffModes} = require('../../constants/diff-modes');
 const {EXPAND_ERRORS} = require('../../constants/expand-modes');
 const {RESULT_KEYS} = require('../../constants/group-tests');
 
@@ -66,8 +66,8 @@ export default Object.assign(defaults, {
         perBrowser: {}
     },
     view: {
-        viewMode: viewModes.ALL,
-        diffMode: diffModes.THREE_UP.id,
+        viewMode: ViewMode.ALL,
+        diffMode: DiffModes.THREE_UP.id,
         expand: EXPAND_ERRORS,
         baseHost: '',
         testNameFilter: '',

lib/static/modules/reducers/grouped-tests/helpers.js

@@ -1,14 +1,14 @@
 import {isFunction, isString, isObject, isNull, isUndefined, toString} from 'lodash';
 import {getFailedSuiteResults} from '../../selectors/tree';
 import {isTestNameMatchFilters, shouldShowBrowser} from '../../utils';
-import viewModes from '../../../../constants/view-modes';
+import {ViewMode} from '../../../../constants/view-modes';
 
-export function handleActiveResults({tree = {}, viewMode = viewModes.ALL, filteredBrowsers = [], testNameFilter = '', strictMatchFilter = false, resultCb}) {
+export function handleActiveResults({tree = {}, viewMode = ViewMode.ALL, filteredBrowsers = [], testNameFilter = '', strictMatchFilter = false, resultCb}) {
     if (!isFunction(resultCb)) {
         throw new Error(`"resultCb" argument must be a function, but got ${typeof resultCb}`);
     }
 
-    const results = viewMode === viewModes.FAILED ? getFailedSuiteResults(tree) : Object.values(tree.results.byId);
+    const results = viewMode === ViewMode.FAILED ? getFailedSuiteResults(tree) : Object.values(tree.results.byId);
 
     for (const result of results) {
         const browser = tree.browsers.byId[result.parentId];

lib/static/modules/reducers/tree/index.js

@@ -13,7 +13,7 @@ import {initResultsState, changeAllResultsState, changeResultState, addResult, r
 import {
     initImagesState, changeAllImagesState, changeImageState, addImages, calcImagesOpenness
 } from './nodes/images';
-import viewModes from '../../../../constants/view-modes';
+import {ViewMode} from '../../../../constants/view-modes';
 import {EXPAND_RETRIES} from '../../../../constants/expand-modes';
 import {FAIL} from '../../../../constants/test-statuses';
 import {isSuccessStatus} from '../../../../common-utils';
@@ -353,7 +353,7 @@ function addNodesToTree(state, payload) {
         calcBrowsersOpenness(tree, view.expand, browserId);
         calcImagesOpenness(tree, view.expand, imageIds);
 
-        if (view.viewMode === viewModes.FAILED) {
+        if (view.viewMode === ViewMode.FAILED) {
             calcBrowsersShowness(tree, view, browserId);
             calcSuitesShowness(tree, youngestSuiteId);
         }

lib/static/modules/reducers/view.js

@@ -3,7 +3,7 @@ import {isEmpty} from 'lodash';
 import {getViewQuery} from '../custom-queries';
 import * as localStorageWrapper from '../local-storage-wrapper';
 import actionNames from '../action-names';
-import diffModes from '../../../constants/diff-modes';
+import {DiffModes} from '../../../constants/diff-modes';
 import {EXPAND_ALL, COLLAPSE_ALL, EXPAND_ERRORS, EXPAND_RETRIES} from '../../../constants/expand-modes';
 
 export default (state, action) => {
@@ -56,25 +56,25 @@ export default (state, action) => {
             return {...state, view: {...state.view, filteredBrowsers: action.payload.browsers}};
 
         case actionNames.VIEW_THREE_UP_DIFF:
-            return {...state, view: {...state.view, diffMode: diffModes.THREE_UP.id}};
+            return {...state, view: {...state.view, diffMode: DiffModes.THREE_UP.id}};
 
         case actionNames.VIEW_THREE_UP_SCALED_DIFF:
-            return {...state, view: {...state.view, diffMode: diffModes.THREE_UP_SCALED.id}};
+            return {...state, view: {...state.view, diffMode: DiffModes.THREE_UP_SCALED.id}};
 
         case actionNames.VIEW_THREE_UP_SCALED_TO_FIT_DIFF:
-            return {...state, view: {...state.view, diffMode: diffModes.THREE_UP_SCALED_TO_FIT.id}};
+            return {...state, view: {...state.view, diffMode: DiffModes.THREE_UP_SCALED_TO_FIT.id}};
 
         case actionNames.VIEW_ONLY_DIFF:
-            return {...state, view: {...state.view, diffMode: diffModes.ONLY_DIFF.id}};
+            return {...state, view: {...state.view, diffMode: DiffModes.ONLY_DIFF.id}};
 
         case actionNames.VIEW_SWITCH_DIFF:
-            return {...state, view: {...state.view, diffMode: diffModes.SWITCH.id}};
+            return {...state, view: {...state.view, diffMode: DiffModes.SWITCH.id}};
 
         case actionNames.VIEW_SWIPE_DIFF:
-            return {...state, view: {...state.view, diffMode: diffModes.SWIPE.id}};
+            return {...state, view: {...state.view, diffMode: DiffModes.SWIPE.id}};
 
         case actionNames.VIEW_ONION_SKIN_DIFF:
-            return {...state, view: {...state.view, diffMode: diffModes.ONION_SKIN.id}};
+            return {...state, view: {...state.view, diffMode: DiffModes.ONION_SKIN.id}};
 
         default:
             return state;

lib/static/modules/selectors/tree.js

@@ -1,7 +1,7 @@
 import {last, identity, flatMap, compact, findLast} from 'lodash';
 import {createSelector} from 'reselect';
 import {getViewMode} from './view';
-import viewModes from '../../../constants/view-modes';
+import {ViewMode} from '../../../constants/view-modes';
 import {isIdleStatus} from '../../../common-utils';
 import {isNodeFailed, isNodeSuccessful, isAcceptable, iterateSuites} from '../utils';
 
@@ -17,7 +17,7 @@ const getAllRootSuiteIds = (state) => state.tree.suites.allRootIds;
 const getFailedRootSuiteIds = (state) => state.tree.suites.failedRootIds;
 const getRootSuiteIds = (state) => {
     const viewMode = getViewMode(state);
-    return viewMode === viewModes.FAILED ? state.tree.suites.failedRootIds : state.tree.suites.allRootIds;
+    return viewMode === ViewMode.FAILED ? state.tree.suites.failedRootIds : state.tree.suites.allRootIds;
 };
 
 const getSuiteById = (state, {suiteId}) => state.tree.suites.byId[suiteId];