mirror of
https://github.com/status-im/consul.git
synced 2025-01-13 07:14:37 +00:00
5ea748005c
1. Addition of external source icons for services marked as such. 2. New %with-tooltip css component (wip) 3. New 'no healthcheck' icon as external sources might not have healthchecks, also minus icon on node cards in the service detail view 4. If a service doesn't have healthchecks, we use the [Services] tabs as the default instead of the [Health Checks] tab in the Service detail page. 5. `css-var` helper. The idea here is that it will eventually be replaced with pure css custom properties instead of having to use JS. It would be nice to be able to build the css variables into the JS at build time (you'd probably still want to specify in config which variables you wanted available in JS), but that's possible future work. Lastly there is probably a tiny bit more testing edits here than usual, I noticed that there was an area where the dynamic mocking wasn't happening, it was just using the mocks from consul-api-double, the mocks I was 'dynamically' setting happened to be the same as the ones in consul-api-double. I've fixed this here also but it wasn't effecting anything until actually made certain values dynamic.
420 lines
15 KiB
JavaScript
420 lines
15 KiB
JavaScript
/* eslint no-console: "off" */
|
|
import yadda from './helpers/yadda';
|
|
import { currentURL, click, triggerKeyEvent, fillIn, find } from '@ember/test-helpers';
|
|
import getDictionary from '@hashicorp/ember-cli-api-double/dictionary';
|
|
import pages from 'consul-ui/tests/pages';
|
|
import api from 'consul-ui/tests/helpers/api';
|
|
|
|
// const dont = `( don't| shouldn't| can't)?`;
|
|
|
|
const create = function(number, name, value) {
|
|
// don't return a promise here as
|
|
// I don't need it to wait
|
|
api.server.createList(name, number, value);
|
|
};
|
|
var currentPage;
|
|
export default function(assert) {
|
|
return (
|
|
yadda.localisation.English.library(
|
|
getDictionary(function(model, cb) {
|
|
switch (model) {
|
|
case 'datacenter':
|
|
case 'datacenters':
|
|
case 'dcs':
|
|
model = 'dc';
|
|
break;
|
|
case 'services':
|
|
model = 'service';
|
|
break;
|
|
case 'nodes':
|
|
model = 'node';
|
|
break;
|
|
case 'kvs':
|
|
model = 'kv';
|
|
break;
|
|
case 'acls':
|
|
model = 'acl';
|
|
break;
|
|
case 'sessions':
|
|
model = 'session';
|
|
break;
|
|
case 'intentions':
|
|
model = 'intention';
|
|
break;
|
|
}
|
|
cb(null, model);
|
|
}, yadda)
|
|
)
|
|
// doubles
|
|
.given(['$number $model model[s]?', '$number $model models'], function(number, model) {
|
|
return create(number, model);
|
|
})
|
|
.given(['$number $model model[s]? with the value "$value"'], function(number, model, value) {
|
|
return create(number, model, value);
|
|
})
|
|
.given(
|
|
['$number $model model[s]? from yaml\n$yaml', '$number $model model[s]? from json\n$json'],
|
|
function(number, model, data) {
|
|
return create(number, model, data);
|
|
}
|
|
)
|
|
// TODO: Abstract this away from HTTP
|
|
.given(['the url "$url" responds with a $status status'], function(url, status) {
|
|
return api.server.respondWithStatus(url.split('?')[0], parseInt(status));
|
|
})
|
|
// interactions
|
|
.when('I visit the $name page', function(name) {
|
|
currentPage = pages[name];
|
|
return currentPage.visit();
|
|
})
|
|
.when('I visit the $name page for the "$id" $model', function(name, id, model) {
|
|
currentPage = pages[name];
|
|
return currentPage.visit({
|
|
[model]: id,
|
|
});
|
|
})
|
|
.when(
|
|
['I visit the $name page for yaml\n$yaml', 'I visit the $name page for json\n$json'],
|
|
function(name, data) {
|
|
currentPage = pages[name];
|
|
// TODO: Consider putting an assertion here for testing the current url
|
|
// do I absolutely definitely need that all the time?
|
|
return pages[name].visit(data);
|
|
}
|
|
)
|
|
.when('I click "$selector"', function(selector) {
|
|
return click(selector);
|
|
})
|
|
// TODO: Probably nicer to think 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;
|
|
if (typeof currentPage[component].objectAt === 'function') {
|
|
obj = currentPage[component].objectAt(0);
|
|
} else {
|
|
obj = currentPage[component];
|
|
}
|
|
const func = obj[prop].bind(obj);
|
|
try {
|
|
return func();
|
|
} catch (e) {
|
|
console.error(e);
|
|
throw new Error(`The '${prop}' property on the '${component}' page object doesn't exist`);
|
|
}
|
|
})
|
|
.when('I submit', function(selector) {
|
|
return currentPage.submit();
|
|
})
|
|
.then('I fill in "$name" with "$value"', function(name, value) {
|
|
return currentPage.fillIn(name, value);
|
|
})
|
|
.then(['I fill in with yaml\n$yaml', 'I fill in with json\n$json'], function(data) {
|
|
return Object.keys(data).reduce(function(prev, item, i, arr) {
|
|
return prev.fillIn(item, data[item]);
|
|
}, currentPage);
|
|
})
|
|
.then(['I type "$text" into "$selector"'], function(text, selector) {
|
|
return fillIn(selector, text);
|
|
})
|
|
.then(['I type with yaml\n$yaml'], function(data) {
|
|
const keys = Object.keys(data);
|
|
return keys
|
|
.reduce(function(prev, item, i, arr) {
|
|
return prev.fillIn(item, data[item]);
|
|
}, currentPage)
|
|
.then(function() {
|
|
return Promise.all(
|
|
keys.map(function(item) {
|
|
return triggerKeyEvent(`[name="${item}"]`, 'keyup', 83); // TODO: This is 's', be more generic
|
|
})
|
|
);
|
|
});
|
|
})
|
|
// debugging helpers
|
|
.then('print the current url', function(url) {
|
|
console.log(currentURL());
|
|
return Promise.resolve();
|
|
})
|
|
.then('log the "$text"', function(text) {
|
|
console.log(text);
|
|
return Promise.resolve();
|
|
})
|
|
.then('pause for $milliseconds', function(milliseconds) {
|
|
return new Promise(function(resolve) {
|
|
setTimeout(resolve, milliseconds);
|
|
});
|
|
})
|
|
// assertions
|
|
.then('a $method request is made to "$url" with the body from yaml\n$yaml', function(
|
|
method,
|
|
url,
|
|
data
|
|
) {
|
|
const request = api.server.history[api.server.history.length - 2];
|
|
assert.equal(
|
|
request.method,
|
|
method,
|
|
`Expected the request method to be ${method}, was ${request.method}`
|
|
);
|
|
assert.equal(request.url, url, `Expected the request url to be ${url}, was ${request.url}`);
|
|
const body = JSON.parse(request.requestBody);
|
|
Object.keys(data).forEach(function(key, i, arr) {
|
|
assert.equal(
|
|
body[key],
|
|
data[key],
|
|
`Expected the payload to contain ${key} to equal ${body[key]}, ${key} was ${data[key]}`
|
|
);
|
|
});
|
|
})
|
|
// TODO: This one can replace the above one, it covers more use cases
|
|
// also DRY it out a bit
|
|
.then('a $method request is made to "$url" from yaml\n$yaml', function(method, url, yaml) {
|
|
const request = api.server.history[api.server.history.length - 2];
|
|
assert.equal(
|
|
request.method,
|
|
method,
|
|
`Expected the request method to be ${method}, was ${request.method}`
|
|
);
|
|
assert.equal(request.url, url, `Expected the request url to be ${url}, was ${request.url}`);
|
|
let data = yaml.body || {};
|
|
const body = JSON.parse(request.requestBody);
|
|
Object.keys(data).forEach(function(key, i, arr) {
|
|
assert.equal(
|
|
body[key],
|
|
data[key],
|
|
`Expected the payload to contain ${key} to equal ${body[key]}, ${key} was ${data[key]}`
|
|
);
|
|
});
|
|
data = yaml.headers || {};
|
|
const headers = request.requestHeaders;
|
|
Object.keys(data).forEach(function(key, i, arr) {
|
|
assert.equal(
|
|
headers[key],
|
|
data[key],
|
|
`Expected the payload to contain ${key} to equal ${headers[key]}, ${key} was ${
|
|
data[key]
|
|
}`
|
|
);
|
|
});
|
|
})
|
|
.then('a $method request is made to "$url" with the body "$body"', function(
|
|
method,
|
|
url,
|
|
data
|
|
) {
|
|
const request = api.server.history[api.server.history.length - 2];
|
|
assert.equal(
|
|
request.method,
|
|
method,
|
|
`Expected the request method to be ${method}, was ${request.method}`
|
|
);
|
|
assert.equal(request.url, url, `Expected the request url to be ${url}, was ${request.url}`);
|
|
const body = request.requestBody;
|
|
assert.equal(body, data, `Expected the request body to be ${data}, was ${body}`);
|
|
})
|
|
.then('a $method request is made to "$url" with no body', function(method, url) {
|
|
const request = api.server.history[api.server.history.length - 2];
|
|
assert.equal(
|
|
request.method,
|
|
method,
|
|
`Expected the request method to be ${method}, was ${request.method}`
|
|
);
|
|
assert.equal(request.url, url, `Expected the request url to be ${url}, was ${request.url}`);
|
|
const body = request.requestBody;
|
|
assert.equal(body, null, `Expected the request body to be null, was ${body}`);
|
|
})
|
|
|
|
.then('a $method request is made to "$url"', function(method, url) {
|
|
const request = api.server.history[api.server.history.length - 2];
|
|
assert.equal(
|
|
request.method,
|
|
method,
|
|
`Expected the request method to be ${method}, was ${request.method}`
|
|
);
|
|
assert.equal(request.url, url, `Expected the request url to be ${url}, was ${request.url}`);
|
|
})
|
|
.then('the last $method request was made to "$url"', function(method, url) {
|
|
const request = api.server.history
|
|
.slice(0)
|
|
.reverse()
|
|
.find(function(item) {
|
|
return item.method === method;
|
|
});
|
|
assert.equal(request.url, url, `Expected the request url to be ${url}, was ${request.url}`);
|
|
})
|
|
.then('the last $method requests were like yaml\n$yaml', function(method, data) {
|
|
const requests = api.server.history.reverse().filter(function(item) {
|
|
return item.method === method;
|
|
});
|
|
data.reverse().forEach(function(item, i, arr) {
|
|
assert.equal(
|
|
requests[i].url,
|
|
item,
|
|
`Expected the request url to be ${item}, was ${requests[i].url}`
|
|
);
|
|
});
|
|
})
|
|
.then('the url should be $url', function(url) {
|
|
// TODO: nice! $url should be wrapped in ""
|
|
if (url === "''") {
|
|
url = '';
|
|
}
|
|
const current = currentURL() || '';
|
|
assert.equal(current, url, `Expected the url to be ${url} was ${current}`);
|
|
})
|
|
.then(['I see $num $model', 'I see $num $model model', 'I see $num $model models'], function(
|
|
num,
|
|
model
|
|
) {
|
|
const len = currentPage[`${model}s`].filter(function(item) {
|
|
return item.isVisible;
|
|
}).length;
|
|
|
|
assert.equal(len, num, `Expected ${num} ${model}s, saw ${len}`);
|
|
})
|
|
// TODO: I${ dont } see
|
|
.then([`I see $num $model model[s]? with the $property "$value"`], function(
|
|
// negate,
|
|
num,
|
|
model,
|
|
property,
|
|
value
|
|
) {
|
|
const len = currentPage[`${model}s`].filter(function(item) {
|
|
return item.isVisible && item[property] == value;
|
|
}).length;
|
|
assert.equal(
|
|
len,
|
|
num,
|
|
`Expected ${num} ${model}s with ${property} set to "${value}", saw ${len}`
|
|
);
|
|
})
|
|
// TODO: Make this accept a 'contains' word so you can search for text containing also
|
|
.then('I have settings like yaml\n$yaml', function(data) {
|
|
// TODO: Inject this
|
|
const settings = window.localStorage;
|
|
Object.keys(data).forEach(function(prop) {
|
|
const actual = settings.getItem(prop);
|
|
const expected = data[prop];
|
|
assert.strictEqual(actual, expected, `Expected settings to be ${expected} was ${actual}`);
|
|
});
|
|
})
|
|
.then('I see $property on the $component like yaml\n$yaml', function(
|
|
property,
|
|
component,
|
|
yaml
|
|
) {
|
|
const _component = currentPage[component];
|
|
const iterator = new Array(_component.length).fill(true);
|
|
// this will catch if we get aren't managing to select a component
|
|
assert.ok(iterator.length > 0);
|
|
iterator.forEach(function(item, i, arr) {
|
|
const actual =
|
|
typeof _component.objectAt(i)[property] === 'undefined'
|
|
? null
|
|
: _component.objectAt(i)[property];
|
|
|
|
// anything coming from the DOM is going to be text/strings
|
|
// if the yaml has numbers, cast them to strings
|
|
// TODO: This would get problematic for deeper objects
|
|
// will have to look to do this recursively
|
|
const expected = typeof yaml[i] === 'number' ? yaml[i].toString() : yaml[i];
|
|
|
|
assert.deepEqual(
|
|
actual,
|
|
expected,
|
|
`Expected to see ${property} on ${component}[${i}] as ${JSON.stringify(
|
|
expected
|
|
)}, was ${JSON.stringify(actual)}`
|
|
);
|
|
});
|
|
})
|
|
.then(['I see $property on the $component'], function(property, component) {
|
|
// TODO: Time to work on repetition
|
|
// Collection
|
|
var obj;
|
|
if (typeof currentPage[component].objectAt === 'function') {
|
|
obj = currentPage[component].objectAt(0);
|
|
} else {
|
|
obj = currentPage[component];
|
|
}
|
|
let _component;
|
|
if (typeof obj === 'function') {
|
|
const func = obj[property].bind(obj);
|
|
try {
|
|
_component = func();
|
|
} catch (e) {
|
|
console.error(e);
|
|
throw new Error(
|
|
`The '${property}' property on the '${component}' page object doesn't exist`
|
|
);
|
|
}
|
|
} else {
|
|
_component = obj;
|
|
}
|
|
assert.ok(_component[property], `Expected to see ${property} on ${component}`);
|
|
})
|
|
.then(["I don't see $property on the $component"], function(property, component) {
|
|
// Collection
|
|
var obj;
|
|
if (typeof currentPage[component].objectAt === 'function') {
|
|
obj = currentPage[component].objectAt(0);
|
|
} else {
|
|
obj = currentPage[component];
|
|
}
|
|
const func = obj[property].bind(obj);
|
|
assert.throws(
|
|
function() {
|
|
func();
|
|
},
|
|
function(e) {
|
|
return e.toString().indexOf('Element not found') !== -1;
|
|
},
|
|
`Expected to not see ${property} on ${component}`
|
|
);
|
|
})
|
|
.then(['I see $property'], function(property) {
|
|
assert.ok(currentPage[property], `Expected to see ${property}`);
|
|
})
|
|
.then(['I see $property like "$value"'], function(property, value) {
|
|
assert.equal(
|
|
currentPage[property],
|
|
value,
|
|
`Expected to see ${property}, was ${currentPage[property]}`
|
|
);
|
|
})
|
|
.then(['I see the text "$text" in "$selector"'], function(text, selector) {
|
|
assert.ok(
|
|
find(selector).textContent.indexOf(text) !== -1,
|
|
`Expected to see "${text}" in "${selector}"`
|
|
);
|
|
})
|
|
// TODO: Think of better language
|
|
// TODO: These should be mergeable
|
|
.then(['"$selector" has the "$class" class'], function(selector, cls) {
|
|
// because `find` doesn't work, guessing its sandboxed to ember's container
|
|
assert.ok(
|
|
document.querySelector(selector).classList.contains(cls),
|
|
`Expected [class] to contain ${cls} on ${selector}`
|
|
);
|
|
})
|
|
.then(['"$selector" doesn\'t have the "$class" class'], function(selector, cls) {
|
|
assert.ok(
|
|
!document.querySelector(selector).classList.contains(cls),
|
|
`Expected [class] not to contain ${cls} on ${selector}`
|
|
);
|
|
})
|
|
.then('ok', function() {
|
|
assert.ok(true);
|
|
})
|
|
);
|
|
}
|