feat(Storybook): Re-run tests automatically for opened page

Closes: #12331

storybook/main.cpp

@@ -52,6 +52,10 @@ int main(int argc, char *argv[])
     auto watcherFactory = [additionalImportPaths](QQmlEngine*, QJSEngine*) {
         auto watcher = new DirectoriesWatcher();
         watcher->addPaths(additionalImportPaths);
+
+        // Test path added here as a temporary solution. Ideally, tests should
+        // be observed separately.
+        watcher->addPaths({ QML_IMPORT_ROOT + QStringLiteral("/qmlTests/tests") });
         return watcher;
     };
 

storybook/main.qml

@@ -29,6 +29,8 @@ ApplicationWindow {
     palette.base: Theme.palette.indirectColor1
     font.pixelSize: 13
 
+    onCurrentPageChanged: testsReRunTimer.restart()
+
     QtObject {
         id: d
 
@@ -86,13 +88,36 @@ ApplicationWindow {
 
         loader: viewLoader
         enabled: hotReloaderControls.enabled
-        onReloaded: hotReloaderControls.notifyReload()
+
+        onReloaded: {
+            hotReloaderControls.notifyReload()
+            testsReRunTimer.restart()
+        }
     }
 
     TestRunnerController {
         id: testRunnerController
     }
 
+    Timer {
+        id: testsReRunTimer
+
+        interval: 100
+
+        onTriggered: {
+            if (!settingsLayout.runTestsAutomatically)
+                return
+
+            const testFileName = `tst_${root.currentPage}.qml`
+            const testsCount = testRunnerController.getTestsCount(testFileName)
+
+            if (testsCount === 0)
+                return
+
+            testRunnerController.runTests(testFileName)
+        }
+    }
+
     SplitView {
         anchors.fill: parent
 
@@ -313,8 +338,11 @@ Tips:
     }
 
     Settings {
+        id: settings
+
         property alias currentPage: root.currentPage
         property alias loadAsynchronously: settingsLayout.loadAsynchronously
+        property alias runTestsAutomatically: settingsLayout.runTestsAutomatically
         property alias darkMode: darkModeCheckBox.checked
         property alias hotReloading: hotReloaderControls.enabled
         property alias figmaToken: settingsLayout.figmaToken

storybook/src/Storybook/SettingsLayout.qml

@@ -1,9 +1,10 @@
-import QtQuick 2.14
-import QtQuick.Controls 2.14
-import QtQuick.Layouts 1.14
+import QtQuick 2.15
+import QtQuick.Controls 2.15
+import QtQuick.Layouts 1.15
 
 ColumnLayout {
     property alias loadAsynchronously: loadAsyncCheckBox.checked
+    property alias runTestsAutomatically: runTestsAutoCheckBox.checked
     property alias figmaToken: figmaTokenTextInput.text
 
     CheckBox {
@@ -14,6 +15,15 @@ ColumnLayout {
         text: "Load pages asynchronously"
     }
 
+    CheckBox {
+        id: runTestsAutoCheckBox
+
+        Layout.fillWidth: true
+
+        text: "Run tests automatically"
+        checked: true
+    }
+
     GroupBox {
         Layout.fillWidth: true
 

storybook/src/Storybook/TestRunnerController.qml

@@ -20,18 +20,17 @@ QtObject {
     }
 
     function runTests(testFileName) {
-        console.assert(d.testProcess === null)
+        if (d.testProcess) {
+            d.testProcess.finished.disconnect(d.processFinishedHandler)
+            d.testProcess.kill()
+            d.aborted = false
+        }
 
         const process = TestsRunner.runTests(testFileName)
         d.testProcess = process
         d.running = true
 
-        process.finished.connect((exitCode, exitStatus) => {
-            root.finished(exitCode, d.aborted, exitStatus !== 0)
-
-            d.running = false
-            d.aborted = false
-        })
+        process.finished.connect(d.processFinishedHandler)
 
         started()
     }
@@ -47,5 +46,12 @@ QtObject {
         property var testProcess: null
         property bool aborted: false
         property bool running: false
+
+        function processFinishedHandler(exitCode, exitStatus) {
+            root.finished(exitCode, d.aborted, exitStatus !== 0)
+
+            d.running = false
+            d.aborted = false
+        }
     }
 }