Merge pull request #425 from gemini-testing/HERMIONE-303.dynamic_grouping

feat: add ability to group tests by keys from meta of tests

Author: DudaGod

README.md

@@ -54,7 +54,7 @@ directory.
 * **errorPatterns** (optional) - `Array` - error message patterns are used:
 
   * to show more understandable information about matched error;
-  * in 'Group by error' mode.
+  * in 'Group by' mode with selected 'error' key.
 
   Array elements must be one of the types:
 
@@ -66,7 +66,7 @@ directory.
   * *name* of error pattern will be displayed as title of error message and original error message will be hidden under details;
   * *hint* of error pattern will be displayed after error *stack* field. Can be specified as html string. For example, `<div>some-useful-hint</div>`.
 
-  In 'Group by error' mode test will be associated with group if test error matches on group error pattern. New group will be created if test cannot be associated with existing groups.
+  In 'Group by' mode with selected 'error' key test will be associated with group if test error matches on group error pattern. New group will be created if test cannot be associated with existing groups.
 
 * **metaInfoBaseUrls** (optional) `Object` - base paths for making link from Meta-info values. Object option must be Meta-info's key and value must be `String`. For example, {'file': 'base/path'}.
 * **saveFormat** (**DEPRECATED**, optional) `String` - allows to specify the format, in which the results will be saved. Available values are:

lib/constants/group-tests.js

@@ -0,0 +1,7 @@
+exports.SECTIONS = {
+    RESULT: 'result',
+    META: 'meta'
+};
+exports.ERROR_KEY = 'error';
+exports.RESULT_KEYS = [exports.ERROR_KEY];
+exports.KEY_DELIMITER = '.';

lib/static/components/bottom-progress-bar/index.js

@@ -1,6 +1,6 @@
 'use strict';
 
-import {extend} from 'lodash';
+import {extend, isNumber} from 'lodash';
 import React from 'react';
 import {connect} from 'react-redux';
 
@@ -15,6 +15,10 @@ const BottomProgressBar = (props) => {
     const currentRootSuiteIdx = suiteIdsIndexMap[currentRootSuiteId];
     const percent = 100 / (visibleRootSuiteIds.length - 1) * currentRootSuiteIdx;
 
+    if (!isNumber(currentRootSuiteIdx)) {
+        return null;
+    }
+
     return (
         <div className="bottom-progress-bar">
             <div className='bottom-progress-bar__progress-container'>

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

@@ -4,7 +4,8 @@ import {connect} from 'react-redux';
 import {capitalize} from 'lodash';
 import * as actions from '../../modules/actions';
 import ControlButton from './control-button';
-import ControlSelect from './control-select';
+import ControlSelect from './selects/control';
+import GroupTestsSelect from './selects/group-tests';
 import BaseHostInput from './base-host-input';
 import MenuBar from './menu-bar';
 import viewModes from '../../../constants/view-modes';
@@ -49,6 +50,7 @@ class ControlButtons extends Component {
                         handler={actions.expandRetries}
                     />
                 </div>
+                <GroupTestsSelect />
                 <ControlButton
                     label="Show skipped"
                     isActive={view.showSkipped}
@@ -63,11 +65,6 @@ class ControlButtons extends Component {
                     })}
                     extendClassNames="diff-mode"
                 />
-                <ControlButton
-                    label="Group by error"
-                    isActive={Boolean(view.groupByError)}
-                    handler={actions.toggleGroupByError}
-                />
                 <BaseHostInput/>
                 <MenuBar />
             </div>

lib/static/components/controls/control-select/index.js renamed to lib/static/components/controls/selects/control.js

@@ -30,15 +30,16 @@ export default class ControlSelect extends Component {
         }));
 
         const className = classNames(
-            'control-select',
+            'select',
+            'select_type_control',
             extendClassNames
         );
 
         return (
             <div className={className}>
-                <Label className="control-select__label">{label}</Label>
+                <Label className="select__label">{label}</Label>
                 <Dropdown
-                    className="control-select__dropdown"
+                    className="select__dropdown"
                     selection
                     options={formattedOpts}
                     value={value}

lib/static/components/controls/selects/group-tests.js

@@ -0,0 +1,94 @@
+import React, {Component, Fragment} from 'react';
+import {bindActionCreators} from 'redux';
+import {connect} from 'react-redux';
+import PropTypes from 'prop-types';
+import {Label, Dropdown} from 'semantic-ui-react';
+import classNames from 'classnames';
+import {isEmpty} from 'lodash';
+
+import * as actions from '../../../modules/actions';
+import {groupedTestsType} from '../../group-tests/prop-types';
+import {SECTIONS, KEY_DELIMITER} from '../../../../constants/group-tests';
+import {getParsedKeyToGroupTestsBy} from '../../../modules/selectors/grouped-tests';
+
+import './index.styl';
+
+class GroupTestsSelect extends Component {
+    static propTypes = {
+        actions: PropTypes.object.isRequired,
+        // from store
+        keyToGroupTestsBy: PropTypes.string.isRequired,
+        groupedTests: groupedTestsType.isRequired,
+        selectedGroupSection: PropTypes.string,
+        selectedGroupKey: PropTypes.string
+    }
+
+    _groupTestsByKey = (_, dom) => {
+        if (dom.value !== this.props.keyToGroupTestsBy) {
+            this.props.actions.groupTestsByKey(dom.value);
+        }
+    }
+
+    _renderSection(sectionName) {
+        const {groupedTests} = this.props;
+        const keys = groupedTests[sectionName].allKeys;
+
+        if (isEmpty(keys)) {
+            return null;
+        }
+
+        return (
+            <Fragment key={sectionName}>
+                <Dropdown.Divider/>
+                <Dropdown.Header content={sectionName} />
+                <Dropdown.Divider/>
+                {keys.map(key => {
+                    const id = getGroupElemId(sectionName, key);
+                    const isActive = id === this.props.keyToGroupTestsBy;
+
+                    return <Dropdown.Item key={id} value={id} active={isActive} onClick={this._groupTestsByKey}>{key}</Dropdown.Item>;
+                })}
+            </Fragment>
+        );
+    }
+
+    render() {
+        const {selectedGroupKey} = this.props;
+        const className = classNames(
+            'select',
+            'select_type_group'
+        );
+
+        return (
+            <div className={className}>
+                <Label className="select__label">Group by</Label>
+                <Dropdown
+                    className="select__dropdown selection"
+                    value={selectedGroupKey}
+                    text={selectedGroupKey}
+                    onChange={this._groupTestsByKey}
+                    placeholder="select key"
+                    clearable={Boolean(selectedGroupKey)}
+                >
+                    <Dropdown.Menu>
+                        {Object.values(SECTIONS).map((sectionName) => this._renderSection(sectionName))}
+                    </Dropdown.Menu>
+                </Dropdown>
+            </div>
+        );
+    }
+}
+
+export default connect(
+    (state) =>{
+        const {view: {keyToGroupTestsBy}, groupedTests} = state;
+        const [selectedGroupSection, selectedGroupKey] = getParsedKeyToGroupTestsBy(state);
+
+        return {keyToGroupTestsBy, groupedTests, selectedGroupSection, selectedGroupKey};
+    },
+    (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
+)(GroupTestsSelect);
+
+function getGroupElemId(groupName, groupKey) {
+    return `${groupName}${KEY_DELIMITER}${groupKey}`;
+}

lib/static/components/controls/control-select/index.styl renamed to lib/static/components/controls/selects/index.styl

@@ -1,9 +1,9 @@
-.control-select
+.select
     display: inline-flex
     margin-right: 15px
     margin-bottom: 15px
 
-    .control-select__label
+    .select__label
         font-size: 11px
         margin: 0
         padding: 0 5px
@@ -13,12 +13,13 @@
         border-top-right-radius: 0
         border-bottom-right-radius: 0
 
-    .control-select__dropdown.ui.dropdown
+    .select__dropdown.ui.dropdown
         min-height: 25px
-        min-width: 60px
+        min-width: 70px
         font-size: 11px
         line-height: 13px
         padding: 5px
+        padding-right: 25px
         border: 1px solid #ccc
         border-radius: 2px
         border-top-left-radius: 0
@@ -32,13 +33,26 @@
             .menu
                 border-color: #ffd947
 
-        .icon
-            top: 50%
-            right: 10px
+        .icon.dropdown
             padding: 0
             margin: 0
-            transform: translateY(-50%)
+            line-height: initial
 
     &.diff-mode
-        .control-select__dropdown.ui.dropdown
+        .select__dropdown.ui.dropdown
             min-width: 90px
+
+    &.select_type_group
+        .select__dropdown.ui.dropdown
+            min-width: 110px
+
+            .menu > .header
+                margin: 0
+                padding: 0 0 0 5px
+                border-bottom: 0
+
+            .menu > .divider
+                margin: 5px 0
+
+            .menu > .item
+                padding-left: 10px !important

lib/static/components/error-groups/list.js

@@ -4,7 +4,7 @@ import classNames from 'classnames';
 
 import Suites from '../suites';
 
-export default class ErrorGroupsItem extends Component {
+export default class GroupTestsItem extends Component {
     static propTypes = {
         group: PropTypes.object.isRequired,
         isActive: PropTypes.bool.isRequired,
@@ -13,24 +13,24 @@ export default class ErrorGroupsItem extends Component {
 
     render() {
         const {group, isActive, onClick} = this.props;
-        const {name, pattern, count} = group;
+        const {name, pattern, testCount} = group;
 
         const body = isActive ? (
-            <div className="error-group__body">
+            <div className="tests-group__body">
                 <Suites />
             </div>
         ) : null;
 
         const className = classNames(
-            'error-group',
-            {'error-group_collapsed': !isActive}
+            'tests-group',
+            {'tests-group_collapsed': !isActive}
         );
 
         return (
             <div className={className}>
-                <div className="error-group__title" onClick={onClick} title={pattern}>
-                    <span className="error-group__name">{name}</span>
-                    <span className="error-group__count">&nbsp;({count})</span>
+                <div className="tests-group__title" onClick={onClick} title={pattern}>
+                    <span className="tests-group__name">{name}</span>
+                    <span className="tests-group__count">&nbsp;({testCount})</span>
                 </div>
                 {body}
             </div>