fix: display a human-readable error message when report is completely empty (#585)

Author: shadowusr

lib/static/components/controls/browser-list/index.jsx

@@ -30,7 +30,7 @@ const BrowserList = ({available, onChange, selected: selectedProp}) => {
             });
         });
         if (!hasNestedOptions) {
-            return groups[DEFAULT_GROUP];
+            return groups[DEFAULT_GROUP] ?? [];
         } else {
             const optionsList = [];
             Object.keys(groups).forEach((name) => {

lib/static/components/suites.jsx

@@ -112,7 +112,16 @@ function Suites(props) {
 
     const {visibleRootSuiteIds} = props;
 
-    if (isEmpty(visibleRootSuiteIds)) {
+    if (props.isReportEmpty) {
+        return <div className="sections sections_type_empty">
+            There are no tests to show. Please, try the following:
+            <ul>
+                <li>Check if your project contains any tests;</li>
+                <li>Check if the tool you are using is configured correctly and is able to find your tests;</li>
+                <li>Check if some critical error has occurred in logs that prevented HTML reporter from collecting any results.</li>
+            </ul>
+        </div>;
+    } else if (isEmpty(visibleRootSuiteIds)) {
         const selectedFiltersMsgs = _getSelectedFiltersInfo();
 
         return <div className="sections sections_type_empty">
@@ -159,6 +168,7 @@ Suites.propTypes = {
     actions: PropTypes.object.isRequired,
     testNameFilter: PropTypes.string,
     strictMatchFilter: PropTypes.bool,
+    isReportEmpty: PropTypes.bool,
     filteredBrowsers: PropTypes.arrayOf(PropTypes.shape({
         id: PropTypes.string,
         versions: PropTypes.arrayOf(PropTypes.string)
@@ -171,7 +181,8 @@ export default connect(
         viewMode: state.view.viewMode,
         filteredBrowsers: state.view.filteredBrowsers,
         testNameFilter: state.view.testNameFilter,
-        strictMatchFilter: state.view.strictMatchFilter
+        strictMatchFilter: state.view.strictMatchFilter,
+        isReportEmpty: isEmpty(state.tree.browsers.byId)
     }),
     (dispatch) => ({actions: bindActionCreators(actions, dispatch)})
 )(Suites);

test/unit/lib/static/components/suites.jsx

@@ -48,12 +48,28 @@ describe('<Suites/>', () => {
         sandbox.restore();
     });
 
-    it('should not render List component if there are no visible root suite ids', () => {
+    it('should render hint when the report is completely empty', () => {
         getVisibleRootSuiteIds.returns([]);
 
         const component = mkSuitesComponent();
 
-        expect(component.getByText('There are no tests', {exact: false})).to.exist;
+        expect(component.getByText('There are no tests to show. Please, try the following', {exact: false})).to.exist;
+    });
+
+    it('should render hint when no tests matched filters', () => {
+        getVisibleRootSuiteIds.returns([]);
+
+        const component = mkSuitesComponent({
+            tree: {
+                browsers: {
+                    byId: {
+                        'bro-1': {}
+                    }
+                }
+            }
+        });
+
+        expect(component.getByText('There are no tests that match to selected filters', {exact: false})).to.exist;
     });
 
     it('should render few section common components', async () => {
@@ -73,6 +89,11 @@ describe('<Suites/>', () => {
                         'suite-id-1': {shouldBeShown: true, shouldBeOpened: false},
                         'suite-id-2': {shouldBeShown: true, shouldBeOpened: false}
                     }
+                },
+                browsers: {
+                    byId: {
+                        'bro-1': {}
+                    }
                 }
             }
         });