ui: Add tests for topology metrics stats (#10600)

ui/packages/consul-ui/app/components/topology-metrics/card/index.scss

@@ -75,7 +75,4 @@
   .details {
     padding: 0 12px 12px 12px;
   }
-  div.stats {
-    border-top: 1px solid $gray-200;
-  }
 }

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

@@ -15,7 +15,7 @@
   />
 {{/if}}
 
-<div class="stats">
+<div ...attributes class="topology-metrics-stats" data-test-topology-metrics-stats>
   {{#if hasLoaded }}
     {{#each stats as |stat|}}
     <dl {{tooltip

ui/packages/consul-ui/app/components/topology-metrics/stats/index.scss

@@ -1,10 +1,11 @@
-.stats {
+.topology-metrics-stats {
   padding: 12px 12px 0 12px;
   display: flex;
   flex-flow: row wrap;
   justify-content: space-between;
   align-items: stretch;
   width: 100%;
+  border-top: 1px solid var(--gray-200);
   dl {
     display: flex;
     padding-bottom: 12px;

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

@@ -0,0 +1,36 @@
+@setupApplicationTest
+Feature: dc / services / show / topology / stats
+  Scenario: Given metrics is disabled,the Topology tab should not display metrics
+    Given 1 datacenter model with the value "dc1"
+    And 1 node models
+    And 1 service model from yaml
+    ---
+    - Service:
+        Name: service-0
+        ID: service-0-with-id
+    ---
+    When I visit the service page for yaml
+    ---
+      dc: dc1
+      service: service-0
+    ---
+    And I see topology on the tabs
+    And I don't see the "[data-test-topology-metrics-stats]" element
+  Scenario: Given metrics is enabled, the Topology tab should display metrics
+    Given 1 datacenter model with the value "dc1"
+    Given a "prometheus" metrics provider
+    And 1 node models
+    And 1 service model from yaml
+    ---
+    - Service:
+        Name: service-0
+        ID: service-0-with-id
+    ---
+    When I visit the service page for yaml
+    ---
+      dc: dc1
+      service: service-0
+    ---
+    And I see topology on the tabs
+    And I see the "[data-test-topology-metrics-stats]" element
+

ui/packages/consul-ui/tests/acceptance/steps/dc/services/show/topology/stats-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/packages/consul-ui/tests/steps/doubles/model.js

@@ -32,6 +32,10 @@ export default function(scenario, create, set, win = window, doc = document) {
     .given(['ACLs are disabled'], function() {
       doc.cookie = `CONSUL_ACLS_ENABLE=0`;
     })
+    .given(['a "$value" metrics provider'], function(value) {
+      doc.cookie = `CONSUL_METRICS_PROXY_ENABLE=1`;
+      doc.cookie = `CONSUL_METRICS_PROVIDER=${value}`;
+    })
     .given(['permissions from yaml\n$yaml'], function(data) {
       Object.entries(data).forEach(([key, value]) => {
         const resource = `CONSUL_RESOURCE_${key.toUpperCase()}`;