feat: strict match filter

lib/static/components/controls/common-filters.js

@@ -2,12 +2,14 @@
 
 import React, {Component} from 'react';
 import TestNameFilterInput from './test-name-filter-input';
+import StrictMatchFilterInput from './strict-match-filter-input';
 
 class CommonFilters extends Component {
     render() {
         return (
             <div className="control-filters">
                 <TestNameFilterInput/>
+                <StrictMatchFilterInput/>
             </div>
         );
     }

lib/static/components/controls/strict-match-filter-input.js

@@ -0,0 +1,50 @@
+'use strict';
+
+import React, {Component, Fragment} from 'react';
+import PropTypes from 'prop-types';
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
+import * as actions from '../../modules/actions';
+
+class StrictMatchFilterInput extends Component {
+    static propTypes = {
+        strictMatchFilter: PropTypes.bool.isRequired,
+        actions: PropTypes.object.isRequired
+    }
+
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            strictMatchFilter: this.props.strictMatchFilter
+        };
+
+        this._onChange = (event) => {
+            this.setState({strictMatchFilter: event.target.checked});
+            this.props.actions.setStrictMatchFilter(event.target.checked);
+        };
+    }
+
+    render() {
+        return (
+            <Fragment>
+                <input
+                    type="checkbox"
+                    id="strictMatchFilter"
+                    onChange={this._onChange}
+                    checked={this.state.strictMatchFilter}
+                />
+                <label
+                    className="checkbox-label"
+                    htmlFor="strictMatchFilter">
+                    Strict match
+                </label>
+            </Fragment>
+        );
+    }
+}
+
+export default connect(
+    (state) => ({strictMatchFilter: state.view.strictMatchFilter}),
+    (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
+)(StrictMatchFilterInput);

lib/static/components/section/section-common.js

@@ -20,6 +20,7 @@ class SectionCommon extends Component {
             children: PropTypes.array
         }),
         testNameFilter: PropTypes.string,
+        strictMatchFilter: PropTypes.bool,
         filteredBrowsers: PropTypes.array,
         errorGroupTests: PropTypes.object,
         shouldBeOpened: PropTypes.func,
@@ -56,7 +57,7 @@ class SectionCommon extends Component {
     }
 
     render() {
-        const {suite, testNameFilter, filteredBrowsers, sectionStatusResolver, errorGroupTests} = this.props;
+        const {suite, testNameFilter, strictMatchFilter, filteredBrowsers, sectionStatusResolver, errorGroupTests} = this.props;
         const {opened} = this.state;
         const {
             name,
@@ -75,11 +76,11 @@ class SectionCommon extends Component {
             );
         }
 
-        const visibleChildren = children.filter(child => shouldSuiteBeShown({suite: child, testNameFilter, filteredBrowsers, errorGroupTests}));
+        const visibleChildren = children.filter(child => shouldSuiteBeShown({suite: child, testNameFilter, strictMatchFilter, filteredBrowsers, errorGroupTests}));
         const childrenTmpl = visibleChildren.map((child) => {
             const key = uniqueId(`${suite.suitePath}-${child.name}`);
 
-            return <SectionCommonWrapper key={key} suite={child} testNameFilter={testNameFilter} filteredBrowsers={filteredBrowsers} errorGroupTests={errorGroupTests} />;
+            return <SectionCommonWrapper key={key} suite={child} testNameFilter={testNameFilter} strictMatchFilter={strictMatchFilter} filteredBrowsers={filteredBrowsers} errorGroupTests={errorGroupTests} />;
         });
 
         const browserTmpl = browsers

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

@@ -51,6 +51,7 @@ class BrowserTitle extends Component {
         return appendQuery(window.location.href, {
             browser: browser.name,
             testNameFilter: suite.suitePath.join(' '),
+            strictMatchFilter: true,
             retryIndex: browser.state.retryIndex,
             viewMode: 'all',
             expand: 'all',

lib/static/components/suites.js

@@ -17,10 +17,10 @@ class Suites extends Component {
     }
 
     render() {
-        const {suites, suiteIds, testNameFilter, filteredBrowsers, lazyLoadOffset, errorGroupTests} = this.props;
+        const {suites, suiteIds, testNameFilter, strictMatchFilter, filteredBrowsers, lazyLoadOffset, errorGroupTests} = this.props;
 
         const visibleSuiteIds = suiteIds.filter(id =>
-            shouldSuiteBeShown({suite: suites[id], testNameFilter, filteredBrowsers, errorGroupTests})
+            shouldSuiteBeShown({suite: suites[id], testNameFilter, strictMatchFilter, filteredBrowsers, errorGroupTests})
         );
 
         return (
@@ -30,6 +30,7 @@ class Suites extends Component {
                         key: suiteId,
                         suite: suites[suiteId],
                         testNameFilter,
+                        strictMatchFilter,
                         filteredBrowsers,
                         errorGroupTests
                     };
@@ -51,12 +52,13 @@ class Suites extends Component {
 
 export default connect(
     (state) => {
-        const {testNameFilter, filteredBrowsers, lazyLoadOffset} = state.view;
+        const {testNameFilter, strictMatchFilter, filteredBrowsers, lazyLoadOffset} = state.view;
 
         return ({
             suiteIds: state.suiteIds[state.view.viewMode],
             testNameFilter,
             filteredBrowsers,
+            strictMatchFilter,
             lazyLoadOffset,
             suites: state.suites
         });

lib/static/modules/action-names.js

@@ -28,6 +28,7 @@ export default {
     VIEW_TOGGLE_ONLY_DIFF: 'VIEW_TOGGLE_ONLY_DIFF',
     VIEW_UPDATE_BASE_HOST: 'VIEW_UPDATE_BASE_HOST',
     VIEW_UPDATE_FILTER_BY_NAME: 'VIEW_UPDATE_FILTER_BY_NAME',
+    VIEW_SET_STRICT_MATCH_FILTER: 'VIEW_SET_STRICT_MATCH_FILTER',
     VIEW_TOGGLE_GROUP_BY_ERROR: 'VIEW_TOGGLE_GROUP_BY_ERROR',
     VIEW_TOGGLE_SCALE_IMAGES: 'VIEW_TOGGLE_SCALE_IMAGES',
     VIEW_TOGGLE_LAZY_LOAD_IMAGES: 'VIEW_TOGGLE_LAZY_LOAD_IMAGES',

lib/static/modules/actions.js

@@ -158,6 +158,10 @@ export const updateTestNameFilter = (testNameFilter) => {
     return triggerViewChanges({type: actionNames.VIEW_UPDATE_FILTER_BY_NAME, testNameFilter});
 };
 
+export const setStrictMatchFilter = (strictMatchFilter) => {
+    return triggerViewChanges({type: actionNames.VIEW_SET_STRICT_MATCH_FILTER, strictMatchFilter});
+};
+
 export function changeViewMode(mode) {
     window.dispatchEvent(new Event(VIEW_CHANGED));
 

lib/static/modules/custom-queries.js

@@ -19,6 +19,7 @@ export function getViewQuery(queryString) {
     return pick(query, [
         'filteredBrowsers',
         'testNameFilter',
+        'strictMatchFilter',
         'retryIndex',
         'viewMode',
         'expand',

lib/static/modules/default-state.js

@@ -38,6 +38,7 @@ export default Object.assign(defaults, {
         scaleImages: false,
         baseHost: '',
         testNameFilter: '',
+        strictMatchFilter: false,
         filteredBrowsers: [],
         groupByError: false
     },

lib/static/modules/group-errors.js

@@ -1,7 +1,7 @@
 'use strict';
 
 import {get, filter} from 'lodash';
-import {isSuiteFailed} from './utils';
+import {isSuiteFailed, isTestNameMatchFilters} from './utils';
 import {isFailStatus, isErroredStatus} from '../../common-utils';
 
 const imageComparisonErrorMessage = 'image comparison failed';
@@ -12,14 +12,15 @@ const imageComparisonErrorMessage = 'image comparison failed';
  * @param {array} errorPatterns
  * @param {array} filteredBrowsers
  * @param {string} [testNameFilter]
+ * @param {boolean} [strictMatchFilter]
  * @return {array}
  */
-function groupErrors({suites = {}, viewMode = 'all', errorPatterns = [], filteredBrowsers = [], testNameFilter = ''}) {
+function groupErrors({suites = {}, viewMode = 'all', errorPatterns = [], filteredBrowsers = [], testNameFilter = '', strictMatchFilter = false}) {
     const showOnlyFailed = viewMode !== 'all';
     const filteredSuites = showOnlyFailed ? filter(suites, isSuiteFailed) : suites;
     const testWithErrors = extractErrors(filteredSuites, showOnlyFailed);
 
-    const errorGroupsList = getErrorGroupList(testWithErrors, errorPatterns, filteredBrowsers, testNameFilter);
+    const errorGroupsList = getErrorGroupList(testWithErrors, errorPatterns, filteredBrowsers, testNameFilter, strictMatchFilter);
 
     errorGroupsList.sort((a, b) => {
         const result = b.count - a.count;
@@ -83,12 +84,12 @@ function extractErrorsFromRetries(retries) {
     return [...errorsInRetry];
 }
 
-function getErrorGroupList(testWithErrors, errorPatterns, filteredBrowsers, testNameFilter) {
+function getErrorGroupList(testWithErrors, errorPatterns, filteredBrowsers, testNameFilter, strictMatchFilter) {
     const errorGroups = {};
     const errorPatternsWithRegExp = addRegExpToErrorPatterns(errorPatterns);
 
     for (const [testName, browsers] of Object.entries(testWithErrors)) {
-        if (testNameFilter && !testName.includes(testNameFilter)) {
+        if (!isTestNameMatchFilters(testName, testNameFilter, strictMatchFilter)) {
             continue;
         }
 

lib/static/modules/reducer.js

@@ -184,10 +184,10 @@ function reducer(state = getInitialState(compiledData), action) {
             const {
                 suites,
                 config: {errorPatterns},
-                view: {viewMode, filteredBrowsers}
+                view: {viewMode, filteredBrowsers, strictMatchFilter}
             } = state;
 
-            const groupedErrors = groupErrors({suites, viewMode, errorPatterns, filteredBrowsers, testNameFilter});
+            const groupedErrors = groupErrors({suites, viewMode, errorPatterns, filteredBrowsers, testNameFilter, strictMatchFilter});
 
             return {
                 ...state,
@@ -198,6 +198,25 @@ function reducer(state = getInitialState(compiledData), action) {
                 }
             };
         }
+        case actionNames.VIEW_SET_STRICT_MATCH_FILTER: {
+            const {strictMatchFilter} = action;
+            const {
+                suites,
+                config: {errorPatterns},
+                view: {viewMode, filteredBrowsers, testNameFilter}
+            } = state;
+
+            const groupedErrors = groupErrors({suites, viewMode, errorPatterns, filteredBrowsers, testNameFilter, strictMatchFilter});
+
+            return {
+                ...state,
+                groupedErrors,
+                view: {
+                    ...state.view,
+                    strictMatchFilter
+                }
+            };
+        }
         case actionNames.CLOSE_SECTIONS: {
             const closeIds = action.payload;
             return assign(clone(state), {closeIds});
@@ -372,7 +391,7 @@ function closeDb(state) {
 function addTestResult(state, action) {
     const {
         config: {errorPatterns},
-        view: {viewMode, filteredBrowsers, testNameFilter}
+        view: {viewMode, filteredBrowsers, testNameFilter, strictMatchFilter}
     } = state;
     const suites = clone(state.suites);
 
@@ -396,7 +415,7 @@ function addTestResult(state, action) {
     const suiteIds = clone(state.suiteIds);
     assign(suiteIds, {failed: getFailedSuiteIds(suites)});
 
-    const groupedErrors = groupErrors({suites, viewMode, errorPatterns, filteredBrowsers, testNameFilter});
+    const groupedErrors = groupErrors({suites, viewMode, errorPatterns, filteredBrowsers, testNameFilter, strictMatchFilter});
 
     return assign({}, state, {suiteIds, suites, groupedErrors});
 }
@@ -453,9 +472,9 @@ function _mutateViewMode(state, viewMode) {
     const {
         suites,
         config: {errorPatterns},
-        view: {filteredBrowsers, testNameFilter}
+        view: {filteredBrowsers, testNameFilter, strictMatchFilter}
     } = state;
-    const groupedErrors = groupErrors({suites, viewMode, errorPatterns, filteredBrowsers, testNameFilter});
+    const groupedErrors = groupErrors({suites, viewMode, errorPatterns, filteredBrowsers, testNameFilter, strictMatchFilter});
 
     return {
         ...state,
@@ -537,7 +556,8 @@ export function withBrowserStorage(reducer) {
                 // TODO: Uncomment when issues with rendering speed will fixed
                 // lazyLoadOffset: view.lazyLoadOffset,
                 groupByError: view.groupByError,
-                testNameFilter: view.testNameFilter
+                testNameFilter: view.testNameFilter,
+                strictMatchFilter: view.strictMatchFilter
             });
         }
 

lib/static/modules/utils.js

@@ -170,7 +170,7 @@ function dateToLocaleString(date) {
     return new Date(date).toLocaleString(lang);
 }
 
-function shouldSuiteBeShown({suite, testNameFilter = '', filteredBrowsers = [], errorGroupTests = {}}) {
+function shouldSuiteBeShown({suite, testNameFilter = '', strictMatchFilter = false, filteredBrowsers = [], errorGroupTests = {}}) {
     const strictTestNameFilters = Object.keys(errorGroupTests);
 
     // suite may contain children and browsers
@@ -179,6 +179,7 @@ function shouldSuiteBeShown({suite, testNameFilter = '', filteredBrowsers = [],
             shouldSuiteBeShown({
                 suite: child,
                 testNameFilter,
+                strictMatchFilter,
                 errorGroupTests,
                 filteredBrowsers
             })
@@ -195,7 +196,7 @@ function shouldSuiteBeShown({suite, testNameFilter = '', filteredBrowsers = [],
 
     const suiteFullPath = suite.suitePath.join(' ');
 
-    const matchName = !testNameFilter || suiteFullPath.includes(testNameFilter);
+    const matchName = isTestNameMatchFilters(suiteFullPath, testNameFilter, strictMatchFilter);
 
     const strictMatchNames = strictTestNameFilters.length === 0
         || strictTestNameFilters.includes(suiteFullPath);
@@ -335,6 +336,16 @@ function updateSuitesStats(stats, status, attemptInfo) {
     }
 }
 
+function isTestNameMatchFilters(testName, testNameFilter, strictMatchFilter) {
+    if (!testNameFilter) {
+        return true;
+    }
+
+    return strictMatchFilter
+        ? testName === testNameFilter
+        : testName.includes(testNameFilter);
+}
+
 module.exports = {
     isNoRefImageError,
     hasNoRefImageErrors,
@@ -355,5 +366,6 @@ module.exports = {
     isUrl,
     sortByTimeStamp,
     updateSuitesStats,
-    filterSuites
+    filterSuites,
+    isTestNameMatchFilters
 };

lib/static/styles.css

@@ -500,6 +500,10 @@ a:active {
     border-radius: 2px;
 }
 
+.checkbox-label {
+    font-size: 12px;
+}
+
 .overlay {
     background: rgba(0, 0, 0, 0.3);
     left: 0;