feat: Initial commit

.gitignore

@@ -0,0 +1,4 @@
+build
+coverage
+node_modules
+

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2017 Brandon Domingue
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,2 @@
+# Shallow
+Shallow rendering test utility for Angular

index.ts

@@ -0,0 +1 @@
+export { Shallow } from './lib/Shallow';

karma-test-shim.ts

@@ -0,0 +1,8 @@
+import { BrowserDynamicTestingModule, platformBrowserDynamicTesting } from '@angular/platform-browser-dynamic/testing';
+import { getTestBed } from '@angular/core/testing';
+
+getTestBed().initTestEnvironment(
+  BrowserDynamicTestingModule,
+  platformBrowserDynamicTesting()
+);
+

karma.conf.ts

@@ -0,0 +1,35 @@
+// Karma configuration
+// Generated on Mon Dec 25 2017 20:41:30 GMT-0800 (PST)
+
+module.exports = (config: any) => {
+  config.set({
+    autoWatch: false,
+    browsers: ['ChromeHeadless'],
+    colors: true,
+    files: [
+      'node_modules/zone.js/dist/zone.js',
+      'node_modules/zone.js/dist/long-stack-trace-zone.js',
+      'node_modules/zone.js/dist/proxy.js',
+      'node_modules/zone.js/dist/sync-test.js',
+      'node_modules/zone.js/dist/jasmine-patch.js',
+      'node_modules/zone.js/dist/async-test.js',
+      'node_modules/zone.js/dist/fake-async-test.js',
+      'karma-test-shim.ts',
+      { pattern: 'lib/**/*.ts' }
+    ],
+    frameworks: ['jasmine', 'karma-typescript'],
+    logLevel: config.LOG_INFO,
+    port: 9876,
+    preprocessors: {
+      '**/*.ts': ['karma-typescript']
+    },
+    reporters: ['dots', 'karma-typescript', 'kjhtml'],
+    singleRun: true,
+
+    karmaTypescriptConfig: {
+      compilerOptions: {
+        lib: ['ES2015', 'DOM']
+      }
+    }
+  });
+};

lib/ExampleComponent.ts

@@ -0,0 +1,9 @@
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'example',
+  template: '<h1>{{label}}</h1>',
+})
+export class ExampleComponent {
+  @Input() label: string;
+}

lib/ExampleDirective.ts

@@ -0,0 +1,6 @@
+import { Directive, Input } from '@angular/core';
+
+@Directive({selector: '[exampleDirective]'})
+export class ExampleDirective {
+  @Input() exampleDirective: string;
+}

lib/ExampleModule.ts

@@ -0,0 +1,11 @@
+import { NgModule } from '@angular/core';
+import { ExampleComponent } from './ExampleComponent';
+import { ExampleDirective } from './ExampleDirective';
+
+@NgModule({
+  declarations: [
+    ExampleComponent,
+    ExampleDirective
+  ],
+})
+export class ExampleModule {}

lib/Shallow.spec.ts

@@ -0,0 +1,65 @@
+import { ExampleComponent } from './ExampleComponent';
+import { ExampleDirective } from './ExampleDirective';
+import { ExampleModule } from './ExampleModule';
+import { Shallow } from './Shallow';
+
+describe('Shallow', () => {
+  describe('rendering a component', () => {
+    const shallow = new Shallow(ExampleComponent, ExampleModule);
+
+    it('returns the instance of the test component', async () => {
+      const {instance} = await shallow.render('<example></example>');
+
+      expect(instance instanceof ExampleComponent);
+    });
+
+    it('returns the debugElement of the test component', async () => {
+      const {element} = await shallow.render('<example label="foo"></example>');
+
+      expect(element.nativeElement.innerText).toBe('foo');
+    });
+
+    it('detects changes automatically by default', async () => {
+      const {instance} = await shallow.render('<example label="foo"></example>');
+
+      expect(instance.label).toBe('foo');
+    });
+
+    it('skips detectChanges when asked', async () => {
+      const {instance} = await shallow.render('<example label="not set"></example>', {skipDetectChanges: true});
+
+      expect(instance.label).not.toBeDefined();
+    });
+
+    it('can find by css', async () => {
+      const {find} = await shallow.render('<example label="foo"></example>');
+      const h1 = find('h1');
+
+      expect(h1.nativeElement.innerText).toBe('foo');
+    });
+
+    it('can find by directive', async () => {
+      const {instance, find} = await shallow.render('<example></example>');
+      const found = find(ExampleComponent);
+
+      expect(found.componentInstance).toBe(instance);
+    });
+  });
+
+  describe('rendering a directive', () => {
+    const shallow = new Shallow(ExampleDirective, ExampleModule);
+
+    it('returns the instance of the test directive', async () => {
+      const {instance} = await shallow.render('<label exampleDirective="foo"></label>');
+
+      expect(instance instanceof ExampleDirective).toBe(true);
+      expect(instance.exampleDirective).toBe('foo');
+    });
+
+    it('returns the debugElement of the test directive', async () => {
+      const {element} = await shallow.render('<label exampleDirective></label>');
+
+      expect(element.nativeElement.tagName).toBe('LABEL');
+    });
+  });
+});

lib/Shallow.ts

@@ -0,0 +1,71 @@
+import { NgModule, Component, Type, DebugElement } from '@angular/core';
+import { TestBed, ComponentFixture } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+export type __junkType = DebugElement | ComponentFixture<any>; // To satisfy a TS build bug
+
+export class ShallowContainer {}
+
+export interface RenderOptions {
+  skipDetectChanges: boolean;
+  mockEverything: boolean;
+}
+
+export class Shallow<T> {
+  private readonly _moduleProps = this._copyModule();
+  constructor(private readonly _testComponentClass: Type<T>, private readonly _fromModuleClass: Type<any>) {}
+
+  private _copyModule(): NgModule {
+    const moduleProps = ((this._fromModuleClass as any).__annotations__[0]) as NgModule;
+    if (moduleProps.declarations) {
+      moduleProps.declarations = moduleProps.declarations.filter(i => this._testComponentClass);
+    }
+    if (moduleProps.exports) {
+      moduleProps.exports = moduleProps.exports.filter(i => this._testComponentClass);
+    }
+    return moduleProps;
+  }
+
+  async render(html: string, renderOptions?: Partial<RenderOptions>) {
+    const options: RenderOptions = {
+      skipDetectChanges: false,
+      mockEverything: true,
+      ...renderOptions,
+    };
+
+    @Component({
+      selector: 'shallow-container',
+      template: html,
+    })
+    class ProxyShallowContainer extends ShallowContainer {}
+
+    await TestBed.configureTestingModule({
+      imports: this._moduleProps.imports,
+      providers: this._moduleProps.providers,
+      declarations: [...this._moduleProps.declarations as any[], ProxyShallowContainer],
+    }).compileComponents();
+
+    const fixture = TestBed.createComponent(ProxyShallowContainer) as ComponentFixture<ShallowContainer>;
+
+    const find = (cssOrDirective: string | Type<any>) => {
+      const query = typeof cssOrDirective === 'string'
+        ? By.css(cssOrDirective)
+        : By.directive(cssOrDirective);
+      return fixture.debugElement.query(query);
+    };
+
+    const element = find(this._testComponentClass);
+    const instance = element.injector.get(this._testComponentClass);
+
+    if (!options.skipDetectChanges) {
+      fixture.detectChanges();
+    }
+
+    return {
+      TestBed,
+      fixture,
+      element,
+      find,
+      instance,
+    };
+  }
+}