feat: add projectContent method to DomInsertionService

npm/ng-packs/packages/core/src/lib/services/dom-insertion.service.ts

@@ -1,10 +1,13 @@
-import { Injectable } from '@angular/core';
+import { Injectable, Injector, TemplateRef, Type } from '@angular/core';
 import { ContentStrategy } from '../strategies/content.strategy';
+import { ProjectionStrategy } from '../strategies/projection.strategy';
 import { generateHash } from '../utils';
 
 @Injectable({ providedIn: 'root' })
 export class DomInsertionService {
-  readonly inserted = new Set();
+  readonly inserted = new Set<number>();
+
+  constructor(private injector: Injector) {}
 
   insertContent(contentStrategy: ContentStrategy) {
     const hash = generateHash(contentStrategy.content);
@@ -14,4 +17,11 @@ export class DomInsertionService {
     contentStrategy.insertElement();
     this.inserted.add(hash);
   }
+
+  projectContent<T extends Type<any> | TemplateRef<any>>(
+    projectionStrategy: ProjectionStrategy<T>,
+    injector = this.injector,
+  ) {
+    return projectionStrategy.injectContent(injector);
+  }
 }

npm/ng-packs/packages/core/src/lib/tests/dom-insertion.service.spec.ts

@@ -1,15 +1,71 @@
+import { Component, ComponentRef, NgModule } from '@angular/core';
 import { createServiceFactory, SpectatorService } from '@ngneat/spectator';
 import { DomInsertionService } from '../services';
-import { CONTENT_STRATEGY } from '../strategies';
+import { CONTENT_STRATEGY, PROJECTION_STRATEGY } from '../strategies';
 
 describe('DomInsertionService', () => {
+  @Component({ template: '<div class="foo">bar</div>' })
+  class TestComponent {}
+
+  // createServiceFactory does not accept entryComponents directly
+  @NgModule({
+    declarations: [TestComponent],
+    entryComponents: [TestComponent],
+  })
+  class TestModule {}
+
   let spectator: SpectatorService<DomInsertionService>;
-  const createService = createServiceFactory(DomInsertionService);
+  const createService = createServiceFactory({
+    service: DomInsertionService,
+    imports: [TestModule],
+  });
+  let styleElements: NodeListOf<HTMLStyleElement>;
 
   beforeEach(() => (spectator = createService()));
 
-  it('should be insert an element', () => {
+  afterEach(() => styleElements.forEach(element => element.remove()));
-    spectator.service.insertContent(CONTENT_STRATEGY.AppendStyleToHead('.test {}'));
+
-    expect(spectator.service.inserted.has(1437348290)).toBe(true);
+  describe('#insertContent', () => {
+    it('should be able to insert given content', () => {
+      spectator.service.insertContent(CONTENT_STRATEGY.AppendStyleToHead('.test {}'));
+      styleElements = document.head.querySelectorAll('style');
+      expect(styleElements.length).toBe(1);
+      expect(styleElements[0].textContent).toBe('.test {}');
+    });
+
+    it('should insert only once', () => {
+      expect(spectator.service.inserted.has(1437348290)).toBe(false);
+
+      spectator.service.insertContent(CONTENT_STRATEGY.AppendStyleToHead('.test {}'));
+      styleElements = document.head.querySelectorAll('style');
+
+      expect(styleElements.length).toBe(1);
+      expect(styleElements[0].textContent).toBe('.test {}');
+      expect(spectator.service.inserted.has(1437348290)).toBe(true);
+
+      spectator.service.insertContent(CONTENT_STRATEGY.AppendStyleToHead('.test {}'));
+      styleElements = document.head.querySelectorAll('style');
+
+      expect(styleElements.length).toBe(1);
+      expect(styleElements[0].textContent).toBe('.test {}');
+      expect(spectator.service.inserted.has(1437348290)).toBe(true);
+    });
+
+    it('should be able to insert given content', () => {
+      spectator.service.insertContent(CONTENT_STRATEGY.AppendStyleToHead('.test {}'));
+      expect(spectator.service.inserted.has(1437348290)).toBe(true);
+    });
+  });
+
+  describe('#projectContent', () => {
+    it('should call injectContent of given projectionStrategy and return what it returns', () => {
+      const strategy = PROJECTION_STRATEGY.AppendComponentToBody(TestComponent);
+      const componentRef = spectator.service.projectContent(strategy);
+      const foo = document.querySelector('body > ng-component > div.foo');
+
+      expect(componentRef).toBeInstanceOf(ComponentRef);
+      expect(foo.textContent).toBe('bar');
+      componentRef.destroy();
+    });
   });
 });