feat(elements): implement `utils`
This commit is contained in:
George Kalpakas
Victor Berchet
parent
ebfa204af0
commit
24f17f913a
|
|
@ -0,0 +1,112 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Type} from '@angular/core';
|
||||
|
||||
const elProto = Element.prototype as any;
|
||||
const matches = elProto.matches || elProto.matchesSelector || elProto.mozMatchesSelector ||
|
||||
elProto.msMatchesSelector || elProto.oMatchesSelector || elProto.webkitMatchesSelector;
|
||||
|
||||
/**
|
||||
* Provide methods for scheduling the execution of a callback.
|
||||
*/
|
||||
export const scheduler = {
|
||||
/**
|
||||
* Schedule a callback to be called after some delay.
|
||||
*/
|
||||
schedule(cb: () => void, delay: number): () =>
|
||||
void{const id = window.setTimeout(cb, delay); return () => window.clearTimeout(id);},
|
||||
|
||||
/**
|
||||
* Schedule a callback to be called before the next render.
|
||||
* (If `window.requestAnimationFrame()` is not available, use `scheduler.schedule()` instead.)
|
||||
*/
|
||||
scheduleBeforeRender(cb: () => void): () => void{
|
||||
// TODO(gkalpak): Implement a better way of accessing `requestAnimationFrame()`
|
||||
// (e.g. accounting for vendor prefix, SSR-compatibility, etc).
|
||||
if (typeof window.requestAnimationFrame === 'undefined') {
|
||||
return scheduler.schedule(cb, 16);
|
||||
} const id = window.requestAnimationFrame(cb);
|
||||
return () => window.cancelAnimationFrame(id);
|
||||
},
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert a camelCased string to kebab-cased.
|
||||
*/
|
||||
export function camelToKebabCase(input: string): string {
|
||||
return input.replace(/[A-Z]/g, char => `-${char.toLowerCase()}`);
|
||||
}
|
||||
|
||||
/**
|
||||
* Create a `CustomEvent` (even on browsers where `CustomEvent` is not a constructor).
|
||||
*/
|
||||
export function createCustomEvent(doc: Document, name: string, detail: any): CustomEvent {
|
||||
const bubbles = false;
|
||||
const cancelable = false;
|
||||
|
||||
// On IE9-11, `CustomEvent` is not a constructor.
|
||||
if (typeof CustomEvent !== 'function') {
|
||||
const event = doc.createEvent('CustomEvent');
|
||||
event.initCustomEvent(name, bubbles, cancelable, detail);
|
||||
return event;
|
||||
}
|
||||
|
||||
return new CustomEvent(name, {bubbles, cancelable, detail});
|
||||
}
|
||||
|
||||
/**
|
||||
* Return the name of the component or the first line of its stringified version.
|
||||
*/
|
||||
export function getComponentName(component: Type<any>): string {
|
||||
return (component as any).overriddenName || component.name ||
|
||||
component.toString().split('\n', 1)[0];
|
||||
}
|
||||
|
||||
/**
|
||||
* Check whether the input is an `Element`.
|
||||
*/
|
||||
export function isElement(node: Node): node is Element {
|
||||
return node.nodeType === Node.ELEMENT_NODE;
|
||||
}
|
||||
|
||||
/**
|
||||
* Check whether the input is a function.
|
||||
*/
|
||||
export function isFunction(value: any): value is Function {
|
||||
return typeof value === 'function';
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert a kebab-cased string to camelCased.
|
||||
*/
|
||||
export function kebabToCamelCase(input: string): string {
|
||||
return input.replace(/-([a-z\d])/g, (_, char) => char.toUpperCase());
|
||||
}
|
||||
|
||||
/**
|
||||
* Check whether an `Element` matches a CSS selector.
|
||||
*/
|
||||
export function matchesSelector(element: Element, selector: string): boolean {
|
||||
return matches.call(element, selector);
|
||||
}
|
||||
|
||||
/**
|
||||
* Test two values for strict equality, accounting for the fact that `NaN !== NaN`.
|
||||
*/
|
||||
export function strictEquals(value1: any, value2: any): boolean {
|
||||
return value1 === value2 || (value1 !== value1 && value2 !== value2);
|
||||
}
|
||||
|
||||
/**
|
||||
* Throw an error with the specified message.
|
||||
* (It provides a centralized place where it is easy to apply some change/behavior to all errors.)
|
||||
*/
|
||||
export function throwError(message: string): void {
|
||||
throw Error(message);
|
||||
}
|
||||
|
|
@ -0,0 +1,259 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {Type} from '@angular/core';
|
||||
import {camelToKebabCase, createCustomEvent, getComponentName, isElement, isFunction, kebabToCamelCase, matchesSelector, scheduler, strictEquals, throwError} from '../src/utils';
|
||||
|
||||
export function main() {
|
||||
describe('utils', () => {
|
||||
describe('scheduler', () => {
|
||||
describe('schedule()', () => {
|
||||
let setTimeoutSpy: jasmine.Spy;
|
||||
let clearTimeoutSpy: jasmine.Spy;
|
||||
|
||||
beforeEach(() => {
|
||||
setTimeoutSpy = spyOn(window, 'setTimeout').and.returnValue(42);
|
||||
clearTimeoutSpy = spyOn(window, 'clearTimeout');
|
||||
});
|
||||
|
||||
it('should delegate to `window.setTimeout()`', () => {
|
||||
const cb = () => null;
|
||||
const delay = 1337;
|
||||
|
||||
scheduler.schedule(cb, delay);
|
||||
|
||||
expect(setTimeoutSpy).toHaveBeenCalledWith(cb, delay);
|
||||
});
|
||||
|
||||
it('should return a function for cancelling the scheduled job', () => {
|
||||
const cancelFn = scheduler.schedule(() => null, 0);
|
||||
expect(clearTimeoutSpy).not.toHaveBeenCalled();
|
||||
|
||||
cancelFn();
|
||||
expect(clearTimeoutSpy).toHaveBeenCalledWith(42);
|
||||
});
|
||||
});
|
||||
|
||||
describe('scheduleBeforeRender()', () => {
|
||||
if (typeof window.requestAnimationFrame === 'undefined') {
|
||||
const mockCancelFn = () => undefined;
|
||||
let scheduleSpy: jasmine.Spy;
|
||||
|
||||
beforeEach(
|
||||
() => scheduleSpy = spyOn(scheduler, 'schedule').and.returnValue(mockCancelFn));
|
||||
|
||||
it('should delegate to `scheduler.schedule()`', () => {
|
||||
const cb = () => null;
|
||||
expect(scheduler.scheduleBeforeRender(cb)).toBe(mockCancelFn);
|
||||
expect(scheduleSpy).toHaveBeenCalledWith(cb, 16);
|
||||
});
|
||||
} else {
|
||||
let requestAnimationFrameSpy: jasmine.Spy;
|
||||
let cancelAnimationFrameSpy: jasmine.Spy;
|
||||
|
||||
beforeEach(() => {
|
||||
requestAnimationFrameSpy = spyOn(window, 'requestAnimationFrame').and.returnValue(42);
|
||||
cancelAnimationFrameSpy = spyOn(window, 'cancelAnimationFrame');
|
||||
});
|
||||
|
||||
it('should delegate to `window.requestAnimationFrame()`', () => {
|
||||
const cb = () => null;
|
||||
scheduler.scheduleBeforeRender(cb);
|
||||
expect(requestAnimationFrameSpy).toHaveBeenCalledWith(cb);
|
||||
});
|
||||
|
||||
it('should return a function for cancelling the scheduled job', () => {
|
||||
const cancelFn = scheduler.scheduleBeforeRender(() => null);
|
||||
expect(cancelAnimationFrameSpy).not.toHaveBeenCalled();
|
||||
|
||||
cancelFn();
|
||||
expect(cancelAnimationFrameSpy).toHaveBeenCalledWith(42);
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
describe('camelToKebabCase()', () => {
|
||||
it('should convert camel-case to kebab-case', () => {
|
||||
expect(camelToKebabCase('fooBarBazQux')).toBe('foo-bar-baz-qux');
|
||||
expect(camelToKebabCase('foo1Bar2Baz3Qux4')).toBe('foo1-bar2-baz3-qux4');
|
||||
});
|
||||
|
||||
it('should keep existing dashes',
|
||||
() => { expect(camelToKebabCase('fooBar-baz-Qux')).toBe('foo-bar-baz--qux'); });
|
||||
});
|
||||
|
||||
describe('createCustomEvent()', () => {
|
||||
it('should create a custom event (with appropriate properties)', () => {
|
||||
const value = {bar: 'baz'};
|
||||
const event = createCustomEvent(document, 'foo', value);
|
||||
|
||||
expect(event).toEqual(jasmine.any(CustomEvent));
|
||||
expect(event).toEqual(jasmine.any(Event));
|
||||
expect(event.type).toBe('foo');
|
||||
expect(event.bubbles).toBe(false);
|
||||
expect(event.cancelable).toBe(false);
|
||||
expect(event.detail).toEqual(value);
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
describe('getComponentName()', () => {
|
||||
it('should return the component\'s name', () => {
|
||||
class Foo {}
|
||||
expect(getComponentName(Foo)).toBe('Foo');
|
||||
});
|
||||
|
||||
it('should return the `overriddenName` (if present)', () => {
|
||||
class Foo {
|
||||
static overriddenName = 'Bar';
|
||||
}
|
||||
expect(getComponentName(Foo)).toBe('Bar');
|
||||
});
|
||||
|
||||
it('should return the first line of the stringified component if no name', () => {
|
||||
const Foo = {toString: () => 'Baz\nQux'};
|
||||
expect(getComponentName(Foo as Type<any>)).toBe('Baz');
|
||||
});
|
||||
});
|
||||
|
||||
describe('isElement()', () => {
|
||||
it('should return true for Element nodes', () => {
|
||||
const elems = [
|
||||
document.body,
|
||||
document.createElement('div'),
|
||||
document.createElement('option'),
|
||||
document.documentElement,
|
||||
];
|
||||
|
||||
elems.forEach(n => expect(isElement(n)).toBe(true));
|
||||
});
|
||||
|
||||
it('should return false for non-Element nodes', () => {
|
||||
const nonElems = [
|
||||
document,
|
||||
document.createAttribute('foo'),
|
||||
document.createDocumentFragment(),
|
||||
document.createComment('bar'),
|
||||
document.createTextNode('baz'),
|
||||
];
|
||||
|
||||
nonElems.forEach(n => expect(isElement(n)).toBe(false));
|
||||
});
|
||||
});
|
||||
|
||||
describe('isFunction()', () => {
|
||||
it('should return true for functions', () => {
|
||||
const obj = {foo: function() {}, bar: () => null, baz() {}};
|
||||
const fns = [
|
||||
function(){},
|
||||
() => null,
|
||||
obj.foo,
|
||||
obj.bar,
|
||||
obj.baz,
|
||||
Function,
|
||||
Date,
|
||||
];
|
||||
|
||||
fns.forEach(v => expect(isFunction(v)).toBe(true));
|
||||
});
|
||||
|
||||
it('should return false for non-functions', () => {
|
||||
const nonFns = [
|
||||
undefined,
|
||||
null,
|
||||
true,
|
||||
42,
|
||||
{},
|
||||
];
|
||||
|
||||
nonFns.forEach(v => expect(isFunction(v)).toBe(false));
|
||||
});
|
||||
});
|
||||
|
||||
describe('kebabToCamelCase()', () => {
|
||||
it('should convert camel-case to kebab-case', () => {
|
||||
expect(kebabToCamelCase('foo-bar-baz-qux')).toBe('fooBarBazQux');
|
||||
expect(kebabToCamelCase('foo1-bar2-baz3-qux4')).toBe('foo1Bar2Baz3Qux4');
|
||||
expect(kebabToCamelCase('foo-1-bar-2-baz-3-qux-4')).toBe('foo1Bar2Baz3Qux4');
|
||||
});
|
||||
|
||||
it('should keep uppercase letters', () => {
|
||||
expect(kebabToCamelCase('foo-barBaz-Qux')).toBe('fooBarBaz-Qux');
|
||||
expect(kebabToCamelCase('foo-barBaz--qux')).toBe('fooBarBaz-Qux');
|
||||
});
|
||||
});
|
||||
|
||||
describe('matchesSelector()', () => {
|
||||
let li: HTMLLIElement;
|
||||
|
||||
beforeEach(() => {
|
||||
const div = document.createElement('div');
|
||||
div.innerHTML = `
|
||||
<div class="bar" id="barDiv">
|
||||
<span class="baz"></span>
|
||||
<ul class="baz" id="bazUl">
|
||||
<li class="qux" id="quxLi"></li>
|
||||
</ul>
|
||||
</div>
|
||||
`;
|
||||
li = div.querySelector('li') !;
|
||||
});
|
||||
|
||||
it('should return whether the element matches the selector', () => {
|
||||
expect(matchesSelector(li, 'li')).toBe(true);
|
||||
expect(matchesSelector(li, '.qux')).toBe(true);
|
||||
expect(matchesSelector(li, '#quxLi')).toBe(true);
|
||||
expect(matchesSelector(li, '.qux#quxLi:not(.quux)')).toBe(true);
|
||||
expect(matchesSelector(li, '.bar > #bazUl > li')).toBe(true);
|
||||
expect(matchesSelector(li, '.bar .baz ~ .baz li')).toBe(true);
|
||||
|
||||
expect(matchesSelector(li, 'ol')).toBe(false);
|
||||
expect(matchesSelector(li, '.quux')).toBe(false);
|
||||
expect(matchesSelector(li, '#quuxOl')).toBe(false);
|
||||
expect(matchesSelector(li, '.qux#quxLi:not(li)')).toBe(false);
|
||||
expect(matchesSelector(li, '.bar > #bazUl > .quxLi')).toBe(false);
|
||||
expect(matchesSelector(li, 'div span ul li')).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('strictEquals()', () => {
|
||||
it('should perform strict equality check', () => {
|
||||
const values = [
|
||||
undefined,
|
||||
null,
|
||||
true,
|
||||
false,
|
||||
42,
|
||||
'42',
|
||||
() => undefined,
|
||||
() => undefined,
|
||||
{},
|
||||
{},
|
||||
];
|
||||
|
||||
values.forEach((v1, i) => {
|
||||
values.forEach((v2, j) => { expect(strictEquals(v1, v2)).toBe(i === j); });
|
||||
});
|
||||
});
|
||||
|
||||
it('should consider two `NaN` values equals', () => {
|
||||
expect(strictEquals(NaN, NaN)).toBe(true);
|
||||
expect(strictEquals(NaN, 'foo')).toBe(false);
|
||||
expect(strictEquals(NaN, 42)).toBe(false);
|
||||
expect(strictEquals(NaN, null)).toBe(false);
|
||||
expect(strictEquals(NaN, undefined)).toBe(false);
|
||||
});
|
||||
});
|
||||
|
||||
describe('throwError()', () => {
|
||||
it('should throw an error based on the specified message',
|
||||
() => { expect(() => throwError('Test')).toThrowError('Test'); });
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
@ -0,0 +1,100 @@
|
|||
/**
|
||||
* @license
|
||||
* Copyright Google Inc. All Rights Reserved.
|
||||
*
|
||||
* Use of this source code is governed by an MIT-style license that can be
|
||||
* found in the LICENSE file at https://angular.io/license
|
||||
*/
|
||||
|
||||
import {scheduler} from '../src/utils';
|
||||
|
||||
export interface MockScheduler {
|
||||
schedule: (typeof scheduler)['schedule'];
|
||||
scheduleBeforeRender: (typeof scheduler)['scheduleBeforeRender'];
|
||||
}
|
||||
|
||||
export class AsyncMockScheduler implements MockScheduler {
|
||||
private uid = 0;
|
||||
private pendingBeforeRenderCallbacks: ({id: number, cb: () => void})[] = [];
|
||||
private pendingDelayedCallbacks: ({id: number, cb: () => void, delay: number})[] = [];
|
||||
|
||||
flushBeforeRender(): void {
|
||||
while (this.pendingBeforeRenderCallbacks.length) {
|
||||
const cb = this.pendingBeforeRenderCallbacks.shift() !.cb;
|
||||
cb();
|
||||
}
|
||||
}
|
||||
|
||||
reset(): void {
|
||||
this.pendingBeforeRenderCallbacks.length = 0;
|
||||
this.pendingDelayedCallbacks.length = 0;
|
||||
}
|
||||
|
||||
schedule(cb: () => void, delay: number): () => void {
|
||||
const id = ++this.uid;
|
||||
let idx = this.pendingDelayedCallbacks.length;
|
||||
|
||||
for (let i = this.pendingDelayedCallbacks.length - 1; i >= 0; --i) {
|
||||
if (this.pendingDelayedCallbacks[i].delay <= delay) {
|
||||
idx = i + 1;
|
||||
break;
|
||||
}
|
||||
}
|
||||
this.pendingDelayedCallbacks.splice(idx, 0, {id, cb, delay});
|
||||
|
||||
return () => this.remove(id, this.pendingDelayedCallbacks);
|
||||
}
|
||||
|
||||
scheduleBeforeRender(cb: () => void): () => void {
|
||||
const id = ++this.uid;
|
||||
this.pendingBeforeRenderCallbacks.push({id, cb});
|
||||
return () => this.remove(id, this.pendingBeforeRenderCallbacks);
|
||||
}
|
||||
|
||||
tick(ms: number): void {
|
||||
this.flushBeforeRender();
|
||||
|
||||
this.pendingDelayedCallbacks.forEach(item => item.delay -= ms);
|
||||
this.pendingDelayedCallbacks = this.pendingDelayedCallbacks.filter(item => {
|
||||
if (item.delay <= 0) {
|
||||
const cb = item.cb;
|
||||
cb();
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
});
|
||||
}
|
||||
|
||||
private remove(id: number, items: {id: number}[]): void {
|
||||
for (let i = 0, ii = items.length; i < ii; ++i) {
|
||||
if (items[i].id === id) {
|
||||
items.splice(i, 1);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export class SyncMockScheduler implements MockScheduler {
|
||||
schedule(cb: () => void, delay: number): () => void {
|
||||
cb();
|
||||
return () => undefined;
|
||||
}
|
||||
|
||||
scheduleBeforeRender(cb: () => void): () => void {
|
||||
cb();
|
||||
return () => undefined;
|
||||
}
|
||||
}
|
||||
|
||||
export function installMockScheduler(isSync?: false): AsyncMockScheduler;
|
||||
export function installMockScheduler(isSync: true): SyncMockScheduler;
|
||||
export function installMockScheduler(isSync?: boolean): AsyncMockScheduler|SyncMockScheduler {
|
||||
const mockScheduler = isSync ? new SyncMockScheduler() : new AsyncMockScheduler();
|
||||
|
||||
Object.keys(scheduler).forEach((method: keyof typeof scheduler) => {
|
||||
spyOn(scheduler, method).and.callFake(mockScheduler[method].bind(mockScheduler));
|
||||
});
|
||||
|
||||
return mockScheduler;
|
||||
}
|
||||
Loading…
Reference in New Issue