fix: support -a option in new UI (#749)

Author: shadowusr

lib/static/new-ui/app/App.tsx

@@ -8,6 +8,7 @@ import {HashRouter, Navigate, Route, Routes} from 'react-router-dom';
 
 import {LoadingBar} from '@/static/new-ui/components/LoadingBar';
 import {GuiniToolbarOverlay} from '@/static/new-ui/components/GuiniToolbarOverlay';
+import {AutoRun} from '@/static/new-ui/components/AutoRun';
 import {MainLayout} from '../components/MainLayout';
 import {SuitesPage} from '../features/suites/components/SuitesPage';
 import {VisualChecksPage} from '../features/visual-checks/components/VisualChecksPage';
@@ -51,6 +52,7 @@ export function App(): ReactNode {
                     <Provider store={store}>
                         <MetrikaScript/>
                         <FaviconChanger />
+                        <AutoRun />
                         <AnalyticsProvider>
                             <HashRouter>
                                 <ErrorHandler.Boundary fallback={<ErrorHandler.FallbackAppCrash />}>

lib/static/new-ui/components/AutoRun/index.tsx

@@ -0,0 +1,20 @@
+import {useEffect, useRef} from 'react';
+import {useDispatch, useSelector} from 'react-redux';
+import {State} from '@/static/new-ui/types/store';
+import {thunkRunAllTests} from '@/static/modules/actions';
+
+export function AutoRun(): null {
+    const dispatch = useDispatch();
+    const autoRun = useSelector((state: State) => state.autoRun);
+    const isInitialized = useSelector((state: State) => state.app.isInitialized);
+    const isAlreadyRun = useRef(false);
+
+    useEffect(() => {
+        if (autoRun && isInitialized && !isAlreadyRun.current) {
+            isAlreadyRun.current = true;
+            dispatch(thunkRunAllTests());
+        }
+    }, [autoRun, isInitialized, dispatch]);
+
+    return null;
+}

lib/static/new-ui/types/store.ts

@@ -369,6 +369,7 @@ export interface State {
     stats: {all: Stats | Record<string, never>, perBrowser: PerBrowserStats | undefined} | null;
     db?: Database;
     plugins: Record<string, unknown>;
+    autoRun: boolean;
 }
 
 declare module 'react-redux' {

test/func/tests/common-gui/auto-run.testplane.js

@@ -0,0 +1,57 @@
+const childProcess = require('child_process');
+const {existsSync} = require('fs');
+const fs = require('fs/promises');
+const path = require('path');
+const {promisify} = require('util');
+
+const treeKill = promisify(require('tree-kill'));
+
+const {PORTS} = require('../../utils/constants');
+const {runGui} = require('../utils');
+
+const serverHost = process.env.SERVER_HOST ?? 'host.docker.internal';
+
+const projectName = process.env.PROJECT_UNDER_TEST;
+const projectDir = path.resolve(__dirname, '../../fixtures', projectName);
+const guiUrl = `http://${serverHost}:${PORTS[projectName].gui}`;
+
+const reportDir = path.join(projectDir, 'report');
+const reportBackupDir = path.join(projectDir, 'report-backup');
+const screensDir = path.join(projectDir, 'screens');
+
+describe('GUI mode', () => {
+    describe('Auto-run with -a option', () => {
+        let guiProcess;
+
+        afterEach(async () => {
+            if (guiProcess) {
+                await treeKill(guiProcess.pid);
+            }
+
+            childProcess.execSync('git restore .', {cwd: screensDir});
+            childProcess.execSync('git clean -dfx .', {cwd: screensDir});
+        });
+
+        describe('New UI', () => {
+            beforeEach(async ({browser}) => {
+                if (existsSync(reportBackupDir)) {
+                    await fs.rm(reportDir, {recursive: true, force: true, maxRetries: 3});
+                    await fs.cp(reportBackupDir, reportDir, {recursive: true, force: true});
+                } else {
+                    await fs.cp(reportDir, reportBackupDir, {recursive: true});
+                }
+
+                guiProcess = await runGui(projectDir, {autoRun: true, grep: 'successful test'});
+
+                await browser.url(guiUrl + '/new-ui');
+            });
+
+            it('should automatically run tests when started with -a option', async ({browser}) => {
+                const testItem = await browser.$('[data-list-item*="chrome"]');
+                await testItem.click();
+
+                await browser.$('[data-qa="suite-status-bar-status"]*=Success').waitForDisplayed({timeout: 5000});
+            });
+        });
+    });
+});

test/func/tests/utils.js

@@ -32,9 +32,19 @@ const hideScreenshots = async (browser) => {
     });
 };
 
-const runGui = async (projectDir) => {
+const runGui = async (projectDir, {autoRun = false, grep = null} = {}) => {
     return new Promise((resolve, reject) => {
-        const child = childProcess.spawn('npm', ['run', 'gui', '--', '--no-open'], {cwd: projectDir});
+        const args = ['run', 'gui', '--', '--no-open'];
+
+        if (autoRun) {
+            args.push('--auto-run');
+        }
+
+        if (grep) {
+            args.push('--grep', grep);
+        }
+
+        const child = childProcess.spawn('npm', args, {cwd: projectDir});
 
         let processKillTimeoutId = setTimeout(() => {
             treeKill(child.pid).then(() => {