Use PageObject for server-detail tests

ui/tests/acceptance/server-detail-test.js

@@ -1,7 +1,7 @@
-import $ from 'jquery';
-import { find, findAll, currentURL, visit } from 'ember-native-dom-helpers';
+import { currentURL } from 'ember-native-dom-helpers';
 import { test } from 'qunit';
 import moduleForAcceptance from 'nomad-ui/tests/helpers/module-for-acceptance';
+import ServerDetail from 'nomad-ui/tests/pages/servers/detail';
 
 let agent;
 
@@ -9,61 +9,43 @@ moduleForAcceptance('Acceptance | server detail', {
   beforeEach() {
     server.createList('agent', 3);
     agent = server.db.agents[0];
-    visit(`/servers/${agent.name}`);
+    ServerDetail.visit({ name: agent.name });
   },
 });
 
 test('visiting /servers/:server_name', function(assert) {
-  assert.equal(currentURL(), `/servers/${agent.name}`);
+  assert.equal(currentURL(), `/servers/${encodeURIComponent(agent.name)}`);
 });
 
 test('the server detail page should list all tags for the server', function(assert) {
-  const tags = agent.tags;
+  const tags = Object.keys(agent.tags)
+    .map(name => ({ name, value: agent.tags[name] }))
+    .sortBy('name');
 
-  assert.equal(findAll('[data-test-server-tag]').length, Object.keys(tags).length, '# of tags');
-  Object.keys(tags)
-    .map(name => ({ name, value: tags[name] }))
-    .sortBy('name')
-    .forEach((tag, index) => {
-      const row = $(`.server-tags tbody tr:eq(${index})`);
-      assert.equal(row.find('td:eq(0)').text(), tag.name, `Label: ${tag.name}`);
-      assert.equal(row.find('td:eq(1)').text(), tag.value, `Value: ${tag.value}`);
-    });
+  assert.equal(ServerDetail.tags.length, tags.length, '# of tags');
+  ServerDetail.tags.forEach((tagRow, index) => {
+    const tag = tags[index];
+    assert.equal(tagRow.name, tag.name, `Label: ${tag.name}`);
+    assert.equal(tagRow.value, tag.value, `Value: ${tag.value}`);
+  });
 });
 
 test('the list of servers from /servers should still be present', function(assert) {
-  assert.equal(
-    findAll('[data-test-server-agent-row]').length,
-    server.db.agents.length,
-    '# of servers'
-  );
+  assert.equal(ServerDetail.servers.length, server.db.agents.length, '# of servers');
 });
 
 test('the active server should be denoted in the table', function(assert) {
-  assert.equal(
-    findAll('[data-test-server-agent-row].is-active').length,
-    1,
-    'Only one active server'
-  );
-  assert.equal(
-    find('[data-test-server-agent-row].is-active [data-test-server-name]').textContent.trim(),
-    agent.name,
-    'Active server matches current route'
-  );
+  const activeServers = ServerDetail.servers.filter(server => server.isActive);
+
+  assert.equal(activeServers.length, 1, 'Only one active server');
+  assert.equal(ServerDetail.activeServer.name, agent.name, 'Active server matches current route');
 });
 
-test('when the server is not found, an error message is shown, but the URL persists', function(
-  assert
-) {
-  visit('/servers/not-a-real-server');
+test('when the server is not found, an error message is shown, but the URL persists', function(assert) {
+  ServerDetail.visit({ name: 'not-a-real-server' });
 
   andThen(() => {
     assert.equal(currentURL(), '/servers/not-a-real-server', 'The URL persists');
-    assert.ok(find('[data-test-error]'), 'Error message is shown');
-    assert.equal(
-      find('[data-test-error-title]').textContent,
-      'Not Found',
-      'Error message is for 404'
-    );
+    assert.equal(ServerDetail.error.title, 'Not Found', 'Error message is for 404');
   });
 });

ui/tests/pages/servers/detail.js

@@ -0,0 +1,26 @@
+import { create, collection, clickable, hasClass, text, visitable } from 'ember-cli-page-object';
+import { getter } from 'ember-cli-page-object/macros';
+
+export default create({
+  visit: visitable('/servers/:name'),
+
+  servers: collection('[data-test-server-agent-row]', {
+    name: text('[data-test-server-name]'),
+    isActive: hasClass('is-active'),
+  }),
+
+  tags: collection('[data-test-server-tag]', {
+    name: text('td', { at: 0 }),
+    value: text('td', { at: 1 }),
+  }),
+
+  activeServer: getter(function() {
+    return this.servers.toArray().find(server => server.isActive);
+  }),
+
+  error: {
+    title: text('[data-test-error-title]'),
+    message: text('[data-test-error-message]'),
+    seekHelp: clickable('[data-test-error-message] a'),
+  },
+});