fix: test.each should be in ProxyZone (#340)

* fix: test.each and describe.each is in ProxyZone

Closes #339

example/src/app/app.component.spec.ts

@@ -1,10 +1,5 @@
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import {
-  async,
-  fakeAsync,
-  tick,
-  ComponentFixture,
-} from '@angular/core/testing';
+import { async, fakeAsync, tick, ComponentFixture } from '@angular/core/testing';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
 
 import { ConfigureFn, configureTests } from '@lib/testing';
@@ -20,7 +15,7 @@ describe('AppComponent', () => {
       testBed.configureTestingModule({
         declarations: [AppComponent],
         imports: [NoopAnimationsModule],
-        schemas: [NO_ERRORS_SCHEMA],
+        schemas: [NO_ERRORS_SCHEMA]
       });
     };
 
@@ -50,8 +45,9 @@ describe('AppComponent', () => {
     expect(compiled.querySelector('h1').textContent).toContain('app works!');
   }));
 
-  it('looks async but is synchronous', <any>fakeAsync(
-    (): void => {
+  it(
+    'looks async but is synchronous',
+    <any>fakeAsync((): void => {
       let flag = false;
       setTimeout(() => {
         flag = true;
@@ -61,8 +57,28 @@ describe('AppComponent', () => {
       expect(flag).toBe(false);
       tick(50);
       expect(flag).toBe(true);
-    }
-  ));
+    })
+  );
+
+  it(
+    'async should work',
+    <any>async((): void => {
+      let flag = false;
+      setTimeout(() => {
+        flag = true;
+        expect(flag).toBe(true);
+      }, 100);
+    })
+  );
+
+  it('test with done should work', (done): void => {
+    let flag = false;
+    setTimeout(() => {
+      flag = true;
+      expect(flag).toBe(true);
+      done();
+    }, 100);
+  });
 });
 
 test.todo('a sample todo');

example/src/app/service/hero.service.spec.ts

@@ -1,104 +1,107 @@
-import { inject, TestBed } from '@angular/core/testing'
-import { HttpClientModule, HttpErrorResponse, HttpRequest } from '@angular/common/http'
-import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing'
+import { HttpClientModule, HttpErrorResponse, HttpRequest } from '@angular/common/http';
+import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
+import { inject, TestBed } from '@angular/core/testing';
 
-import { heroesUrl, HeroService } from './hero.service'
+import { heroesUrl, HeroService } from './hero.service';
 
 describe('Service: HeroService', () => {
-  let service: HeroService
-  let backend: HttpTestingController
+  let service: HeroService;
+  let backend: HttpTestingController;
 
-  const expectedData = {
-    id: 1,
-    name: 'Test hero',
-  }
+  const expectedData = { id: 1, name: 'Test hero' };
 
   const expectedDataAll = [
-    {
-      id: 1,
-      name: 'Test hero 1'
-    },
-    {
-      id: 2,
-      name: 'Test hero 2'
-    }
-  ]
+    { id: 1, name: 'Test hero 1' },
+    { id: 2, name: 'Test hero 2' }
+  ];
 
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [
-        HttpClientModule,
-        HttpClientTestingModule,
-      ],
-      providers: [
-        HeroService,
-      ],
-    })
-
-    backend = TestBed.get(HttpTestingController)
-    service = TestBed.get(HeroService)
+      imports: [HttpClientModule, HttpClientTestingModule],
+      providers: [HeroService]
+    });
+
+    backend = TestBed.get(HttpTestingController);
+    service = TestBed.get(HeroService);
 
     // Mock implementation of console.error to
     // return undefined to stop printing out to console log during test
-    jest.spyOn(console, 'error').mockImplementation(() => undefined)
-  })
+    jest.spyOn(console, 'error').mockImplementation(() => undefined);
+  });
 
-  afterEach(inject([ HttpTestingController ], (_backend: HttpTestingController) => {
-    _backend.verify()
-  }))
+  afterEach(inject([HttpTestingController], (_backend: HttpTestingController) => {
+    _backend.verify();
+  }));
 
   it('should create an instance successfully', () => {
-    expect(service).toBeDefined()
-  })
+    expect(service).toBeDefined();
+  });
 
   it('should call the GET heroes api and return all results', () => {
-    let actualDataAll = {}
+    let actualDataAll = {};
+
+    service.getHeroes().subscribe(data => (actualDataAll = data));
+
+    backend
+      .expectOne((req: HttpRequest<any>) => {
+        return req.url === `${heroesUrl}` && req.method === 'GET';
+      }, `GET all hero data from ${heroesUrl}`)
+      .flush(expectedDataAll);
 
-    service.getHeroes().subscribe(data => actualDataAll = data)
+    expect(actualDataAll).toEqual(expectedDataAll);
+  });
 
-    backend.expectOne((req: HttpRequest<any>) => {
-      return req.url === `${heroesUrl}`
-        && req.method === 'GET'
-    }, `GET all hero data from ${heroesUrl}`)
-      .flush(expectedDataAll)
+  it('should call the GET hero api with id and return the result', () => {
+    let actualData = {};
 
-    expect(actualDataAll).toEqual(expectedDataAll)
-  })
+    service.getHero(1).subscribe(data => (actualData = data));
 
-  it('should call the GET hero api and return the result', () => {
-    let actualData = {}
+    backend
+      .expectOne((req: HttpRequest<any>) => {
+        return req.url === `${heroesUrl}` && req.method === 'GET' && req.params.get('id') === '1';
+      }, `GET hero data from ${heroesUrl}?id=1`)
+      .flush(expectedData);
 
-    service.getHero(1).subscribe(data => actualData = data)
+    expect(actualData).toEqual(expectedData);
+  });
 
-    backend.expectOne((req: HttpRequest<any>) => {
-      return req.url === `${heroesUrl}`
-        && req.method === 'GET'
-        && req.params.get('id') === '1'
-    }, `GET hero data from ${heroesUrl}?id=1`)
-      .flush(expectedData)
+  test.each([
+    [1, { id: 1, name: 'Test Hero 1' }],
+    [2, { id: 2, name: 'Test Hero 2' }]
+  ])('should call the GET hero api and return the result', (id: number, testData: any) => {
+    let actualData = {};
 
-    expect(actualData).toEqual(expectedData)
-  })
+    service.getHero(1).subscribe(data => (actualData = data));
+
+    backend
+      .expectOne((req: HttpRequest<any>) => {
+        return req.url === `${heroesUrl}` && req.method === 'GET';
+      }, `GET hero data from ${heroesUrl}?id=${id}`)
+      .flush(testData);
+
+    expect(actualData).toEqual(testData);
+  });
 
   it('should send an expected GET request and throw error to console when an error occurs', () => {
-    service.getHero(1).subscribe()
+    service.getHero(1).subscribe();
 
     const getHeroRequest = backend.expectOne((req: HttpRequest<any>) => {
-      return req.url === `${heroesUrl}`
-        && req.method === 'GET'
-        && req.params.get('id') === '1'
-    }, `GET hero data from ${heroesUrl}?id=1`)
+      return req.url === `${heroesUrl}` && req.method === 'GET' && req.params.get('id') === '1';
+    }, `GET hero data from ${heroesUrl}?id=1`);
 
     // Stimulate an error happens from the backend
-    getHeroRequest.error(new ErrorEvent('ERROR_GET_HERO_DATA'))
+    getHeroRequest.error(new ErrorEvent('ERROR_GET_HERO_DATA'));
 
-    expect(console.error).toHaveBeenCalled()
-  })
+    expect(console.error).toHaveBeenCalled();
+  });
 
   it('should return an observable of undefined and print error to console', () => {
-    const result = service.handleError(new HttpErrorResponse({ error: 'Error occurs' }), 'test method')
-
-    expect(console.error).toHaveBeenCalled()
-    result.subscribe(value => expect(value).toBeUndefined())
-  })
-})
+    const result = service.handleError(
+      new HttpErrorResponse({ error: 'Error occurs' }),
+      'test method'
+    );
+
+    expect(console.error).toHaveBeenCalled();
+    result.subscribe(value => expect(value).toBeUndefined());
+  });
+});

example/src/app/simple/another.component.ts

@@ -0,0 +1,7 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'another-comp',
+  template: ''
+})
+export class AnotherComponent {}

example/src/app/simple/simple.component.spec.ts

@@ -1,28 +1,27 @@
 import { async, ComponentFixture } from '@angular/core/testing';
 
-import {ConfigureFn, configureTests} from '@lib/testing';
+import { ConfigureFn, configureTests } from '@lib/testing';
 
 import { SimpleComponent } from './simple.component';
+import { AnotherComponent } from './another.component';
 
 describe('SimpleComponent', () => {
   let component: SimpleComponent;
   let fixture: ComponentFixture<SimpleComponent>;
 
-  beforeEach(
-    async(() => {
-      const configure: ConfigureFn = testBed => {
-        testBed.configureTestingModule({
-          declarations: [ SimpleComponent ]
-        });
-      };
-
-      configureTests(configure).then(testBed => {
-        fixture = testBed.createComponent(SimpleComponent);
-        component = fixture.componentInstance;
-        fixture.detectChanges();
+  beforeEach(async(() => {
+    const configure: ConfigureFn = testBed => {
+      testBed.configureTestingModule({
+        declarations: [SimpleComponent]
       });
-    })
-  );
+    };
+
+    configureTests(configure).then(testBed => {
+      fixture = testBed.createComponent(SimpleComponent);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+  }));
 
   it('should create', () => {
     expect(component).toBeTruthy();
@@ -36,3 +35,26 @@ describe('SimpleComponent', () => {
     expect(fixture.nativeElement).toMatchSnapshot();
   });
 });
+
+describe.each([[SimpleComponent, AnotherComponent]])('Test components', ComponentType => {
+  let component: any;
+  let fixture: ComponentFixture<any>;
+
+  beforeEach(async(() => {
+    const configure: ConfigureFn = testBed => {
+      testBed.configureTestingModule({
+        declarations: [ComponentType]
+      });
+    };
+
+    configureTests(configure).then(testBed => {
+      fixture = testBed.createComponent(ComponentType);
+      component = fixture.componentInstance;
+      fixture.detectChanges();
+    });
+  }));
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});