Start purifying page objects

ui-v2/app/templates/dc/acls/-form.hbs

@@ -35,7 +35,7 @@
 {{# if (and (not create) (not-eq item.ID 'anonymous')) }}
         {{#confirmation-dialog message='Are you sure you want to delete this ACL token?'}}
             {{#block-slot 'action' as |confirm|}}
-                <button type="button" class="type-delete" {{action confirm 'delete' item parent}}>Delete</button>
+                <button type="button" data-test-delete class="type-delete" {{action confirm 'delete' item parent}}>Delete</button>
             {{/block-slot}}
             {{#block-slot 'dialog' as |execute cancel message|}}
                 <p>

ui-v2/tests/acceptance/dc/acls/delete.feature

@@ -1,6 +1,6 @@
 @setupApplicationTest
 Feature: dc / acls / delete: ACL Delete
-  Scenario: Delete ACL
+  Scenario: Deleting an ACL from the ACL listing page
     Given 1 datacenter model with the value "datacenter"
     And 1 acl model from yaml
     ---
@@ -15,3 +15,18 @@ Feature: dc / acls / delete: ACL Delete
     And I click delete on the acls
     And I click confirmDelete on the acls
     Then a PUT request is made to "/v1/acl/destroy/key?dc=datacenter"
+  Scenario: Deleting an ACL from the ACL detail page
+    Given 1 datacenter model with the value "datacenter"
+    And 1 acl model from yaml
+    ---
+      Name: something
+      ID: key
+    ---
+    When I visit the acl page for yaml
+    ---
+      dc: datacenter
+      acl: something
+    ---
+    And I click delete
+    And I click confirmDelete
+    Then a PUT request is made to "/v1/acl/destroy/something?dc=datacenter"

ui-v2/tests/lib/page-object/createDeletable.js

@@ -0,0 +1,11 @@
+export default function(clickable) {
+  return function(obj) {
+    return {
+      ...obj,
+      ...{
+        delete: clickable('[data-test-delete]'),
+        confirmDelete: clickable('button.type-delete'),
+      },
+    };
+  };
+}

ui-v2/tests/lib/page-object/createSubmitable.js

@@ -0,0 +1,11 @@
+export default function(clickable, is) {
+  return function(obj) {
+    return {
+      ...obj,
+      ...{
+        submit: clickable('[type=submit]'),
+        submitIsEnabled: is(':not(:disabled)', '[type=submit]'),
+      },
+    };
+  };
+}

ui-v2/tests/pages.js

@@ -1,29 +1,44 @@
+import { create, clickable, is, attribute, collection, text } from 'ember-cli-page-object';
+import { visitable } from 'consul-ui/tests/lib/page-object/visitable';
+import createDeletable from 'consul-ui/tests/lib/page-object/createDeletable';
+import createSubmitable from 'consul-ui/tests/lib/page-object/createSubmitable';
+
+import page from 'consul-ui/tests/pages/components/page';
+import radiogroup from 'consul-ui/tests/lib/page-object/radiogroup';
+
 import index from 'consul-ui/tests/pages/index';
 import dcs from 'consul-ui/tests/pages/dc';
 import settings from 'consul-ui/tests/pages/settings';
+import catalogFilter from 'consul-ui/tests/pages/components/catalog-filter';
 import services from 'consul-ui/tests/pages/dc/services/index';
 import service from 'consul-ui/tests/pages/dc/services/show';
 import nodes from 'consul-ui/tests/pages/dc/nodes/index';
 import node from 'consul-ui/tests/pages/dc/nodes/show';
 import kvs from 'consul-ui/tests/pages/dc/kv/index';
 import kv from 'consul-ui/tests/pages/dc/kv/edit';
+import aclFilter from 'consul-ui/tests/pages/components/acl-filter';
 import acls from 'consul-ui/tests/pages/dc/acls/index';
 import acl from 'consul-ui/tests/pages/dc/acls/edit';
+import intentionFilter from 'consul-ui/tests/pages/components/intention-filter';
 import intentions from 'consul-ui/tests/pages/dc/intentions/index';
 import intention from 'consul-ui/tests/pages/dc/intentions/edit';
 
+const deletable = createDeletable(clickable);
+const submitable = createSubmitable(clickable, is);
 export default {
-  index,
+  index: create(index(visitable, collection)),
-  dcs,
+  dcs: create(dcs(visitable, clickable, attribute, collection)),
-  settings,
+  services: create(services(visitable, clickable, attribute, collection, page, catalogFilter)),
-  services,
+  service: create(service(visitable, attribute, collection, text, catalogFilter)),
-  service,
+  nodes: create(nodes(visitable, clickable, attribute, collection, catalogFilter)),
-  nodes,
+  node: create(node(visitable, deletable, clickable, attribute, collection, radiogroup)),
-  node,
+  kvs: create(kvs(visitable, deletable, clickable, attribute, collection)),
-  kvs,
+  kv: create(kv(visitable, submitable, deletable)),
-  kv,
+  acls: create(acls(visitable, deletable, clickable, attribute, collection, aclFilter)),
-  acls,
+  acl: create(acl(visitable, submitable, deletable)),
-  acl,
+  intentions: create(
-  intentions,
+    intentions(visitable, deletable, clickable, attribute, collection, intentionFilter)
-  intention,
+  ),
+  intention: create(intention(visitable, submitable, deletable)),
+  settings: create(settings(visitable, submitable)),
 };

ui-v2/tests/pages/dc.js

@@ -1,9 +1,12 @@
-import { create, visitable, attribute, collection, clickable } from 'ember-cli-page-object';
+export default function(visitable, clickable, attribute, collection) {
-
+  return {
-export default create({
+    visit: visitable('/:dc/'),
-  visit: visitable('/:dc/'),
+    dcs: collection('[data-test-datacenter-picker]'),
-  dcs: collection('[data-test-datacenter-picker]'),
+    showDatacenters: clickable('[data-test-datacenter-selected]'),
-  showDatacenters: clickable('[data-test-datacenter-selected]'),
+    selectedDc: attribute('data-test-datacenter-selected', '[data-test-datacenter-selected]'),
-  selectedDc: attribute('data-test-datacenter-selected', '[data-test-datacenter-selected]'),
+    selectedDatacenter: attribute(
-  selectedDatacenter: attribute('data-test-datacenter-selected', '[data-test-datacenter-selected]'),
+      'data-test-datacenter-selected',
-});
+      '[data-test-datacenter-selected]'
+    ),
+  };
+}

ui-v2/tests/pages/dc/acls/edit.js

@@ -1,11 +1,7 @@
-import { create, clickable, triggerable, is } from 'ember-cli-page-object';
+export default function(visitable, submitable, deletable, triggerable) {
-import { visitable } from 'consul-ui/tests/lib/page-object/visitable';
+  return submitable(
-
+    deletable({
-export default create({
+      visit: visitable(['/:dc/acls/:acl', '/:dc/acls/create']),
-  // custom visitable
+    })
-  visit: visitable(['/:dc/acls/:acl', '/:dc/acls/create']),
+  );
-  // fillIn: fillable('input, textarea, [contenteditable]'),
+}
-  name: triggerable('keypress', '[name="name"]'),
-  submit: clickable('[type=submit]'),
-  submitIsEnabled: is(':not(:disabled)', '[type=submit]'),
-});

ui-v2/tests/pages/dc/acls/index.js

@@ -1,14 +1,14 @@
-import { create, visitable, collection, attribute, clickable } from 'ember-cli-page-object';
+export default function(visitable, deletable, clickable, attribute, collection, filter) {
-
+  return {
-import filter from 'consul-ui/tests/pages/components/acl-filter';
+    visit: visitable('/:dc/acls'),
-export default create({
+    acls: collection(
-  visit: visitable('/:dc/acls'),
+      '[data-test-tabular-row]',
-  acls: collection('[data-test-tabular-row]', {
+      deletable({
-    name: attribute('data-test-acl', '[data-test-acl]'),
+        name: attribute('data-test-acl', '[data-test-acl]'),
-    acl: clickable('a'),
+        acl: clickable('a'),
-    actions: clickable('label'),
+        actions: clickable('label'),
-    delete: clickable('[data-test-delete]'),
+      })
-    confirmDelete: clickable('button.type-delete'),
+    ),
-  }),
+    filter: filter,
-  filter: filter,
+  };
-});
+}

ui-v2/tests/pages/dc/intentions/edit.js

@@ -1,8 +1,7 @@
-import { create, clickable } from 'ember-cli-page-object';
+export default function(visitable, submitable, deletable) {
-import { visitable } from 'consul-ui/tests/lib/page-object/visitable';
+  return submitable(
-
+    deletable({
-export default create({
+      visit: visitable(['/:dc/intentions/:intention', '/:dc/intentions/create']),
-  // custom visitable
+    })
-  visit: visitable(['/:dc/intentions/:intention', '/:dc/intentions/create']),
+  );
-  submit: clickable('[type=submit]'),
+}
-});

ui-v2/tests/pages/dc/intentions/index.js

@@ -1,16 +1,19 @@
-import { create, visitable, collection, attribute, clickable } from 'ember-cli-page-object';
+export default function(visitable, deletable, clickable, attribute, collection, filter) {
-
+  return {
-import filter from 'consul-ui/tests/pages/components/intention-filter';
+    visit: visitable('/:dc/intentions'),
-export default create({
+    intentions: collection(
-  visit: visitable('/:dc/intentions'),
+      '[data-test-tabular-row]',
-  intentions: collection('[data-test-tabular-row]', {
+      deletable({
-    source: attribute('data-test-intention-source', '[data-test-intention-source]'),
+        source: attribute('data-test-intention-source', '[data-test-intention-source]'),
-    destination: attribute('data-test-intention-destination', '[data-test-intention-destination]'),
+        destination: attribute(
-    action: attribute('data-test-intention-action', '[data-test-intention-action]'),
+          'data-test-intention-destination',
-    intention: clickable('a'),
+          '[data-test-intention-destination]'
-    actions: clickable('label'),
+        ),
-    delete: clickable('[data-test-delete]'),
+        action: attribute('data-test-intention-action', '[data-test-intention-action]'),
-    confirmDelete: clickable('button.type-delete'),
+        intention: clickable('a'),
-  }),
+        actions: clickable('label'),
-  filter: filter,
+      })
-});
+    ),
+    filter: filter,
+  };
+}

ui-v2/tests/pages/dc/kv/edit.js

@@ -1,11 +1,7 @@
-import { create, clickable, is } from 'ember-cli-page-object';
+export default function(visitable, submitable, deletable) {
-import { visitable } from 'consul-ui/tests/lib/page-object/visitable';
+  return submitable(
-
+    deletable({
-export default create({
+      visit: visitable(['/:dc/kv/:kv/edit', '/:dc/kv/create'], str => str),
-  // custom visitable
+    })
-  visit: visitable(['/:dc/kv/:kv/edit', '/:dc/kv/create'], str => str),
+  );
-  // fillIn: fillable('input, textarea, [contenteditable]'),
+}
-  // name: triggerable('keypress', '[name="additional"]'),
-  submit: clickable('[type=submit]'),
-  submitIsEnabled: is(':not(:disabled)', '[type=submit]'),
-});

ui-v2/tests/pages/dc/kv/index.js

@@ -1,12 +1,13 @@
-import { create, visitable, collection, attribute, clickable } from 'ember-cli-page-object';
+export default function(visitable, deletable, clickable, attribute, collection) {
-
+  return {
-export default create({
+    visit: visitable('/:dc/kv'),
-  visit: visitable('/:dc/kv'),
+    kvs: collection(
-  kvs: collection('[data-test-tabular-row]', {
+      '[data-test-tabular-row]',
-    name: attribute('data-test-kv', '[data-test-kv]'),
+      deletable({
-    kv: clickable('a'),
+        name: attribute('data-test-kv', '[data-test-kv]'),
-    actions: clickable('label'),
+        kv: clickable('a'),
-    delete: clickable('[data-test-delete]'),
+        actions: clickable('label'),
-    confirmDelete: clickable('button.type-delete'),
+      })
-  }),
+    ),
-});
+  };
+}

ui-v2/tests/pages/dc/nodes/index.js

@@ -1,11 +1,10 @@
-import { create, visitable, collection, attribute, clickable } from 'ember-cli-page-object';
+export default function(visitable, clickable, attribute, collection, filter) {
-import filter from 'consul-ui/tests/pages/components/catalog-filter';
+  return {
-
+    visit: visitable('/:dc/nodes'),
-export default create({
+    nodes: collection('[data-test-node]', {
-  visit: visitable('/:dc/nodes'),
+      name: attribute('data-test-node'),
-  nodes: collection('[data-test-node]', {
+      node: clickable('header a'),
-    name: attribute('data-test-node'),
+    }),
-    node: clickable('header a'),
+    filter: filter,
-  }),
+  };
-  filter: filter,
+}
-});

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

@@ -1,18 +1,18 @@
-import { create, visitable, collection, attribute, clickable } from 'ember-cli-page-object';
+export default function(visitable, deletable, clickable, attribute, collection, radiogroup) {
-
+  return {
-import radiogroup from 'consul-ui/tests/lib/page-object/radiogroup';
+    visit: visitable('/:dc/nodes/:node'),
-export default create({
+    tabs: radiogroup('tab', ['health-checks', 'services', 'round-trip-time', 'lock-sessions']),
-  visit: visitable('/:dc/nodes/:node'),
+    healthchecks: collection('[data-test-node-healthcheck]', {
-  tabs: radiogroup('tab', ['health-checks', 'services', 'round-trip-time', 'lock-sessions']),
+      name: attribute('data-test-node-healthcheck'),
-  healthchecks: collection('[data-test-node-healthcheck]', {
+    }),
-    name: attribute('data-test-node-healthcheck'),
+    services: collection('#services [data-test-tabular-row]', {
-  }),
+      port: attribute('data-test-service-port', '.port'),
-  services: collection('#services [data-test-tabular-row]', {
+    }),
-    port: attribute('data-test-service-port', '.port'),
+    sessions: collection(
-  }),
+      '#lock-sessions [data-test-tabular-row]',
-  sessions: collection('#lock-sessions [data-test-tabular-row]', {
+      deletable({
-    delete: clickable('[data-test-delete]'),
+        TTL: attribute('data-test-session-ttl', '[data-test-session-ttl]'),
-    confirmDelete: clickable('button.type-delete'),
+      })
-    TTL: attribute('data-test-session-ttl', '[data-test-session-ttl]'),
+    ),
-  }),
+  };
-});
+}

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

@@ -1,16 +1,12 @@
-import { create, visitable, collection, attribute, clickable } from 'ember-cli-page-object';
+export default function(visitable, clickable, attribute, collection, page, filter) {
-
+  return {
-import page from 'consul-ui/tests/pages/components/page';
+    visit: visitable('/:dc/services'),
-import filter from 'consul-ui/tests/pages/components/catalog-filter';
+    services: collection('[data-test-service]', {
-
+      name: attribute('data-test-service'),
-export default create({
+      service: clickable('a'),
-  visit: visitable('/:dc/services'),
+    }),
-  services: collection('[data-test-service]', {
+    dcs: collection('[data-test-datacenter-picker]'),
-    name: attribute('data-test-service'),
+    navigation: page.navigation,
-    service: clickable('a'),
+    filter: filter,
-  }),
+  };
-  dcs: collection('[data-test-datacenter-picker]'),
+}
-  navigation: page.navigation,
-
-  filter: filter,
-});

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

@@ -1,18 +1,17 @@
-import { create, visitable, collection, attribute, text } from 'ember-cli-page-object';
+export default function(visitable, attribute, collection, text, filter) {
-import filter from 'consul-ui/tests/pages/components/catalog-filter';
+  return {
-
+    visit: visitable('/:dc/services/:service'),
-export default create({
+    nodes: collection('[data-test-node]', {
-  visit: visitable('/:dc/services/:service'),
+      name: attribute('data-test-node'),
-  nodes: collection('[data-test-node]', {
+    }),
-    name: attribute('data-test-node'),
+    healthy: collection('[data-test-healthy] [data-test-node]', {
-  }),
+      name: attribute('data-test-node'),
-  healthy: collection('[data-test-healthy] [data-test-node]', {
+      address: text('header strong'),
-    name: attribute('data-test-node'),
+    }),
-    address: text('header strong'),
+    unhealthy: collection('[data-test-unhealthy] [data-test-node]', {
-  }),
+      name: attribute('data-test-node'),
-  unhealthy: collection('[data-test-unhealthy] [data-test-node]', {
+      address: text('header strong'),
-    name: attribute('data-test-node'),
+    }),
-    address: text('header strong'),
+    filter: filter,
-  }),
+  };
-  filter: filter,
+}
-});

ui-v2/tests/pages/index.js

@@ -1,6 +1,6 @@
-import { create, visitable, collection } from 'ember-cli-page-object';
+export default function(visitable, collection) {
-
+  return {
-export default create({
+    visit: visitable('/'),
-  visit: visitable('/'),
+    dcs: collection('[data-test-datacenter-list]'),
-  dcs: collection('[data-test-datacenter-list]'),
+  };
-});
+}

ui-v2/tests/pages/settings.js

@@ -1,6 +1,5 @@
-import { create, visitable, clickable } from 'ember-cli-page-object';
+export default function(visitable, submitable) {
-
+  return submitable({
-export default create({
+    visit: visitable('/settings'),
-  visit: visitable('/settings'),
+  });
-  submit: clickable('[type=submit]'),
+}
-});

ui-v2/tests/steps.js

@@ -85,6 +85,15 @@ export default function(assert) {
       .when('I click "$selector"', function(selector) {
         return click(selector);
       })
+      // TODO: Probably nicer to thing of better vocab than having the 'without " rule'
+      .when('I click (?!")$property(?!")', function(property) {
+        try {
+          return currentPage[property]();
+        } catch (e) {
+          console.error(e);
+          throw new Error(`The '${property}' property on the page object doesn't exist`);
+        }
+      })
       .when('I click $prop on the $component', function(prop, component) {
         // Collection
         var obj;