From 6d25d9b08b1763dc98e64a15926864c5aa97c3f6 Mon Sep 17 00:00:00 2001
From: Chris Joel <cdata@google.com>
Date: Tue, 9 Feb 2016 16:44:11 -0800
Subject: [PATCH] Implement `<carbon-location>`

 - `<carbon-router>` has been re-imagined as the more obscure, more
   unwieldy `<carbon-route-converter>` aka "do not use unless you know
   what you are doing."
 - `<carbon-location>` is a macro element that composes
   `<iron-page-url>`, `<iron-query-params>` and
   `<carbon-route-converter>`
---
 bower.json                       |   3 +-
 carbon-location.html             |  59 +++++++++++++++
 carbon-route-converter.html      |  76 +++++++++++++++++++
 carbon-router.html               |  53 -------------
 test/app-example-1.html          |   8 +-
 test/carbon-location.html        | 124 +++++++++++++++++++++++++++++++
 test/carbon-route-converter.html |  57 ++++++++++++++
 test/carbon-router.html          |  57 --------------
 test/index.html                  |   3 +-
 9 files changed, 324 insertions(+), 116 deletions(-)
 create mode 100644 carbon-location.html
 create mode 100644 carbon-route-converter.html
 delete mode 100644 carbon-router.html
 create mode 100644 test/carbon-location.html
 create mode 100644 test/carbon-route-converter.html
 delete mode 100644 test/carbon-router.html

diff --git a/bower.json b/bower.json
index 09c5b33..4d96e76 100644
--- a/bower.json
+++ b/bower.json
@@ -19,7 +19,8 @@
     "paper-tabs": "polymerelements/paper-tabs#~1.2.3",
     "paper-input": "polymerelements/paper-input#~1.1.2",
     "paper-slider": "polymerelements/paper-slider#~1.0.8",
-    "neon-animation": "polymerelements/neon-animation#~1.0.8"
+    "neon-animation": "polymerelements/neon-animation#~1.0.8",
+    "web-component-tester": "polymer/web-component-tester#^4.0.0"
   },
   "dependencies": {
     "polymer": "polymer/polymer#~1.2.3"
diff --git a/carbon-location.html b/carbon-location.html
new file mode 100644
index 0000000..e5be983
--- /dev/null
+++ b/carbon-location.html
@@ -0,0 +1,59 @@
+link rel="import" href="../polymer/polymer.html">
+<link rel="import" href="../iron-page-url/iron-page-url.html">
+<link rel="import" href="../iron-page-url/iron-query-params.html">
+<link rel="import" href="carbon-route-converter.html">
+
+<dom-module id="carbon-location">
+  <template>
+    <iron-page-url path="{{__path}}" query="{{__query}}"></iron-page-url>
+    <iron-query-params
+        params-string="{{__query}}"
+        params-object="{{__queryParams}}">
+    </iron-query-params>
+    <carbon-route-converter
+        path="{{__path}}"
+        query-params="{{__queryParams}}"
+        route="{{route}}">
+    </carbon-route-converter>
+  </template>
+  <script>
+    'use strict';
+
+    Polymer({
+      is: 'carbon-location',
+
+      properties: {
+        /**
+         * A model representing the deserialized path through the route tree, as
+         * well as the current queryParams.
+         */
+        route: {
+          type: Object,
+          notify: true
+        },
+
+        /**
+         * A set of key/value pairs that are universally accessible to branches
+         * of the route tree.
+         */
+        __queryParams: {
+          type: Object
+        },
+
+        /**
+         * The pathname component of the current URL.
+         */
+        __path: {
+          type: String
+        },
+
+        /**
+         * The query string portion of the current URL.
+         */
+        __query: {
+          type: String
+        }
+      }
+    });
+  </script>
+</dom-module>
diff --git a/carbon-route-converter.html b/carbon-route-converter.html
new file mode 100644
index 0000000..0bc1179
--- /dev/null
+++ b/carbon-route-converter.html
@@ -0,0 +1,76 @@
+<link rel="import" href="../polymer/polymer.html">
+
+<script>
+  'use strict';
+
+  Polymer({
+    is: 'carbon-route-converter',
+
+    properties: {
+      /**
+       * A model representing the deserialized path through the route tree, as
+       * well as the current queryParams.
+       *
+       * A route object is the kernel of the routing system. It is intended to
+       * be fed into consuming elements such as `carbon-route`.
+       */
+      route: {
+        type: Object,
+        value: null,
+        notify: true
+      },
+
+      /**
+       * A set of key/value pairs that are universally accessible to branches of
+       * the route tree.
+       */
+      queryParams: {
+        type: Object,
+        value: null,
+        notify: true
+      },
+
+      /**
+       * The serialized path through the route tree. This corresponds to the
+       * `window.location.pathname` value, and will update to reflect changes
+       * to that valaue.
+       */
+      path: {
+        type: String,
+        notify: true
+      }
+    },
+
+    observers: [
+      '_locationChanged(path, queryParams)',
+      '_routeChanged(route.prefix, route.path)',
+      '_routeQueryParamsChanged(route.queryParams)'
+    ],
+
+    created: function() {
+      this.linkPaths('route.queryParams', 'queryParams');
+    },
+
+    _locationChanged: function(path) {
+      this.route = {
+        prefix: '',
+        path: path,
+        queryParams: this.queryParams
+      };
+    },
+
+    _routeChanged: function(prefix, path) {
+      if (!this.route) {
+        return;
+      }
+      this.path = prefix + path;
+    },
+
+    _routeQueryParamsChanged: function(queryParams) {
+      if (!this.route) {
+        return;
+      }
+      this.queryParams = queryParams;
+    }
+  });
+</script>
diff --git a/carbon-router.html b/carbon-router.html
deleted file mode 100644
index dd7fda4..0000000
--- a/carbon-router.html
+++ /dev/null
@@ -1,53 +0,0 @@
-<link rel="import" href="../polymer/polymer.html">
-
-<script>
-  Polymer({
-    is: 'carbon-router',
-    properties: {
-      route: {
-        type: Object,
-        value: null,
-        notify: true
-      },
-
-      queryParams: {
-        type: Object,
-        value: function() {return {};},
-        notify: true,
-      },
-
-      path: {
-        type: String,
-        notify: true
-      }
-    },
-    observers: [
-      '_locationChanged(path, queryParams)',
-      '_routeChanged(route.prefix, route.path)',
-      '_routeQueryParamsChanged(route.queryParams)'
-    ],
-
-    _locationChanged: function(path, queryParams) {
-      this.route = {
-        prefix: '',
-        path: path,
-        queryParams: queryParams
-      };
-    },
-
-    _routeChanged: function() {
-      if (!this.route) {
-        return;
-      }
-      this.path = this.route.prefix + this.route.path;
-    },
-
-    _routeQueryParamsChanged: function() {
-      if (!this.route) {
-        return;
-      }
-      this.queryParams = this.route.queryParams;
-    }
-
-  });
-</script>
diff --git a/test/app-example-1.html b/test/app-example-1.html
index d664469..7cb38a3 100644
--- a/test/app-example-1.html
+++ b/test/app-example-1.html
@@ -1,10 +1,10 @@
 <link rel='import' href='../carbon-route.html'>
-<link rel='import' href='../carbon-router.html'>
+<link rel='import' href='../carbon-route-converter.html'>
 
 <dom-module id='app-example-1'>
   <template>
-    <carbon-router path='{{path}}' route='{{route}}'>
-    </carbon-router>
+    <carbon-route-converter path='{{path}}' route='{{route}}'>
+    </carbon-route-converter>
     <carbon-route route='{{route}}' match='/:page' data='{{data}}'>
     </carbon-route>
     <carbon-route route='{{route}}' match='/user' tail='{{userRoute}}'>
@@ -24,7 +24,7 @@
 
         },
         userData: {
-          
+
         }
       }
     })
diff --git a/test/carbon-location.html b/test/carbon-location.html
new file mode 100644
index 0000000..efde280
--- /dev/null
+++ b/test/carbon-location.html
@@ -0,0 +1,124 @@
+<!doctype html>
+<!--
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <title>carbon-location</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+
+  <link rel="import" href="../../polymer/polymer.html">
+  <link rel="import" href="../carbon-location.html">
+</head>
+<body>
+  <test-fixture id="BasicLocation">
+    <template>
+      <carbon-location></carbon-location>
+    </template>
+  </test-fixture>
+
+  <script>
+    'use strict';
+
+    function setLocation(url) {
+      window.history.pushState({}, '', url);
+      Polymer.Base.fire('location-changed', {}, { node: window });
+    }
+
+    function assign(a, b) {
+      if (Object.assign) {
+        return Object.assign.apply(Object, arguments);
+      }
+
+      for (var property in b) {
+        a[property] = b[property];
+      }
+
+      return a;
+    }
+
+    suite('<carbon-location>', function () {
+      var carbonLocation;
+
+      setup(function() {
+        carbonLocation = fixture('BasicLocation');
+      });
+
+      test('it automatically exposes the current route', function() {
+        expect(carbonLocation.route).to.be.ok;
+        expect(carbonLocation.route.path).to.be.equal(window.location.pathname);
+      });
+
+      suite('manipulating the route', function() {
+        var originalPath;
+        var originalQueryParams;
+
+        setup(function() {
+          originalPath = carbonLocation.route.path;
+          originalQueryParams = assign({}, carbonLocation.route.queryParams);
+        });
+
+        teardown(function() {
+          carbonLocation.set('route.prefix', '');
+          carbonLocation.set('route.path', originalPath);
+          carbonLocation.set('route.queryParams', originalQueryParams);
+        });
+
+        test('it reflects path to location.pathname', function() {
+          carbonLocation.set('route.path', '/foo/bar');
+          expect(window.location.pathname).to.be.equal('/foo/bar');
+        });
+
+        test('it reflects queryParams values to location.search', function() {
+          carbonLocation.set('route.queryParams.foo', 1);
+          expect(window.location.search).to.match(/foo=1/);
+        });
+
+        test('it reflects completely replaced queryParams', function() {
+          carbonLocation.set('route.queryParams', { bar: 1 });
+          expect(window.location.search).to.be.equal('?bar=1');
+        });
+
+        test('it reflects the prefix to location.pathname', function() {
+          carbonLocation.set('route.prefix', '/fiz');
+          expect(window.location.pathname).to.be.equal('/fiz' + originalPath);
+        });
+      });
+
+      /**
+       * NOTE: For a more thorough spec describing this behavior, please refer
+       * to the `iron-page-url` component.
+       */
+      suite('manipulating the history state', function() {
+        var originalLocation;
+
+        setup(function() {
+          originalLocation = window.location.toString();
+        });
+
+        teardown(function() {
+          setLocation(originalLocation);
+        });
+
+        test('it reflects location.pathname to route.path', function() {
+          setLocation('/fiz/buz');
+          expect(carbonLocation.route.path).to.be.equal('/fiz/buz');
+        });
+
+        test('it reflects location.search to route.queryParams', function() {
+          setLocation('?fiz=buz');
+          expect(carbonLocation.route.queryParams).to.be.eql({
+            fiz: 'buz'
+          });
+        });
+      });
+    });
+  </script>
+</body>
diff --git a/test/carbon-route-converter.html b/test/carbon-route-converter.html
new file mode 100644
index 0000000..4863e1d
--- /dev/null
+++ b/test/carbon-route-converter.html
@@ -0,0 +1,57 @@
+<!doctype html>
+<!--
+Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
+This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
+The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
+The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
+Code distributed by Google as part of the polymer project is also
+subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
+-->
+<html>
+<head>
+  <title>carbon-route-converter</title>
+
+  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../web-component-tester/browser.js"></script>
+
+  <link rel="import" href="../../polymer/polymer.html">
+  <link rel="import" href="../carbon-route-converter.html">
+</head>
+<body>
+  <test-fixture id="BasicRouteConversion">
+    <template>
+      <carbon-route-converter>
+      </carbon-route-converter>
+    </template>
+  </test-fixture>
+
+  <script>
+    'use strict';
+
+    suite('<carbon-route-converter>', function () {
+      test('it bidirectionally maps path and queryParams to route', function() {
+        var converter = fixture('BasicRouteConversion');
+
+        var queryParams = {x: '10'};
+        converter.path = '/a/b/c';
+        converter.queryParams = queryParams;
+
+        expect(converter.route).to.be.deep.equal({
+          prefix: '',
+          path: '/a/b/c',
+          queryParams: queryParams
+        });
+
+        converter.set('route.path', '/d/e/f');
+        expect(converter.path).to.be.equal('/d/e/f');
+
+        queryParams = {y: '11'};
+        converter.set('route.queryParams', queryParams);
+        expect(converter.queryParams).to.be.deep.equal(queryParams);
+
+        queryParams['z'] = '12';
+        expect(converter.queryParams).to.be.deep.equal(queryParams);
+      });
+    });
+  </script>
+</body>
diff --git a/test/carbon-router.html b/test/carbon-router.html
deleted file mode 100644
index 22b3e4e..0000000
--- a/test/carbon-router.html
+++ /dev/null
@@ -1,57 +0,0 @@
-<!doctype html>
-<!--
-Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
-This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
-The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
-The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
-Code distributed by Google as part of the polymer project is also
-subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
--->
-<html>
-<head>
-  <title>carbon-route</title>
-
-  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
-  <script src="../../web-component-tester/browser.js"></script>
-
-  <link rel="import" href="../../polymer/polymer.html">
-  <link rel="import" href="../carbon-router.html">
-</head>
-<body>
-  <test-fixture id="BasicRouting">
-    <template>
-      <carbon-router>
-      </carbon-router>
-    </template>
-  </test-fixture>
-
-<script>
-  'use strict';
-
-  suite('<carbon-router>', function () {
-    test('it bidirectionally maps path and queryParams to route', function() {
-      var router = fixture('BasicRouting');
-
-      var queryParams = {x: '10'};
-      router.path = '/a/b/c';
-      router.queryParams = queryParams;
-
-      expect(router.route).to.be.deep.equal({
-        prefix: '',
-        path: '/a/b/c',
-        queryParams: queryParams
-      });
-
-      router.set('route.path', '/d/e/f');
-      expect(router.path).to.be.equal('/d/e/f');
-
-      queryParams = {y: '11'};
-      router.set('route.queryParams', queryParams);
-      expect(router.queryParams).to.be.deep.equal(queryParams);
-
-      queryParams['z'] = '12';
-      expect(router.queryParams).to.be.deep.equal(queryParams);
-    });
-  });
-</script>
-</body>
diff --git a/test/index.html b/test/index.html
index 5249a9e..5452c14 100644
--- a/test/index.html
+++ b/test/index.html
@@ -17,8 +17,9 @@
   <body>
     <script>
       WCT.loadSuites([
-        'carbon-router.html',
+        'carbon-route-converter.html',
         'carbon-route.html',
+        'carbon-location.html',
         'test-app-example-1.html',
       ]);
     </script>