fix: run generated test through temporary file (nightwatchjs#9)

Author: Kapelianovych

.gitignore

@@ -1,3 +1,12 @@
+.vim
+.idea
 node_modules
 logs
 tests_output
+
+# Debug config for Vimspector (Vim/Neovim)
+.vimspector.json
+
+# Vim's swap files
+*.swp
+*.swo

nightwatch/commands/mountReactComponent.js

@@ -2,6 +2,8 @@ const AssertionError = require('assertion-error');
 const fs = require('fs');
 const path = require('path');
 
+const {TMP_TEST_NAME, writeTmpTestFile, removeTmpTestFile} = require('../../src/tmp_file.js');
+
 class NightwatchMountError extends AssertionError {
   constructor(message) {
     super(message);
@@ -46,18 +48,21 @@ module.exports = class Command {
     let beforeMountError;
     let afterMountError;
 
+    await Command._createEntryScriptFile(componentOrName, props, isJSX);
+
     // mount component
     await this.api
-      .execute(function (innerHTML) {
+      .executeAsyncScript(function (fileName, done) {
         function onReady(fn) {if (document.readyState === 'complete' || document.readyState === 'interactive') {setTimeout(fn);} else {document.addEventListener('DOMContentLoaded', fn)}}
         onReady(function() {
           var scriptTag = Object.assign(document.createElement('script'), {
+	        src: `/${fileName}?t=${Math.random().toString(36)}`,
             type: 'module',
-            innerHTML
+	    onload: function() { done(); }
           });
           document.body.appendChild(scriptTag);
         });
-      }, [Command._buildScript(componentOrName, props, isJSX)])
+      }, [TMP_TEST_NAME])
 
       // FIXME: writing the waitUntil outside of the perform using await, breaks the chain
 
@@ -207,6 +212,8 @@ module.exports = class Command {
         done(browserResult);
       }, 100);
     }, [Command.rootElementId]);
+   
+    await removeTmpTestFile();
 
     if (!result || beforeMountError || afterMountError) {
       const err = this.getError('Could not mount the component.');
@@ -331,6 +338,9 @@ module.exports = class Command {
 
   static _buildScript(Component, props, isJSX) {
     return `
+      // THIS IS GENERATED FILE. DO NOT EDIT IT!
+      // THIS FILE SHOULD NOT BE ADDED TO THE VERSION CONTROL SYSTEM.
+
       ${Command._getReactImports()}
       ${Command._addDescribeMocks(isJSX)}
       
@@ -365,4 +375,20 @@ module.exports = class Command {
       window.__$$PlayFnDone = false;         
     `;
   }
+
+  /**
+   * Creates a content for the script that will load component and mount
+   * it into the renderer's canvas. For that purpose the file will be created
+   * in the current working directory. That file has to be deleted after a testing is done.
+   *
+   * @param {string|ComponentDescription|(() => JSX.Element)} componentOrName
+   * @param {unknown} props
+   * @param {boolean} isJSX
+   * @returns {Promise<void>}
+   */
+  static async _createEntryScriptFile(componentOrName, props, isJSX) {
+    const content = Command._buildScript(componentOrName, props, isJSX);
+
+    await writeTmpTestFile(content);
+  }
 };

src/tmp_file.js

@@ -0,0 +1,32 @@
+const fs = require("fs");
+
+const TMP_TEST_FILE = "_tmp_test_file.js";
+
+/**
+ * Flushes the content to the FS as the virtual test.
+ *
+ * @param {string} content
+ * @returns {Promise<void>}
+ */
+const write = (content) =>
+  fs.promises.writeFile(TMP_TEST_FILE, content, {
+    encoding: "utf8",
+  });
+
+/**
+ * Removes the virtual test file from the FS.
+ *
+ * @returns {Promise<void>}
+ */
+const clean = () =>
+  fs.promises.unlink(TMP_TEST_FILE).catch((error) => {
+    if (error.code === "ENOENT") {
+      // The file doesn't exist and it is okay. Just do nothing.
+    } else {
+      throw error;
+    }
+  });
+
+exports.TMP_TEST_NAME = TMP_TEST_FILE;
+exports.writeTmpTestFile = write;
+exports.removeTmpTestFile = clean;