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/'),
     dcs: collection('[data-test-datacenter-picker]'),
     showDatacenters: clickable('[data-test-datacenter-selected]'),
     selectedDc: attribute('data-test-datacenter-selected', '[data-test-datacenter-selected]'),
-  selectedDatacenter: attribute('data-test-datacenter-selected', '[data-test-datacenter-selected]'),
+    selectedDatacenter: attribute(
-});
+      '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({
-  // 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';
-export default create({
     visit: visitable('/:dc/acls'),
-  acls: collection('[data-test-tabular-row]', {
+    acls: collection(
+      '[data-test-tabular-row]',
+      deletable({
         name: attribute('data-test-acl', '[data-test-acl]'),
         acl: clickable('a'),
         actions: clickable('label'),
-    delete: clickable('[data-test-delete]'),
+      })
-    confirmDelete: clickable('button.type-delete'),
+    ),
-  }),
     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({
-  // 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';
-export default create({
     visit: visitable('/:dc/intentions'),
-  intentions: collection('[data-test-tabular-row]', {
+    intentions: collection(
+      '[data-test-tabular-row]',
+      deletable({
         source: attribute('data-test-intention-source', '[data-test-intention-source]'),
-    destination: attribute('data-test-intention-destination', '[data-test-intention-destination]'),
+        destination: attribute(
+          'data-test-intention-destination',
+          '[data-test-intention-destination]'
+        ),
         action: attribute('data-test-intention-action', '[data-test-intention-action]'),
         intention: clickable('a'),
         actions: clickable('label'),
-    delete: clickable('[data-test-delete]'),
+      })
-    confirmDelete: clickable('button.type-delete'),
+    ),
-  }),
     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({
-  // 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'),
-  kvs: collection('[data-test-tabular-row]', {
+    kvs: collection(
+      '[data-test-tabular-row]',
+      deletable({
         name: attribute('data-test-kv', '[data-test-kv]'),
         kv: clickable('a'),
         actions: clickable('label'),
-    delete: clickable('[data-test-delete]'),
+      })
-    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 {
-
-export default create({
     visit: visitable('/:dc/nodes'),
     nodes: collection('[data-test-node]', {
       name: attribute('data-test-node'),
       node: clickable('header a'),
     }),
     filter: filter,
-});
+  };
+}

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

@@ -1,7 +1,5 @@
-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';
-export default create({
     visit: visitable('/:dc/nodes/:node'),
     tabs: radiogroup('tab', ['health-checks', 'services', 'round-trip-time', 'lock-sessions']),
     healthchecks: collection('[data-test-node-healthcheck]', {
@@ -10,9 +8,11 @@ export default create({
     services: collection('#services [data-test-tabular-row]', {
       port: attribute('data-test-service-port', '.port'),
     }),
-  sessions: collection('#lock-sessions [data-test-tabular-row]', {
+    sessions: collection(
-    delete: clickable('[data-test-delete]'),
+      '#lock-sessions [data-test-tabular-row]',
-    confirmDelete: clickable('button.type-delete'),
+      deletable({
         TTL: attribute('data-test-session-ttl', '[data-test-session-ttl]'),
-  }),
+      })
-});
+    ),
+  };
+}

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

@@ -1,9 +1,5 @@
-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';
-import filter from 'consul-ui/tests/pages/components/catalog-filter';
-
-export default create({
     visit: visitable('/:dc/services'),
     services: collection('[data-test-service]', {
       name: attribute('data-test-service'),
@@ -11,6 +7,6 @@ export default create({
     }),
     dcs: collection('[data-test-datacenter-picker]'),
     navigation: page.navigation,
-
     filter: filter,
-});
+  };
+}

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

@@ -1,7 +1,5 @@
-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 {
-
-export default create({
     visit: visitable('/:dc/services/:service'),
     nodes: collection('[data-test-node]', {
       name: attribute('data-test-node'),
@@ -15,4 +13,5 @@ export default create({
       address: text('header strong'),
     }),
     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('/'),
     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'),
-  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;