@mapbox/mr-ui
Version:
UI components for Mapbox projects
63 lines (62 loc) • 2.44 kB
JavaScript
;
var _delay = _interopRequireDefault(require("delay"));
var _ = _interopRequireDefault(require("."));
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
describe('pageLoadingIndictor.start', () => {
afterEach(() => {
_.default._reset();
});
test('adds indicator to the DOM', () => {
const el = _.default.start();
expect(el).toBeTruthy();
expect(el.className).toMatch(/[\b]?page-loading-indicator[\b]?/);
});
test('indicator receives enter class after a short delay', async () => {
const el = _.default.start();
expect(el.className).toMatch(/[\b]?page-loading-indicator[\b]?/);
await (0, _delay.default)(10);
expect(el.className).toMatch(/[\b]?page-loading-indicator[\b]?/);
expect(el.className).toMatch(/[\b]?page-loading-indicator-enter[\b]?/);
});
test('does not create duplicate elements', () => {
const els = [];
els.push(_.default.start());
els.push(_.default.start());
expect(els.filter(x => !!x).length).toBe(1);
});
});
describe('pageLoadingIndictor.end', () => {
afterEach(() => {
_.default._reset();
return (0, _delay.default)(500);
});
test('changes enter class to leave class after 300 ms', () => {
const el = _.default.start();
_.default.end();
return (0, _delay.default)(10).then(() => {
expect(el.className).toMatch(/[\b]?page-loading-indicator[\b]?/);
expect(el.className).toMatch(/[\b]?page-loading-indicator-enter[\b]?/);
expect(el.className).not.toMatch(/[\b]?page-loading-indicator-leave[\b]?/);
return (0, _delay.default)(400);
}).then(() => {
expect(el.className).toMatch(/[\b]?page-loading-indicator[\b]?/);
expect(el.className).not.toMatch(/[\b]?page-loading-indicator-enter[\b]?/);
expect(el.className).toMatch(/[\b]?page-loading-indicator-leave[\b]?/);
// Final delay is necessary to allow the dismount to finish.
return (0, _delay.default)(300);
});
});
test('removes the indicator from the DOM after another 300ms', () => {
const el = _.default.start();
_.default.end();
return (0, _delay.default)(10).then(() => {
expect(el.parentElement).toBeTruthy();
return (0, _delay.default)(400);
}).then(() => {
expect(el.parentElement).toBeTruthy();
return (0, _delay.default)(300);
}).then(() => {
expect(el.parentElement).toBe(null);
});
});
});