diff --git a/npm/ng-packs/packages/core/src/lib/strategies/dom.strategy.ts b/npm/ng-packs/packages/core/src/lib/strategies/dom.strategy.ts new file mode 100644 index 0000000000..4fbe18d235 --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/strategies/dom.strategy.ts @@ -0,0 +1,28 @@ +export class DomStrategy { + constructor( + public target: HTMLElement = document.head, + public position: InsertPosition = 'beforeend', + ) {} + + insertElement(element: T) { + this.target.insertAdjacentElement(this.position, element); + } +} + +export const DOM_STRATEGY = { + AfterElement(element: HTMLElement) { + return new DomStrategy(element, 'afterend'); + }, + AppendToBody() { + return new DomStrategy(document.body, 'beforeend'); + }, + AppendToHead() { + return new DomStrategy(document.head, 'beforeend'); + }, + BeforeElement(element: HTMLElement) { + return new DomStrategy(element, 'beforebegin'); + }, + PrependToHead() { + return new DomStrategy(document.head, 'afterbegin'); + }, +}; diff --git a/npm/ng-packs/packages/core/src/lib/strategies/index.ts b/npm/ng-packs/packages/core/src/lib/strategies/index.ts new file mode 100644 index 0000000000..2506a819de --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/strategies/index.ts @@ -0,0 +1 @@ +export * from './dom.strategy'; diff --git a/npm/ng-packs/packages/core/src/lib/tests/dom.strategy.spec.ts b/npm/ng-packs/packages/core/src/lib/tests/dom.strategy.spec.ts new file mode 100644 index 0000000000..7e5f264f2b --- /dev/null +++ b/npm/ng-packs/packages/core/src/lib/tests/dom.strategy.spec.ts @@ -0,0 +1,49 @@ +import { DomStrategy, DOM_STRATEGY } from '../strategies'; + +describe('DomStrategy', () => { + describe('#insertElement', () => { + it('should append element to head by default', () => { + const strategy = new DomStrategy(); + const element = document.createElement('script'); + strategy.insertElement(element); + + expect(document.head.lastChild).toBe(element); + }); + + it('should append element to body when body is given as target', () => { + const strategy = new DomStrategy(document.body); + const element = document.createElement('script'); + strategy.insertElement(element); + + expect(document.body.lastChild).toBe(element); + }); + + it('should prepend to head when position is given as "afterbegin"', () => { + const strategy = new DomStrategy(undefined, 'afterbegin'); + const element = document.createElement('script'); + strategy.insertElement(element); + + expect(document.head.firstChild).toBe(element); + }); + }); +}); + +describe('DOM_STRATEGY', () => { + let div = document.createElement('DIV'); + + beforeEach(() => { + document.body.innerHTML = ''; + document.body.appendChild(div); + }); + + test.each` + name | target | position + ${'AfterElement'} | ${div} | ${'afterend'} + ${'AppendToBody'} | ${document.body} | ${'beforeend'} + ${'AppendToHead'} | ${document.head} | ${'beforeend'} + ${'BeforeElement'} | ${div} | ${'beforebegin'} + ${'PrependToHead'} | ${document.head} | ${'afterbegin'} + `('should successfully map $name to CrossOriginStrategy', ({ name, target, position }) => { + expect(DOM_STRATEGY[name](target)).toEqual(new DomStrategy(target, position)); + }); +});