Use PageObject for task detail tests

This commit is contained in:
Michael Lange
2018-07-11 12:20:48 -07:00
parent f2e8286cd0
commit 3a5655d11f
2 changed files with 83 additions and 76 deletions

View File

@@ -1,6 +1,7 @@
import { click, findAll, currentURL, find, visit } from 'ember-native-dom-helpers';
import { currentURL, visit } from 'ember-native-dom-helpers';
import { test } from 'qunit';
import moduleForAcceptance from 'nomad-ui/tests/helpers/module-for-acceptance';
import Task from 'nomad-ui/tests/pages/allocations/task/detail';
import moment from 'moment';
let allocation;
@@ -14,18 +15,16 @@ moduleForAcceptance('Acceptance | task detail', {
allocation = server.create('allocation', 'withTaskWithPorts');
task = server.db.taskStates.where({ allocationId: allocation.id })[0];
visit(`/allocations/${allocation.id}/${task.name}`);
Task.visit({ id: allocation.id, name: task.name });
},
});
test('/allocation/:id/:task_name should name the task and list high-level task information', function(assert) {
assert.ok(find('[data-test-title]').textContent.includes(task.name), 'Task name');
assert.ok(find('[data-test-state]').textContent.includes(task.state), 'Task state');
assert.ok(Task.title.includes(task.name), 'Task name');
assert.ok(Task.state.includes(task.state), 'Task state');
assert.ok(
find('[data-test-started-at]').textContent.includes(
moment(task.startedAt).format('MM/DD/YY HH:mm:ss')
),
Task.startedAt.includes(moment(task.startedAt).format('MM/DD/YY HH:mm:ss')),
'Task started at'
);
});
@@ -36,50 +35,42 @@ test('breadcrumbs match jobs / job / task group / allocation / task', function(a
const shortId = allocation.id.split('-')[0];
assert.equal(Task.breadcrumbFor('jobs.index').text, 'Jobs', 'Jobs is the first breadcrumb');
assert.equal(Task.breadcrumbFor('jobs.job.index').text, job.name, 'Job is the second breadcrumb');
assert.equal(
find('[data-test-breadcrumb="jobs.index"]').textContent.trim(),
'Jobs',
'Jobs is the first breadcrumb'
);
assert.equal(
find('[data-test-breadcrumb="jobs.job.index"]').textContent.trim(),
job.name,
'Job is the second breadcrumb'
);
assert.equal(
find('[data-test-breadcrumb="jobs.job.task-group"]').textContent.trim(),
Task.breadcrumbFor('jobs.job.task-group').text,
taskGroup,
'Task Group is the third breadcrumb'
);
assert.equal(
find('[data-test-breadcrumb="allocations.allocation"]').textContent.trim(),
Task.breadcrumbFor('allocations.allocation').text,
shortId,
'Allocation short id is the fourth breadcrumb'
);
assert.equal(
find('[data-test-breadcrumb="allocations.allocation.task"]').textContent.trim(),
Task.breadcrumbFor('allocations.allocation.task').text,
task.name,
'Task name is the fifth breadcrumb'
);
click('[data-test-breadcrumb="jobs.index"]');
Task.breadcrumbFor('jobs.index').visit();
andThen(() => {
assert.equal(currentURL(), '/jobs', 'Jobs breadcrumb links correctly');
});
andThen(() => {
visit(`/allocations/${allocation.id}/${task.name}`);
Task.visit({ id: allocation.id, name: task.name });
});
andThen(() => {
click('[data-test-breadcrumb="jobs.job.index"]');
Task.breadcrumbFor('jobs.job.index').visit();
});
andThen(() => {
assert.equal(currentURL(), `/jobs/${job.id}`, 'Job breadcrumb links correctly');
});
andThen(() => {
visit(`/allocations/${allocation.id}/${task.name}`);
Task.visit({ id: allocation.id, name: task.name });
});
andThen(() => {
click('[data-test-breadcrumb="jobs.job.task-group"]');
Task.breadcrumbFor('jobs.job.task-group').visit();
});
andThen(() => {
assert.equal(
@@ -89,10 +80,10 @@ test('breadcrumbs match jobs / job / task group / allocation / task', function(a
);
});
andThen(() => {
visit(`/allocations/${allocation.id}/${task.name}`);
Task.visit({ id: allocation.id, name: task.name });
});
andThen(() => {
click('[data-test-breadcrumb="allocations.allocation"]');
Task.breadcrumbFor('allocations.allocation').visit();
});
andThen(() => {
assert.equal(
@@ -111,11 +102,7 @@ test('the addresses table lists all reserved and dynamic ports', function(assert
const dynamicPorts = taskResources.resources.Networks[0].DynamicPorts;
const addresses = reservedPorts.concat(dynamicPorts);
assert.equal(
findAll('[data-test-task-address]').length,
addresses.length,
'All addresses are listed'
);
assert.equal(Task.addresses.length, addresses.length, 'All addresses are listed');
});
test('each address row shows the label and value of the address', function(assert) {
@@ -127,57 +114,37 @@ test('each address row shows the label and value of the address', function(asser
const dynamicPorts = taskResources.resources.Networks[0].DynamicPorts;
const address = reservedPorts.concat(dynamicPorts).sortBy('Label')[0];
const addressRow = find('[data-test-task-address]');
const addressRow = Task.addresses.objectAt(0);
assert.equal(
addressRow.querySelector('[data-test-task-address-is-dynamic]').textContent.trim(),
addressRow.isDynamic,
reservedPorts.includes(address) ? 'No' : 'Yes',
'Dynamic port is denoted as such'
);
assert.equal(
addressRow.querySelector('[data-test-task-address-name]').textContent.trim(),
address.Label,
'Label'
);
assert.equal(
addressRow.querySelector('[data-test-task-address-address]').textContent.trim(),
`${networkAddress}:${address.Value}`,
'Value'
);
assert.equal(addressRow.name, address.Label, 'Label');
assert.equal(addressRow.address, `${networkAddress}:${address.Value}`, 'Value');
});
test('the events table lists all recent events', function(assert) {
const events = server.db.taskEvents.where({ taskStateId: task.id });
assert.equal(
findAll('[data-test-task-event]').length,
events.length,
`Lists ${events.length} events`
);
assert.equal(Task.events.length, events.length, `Lists ${events.length} events`);
});
test('each recent event should list the time, type, and description of the event', function(assert) {
const event = server.db.taskEvents.where({ taskStateId: task.id })[0];
const recentEvent = findAll('[data-test-task-event]').get('lastObject');
const recentEvent = Task.events.objectAt(Task.events.length - 1);
assert.equal(
recentEvent.querySelector('[data-test-task-event-time]').textContent.trim(),
recentEvent.time,
moment(event.time / 1000000).format('MM/DD/YY HH:mm:ss'),
'Event timestamp'
);
assert.equal(
recentEvent.querySelector('[data-test-task-event-type]').textContent.trim(),
event.type,
'Event type'
);
assert.equal(
recentEvent.querySelector('[data-test-task-event-message]').textContent.trim(),
event.displayMessage,
'Event message'
);
assert.equal(recentEvent.type, event.type, 'Event type');
assert.equal(recentEvent.message, event.displayMessage, 'Event message');
});
test('when the allocation is not found, the application errors', function(assert) {
visit(`/allocations/not-a-real-allocation/${task.name}`);
Task.visit({ id: 'not-a-real-allocation', name: task.name });
andThen(() => {
assert.equal(
@@ -190,17 +157,13 @@ test('when the allocation is not found, the application errors', function(assert
`/allocations/not-a-real-allocation/${task.name}`,
'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.ok(Task.error.isPresent, 'Error message is shown');
assert.equal(Task.error.title, 'Not Found', 'Error message is for 404');
});
});
test('when the allocation is found but the task is not, the application errors', function(assert) {
visit(`/allocations/${allocation.id}/not-a-real-task-name`);
Task.visit({ id: allocation.id, name: 'not-a-real-task-name' });
andThen(() => {
assert.equal(
@@ -213,12 +176,8 @@ test('when the allocation is found but the task is not, the application errors',
`/allocations/${allocation.id}/not-a-real-task-name`,
'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.ok(Task.error.isPresent, 'Error message is shown');
assert.equal(Task.error.title, 'Not Found', 'Error message is for 404');
});
});
@@ -231,9 +190,10 @@ moduleForAcceptance('Acceptance | task detail (no addresses)', {
task = server.db.taskStates.where({ allocationId: allocation.id })[0];
visit(`/allocations/${allocation.id}/${task.name}`);
Task.visit({ id: allocation.id, name: task.name });
},
});
test('when the task has no addresses, the addresses table is not shown', function(assert) {
assert.notOk(find('[data-test-task-addresses]'), 'No addresses table');
assert.notOk(Task.hasAddresses, 'No addresses table');
});

View File

@@ -0,0 +1,47 @@
import {
attribute,
create,
collection,
clickable,
isPresent,
text,
visitable,
} from 'ember-cli-page-object';
export default create({
visit: visitable('/allocations/:id/:name'),
title: text('[data-test-title]'),
state: text('[data-test-state]'),
startedAt: text('[data-test-started-at]'),
breadcrumbs: collection('[data-test-breadcrumb]', {
id: attribute('data-test-breadcrumb'),
text: text(),
visit: clickable(),
}),
breadcrumbFor(id) {
return this.breadcrumbs.toArray().find(crumb => crumb.id === id);
},
hasAddresses: isPresent('[data-test-task-addresses]'),
addresses: collection('[data-test-task-address]', {
name: text('[data-test-task-address-name]'),
isDynamic: text('[data-test-task-address-is-dynamic]'),
address: text('[data-test-task-address-address]'),
}),
events: collection('[data-test-task-event]', {
time: text('[data-test-task-event-time]'),
type: text('[data-test-task-event-type]'),
message: text('[data-test-task-event-message]'),
}),
error: {
isPresent: isPresent('[data-test-error]'),
title: text('[data-test-error-title]'),
message: text('[data-test-error-message]'),
seekHelp: clickable('[data-test-error-message] a'),
},
});