Fix duplicate components being injected into data URI and add tests for index.js

test/fixture.js

@@ -5,6 +5,7 @@ var $ = require('../src/scripts/vendor/minified').$;
 var HTML = require('../src/scripts/vendor/minified').HTML;
 var ClayItem = require('../src/scripts/lib/clay-item');
 var ClayConfig = require('../src/scripts/lib/clay-config');
+var Clay = require('../index');
 var components = require('../src/scripts/components');
 var componentRegistry = require('../src/scripts/lib/component-registry');
 var idCounter = 0;
@@ -74,3 +75,19 @@ module.exports.clayConfig = function(types, build, autoRegister, settings) {
   return build === false ? clayConfig : clayConfig.build();
 };
 
+/**
+ * @param {Array} config - the Clay config
+ * @param {function} [customFn] - Custom code to run from the config page. Will run
+ *   with the ClayConfig instance as context
+ * @param {Object} [options] - Additional options to pass to Clay
+ * @param {boolean} [options.autoHandleEvents] - If false, Clay will not
+ *   automatically handle the 'showConfiguration' and 'webviewclosed' events
+ * @param {boolean} [destroyLocalStorage=true]
+ * @return {Clay}
+ */
+module.exports.clay = function(config, customFn, options, destroyLocalStorage) {
+  if (destroyLocalStorage !== false) {
+    localStorage.removeItem('clay-settings');
+  }
+  return new Clay(config, customFn, options);
+};

test/karma.conf.js

@@ -52,6 +52,7 @@ module.exports = function(config) {
 
     // list of files / patterns to load in the browser
     files: [
+      'index.js',
       'src/scripts/**/*.js',
       'test/spec/**/*.js'
     ],
@@ -62,6 +63,7 @@ module.exports = function(config) {
     // preprocess matching files before serving them to the browser
     // available preprocessors: https://npmjs.org/browse/keyword/karma-preprocessor
     preprocessors: {
+      'index.js': ['browserify'],
       'src/scripts/**/*.js': ['browserify'],
       'test/spec/**/*.js': ['browserify']
     },

test/spec/index.js

@@ -0,0 +1,212 @@
+'use strict';
+
+var fixture = require('../fixture');
+var Clay = require('../../index');
+var assert = require('chai').assert;
+var standardComponents = require('../../src/scripts/components');
+var sinon = require('sinon');
+
+/**
+ * @return {void}
+ */
+function stubPebble() {
+  global.Pebble = {
+    addEventListener: sinon.stub(),
+    openURL: sinon.stub(),
+    sendAppMessage: sinon.stub()
+  };
+}
+
+describe('Clay', function() {
+  describe('Clay constructor', function() {
+    it('throws if the config is not an array', function() {
+      assert.throws(function() {
+        fixture.clay({});
+      }, /must be an Array/i);
+    });
+
+    it('throws if customFn is not a function', function() {
+      assert.throws(function() {
+        fixture.clay([], {});
+      }, /must be a function/i);
+    });
+
+    it('does not throw if customFn is undefined or a function', function() {
+      assert.doesNotThrow(function() {
+        fixture.clay([], function() {});
+      });
+
+      assert.doesNotThrow(function() {
+        fixture.clay([]).customFn();
+      });
+    });
+
+    it('registers the standard components present in the config', function() {
+      var config = fixture.config(
+        ['input', 'input', 'select', 'custom', ['color']],
+        false
+      );
+      var clay = fixture.clay(config);
+      assert.deepEqual(clay.components, {
+        input: standardComponents['input'],
+        select: standardComponents['select'],
+        color: standardComponents['color']
+      });
+    });
+
+    it('handles the "showConfiguration" event if autoHandleEvents is not false',
+    function() {
+      stubPebble();
+      var clay = fixture.clay([]);
+      Pebble.addEventListener.withArgs('showConfiguration').callArg(1);
+
+      assert(Pebble.addEventListener.calledWith('showConfiguration'));
+      assert(Pebble.openURL.calledWith(clay.generateUrl()));
+    });
+
+    it('handles the "showConfiguration" event if autoHandleEvents is not false',
+    function() {
+      stubPebble();
+      fixture.clay([]);
+      var logStub = sinon.stub(console, 'log');
+      Pebble.addEventListener
+        .withArgs('webviewclosed')
+        .callArgWith(1, { response: '%7B%22appKey%22%3A%22value%22%7D' });
+
+      assert(Pebble.addEventListener.calledWith('webviewclosed'));
+      assert(Pebble.sendAppMessage.calledWith({ appKey: 'value' }));
+
+      Pebble.sendAppMessage.callArg(1);
+      assert(logStub.calledWith('Sent config data to Pebble'));
+
+      Pebble.sendAppMessage.callArgWith(2, {some: 'error'});
+      assert(logStub.calledWith('Failed to send config data!'));
+      assert(logStub.calledWith('{"some":"error"}'));
+
+      logStub.restore();
+    });
+
+    it('handles an empty response in the "webviewclosed" handler', function() {
+      stubPebble();
+      fixture.clay([]);
+      Pebble.addEventListener.withArgs('webviewclosed').callArgWith(1, undefined);
+
+      assert(Pebble.addEventListener.calledWith('webviewclosed'));
+      assert.strictEqual(Pebble.sendAppMessage.callCount, 0);
+    });
+  });
+
+  describe('.registerComponent()', function() {
+    it('adds the component to the this.components', function() {
+      var clay = fixture.clay([]);
+      var customComponent = {
+        name: 'custom',
+        template: '<div></div>',
+        manipulator: 'val'
+      };
+      clay.registerComponent(customComponent);
+      assert.strictEqual(clay.components[customComponent.name], customComponent);
+    });
+  });
+
+  describe('.generateUrl()', function() {
+    it('does not replace $$RETURN_TO$$ if in the emulator', function() {
+      var clay = fixture.clay([]);
+      stubPebble();
+      Pebble.platform = 'pypkjs';
+      var decodedUrl =
+        atob(decodeURIComponent(clay.generateUrl().replace(/^.*?#/, '')));
+      assert.match(decodedUrl, /\$\$RETURN_TO\$\$/);
+    });
+
+    it('returns the emulator URL if inside emulator', function() {
+      var clay = fixture.clay([]);
+      stubPebble();
+      Pebble.platform = 'pypkjs';
+      assert.match(
+        clay.generateUrl(),
+        /^http:\/\/clay\.pebble\.com\.s3-website-us-west-2\.amazonaws.com\/#/
+      );
+    });
+
+    it('doesn\'t thow and logs an error if setting in localStorage are broken',
+    function() {
+      var clay = fixture.clay([]);
+      var errorStub = sinon.stub(console, 'error');
+      localStorage.setItem('clay-settings', 'not valid JSON');
+      assert.doesNotThrow(function() {
+        clay.generateUrl();
+      });
+      assert(errorStub.calledWithMatch(/SyntaxError/i));
+      errorStub.restore();
+    });
+  });
+
+  describe('.getSettings()', function() {
+    it('stores the response to localStorage and returns the decoded data',
+    function() {
+      var clay = fixture.clay([]);
+      var result = clay.getSettings('%7B%22appKey%22%3A%22value%22%7D');
+      assert.equal(localStorage.getItem('clay-settings'), '{"appKey":"value"}');
+      assert.deepEqual(result, {appKey: 'value'});
+    });
+
+    it('does not store the response if it is invalid JSON and logs an error',
+    function() {
+      var clay = fixture.clay([]);
+      localStorage.setItem('clay-settings', '{"appKey":"value"}');
+
+      assert.throws(function() {
+        clay.getSettings('not valid JSON');
+      }, /Not Valid JSON/i);
+      assert.equal(localStorage.getItem('clay-settings'), '{"appKey":"value"}');
+    });
+  });
+
+  describe('Clay.encodeDataUri()', function() {
+
+    /**
+     * @return {void}
+     */
+    function testEncodeDataUri() {
+      it('adds the correct prefix', function() {
+        assert.equal(Clay.encodeDataUri('test', 'prefix:'), 'prefix:dGVzdA%3D%3D');
+        assert.equal(
+          Clay.encodeDataUri('test'),
+          'data:text/html;base64,dGVzdA%3D%3D'
+        );
+      });
+
+      it('encodes the data correctly', function() {
+        assert.equal(Clay.encodeDataUri('test', ''), 'dGVzdA%3D%3D');
+        assert.equal(Clay.encodeDataUri('test{2}', ''), 'dGVzdHsyfQ%3D%3D');
+        assert.equal(Clay.encodeDataUri('test{10}', ''), 'dGVzdHsxMH0%3D');
+      });
+
+      it('throws if the input is invalid', function() {
+        assert.throws(function() {
+          Clay.encodeDataUri('♥');
+        });
+      });
+    }
+
+    describe('native', function() {
+      testEncodeDataUri();
+    });
+
+    describe('polyfill', function() {
+      var btoaOriginal = window.btoa;
+
+      before(function() {
+        window.btoa = undefined;
+      });
+
+      testEncodeDataUri();
+
+      after(function() {
+        window.btoa = btoaOriginal;
+      });
+    });
+
+  });
+});