ui: Add some acceptance testing around the Metrics graph (#9785)

* Add a way to set the local datacenter

* Amend step so we can positively and negatively look for elements

* Add a data-test selector so we can get to the topology series graph

* Add a couple of tests to verify the series graph shows/doesn't show

ui/packages/consul-ui/app/components/topology-metrics/series/index.hbs

@@ -23,7 +23,7 @@
   {{/if}}
 {{/if}}
 
-<div class="sparkline-wrapper">
+<div data-test-sparkline class="sparkline-wrapper">
   <div class="tooltip">
     <div class="sparkline-time">Timestamp</div>
   </div>

ui/packages/consul-ui/tests/acceptance/dc/services/show/topology.feature

@@ -2,6 +2,7 @@
 Feature: dc / services / show / topology: Intention Create
   Background:
     Given 1 datacenter model with the value "datacenter"
+    And the local datacenter is "datacenter"
     And 1 intention model from yaml
     ---
       SourceNS: default
@@ -26,17 +27,43 @@ Feature: dc / services / show / topology: Intention Create
           Datacenter: datacenter
           Intention: {}
     ---
+  Scenario: Metrics is not enabled with prometheus provider
     When I visit the service page for yaml
     ---
       dc: datacenter
       service: web
     ---
+    And I don't see the "[data-test-sparkline]" element
+  Scenario: Metrics is enabled with prometheus provider
+    Given 1 datacenter model with the value "datacenter"
+    And the local datacenter is "datacenter"
+    And ui_config from yaml
+    ---
+    metrics_proxy_enabled: true
+    metrics_provider: 'prometheus'
+    ---
+    When I visit the service page for yaml
+    ---
+      dc: datacenter
+      service: web
+    ---
+    And I see the "[data-test-sparkline]" element
   Scenario: Allow a connection between service and upstream by saving an intention
+    When I visit the service page for yaml
+    ---
+      dc: datacenter
+      service: web
+    ---
     When I click ".consul-topology-metrics [data-test-action]"
     And I click ".consul-topology-metrics [data-test-confirm]"
     And "[data-notification]" has the "success" class
   Scenario: There was an error saving the intention
     Given the url "/v1/connect/intentions/exact?source=default%2Fweb&destination=default%2Fdb&dc=datacenter" responds with a 500 status
+    When I visit the service page for yaml
+    ---
+      dc: datacenter
+      service: web
+    ---
     When I click ".consul-topology-metrics [data-test-action]"
     And I click ".consul-topology-metrics [data-test-confirm]"
     And "[data-notification]" has the "error" class

ui/packages/consul-ui/tests/steps/assertions/dom.js

@@ -1,3 +1,4 @@
+const dont = `( don't| shouldn't| can't)?`;
 export default function(scenario, assert, pauseUntil, find, currentURL, clipboard) {
   scenario
     .then('pause until I see the text "$text" in "$selector"', function(text, selector) {
@@ -41,15 +42,19 @@ export default function(scenario, assert, pauseUntil, find, currentURL, clipboar
         .dom(document.querySelector(selector))
         .hasClass(cls, `Expected [class] to contain ${cls} on ${selector}`);
     })
-    .then([`I don't see the "$selector" element`], function(selector) {
-      assert.equal(document.querySelector(selector), null, `Expected not to see ${selector}`);
-    })
     .then(['"$selector" doesn\'t have the "$class" class'], function(selector, cls) {
       assert.ok(
         !document.querySelector(selector).classList.contains(cls),
         `Expected [class] not to contain ${cls} on ${selector}`
       );
     })
+    .then([`I${dont} see the "$selector" element`], function(negative, selector) {
+      assert[negative ? 'equal' : 'notEqual'](
+        document.querySelector(selector),
+        null,
+        `Expected${negative ? ' not' : ''} to see ${selector}`
+      );
+    })
     // TODO: Make this accept a 'contains' word so you can search for text containing also
     .then('I have settings like yaml\n$yaml', function(data) {
       // TODO: Inject this

ui/packages/consul-ui/tests/steps/doubles/model.js

@@ -22,5 +22,8 @@ export default function(scenario, create, win = window, doc = document) {
     })
     .given(['ui_config from yaml\n$yaml'], function(data) {
       doc.cookie = `CONSUL_UI_CONFIG=${JSON.stringify(data)}`;
+    })
+    .given(['the local datacenter is "$value"'], function(value) {
+      doc.cookie = `CONSUL_DATACENTER_LOCAL=${value}`;
     });
 }