feat: add an ability to stop tests directly from GUI

Author: Hypnosphi

lib/gui/server.js

@@ -110,6 +110,16 @@ exports.start = async ({paths, hermione, guiApi, configs}) => {
         logger.log('server shutting down');
     });
 
+    server.post('/stop', (req, res) => {
+        try {
+            // pass 0 to prevent terminating hermione process
+            hermione.halt('Tests were stopped by the user', 0);
+            res.sendStatus(OK);
+        } catch (e) {
+            res.status(INTERNAL_SERVER_ERROR).send(`Error while stopping tests: ${e.message}`);
+        }
+    });
+
     await app.initialize();
 
     const {port, hostname} = options;

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

@@ -19,6 +19,7 @@ class GuiControls extends Component {
         // from store
         running: PropTypes.bool.isRequired,
         processing: PropTypes.bool.isRequired,
+        stopping: PropTypes.bool.isRequired,
         autoRun: PropTypes.bool.isRequired,
         allRootSuiteIds: PropTypes.arrayOf(PropTypes.string).isRequired,
         failedRootSuiteIds: PropTypes.arrayOf(PropTypes.string).isRequired,
@@ -35,8 +36,7 @@ class GuiControls extends Component {
     }
 
     render() {
-        const {actions, allRootSuiteIds, failedRootSuiteIds, running, autoRun, processing} = this.props;
-
+        const {actions, allRootSuiteIds, failedRootSuiteIds, running, autoRun, processing, stopping} = this.props;
         return (
             <div className="main-menu container">
                 <CustomGuiControls />
@@ -52,6 +52,11 @@ class GuiControls extends Component {
                         isDisabled={!failedRootSuiteIds.length || processing}
                         handler={this._runFailedTests}
                     />
+                    <ControlButton
+                        label="Stop tests"
+                        isDisabled={!running || stopping}
+                        handler={actions.stopTests}
+                    />
                     <AcceptOpenedButton />
                     <CommonControls/>
                 </div>
@@ -66,6 +71,7 @@ export default connect(
         return {
             running: state.running,
             processing: state.processing,
+            stopping: state.stopping,
             autoRun: state.autoRun,
             allRootSuiteIds: state.tree.suites.allRootIds,
             failedRootSuiteIds: state.tree.suites.failedRootIds,

lib/static/modules/action-names.js

@@ -7,6 +7,7 @@ export default {
     FIN_STATIC_REPORT: 'FIN_STATIC_REPORT',
     RUN_ALL_TESTS: 'RUN_ALL_TESTS',
     RUN_FAILED_TESTS: 'RUN_FAILED_TESTS',
+    STOP_TESTS: 'STOP_TESTS',
     RETRY_SUITE: 'RETRY_SUITE',
     RETRY_TEST: 'RETRY_TEST',
     SUITE_BEGIN: 'SUITE_BEGIN',

lib/static/modules/actions.js

@@ -139,6 +139,15 @@ export const acceptTest = (imageId) => {
     return acceptOpened([imageId], actionNames.ACCEPT_SCREENSHOT);
 };
 
+export const stopTests = () => async dispatch => {
+    try {
+        await axios.post('/stop');
+        dispatch({type: actionNames.STOP_TESTS});
+    } catch (e) {
+        console.error(`Error while stopping tests: {e}`);
+    }
+};
+
 export const suiteBegin = (suite) => ({type: actionNames.SUITE_BEGIN, payload: suite});
 export const testBegin = (test) => ({type: actionNames.TEST_BEGIN, payload: test});
 export const testResult = (result) => ({type: actionNames.TEST_RESULT, payload: result});

lib/static/modules/default-state.js

@@ -8,6 +8,7 @@ export default Object.assign(defaults, {
     gui: true,
     running: false,
     processing: false,
+    stopping: false,
     autoRun: false,
     skips: [],
     browsers: [],

lib/static/modules/reducers/index.js

@@ -22,6 +22,7 @@ import skips from './skips';
 import view from './view';
 import plugins from './plugins';
 import groupedErrors from './grouped-errors';
+import stopping from './stopping';
 
 // The order of specifying reducers is important.
 // At the top specify reducers that does not depend on other state fields.
@@ -31,6 +32,7 @@ export default reduceReducers(
     notifications,
     running,
     processing,
+    stopping,
     loading,
     gui,
     date,

lib/static/modules/reducers/stopping.js

@@ -0,0 +1,16 @@
+import actionNames from '../action-names';
+
+export default (state = {}, action) => {
+    switch (action.type) {
+        case actionNames.STOP_TESTS: {
+            return {...state, stopping: true};
+        }
+
+        case actionNames.TESTS_END: {
+            return {...state, stopping: false};
+        }
+
+        default:
+            return state;
+    }
+};

test/unit/lib/static/components/controls/gui-controls.js

@@ -12,7 +12,8 @@ describe('<GuiControls />', () => {
         AcceptOpenedButton = sandbox.stub().returns(null);
         actionsStub = {
             runAllTests: sandbox.stub().returns({type: 'some-type'}),
-            runFailedTests: sandbox.stub().returns({type: 'some-type'})
+            runFailedTests: sandbox.stub().returns({type: 'some-type'}),
+            stopTests: sandbox.stub().returns({type: 'some-type'})
         };
         selectors = {
             getFailedTests: sandbox.stub().returns([])
@@ -116,4 +117,44 @@ describe('<GuiControls />', () => {
             assert.calledOnce(AcceptOpenedButton);
         });
     });
+
+    describe('"Stop tests" button', () => {
+        it('should be disabled when tests are not running', () => {
+            const component = mkConnectedComponent(<GuiControls />, {
+                initialState: {running: false, stopping: false}
+            });
+
+            const stop = component.find('[label="Stop tests"]');
+            assert.isTrue(stop.prop('isDisabled'));
+        });
+
+        describe ('should be disabled when tests are', () => {
+            it('running', () => {
+                const component = mkConnectedComponent(<GuiControls />, {
+                    initialState: {running: true, stopping: false}
+                });
+
+                const stop = component.find('[label="Stop tests"]');
+                assert.isFalse(stop.prop('isDisabled'));
+            });
+
+            it('stopping', () => {
+                const component = mkConnectedComponent(<GuiControls />, {
+                    initialState: {running: true, stopping: true}
+                });
+
+                const stop = component.find('[label="Stop tests"]');
+                assert.isTrue(stop.prop('isDisabled'));
+            });
+        });
+
+        it('should call "stopTests" action on click', () => {
+            const component = mkConnectedComponent(<GuiControls />, {
+                initialState: {running: true}
+            });
+
+            component.find('[label="Stop tests"]').simulate('click');
+            assert.calledOnce(actionsStub.stopTests);
+        });
+    });
 });