ui: Ensure URLs for tabs change when selecting a different DC (#8397)

* ui: Add URLs to tabs to we can assert them

* Add dcs to the service show page, temporarily

There is an ongoing PR which removes the need to do this by adding a dcs
property to the navigation, hence temporary

* Add a step to assert on whether text _contains_ rather than exact match

* Test whether the URL of the instance tab changes when the user switches dcs using the main navigation menu

* Recompute href-to's on URL change, just like is-href

ui-v2/app/components/tab-nav/pageobject.js

@@ -1,4 +1,4 @@
-import { is, clickable } from 'ember-cli-page-object';
+import { is, clickable, attribute } from 'ember-cli-page-object';
 import ucfirst from 'consul-ui/utils/ucfirst';
 export default function(name, items, blankKey = 'all') {
   return items.reduce(function(prev, item, i, arr) {
@@ -17,6 +17,7 @@ export default function(name, items, blankKey = 'all') {
       ...prev,
       ...{
         [`${key}IsSelected`]: is('.selected', `[data-test-tab="${name}_${item}"]`),
+        [`${key}Url`]: attribute('href', `[data-test-tab="${name}_${item}"] a`),
         [key]: clickable(`[data-test-tab="${name}_${item}"] a`),
       },
     };

ui-v2/app/helpers/href-to.js

@@ -1,8 +1,11 @@
+/*eslint ember/no-observers: "warn"*/
+// TODO: Remove ^
 // This helper requires `ember-href-to` for the moment at least
 // It's similar code but allows us to check on the type of route
 // (dynamic or wildcard) and encode or not depending on the type
 import { inject as service } from '@ember/service';
 import Helper from '@ember/component/helper';
+import { observer } from '@ember/object';
 import { hrefTo as _hrefTo } from 'ember-href-to/helpers/href-to';
 
 import wildcard from 'consul-ui/utils/routing/wildcard';
@@ -39,4 +42,7 @@ export default Helper.extend({
   compute(params, hash) {
     return hrefTo(this, this.router, params, hash);
   },
+  onURLChange: observer('router.currentURL', function() {
+    this.recompute();
+  }),
 });

ui-v2/tests/acceptance/dc/services/show/dc-switch.feature

@@ -0,0 +1,27 @@
+@setupApplicationTest
+Feature: dc / services / show / dc-switch : Switching Datacenters
+  Scenario: Seeing all services when switching datacenters
+    Given 2 datacenter models from yaml
+    ---
+      - dc-1
+      - dc-2
+    ---
+    And 1 node model
+    And 1 service model from yaml
+    ---
+    - Service:
+        Service: consul
+        Kind: ~
+    ---
+
+    When I visit the service page for yaml
+    ---
+      dc: dc-1
+      service: consul
+    ---
+    Then the url should be /dc-1/services/consul/instances
+    And I see instancesUrl on the tabs contains "/dc-1/services/consul/instances"
+    When I click dc on the navigation
+    And I click dcs.1.name
+    Then the url should be /dc-2/services/consul/instances
+    And I see instancesUrl on the tabs contains "/dc-2/services/consul/instances"

ui-v2/tests/acceptance/steps/dc/services/show/dc-switch-steps.js

@@ -0,0 +1,10 @@
+import steps from '../../../steps';
+
+// step definitions that are shared between features should be moved to the
+// tests/acceptance/steps/steps.js file
+
+export default function(assert) {
+  return steps(assert).then('I should find a file', function() {
+    assert.ok(true, this.step);
+  });
+}

ui-v2/tests/pages.js

@@ -150,7 +150,16 @@ export default {
     )
   ),
   service: create(
-    service(visitable, attribute, collection, text, consulIntentionList, catalogToolbar, tabgroup)
+    service(
+      visitable,
+      clickable,
+      attribute,
+      collection,
+      text,
+      consulIntentionList,
+      catalogToolbar,
+      tabgroup
+    )
   ),
   instance: create(instance(visitable, attribute, collection, text, tabgroup)),
   nodes: create(nodes(visitable, clickable, attribute, collection, catalogFilter)),

ui-v2/tests/pages/dc/services/show.js

@@ -1,4 +1,13 @@
-export default function(visitable, attribute, collection, text, intentions, filter, tabs) {
+export default function(
+  visitable,
+  clickable,
+  attribute,
+  collection,
+  text,
+  intentions,
+  filter,
+  tabs
+) {
   const page = {
     visit: visitable('/:dc/services/:service'),
     externalSource: attribute('data-test-external-source', '[data-test-external-source]', {
@@ -17,6 +26,10 @@ export default function(visitable, attribute, collection, text, intentions, filt
     ]),
     filter: filter(),
 
+    dcs: collection('[data-test-datacenter-picker]', {
+      name: clickable('a'),
+    }),
+
     // TODO: These need to somehow move to subpages
     instances: collection('.consul-service-instance-list > ul > li:not(:first-child)', {
       address: text('[data-test-address]'),

ui-v2/tests/steps/assertions/page.js

@@ -159,10 +159,10 @@ export default function(scenario, assert, find, currentPage) {
     })
     .then(
       [
-        'I see $property on the $component like "$value"',
-        "I see $property on the $component like '$value'",
+        `I see $property on the $component (contains|like) "$value"`,
+        `I see $property on the $component (contains|like) '$value'`,
       ],
-      function(property, component, value) {
+      function(property, component, containsLike, value) {
         let target;
         try {
           if (typeof component === 'string') {
@@ -172,11 +172,18 @@ export default function(scenario, assert, find, currentPage) {
         } catch (e) {
           throw e;
         }
-        assert.equal(
-          target,
-          value,
-          `Expected to see ${property} on ${component} as ${value}, was ${target}`
-        );
+        if (containsLike === 'like') {
+          assert.equal(
+            target,
+            value,
+            `Expected to see ${property} on ${component} as ${value}, was ${target}`
+          );
+        } else {
+          assert.ok(
+            target.indexOf(value) !== -1,
+            `Expected to see ${property} on ${component} within ${value}, was ${target}`
+          );
+        }
       }
     )
     .then(['I see $property like "$value"'], function(property, value) {