open-consul/ui-v2/tests/steps.js
John Cowen e34c16a90c ui: Logout button (#7604)
* ui: Logout button

This commit adds an easier way to logout of the UI using a logout button

Notes:

- Added a Logout button to the main navigation when you are logged in,
meaning you have easy access to a way to log out of the UI.
- Changed all wording to use 'Log in/out' vocabulary instad of 'stop
using'.
- The logout button opens a panel to show you your current ACL
token and a logout button in order to logout.
- When using legacy ACLs we don't show the current ACL token as legacy
ACLs tokens only have secret values, whereas the new ACLs use a
non-secret ID plus a secret ID (that we don't show).
- We also added a new `<EmptyState />` component to use for all our
empty states. We currently only use this for the ACLs disabled screen to
provide more outgoing links to more readind material/documentation to
help you to understand and enable ACLs.
- The `<DataSink />` component is the sibling to our `<DataSource />`
component and whilst is much simpler (as it doesn't require polling
support), its tries to use the same code patterns for consistencies
sake.
- We had a fun problem with ember-data's `store.unloadAll` here, and in
the end went with `store.init` to empty the ember-data store instead due
to timing issues.
- We've tried to use already existing patterns in the Consul UI here
such as our preexisting `feedback` service, although these are likely to
change in the future. The thinking here is to add this feature with as
little change as possible.

Overall this is a precursor to a much larger piece of work centered on
auth in the UI. We figured this was a feature complete piece of work as
it is and thought it was worthwhile to PR as a feature on its own, which
also means the larger piece of work will be a smaller scoped PR also.
2020-05-12 17:14:24 +00:00

147 lines
4.2 KiB
JavaScript

import pages from 'consul-ui/tests/pages';
import Inflector from 'ember-inflector';
import utils from '@ember/test-helpers';
import api from 'consul-ui/tests/helpers/api';
import models from './steps/doubles/model';
import http from './steps/doubles/http';
import visit from './steps/interactions/visit';
import click from './steps/interactions/click';
import form from './steps/interactions/form';
import debug from './steps/debug/index';
import assertHttp from './steps/assertions/http';
import assertModel from './steps/assertions/model';
import assertPage from './steps/assertions/page';
import assertDom from './steps/assertions/dom';
import assertForm from './steps/assertions/form';
// const dont = `( don't| shouldn't| can't)?`;
const pluralize = function(str) {
return Inflector.inflector.pluralize(str);
};
const getLastNthRequest = function(arr) {
return function(n, method) {
let requests = arr.slice(0).reverse();
if (method) {
requests = requests.filter(function(item) {
return item.method === method;
});
}
if (n == null) {
return requests;
}
return requests[n];
};
};
const mb = function(path) {
return function(obj) {
return (
path.map(function(prop) {
obj = obj || {};
if (isNaN(parseInt(prop))) {
return (obj = obj[prop]);
} else {
return (obj = obj.objectAt(parseInt(prop)));
}
}) && obj
);
};
};
export default function(assert, library) {
const pauseUntil = function(run, message = 'assertion timed out') {
return new Promise(function(r) {
let count = 0;
let resolved = false;
const retry = function() {
return Promise.resolve();
};
const reject = function() {
return Promise.reject();
};
const resolve = function(str = message) {
resolved = true;
assert.ok(resolved, str);
r();
return Promise.resolve();
};
(function tick() {
run(resolve, reject, retry).then(function() {
if (!resolved) {
setTimeout(function() {
if (++count >= 50) {
assert.ok(false, message);
reject();
return;
}
tick();
}, 100);
}
});
})();
});
};
const lastNthRequest = getLastNthRequest(api.server.history);
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);
};
const respondWith = function(url, data) {
api.server.respondWith(url.split('?')[0], data);
};
const setCookie = function(key, value) {
api.server.setCookie(key, value);
};
let currentPage;
const getCurrentPage = function() {
return currentPage;
};
const setCurrentPage = function(page) {
currentPage = page;
return page;
};
const find = function(path) {
const page = getCurrentPage();
const parts = path.split('.');
const last = parts.pop();
let obj;
let parent = mb(parts)(page) || page;
if (typeof parent.objectAt === 'function') {
parent = parent.objectAt(0);
}
obj = parent[last];
if (typeof obj === 'undefined') {
throw new Error(`The '${path}' object doesn't exist`);
}
if (typeof obj === 'function') {
obj = obj.bind(parent);
}
return obj;
};
const clipboard = function() {
return window.localStorage.getItem('clipboard');
};
models(library, create);
http(library, respondWith, setCookie);
visit(library, pages, setCurrentPage);
click(library, find, utils.click);
form(library, find, utils.fillIn, utils.triggerKeyEvent, getCurrentPage);
debug(library, assert, utils.currentURL);
assertHttp(library, assert, lastNthRequest);
assertModel(library, assert, find, getCurrentPage, pauseUntil, pluralize);
assertPage(library, assert, find, getCurrentPage);
assertDom(library, assert, pauseUntil, utils.find, utils.currentURL, clipboard);
assertForm(library, assert, find, getCurrentPage);
return library.given(["I'm using a legacy token"], function(number, model, data) {
window.localStorage['consul:token'] = JSON.stringify({
Namespace: 'default',
AccessorID: null,
SecretID: 'id',
});
});
}