[hybrid][test][Polymer 2.0] app-location cannot properly handle query parameters

[t2ym]

[hybrid][test][Polymer 2.0] app-location cannot properly handle query parameters.

Root Cause

Query parameters disappear during property effects processing.

Workaround

• Use #hash tag instead of ?query_parameter to work around the issue.
• Use t2ym/web-component-tester#6.0.0-wct6-plugin.2 with #hashtag support in html suites

Side Effects of the old workaround

• [Old Workaround (Cancelled)] Comment out app-location
• Side effects for this workaround are unsynchronized URLs with routing, which is currently not used for testing. As a result, views cannot be navigated via the corresponding menu items.

Reproducibility

polymer	app-route	iron-location	Reproducible
2.0.1	2.0.0	2.0.1	✔︎
1.9.1	2.0.0	2.0.1	-
1.9.1	0.9.3	0.8.11	-

[t2ym]

Possibly related issue

PolymerElements/app-route#149

[t2ym]

Not Reproducible with app-location 1.x on Polymer 1.x

1. Open https://news.polymer-project.org/list/top_stories?KEY=VALUE
2. Check if the URL with the query parameter does not change in the address bar
3. Open JavaScript Console
4. Show document.querySelector('news-app').root.querySelector('app-location').route.__queryParams['KEY']
5. Check if "VALUE" is shown properly

[t2ym]

Not Reproducible with app-location 2.0.0 with Polymer 1.9.1

1. Change only the polymer version from #1.9 - 2 to #1.9.1

diff --git a/bower.json b/bower.json
index 7c1bdf9..72b395d 100755
--- a/bower.json
+++ b/bower.json
@@ -18,7 +18,7 @@
     "xliff"
   ],
   "dependencies": {
-    "polymer": "Polymer/polymer#1.9 - 2",
+    "polymer": "Polymer/polymer#1.9.1",
     "region-flags": "^1.0.1",
     "i18n-behavior": "1 - 2",
     "xliff-conv": "^1.0.10",

2. Install bower components with bower install
3. Check if polymer 1.9.1 and app-route 2.0.0 are installed with bower list

bower check-new     Checking for new versions of the project dependencies...
live-localizer#0.0.69-hybrid.3 /home/fedora/WebComponents/components/live-localizer
├─┬ app-layout#2.0.0
│ ├─┬ iron-flex-layout#2.0.0
│ │ └─┬ polymer#1.9.1
│ │   └── webcomponentsjs#0.7.24
│ ├─┬ iron-media-query#2.0.0
│ │ └── polymer#1.9.1
│ ├─┬ iron-resizable-behavior#2.0.0
│ │ └── polymer#1.9.1
│ ├─┬ iron-scroll-target-behavior#2.0.0
│ │ └── polymer#1.9.1
│ └── polymer#1.9.1 (2.0.1 available)
├─┬ app-route#2.0.0
│ ├─┬ iron-location#2.0.1
│ │ └── polymer#1.9.1
│ └── polymer#1.9.1
...

4. Launch with polyserve
5. Access http://host:port/components/live-localizer/demo?KEY=VALUE
6. Check if the URL with the query parameter does not change in the address bar
7. Open JavaScript Console
8. Show document.querySelector('my-app').querySelector('app-location').route.__queryParams['KEY']
9. Check if "VALUE" is shown properly

[t2ym]

Reproducible with app-location 2.0.0 with Polymer 2.0.1

1. Check if bower.json is the original version with git diff bower.json
2. Install bower components with bower install
3. Check if polymer 2.0.1 and app-route 2.0.0 are installed with bower list

bower check-new     Checking for new versions of the project dependencies...
live-localizer#0.0.69-hybrid.3 /home/fedora/WebComponents/components/live-localizer
├─┬ app-layout#2.0.0
│ ├─┬ iron-flex-layout#2.0.0
│ │ └─┬ polymer#2.0.1
│ │   ├── shadycss#1.0.1
│ │   └── webcomponentsjs#1.0.1
│ ├─┬ iron-media-query#2.0.0
│ │ └─┬ polymer#2.0.1
│ │   ├── shadycss#1.0.1
│ │   └── webcomponentsjs#1.0.1
│ ├─┬ iron-resizable-behavior#2.0.0
│ │ └─┬ polymer#2.0.1
│ │   ├── shadycss#1.0.1
│ │   └── webcomponentsjs#1.0.1
│ ├─┬ iron-scroll-target-behavior#2.0.0
│ │ └─┬ polymer#2.0.1
│ │   ├── shadycss#1.0.1
│ │   └── webcomponentsjs#1.0.1
│ └─┬ polymer#2.0.1
│   ├── shadycss#1.0.1
│   └── webcomponentsjs#1.0.1
├─┬ app-route#2.0.0
│ ├─┬ iron-location#2.0.1
│ │ └─┬ polymer#2.0.1
│ │   ├── shadycss#1.0.1
│ │   └── webcomponentsjs#1.0.1
│ └─┬ polymer#2.0.1
│   ├── shadycss#1.0.1
│   └── webcomponentsjs#1.0.1
...

4. Launch with polyserve
5. Access http://host:port/components/live-localizer/demo?KEY=VALUE
6. Check if the URL with the query parameter disappear in the address bar
7. Open JavaScript Console
8. Show document.querySelector('my-app').root.querySelector('app-location').route.__queryParams['KEY']
9. Check if undefined is shown properly

[t2ym]

As the root cause is not in live-localizer and the workarounds are effective, the issue can be closed.