cypress run server inline test

e2e-tests/cypress.config.js

@@ -1,9 +1,35 @@
-const { defineConfig } = require("cypress");
+const { defineConfig } = require('cypress');
+const { clearDataWithBackup } = require('./e2eTestTools');
+const { exec } = require('child_process');
+const waitOn = require('wait-on');
 
 module.exports = defineConfig({
   e2e: {
     setupNodeEvents(on, config) {
       // implement node event listeners here
+      let serverProcess;
+
+      on('before:spec', async details => {
+        console.log('******** BEFORE RUN ****************');
+        clearDataWithBackup();
+
+        serverProcess = exec('yarn start');
+        await waitOn({ resources: ['http://localhost:3000'] });
+        serverProcess.stdout.on('data', data => {
+          console.log(data.toString());
+        });
+        serverProcess.stderr.on('data', data => {
+          console.error(data.toString());
+        });
+      });
+
+      on('after:spec', () => {
+        console.log('******** AFTER RUN ****************', serverProcess);
+        if (serverProcess) {
+          console.log('Stopping local server...');
+          serverProcess.kill();
+        }
+      });
     },
   },
 });

e2e-tests/cypress/e2e/connect.cy.js

@@ -14,7 +14,15 @@ describe('Initialization', () => {
     if (process.env.CI) {
       cy.get('[data-testid=ConnectionDriverFields_server]').clear().type('mysql');
     } 
+    cy.get('[data-testid=ConnectionDriverFields_displayName]').clear().type('test-mysql-1');
+    cy.get('[data-testid=ConnectionTab_buttonSave]').click();
     cy.get('[data-testid=ConnectionTab_buttonConnect]').click();
     cy.contains('performance_schema');
   });
+
+  // it('import chinook DB', () => {
+  //   cy.visit('http://localhost:3000');
+  //   cy.findByText('test-mysql-1').dblclick();
+  // });
+
 });

e2e-tests/e2eTestTools.js

@@ -18,9 +18,15 @@ function createTimeStamp() {
   return ts;
 }
 
-if (fs.existsSync(path.join(baseDir, 'connections.jsonl'))) {
-  fs.renameSync(
-    path.join(baseDir, 'connections.jsonl'),
-    path.join(baseDir, `connections-${createTimeStamp()}.jsonl.bak`)
-  );
+function clearDataWithBackup() {
+  if (fs.existsSync(path.join(baseDir, 'connections.jsonl'))) {
+    fs.renameSync(
+      path.join(baseDir, 'connections.jsonl'),
+      path.join(baseDir, `connections-${createTimeStamp()}.jsonl.bak`)
+    );
+  }
 }
+
+module.exports = {
+  clearDataWithBackup,
+};

e2e-tests/package.json

@@ -9,11 +9,11 @@
     "start-server-and-test": "^2.0.8"
   },
   "scripts": {
-    "cy:open": "cypress open",
+    "cy:open": "cypress open --config experimentalInteractiveRunEvents=true",
     "cy:run": "cypress run",
-    "start:ci": "cd .. && cross-env CI=true node packer/build/bundle.js --listen-api --run-packer-build",
-    "start:local": "cd .. && node common/clearDataWithBackup.js && node packer/build/bundle.js --listen-api --run-packer-build",
-    "test:ci": "start-server-and-test start:ci http://localhost:3000 cy:run",
-    "test:local": "start-server-and-test start:local http://localhost:3000 cy:run"
+    "cy:run:ci": "cross-env CI=true cypress run",
+    "start": "cd .. && node packer/build/bundle.js --listen-api --run-packer-build",
+    "test:ci": "start-server-and-test start http://localhost:3000 cy:run:ci",
+    "test": "start-server-and-test start http://localhost:3000 cy:run"
   }
 }

packages/web/src/settings/ConnectionDriverFields.svelte

@@ -411,7 +411,8 @@
         name="displayName"
         templateProps={{ noMargin: true }}
         disabled={isConnected}
-      />
+        data-testid="ConnectionDriverFields_displayName"
+        />
     </div>
     <div class="col-6 mr-1">
       <FormColorField
@@ -421,6 +422,7 @@
         emptyLabel="(not selected)"
         templateProps={{ noMargin: true }}
         disabled={isConnected}
+        data-testid="ConnectionDriverFields_connectionColor"
       />
     </div>
   </div>