Skip to content

Commit

Permalink
Created complete failing test for queryParams
Browse files Browse the repository at this point in the history
The basic idea is that when a link doesn’t specify the value for a query
param, the current value is preserved. 

So, given the hierarchy

```
qps // defines a QP named “string”
  qps.details // defines a QP named “nestedString”
    qps.details.more // defines a QP named “doubleNestedString”
```

Links inside `qps.details.more` that point to `qps.details` will contain
“nestedString=bar&string=foo”, but never “doubleNestedString”.
Links inside `qps.details` that point to `qps` will contain “string=foo”,
but never “nestedString” or “doubleNestedString”.
Links inside `qps.details` that point to `qps.details` with a different
will model will contain “string=foo” but never “nestedString” or “doubleNestedString”.
Links from a route to any descendant route will always include all the 
query params defined in the path.
  • Loading branch information
cibernox committed Jul 2, 2016
1 parent 1c3231c commit c179ed3
Show file tree
Hide file tree
Showing 7 changed files with 81 additions and 27 deletions.
6 changes: 3 additions & 3 deletions addon/helpers/href-to.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,10 +15,10 @@ export default Em.Helper.extend({
queryParams = params.pop().values;
}
let routing = this.get('_routing');
let currentQueryParams = routing.get('currentState.routerJsState.queryParams');
queryParams = Em.merge(Em.merge({}, currentQueryParams), queryParams);
let targetRouteName = params.shift();
let currentQueryParams = routing.get('currentState.routerJsState.fullQueryParams');
queryParams = Em.merge(Em.merge({}, currentQueryParams), queryParams);

return routing.generateURL(targetRouteName, params, queryParams);
}
});
});
2 changes: 1 addition & 1 deletion tests/dummy/app/templates/about.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
[<a href="{{href-to 'about' (query-params section='two')}}" class="js__href-to">Two</a>]
[<a href="{{href-to 'about' (query-params section=dynamic)}}" class="js__href-to">Three</a>]

dynamic QP value for Three link: {{input value=dynamic}}
dynamic QP value for Three link: {{input id="section-attr-input" value=dynamic}}
</div>

<hr />
Expand Down
2 changes: 1 addition & 1 deletion tests/dummy/app/templates/application.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
[<a href="{{href-to 'pages.first'}}">First Page</a>]
[<a href="{{href-to 'pages.second'}}">Second Page</a>]
[<a href="{{href-to 'pages.second'}}"><span id="inner-span">Second Page (with inner span)</span></a>]
[<a href="{{href-to 'qps.index'}}">QPS index</a>]
[<a href="{{href-to 'qps.index'}}" id="qps-href-to">QPS index</a>]
[<a>An anchor with no href</a>]
[<a href="http://localhost:4200/about">An anchor with an absolute href</a>]
[<a href="/about" download>An anchor with a download attribute</a>]
Expand Down
6 changes: 3 additions & 3 deletions tests/dummy/app/templates/qps.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -9,9 +9,9 @@
<td>bool: {{bool}}</td>
</tr>
<tr>
<td><input type="text" value={{string}} oninput={{action (mut string) value="target.value"}}></td>
<td><input type="number" value={{number}} oninput={{action (mut number) value="target.value"}}></td>
<td><input type="checkbox" checked={{bool}} onchange={{action (mut bool) value="target.checked"}}></td>
<td><input type="text" id="qps-input-text" value={{string}} oninput={{action (mut string) value="target.value"}}></td>
<td><input type="number" id="qps-input-number" value={{number}} oninput={{action (mut number) value="target.value"}}></td>
<td><input type="checkbox" id="qps-input-bool" checked={{bool}} onchange={{action (mut bool) value="target.checked"}}></td>
</tr>
</tbody>
</table>
Expand Down
10 changes: 5 additions & 5 deletions tests/dummy/app/templates/qps/details.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -9,14 +9,14 @@
<td>nestedBool: {{nestedBool}}</td>
</tr>
<tr>
<td><input type="text" value={{nestedString}} oninput={{action (mut nestedString) value="target.value"}}></td>
<td><input type="number" value={{nestedNumber}} oninput={{action (mut nestedNumber) value="target.value"}}></td>
<td><input type="checkbox" checked={{nestedBool}} onchange={{action (mut nestedBool) value="target.checked"}}></td>
<td><input type="text" id="qps-input-nested-text" value={{nestedString}} oninput={{action (mut nestedString) value="target.value"}}></td>
<td><input type="number" id="qps-input-nested-number" value={{nestedNumber}} oninput={{action (mut nestedNumber) value="target.value"}}></td>
<td><input type="checkbox" id="qps-input-nested-bool" checked={{nestedBool}} onchange={{action (mut nestedBool) value="target.checked"}}></td>
</tr>
</tbody>
</table>

<a href="{{href-to 'qps.details.more'}}">href-to for more info</a>
{{#link-to 'qps.details.more'}}link-to for more info{{/link-to}}
<a href="{{href-to 'qps.details.more'}}" id="qps-details-more-href-to">href-to for more info</a>
{{#link-to 'qps.details.more' id="qps-details-more-link-to"}}link-to for more info{{/link-to}}
{{outlet}}
</section>
6 changes: 3 additions & 3 deletions tests/dummy/app/templates/qps/details/more.hbs
Original file line number Diff line number Diff line change
Expand Up @@ -10,9 +10,9 @@
<td>dobleNestedBool: {{doubleNestedBool}}</td>
</tr>
<tr>
<td><input type="text" value={{doubleNestedString}} oninput={{action (mut doubleNestedString) value="target.value"}}></td>
<td><input type="number" value={{doubleNestedNumber}} oninput={{action (mut doubleNestedNumber) value="target.value"}}></td>
<td><input type="checkbox" checked={{doubleNestedBool}} onchange={{action (mut doubleNestedBool) value="target.checked"}}></td>
<td><input type="text" id="qps-input-double-nested-text" value={{doubleNestedString}} oninput={{action (mut doubleNestedString) value="target.value"}}></td>
<td><input type="number" id="qps-input-double-nested-number" value={{doubleNestedNumber}} oninput={{action (mut doubleNestedNumber) value="target.value"}}></td>
<td><input type="checkbox" id="qps-input-double-nested-bool" checked={{doubleNestedBool}} onchange={{action (mut doubleNestedBool) value="target.checked"}}></td>
</tr>
</tbody>
</table>
Expand Down
76 changes: 65 additions & 11 deletions tests/integration/href-to-test.js
Original file line number Diff line number Diff line change
Expand Up @@ -64,17 +64,6 @@ test('clicking a href-to to a nested route', function(assert) {
});
});

test('clicking a href-to with query params', function(assert) {
visit('/');
leftClick('#href-to-links a:contains(About)');
leftClick('#about-href-to-links a:contains(Two)');
andThen(function() {
assert.equal(currentURL(), '/about?section=two');
assertAnchorIsActive('#link-to-links a:contains(About)', assert);
assertAnchorIsActive('#about-link-to-links a:contains(Two)', assert);
});
});

test('clicking an action works', function(assert) {
visit('/about');
leftClick('a:contains(Increment)');
Expand All @@ -93,3 +82,68 @@ test('clicking a href-to to should propagate events and prevent default ', funct
assert.equal(event.isPropagationStopped(), false, 'should not stop propagation');
});
});

// Query params
test('clicking a link with explicit query params ({{href-to "route.name" foo=bar}})', function(assert) {
visit('/');
leftClick('#href-to-links a:contains(About)');
leftClick('#about-href-to-links a:contains(Two)');
andThen(function() {
assert.equal(currentURL(), '/about?section=two');
assertAnchorIsActive('#link-to-links a:contains(About)', assert);
assertAnchorIsActive('#about-link-to-links a:contains(Two)', assert);
});
});

test('updating a param passed to href-to ({{href-to "route.name" foo=bar}}) updates the url of the anchor', function(assert) {
visit('/about');
andThen(function() {
assert.equal(find('#about-href-to-links a:contains(Three)').attr('href'), '/about?section=hello');
fillIn('#section-attr-input', 'bye');
});
andThen(function() {
assert.equal(find('#about-href-to-links a:contains(Three)').attr('href'), '/about?section=bye');
});
});

test('links without explicitly passed query params include query params of ancestor routes, but no those of child or sibling routes', function(assert) {
visit('/qps');

andThen(function() {
assert.equal(currentURL(), '/qps');
assert.equal(find('#qps-href-to').attr('href'), '/qps', 'The link to the current route route has no query params');
assert.equal(find('.href-tos a:eq(0)').attr('href'), '/qps/1', 'The link to a child route has no query params');
fillIn('#qps-input-text', 'foo');
});

andThen(function() {
assert.equal(find('#qps-href-to').attr('href'), '/qps?string=foo', 'The link to a parent route has the query params defined on that route');
assert.equal(find('.href-tos a:eq(0)').attr('href'), '/qps/1?string=foo', 'The url the current route has the query params');
leftClick('.href-tos a:eq(0)');
});

andThen(function() {
assert.equal(currentURL(), '/qps/1?string=foo');
fillIn('#qps-input-nested-text', 'bar');
});

andThen(function() {
assert.equal(find('#qps-href-to').attr('href'), '/qps?string=foo', 'The link to a parent route has the query param defined on thar route but not in child routes');
assert.equal(find('.href-tos a:eq(0)').attr('href'), '/qps/1?nestedString=bar&string=foo', 'The url to the current route has the both the query params of parent routes and those in the current one');
assert.equal(find('.href-tos a:eq(1)').attr('href'), '/qps/2?string=foo', 'The url to the current route with a different model has only the query params in the parent');
assert.equal(find('#qps-details-more-href-to').attr('href'), '/qps/1/more?nestedString=bar&string=foo', 'The url to the current route has the both the query params of parent routes and those in the current one');
leftClick('#qps-details-more-href-to');
});

andThen(function() {
assert.equal(currentURL(), '/qps/1?string=foo');
fillIn('#qps-input-double-nested-text', 'qux');
});

andThen(function() {
assert.equal(find('#qps-href-to').attr('href'), '/qps?string=foo', 'The link to a parent route has the query param defined on thar route but not in child routes');
assert.equal(find('.href-tos a:eq(0)').attr('href'), '/qps/1?nestedString=bar&string=foo', 'The url to the parent route has his query params and those of the grandparent route, but not those in the current route');
assert.equal(find('.href-tos a:eq(1)').attr('href'), '/qps/2?string=foo', 'The url to the parent route with a different model has only the query params in the grand parent route');
assert.equal(find('#qps-details-more-href-to').attr('href'), '/qps/1/more?doubleNestedString=qux&nestedString=bar&string=foo', 'The url to the current route has the both the query params of parent routes and those in the current one');
});
});

0 comments on commit c179ed3

Please sign in to comment.