fix: Remote Debug tools do not work - fixes #1556

Author: shakyShane

crossbow.yaml

@@ -13,38 +13,12 @@ tasks:
 
   test:
     - build-all
-    - cypress:*
+    - bs:*
     - cli:*
+    - unit
 
-  (cypress):
-    file-watching-ignore: >
-      @npm node cypress/setup/run.js
-      '../configs/file-watching-ignore.js'
-      cypress/integration/file-watching-ignore.js
-    file-reloading: >
-      @npm node cypress/setup/run.js
-      '../configs/file-reloading.js'
-      cypress/integration/file-reloading.js
-    no-notify: >
-      @npm node cypress/setup/run.js
-      '../configs/no-notify.js'
-      cypress/integration/no-notify.js
-    css-overlay: >
-      @npm node cypress/setup/run.js
-      '../configs/css-overlay-notify.js'
-      cypress/integration/css-overlay-notify.js
-    css-console-notify: >
-      @npm node cypress/setup/run.js
-      '../configs/css-console-notify.js'
-      cypress/integration/css-console-notify.js
-    connection-notify: >
-      @npm node cypress/setup/run.js
-      '../configs/file-reloading.js'
-      cypress/integration/connection-notify.js
-    log-prefix: >
-      @npm node cypress/setup/run.js
-      '../configs/logPrefix.js'
-      cypress/integration/logPrefix.js
+  unit: >
+    @npm mocha --recursive test/specs --timeout 10000 --bail
 
   build-server:
     - '@npm tsc'
@@ -68,10 +42,39 @@ tasks:
     --write --tab-width 4
 
   cli: cypress/setup/bs-cli.js
+  bs: cypress/setup/bs.js
 
 options:
+  bs:
+    _default:
+      action: run
+    file-watching-ignore:
+      config: cypress/configs/file-watching-ignore.js
+      spec: cypress/integration/file-watching-ignore.js
+    file-reloading:
+      config: cypress/configs/file-reloading.js
+      spec: cypress/integration/file-reloading.js
+    no-notify:
+      config: cypress/configs/no-notify.js
+      spec: cypress/integration/no-notify.js
+    css-overlay:
+      config: cypress/configs/css-overlay-notify.js
+      spec: cypress/integration/css-overlay-notify.js
+    css-console-notify:
+      config: cypress/configs/css-console-notify.js
+      spec: cypress/integration/css-console-notify.js
+    connection-notify:
+      config: cypress/configs/file-reloading.js
+      spec: cypress/integration/connection-notify.js
+    log-prefix:
+      config: cypress/configs/logPrefix.js
+      spec: cypress/integration/logPrefix.js
+    ui-remote-debug:
+      config: cypress/configs/file-reloading.js
+      spec: cypress/integration/ui-remote-debug.js
+
   cli:
     file-watching-ignore:
       method: 'run'
       args: ['test/fixtures', '--files', 'test/fixtures', '--no-open', '--json']
-      spec: 'cypress/integration/file-watching-ignore.js'
+      spec: 'cypress/integration/file-watching-ignore.js'

cypress/integration/ui-remote-debug.js

@@ -0,0 +1,28 @@
+describe('UI', function () {
+    context('Remote Debugger', function () {
+        it('adds an element, in the way the UI does', function () {
+            cy.visit(Cypress.env('BS_URL'));
+            cy.get('#__bs_notify__').should('have.length', 1);
+            cy.request('POST', `${Cypress.env('BS_URL')}/__browser_sync__`,
+                JSON.stringify(["ui:element:add",
+                    {
+                        "src": "/browser-sync/pesticide.css",
+                        "active": true,
+                        "hidden": "",
+                        "name": "pesticide",
+                        "tagline": "Add simple CSS outlines to all elements. (powered by <a href=\"http://pesticide.io\" target=\"_blank\">Pesticide.io</a>)",
+                        "context": "remote-debug",
+                        "served": true,
+                        "title": "CSS Outlining",
+                        "type": "css",
+                        "id": "__browser-sync-pesticide__",
+                        "file": "/Users/shakyshane/sites/oss/browser-sync/node_modules/browser-sync-ui/lib/plugins/remote-debug/css/pesticide.min.css"
+                    }
+                ])
+            ).then(res => {
+                console.log(res);
+            });
+            cy.get('[id="__browser-sync-pesticide__"]').should('have.length', 1);
+        });
+    });
+});

cypress/setup/bs.js

@@ -1,20 +1,35 @@
-module.exports = function(setup, specs) {
+const cypress = require('cypress');
+const exec = require('child_process');
+const assert = require('assert');
+const {join} = require('path');
+const {Observable} = require('rxjs/Observable');
 
-    const cypress = require('cypress');
-    const bs      = require('../../').create();
+module.exports = function(opts, ctx) {
 
-    bs.init(setup, function(err, bs) {
-        return cypress.run({
-            spec: specs,
-            env: `BS_URL=${bs.options.getIn(['urls', 'local'])}`
-        })
-            .then((results) => {
-                // stop your server when it's complete
-                bs.cleanup();
-                if (results.failures > 0) {
-                    return process.exit(1);
-                }
-                process.exit(0);
+    assert.ok(typeof opts.config === 'string', '`opts.config` should be a string');
+    assert.ok(typeof opts.spec === 'string', '`opts.spec` should be a string');
+    assert.ok((opts.action === 'run' || opts.action === 'open'), '`action` should be either run or open');
+
+    const json = require(join(ctx.config.cwd, opts.config));
+
+    return Observable.create(obs => {
+        const bs = require('../../').create();
+        const instance = bs.init(json, function(err, bs) {
+            if (err) {
+                return obs.error(err);
+            }
+            return cypress[opts.action]({
+                spec: opts.spec,
+                env: `BS_URL=${bs.options.getIn(['urls', 'local'])},BS_UI_URL=${bs.options.getIn(['urls', 'ui'])}`
             })
+                .then((results) => {
+                    // stop your server when it's complete
+                    if (results.failures > 0) {
+                        return obs.error(new Error('Errors occurred'));
+                    }
+                    instance.cleanup();
+                    obs.complete();
+                })
+        });
     });
 };

cypress/setup/run.js

@@ -14,7 +14,10 @@ module.exports = {
         var js = snippetUtils.getClientJs(data.port, data.options);
 
         return hooks.reduce(function(acc, hook) {
-            return acc.concat(hook);
+            if (typeof hook === "function") {
+                return acc.concat(hook);
+            }
+            return acc.concat(String(hook));
         }, [js]);
     },
     /**

lib/hooks.js

@@ -61,12 +61,8 @@ proto.middleware = function(bs) {
                 }
                 try {
                     const [name, payload] = JSON.parse(body.toString());
-                    if (permittedSocketEvents.indexOf(name) > -1) {
-                        bs.io.sockets.emit(name, payload);
-                        return res.end(`Browsersync HTTP Protocol received: ${name} ${JSON.stringify(payload)}`);
-                    } else {
-                        return res.end(`Browsersync HTTP Protocol name not supported: ${name}`);
-                    }
+                    bs.io.sockets.emit(name, payload);
+                    return res.end(`Browsersync HTTP Protocol received: ${name} ${JSON.stringify(payload)}`);
                 } catch (e) {
                     const output = [
                         `Error: ${e.message}`,