test: clean up tests

Author: darlanalves

README.md

@@ -124,7 +124,7 @@ export class AppService {
   @Inject() userService: UserService;
 
   // injected with symbol
-  @Inject(ApplicationRef) userService: Application;
+  @Inject(ChangeDetectorRef) userService: ChangeDetector;
 }
 ```
 

src/application.ts

@@ -1,7 +1,6 @@
-import { Provider, Injector } from '@homebots/injector';
+import { Provider, Injector, TreeInjector } from '@homebots/injector';
 import { domReady } from './utils';
-import { Application } from './application';
-import { ChangeDetectorRef } from './change-detection/change-detection';
+import { ChangeDetector, ChangeDetectorRef } from './change-detection/change-detection';
 import { ReactiveChangeDetector } from './change-detection/reactive-change-detector';
 import { ForContainer } from './containers/for-container';
 import { IfContainer } from './containers/if-container';
@@ -25,14 +24,20 @@ export interface BootstrapOptions {
   useShadowDom?: boolean;
 }
 
+export interface Application {
+  injector: Injector;
+  changeDetector: ChangeDetector;
+  check(): Promise<void>;
+}
+
 export class Bootstrap {
   private static promise: Promise<unknown> = domReady().then(() => Bootstrap.addDefaultRules());
 
   static whenReady(fn: (...args: any[]) => any) {
     return (this.promise = this.promise.then(fn));
   }
 
-  static createApplication(rootNode: HTMLElement = document.body, options?: BootstrapOptions) {
+  static createApplication(rootNode: HTMLElement = document.body, options?: BootstrapOptions): Application {
     options = {
       ...defaultOptions,
       ...options,
@@ -41,14 +46,33 @@ export class Bootstrap {
     const { providers } = options;
     providers.unshift(defaultChangeDetector);
 
-    const application = new Application(rootNode, providers);
-    Bootstrap.whenReady(() => application.check());
+    const injector = Bootstrap.setupInjector(rootNode, providers);
+    const changeDetector = injector.get(ChangeDetectorRef);
 
     if (options.useShadowDom !== undefined) {
-      application.injector.get(ShadowDomToggle).toggle(options.useShadowDom);
+      injector.get(ShadowDomToggle).toggle(options.useShadowDom);
     }
 
-    return application;
+    const app = {
+      injector,
+      changeDetector,
+      check() {
+        return changeDetector.markAsDirtyAndCheck();
+      },
+    };
+
+    Bootstrap.whenReady(() => app.check());
+
+    return app;
+  }
+
+  static setupInjector(rootNode: HTMLElement, providers: Provider[] = []) {
+    const injector = new TreeInjector();
+
+    Injector.setInjectorOf(rootNode, injector);
+    injector.provideAll(providers);
+
+    return injector;
   }
 
   static addDefaultRules() {

src/bootstrap.ts

@@ -37,7 +37,7 @@ export interface ChangeDetector {
 
   markAsDirtyAndCheck(): Promise<void>;
   markTreeForCheck(): void;
-  scheduleTreeCheck(): void;
+  scheduleTreeCheck(options?: { async: boolean }): void;
   check(): void;
   checkTree(): void;
   unregister(): void;

src/change-detection/change-detection.ts

@@ -73,9 +73,9 @@ export class ReactiveChangeDetector implements ChangeDetector {
     }
   }
 
-  async markAsDirtyAndCheck() {
+  markAsDirtyAndCheck() {
     this.markTreeForCheck();
-    return void this.scheduleTreeCheck();
+    return this.scheduleTreeCheck();
   }
 
   check() {
@@ -133,9 +133,13 @@ export class ReactiveChangeDetector implements ChangeDetector {
     this.children.forEach((cd) => cd.checkTree());
   }
 
-  async scheduleTreeCheck() {
+  scheduleTreeCheck(options: { async?: boolean } = {}) {
     if (this.root !== this) {
-      return this.root.scheduleTreeCheck();
+      return this.root.scheduleTreeCheck(options);
+    }
+
+    if (!options.async) {
+      this.checkTree();
     }
 
     if (this.timer) {

src/change-detection/reactive-change-detector.ts

@@ -1,14 +1,15 @@
-import { CustomElement } from '.';
+import { CustomElement, CustomHTMLElement } from '.';
 
 describe('CustomElement', () => {
-  it('should create a custom element class', () => {
-    const customElement = CustomElement.create(class extends HTMLElement {}, { tag: 'x-custom' });
-    const instance = document.createElement('x-custom') as any;
+  it('should define a custom element class', () => {
+    const tag = 'x-custom' + Math.random();
+    CustomElement.define(class extends HTMLElement {}, { tag });
+    const instance = document.createElement(tag) as CustomHTMLElement;
 
-    expect(typeof customElement).toBe('function');
-    expect(instance.onInit).toBe('function');
-    expect(instance.onDestroy).toBe('function');
-    expect(instance.onBeforeCheck).toBe('function');
-    expect(instance.onChanges).toBe('function');
+    expect(customElements.get(tag)).not.toBeUndefined();
+    expect(typeof instance.onInit).toBe('function');
+    expect(typeof instance.onDestroy).toBe('function');
+    expect(typeof instance.onBeforeCheck).toBe('function');
+    expect(typeof instance.onChanges).toBe('function');
   });
 });

src/component.spec.ts

@@ -141,7 +141,6 @@ export class CustomElementInternal {
       const parent = options.parentInjector || CustomElementInternal.findParentInjector(component);
       injector = new Injector(parent);
 
-
       const localChangeDetector = parent.get(ChangeDetectorRef).fork(component);
       injector.provide(ChangeDetectorRef, Value(localChangeDetector));
 

src/component.ts

@@ -4,11 +4,18 @@ import { DomScanner } from './dom-scanner';
 import { ReactiveChangeDetector } from '../change-detection/reactive-change-detector';
 import { ExecutionContext } from '../execution-context';
 
-describe('DomScanner', () => {
+fdescribe('DomScanner', () => {
   afterEach(() => clearDom());
 
   it('should replace text markers in a text node with data binding tags', () => {
     const node = createHtml('You say {{ youSay }} and I say {{ iSay }}');
-    inject(DomScanner).scanElement(node, new ReactiveChangeDetector(), new ExecutionContext());
+    const context = new ExecutionContext();
+    const cd = new ReactiveChangeDetector();
+    context.addLocals({ youSay: 'goodbye', iSay: 'hello' });
+
+    inject(DomScanner).scanElement(node, cd, context);
+    cd.scheduleTreeCheck();
+
+    // expect(node.textContent.trim()).toBe('');
   });
 });

src/dom/dom-scanner.spec.ts

@@ -1,6 +1,6 @@
 import { ExecutionContext, SealedExecutionContext } from '.';
 
-describe('ExecutionContext', () => {
+fdescribe('ExecutionContext', () => {
   it('runs an expression with provided locals and element', () => {
     const context = new ExecutionContext(null);
     context.addLocals({ number: 123, string: 'alice' });
@@ -67,15 +67,16 @@ describe('ExecutionContext', () => {
 
     expect(() => context.run('number + 1')).toThrow(new ReferenceError('number is not defined'));
   });
-});
 
-describe('SealedExecutionContext', () => {
-  it('prevents context modifications ', () => {
-    const context = new ExecutionContext(null);
-    const sealedContext = new SealedExecutionContext(context);
+  describe('SealedExecutionContext', () => {
+    it('prevents context modifications ', () => {
+      const context = new ExecutionContext(null);
+      const sealedContext = new SealedExecutionContext(context);
 
-    sealedContext.reset();
-    sealedContext.addLocals({ local: true });
-    expect(() => sealedContext.run('local')).toThrow(new ReferenceError('local is not defined'));
+      sealedContext.reset();
+      sealedContext.addLocals({ local: true });
+      expect(() => sealedContext.run('local')).toThrow(new ReferenceError('local is not defined'));
+    });
   });
 });
+

src/execution-context.spec.ts

@@ -1,7 +1,6 @@
 import 'reflect-metadata';
 
-export { Application } from './application';
-export { Bootstrap, BootstrapOptions } from './bootstrap';
+export { Bootstrap, BootstrapOptions, Application } from './bootstrap';
 
 export {
   Change,