ui: Adds an acceptance test for hiding Blocking Queries (#7162)

* Adds an acceptance test for hiding Blocking Queries

* Creates a new scenario - If a user adds CONSUL_UI_DISABLE_REALTIME to localStorage, the Blocking Queries section is hidden.

* Updates page assertion to accept functions and booleans as properties

* ui: Fix "don't see" step to watch for the different pageObject error

ember-cli-page object seems to throw a an error with a different message
depending on how you call a function:

currentPage()[property]() // message = 'Element not found'

const prop = currentPage()[property];
prop() // message = 'Something about destructuring'

This changes the step/test/assertion to ensure we check for both types of errors

Co-authored-by: John Cowen <johncowen@users.noreply.github.com>

ui-v2/app/templates/settings.hbs

@@ -26,7 +26,7 @@
           </label>
         </fieldset>
       {{#if (not (env 'CONSUL_UI_DISABLE_REALTIME'))}}
-        <fieldset>
+        <fieldset data-test-blocking-queries>
           <h2>Blocking Queries</h2>
           <p>Keep catalog info up-to-date without refreshing the page. Any changes made to services, nodes and intentions would be reflected in real time.</p>
           <div class="type-toggle">

ui-v2/tests/acceptance/settings/show.feature

@@ -2,8 +2,23 @@
 @notNamespaceable
 
 Feature: settings / show: Show Settings Page
-  Scenario:
+  Scenario: I see the Blocking queries
     Given 1 datacenter model with the value "datacenter"
     When I visit the settings page
     Then the url should be /setting
     And the title should be "Settings - Consul"
+    And I see blockingQueries
+  Scenario: Setting CONSUL_UI_DISABLE_REALTIME hides Blocking Queries
+    Given 1 datacenter model with the value "datacenter"
+    And settings from yaml
+    ---
+      CONSUL_UI_DISABLE_REALTIME: 1
+    ---
+    Then I have settings like yaml
+    ---
+      CONSUL_UI_DISABLE_REALTIME: "1"
+    ---
+    When I visit the settings page
+    Then the url should be /setting
+    And the title should be "Settings - Consul"
+    And I don't see blockingQueries

ui-v2/tests/pages.js

@@ -1,4 +1,12 @@
-import { create, clickable, is, attribute, collection, text } from 'ember-cli-page-object';
+import {
+  create,
+  clickable,
+  is,
+  attribute,
+  collection,
+  text,
+  isPresent,
+} from 'ember-cli-page-object';
 import { alias } from 'ember-cli-page-object/macros';
 import { visitable } from 'consul-ui/tests/lib/page-object/visitable';
 import createDeletable from 'consul-ui/tests/lib/page-object/createDeletable';
@@ -112,5 +120,5 @@ export default {
   nspace: create(
     nspace(visitable, submitable, deletable, cancelable, policySelector, roleSelector)
   ),
-  settings: create(settings(visitable, submitable)),
+  settings: create(settings(visitable, submitable, isPresent)),
 };

ui-v2/tests/pages/settings.js

@@ -1,5 +1,6 @@
-export default function(visitable, submitable) {
+export default function(visitable, submitable, isPresent) {
   return submitable({
     visit: visitable('/setting'),
+    blockingQueries: isPresent('[data-test-blocking-queries]'),
   });
 }

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

@@ -123,15 +123,30 @@ export default function(scenario, assert, find, currentPage) {
       }
     })
     .then(["I don't see $property"], function(property) {
-      assert.throws(
-        function() {
-          return currentPage()[property]();
-        },
-        function(e) {
-          return e.message.startsWith('Element not found');
-        },
-        `Expected to not see ${property}`
-      );
+      const message = `Expected to not see ${property}`;
+      let prop;
+      try {
+        prop = currentPage()[property];
+      } catch (e) {
+        if (isExpectedError(e)) {
+          assert.ok(true, message);
+        } else {
+          throw e;
+        }
+      }
+      if (typeof prop === 'function') {
+        assert.throws(
+          function() {
+            prop();
+          },
+          function(e) {
+            return isExpectedError(e);
+          },
+          message
+        );
+      } else {
+        assert.notOk(prop);
+      }
     })
     .then(['I see $property'], function(property) {
       assert.ok(currentPage()[property], `Expected to see ${property}`);