extract watchinfo etc from Pebble object

2026-08-29 21:36:54 -04:00 · 2016-02-19 15:29:11 -08:00
parent 7fb8d6c69e
commit 94428b1826
4 changed files with 141 additions and 9 deletions
@@ -29,11 +29,13 @@ function Clay(config, customFn, options) {
  self.config = config;
  self.customFn = customFn || function() {};
  self.components = {};
+  self.meta = {};

  // Let Clay handle all the magic
  if (options.autoHandleEvents !== false && typeof Pebble !== 'undefined') {

    Pebble.addEventListener('showConfiguration', function() {
+      _populateMeta();
      Pebble.openURL(self.generateUrl());
    });

@@ -49,6 +51,23 @@ function Clay(config, customFn, options) {
        console.log(JSON.stringify(error));
      });
    });
+  } else if (typeof Pebble !== 'undefined') {
+    Pebble.addEventListener('ready', function() {
+      _populateMeta();
+    });
+  }
+
+  /**
+   * Populate the meta with data from the Pebble object. Make sure to run this inside
+   * either the "showConfiguration" or "ready" event handler
+   * @return {void}
+   */
+  function _populateMeta() {
+    self.meta = !Pebble ? {} : {
+      activeWatchInfo: Pebble.getActiveWatchInfo && Pebble.getActiveWatchInfo(),
+      accountToken: Pebble.getAccountToken(),
+      watchToken: Pebble.getWatchToken()
+    };
  }

  /**
@@ -107,7 +126,8 @@ Clay.prototype.generateUrl = function() {
    .replace('$$CUSTOM_FN$$', toSource(this.customFn))
    .replace('$$CONFIG$$', toSource(this.config))
    .replace('$$SETTINGS$$', toSource(settings))
-    .replace('$$COMPONENTS$$', toSource(this.components));
+    .replace('$$COMPONENTS$$', toSource(this.components))
+    .replace('$$META$$', toSource(this.meta));

  // if we are in the emulator then we need to proxy the data via a webpage to
  // obtain the return_to.
@@ -10,6 +10,7 @@
      window.claySettings = $$SETTINGS$$;
      window.customFn = $$CUSTOM_FN$$;
      window.clayComponents = $$COMPONENTS$$;
+      window.clayMeta = $$META$$;
    </script>
  </head>
  <body>
@@ -5,6 +5,21 @@ var Clay = require('../../index');
 var assert = require('chai').assert;
 var standardComponents = require('../../src/scripts/components');
 var sinon = require('sinon');
+var toSource = require('tosource');
+
+var accountToken = '0123456789abcdef0123456789abcdef';
+var watchToken = '0123456789abcdef0123456789abcdef';
+var activeWatchInfo = {
+  platform: 'chalk',
+  model: 'qemu_platform_chalk',
+  language: 'en_US',
+  firmware: {
+    major: 3,
+    minor: 3,
+    patch: 2,
+    suffix: ''
+  }
+};

 /**
 * @return {void}
@@ -13,7 +28,10 @@ function stubPebble() {
  global.Pebble = {
    addEventListener: sinon.stub(),
    openURL: sinon.stub(),
-    sendAppMessage: sinon.stub()
+    sendAppMessage: sinon.stub(),
+    getActiveWatchInfo: sinon.stub().returns(activeWatchInfo),
+    getAccountToken: sinon.stub().returns(accountToken),
+    getWatchToken: sinon.stub().returns(watchToken)
  };
 }

@@ -99,7 +117,14 @@ describe('Clay', function() {
       'if autoHandleEvents is false', function() {
      stubPebble();
      fixture.clay([], null, { autoHandleEvents: false });
-      assert.strictEqual(Pebble.addEventListener.called, false);
+      assert.strictEqual(
+        Pebble.addEventListener.withArgs('webviewclosed').called,
+        false
+      );
+      assert.strictEqual(
+        Pebble.addEventListener.withArgs('showConfiguration').called,
+        false
+      );
    });
  });

@@ -117,13 +142,67 @@ describe('Clay', function() {
  });

  describe('.generateUrl()', function() {
+
+    /**
+     * Decode the generated data URI into just the HTML portion
+     * @param {string} url
+     * @returns {string}
+     */
+    function decodeUrl(url) {
+      return atob(decodeURIComponent(url.replace(/^.*?[#,]/, '')));
+    }
+
+    describe('string substitutions', function() {
+      var customFn = function() { this.getAllItems(); };
+      var config = fixture.config(['input', 'color']);
+      var settings = { appKey: 'value' };
+      var clay;
+      var html;
+
+      before(function() {
+        stubPebble();
+        clay = fixture.clay(config, customFn);
+        Pebble.addEventListener.withArgs('showConfiguration').callArg(1);
+        localStorage.setItem('clay-settings', JSON.stringify(settings));
+        html = decodeUrl(clay.generateUrl());
+      });
+
+      it('Substitutes $$RETURN_TO$$ with the pebblejs://close#', function() {
+        assert.notInclude(html, '$$RETURN_TO$$');
+        assert.include(html, 'window.returnTo="pebblejs://close#"');
+      });
+
+      it('Substitutes $$CUSTOM_FN$$ with the customFn', function() {
+        assert.notInclude(html, '$$CUSTOM_FN$$');
+        assert.include(html, 'window.customFn=' + toSource(customFn));
+      });
+
+      it('Substitutes $$CONFIG$$ with the config', function() {
+        assert.notInclude(html, '$$CONFIG$$');
+        assert.include(html, 'window.clayConfig=' + toSource(config));
+      });
+
+      it('Substitutes $$SETTINGS$$ with the config', function() {
+        assert.notInclude(html, '$$SETTINGS$$');
+        assert.include(html, 'window.claySettings=' + toSource(settings));
+      });
+
+      it('Substitutes $$COMPONENTS$$ with the config', function() {
+        assert.notInclude(html, '$$COMPONENTS$$');
+        assert.include(html, 'window.clayComponents=' + toSource(clay.components));
+      });
+
+      it('Substitutes $$META$$ with the config', function() {
+        assert.notInclude(html, '$$META$$');
+        assert.include(html, 'window.clayMeta=' + toSource(clay.meta));
+      });
+    });
+
    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\$\$/);
+      assert.match(decodeUrl(clay.generateUrl()), /\$\$RETURN_TO\$\$/);
    });

    it('returns the emulator URL if inside emulator', function() {
@@ -170,6 +249,38 @@ describe('Clay', function() {
    });
  });

+  describe('.meta', function() {
+    it('populates the meta in the showConfiguration handler', function() {
+      stubPebble();
+      var clay = fixture.clay([]);
+
+      // meta only gets populated after showConfiguration happens
+      assert.deepEqual(clay.meta, {});
+      Pebble.addEventListener.withArgs('showConfiguration').callArg(1);
+
+      assert.deepEqual(clay.meta, {
+        activeWatchInfo: activeWatchInfo,
+        accountToken: accountToken,
+        watchToken: watchToken
+      });
+    });
+
+    it('populates the meta in the ready handler', function() {
+      stubPebble();
+      var clay = fixture.clay([], null, {autoHandleEvents: false});
+
+      // meta only gets populated after showConfiguration happens
+      assert.deepEqual(clay.meta, {});
+      Pebble.addEventListener.withArgs('ready').callArg(1);
+
+      assert.deepEqual(clay.meta, {
+        activeWatchInfo: activeWatchInfo,
+        accountToken: accountToken,
+        watchToken: watchToken
+      });
+    });
+  });
+
  describe('Clay.encodeDataUri()', function() {

    /**