chore(ng13): migrate tests to latest jest, etc

Author: christopherthielen

package.json

@@ -83,7 +83,6 @@
   },
   "jest": {
     "preset": "jest-preset-angular",
-    "environments": ["zone.js/testing"],
     "setupFilesAfterEnv": [
       "./setupJest.ts"
     ]

test/hooks/onBefore.spec.ts

@@ -8,8 +8,7 @@ export class AppComponent {}
 
 describe('onBefore hook', () => {
   let stateService;
-  const hook = trans => (stateService = trans.injector().get(StateService));
-  const hookSpy = jasmine.createSpy('hook', hook).and.callThrough();
+  const hookSpy = jest.fn(trans => (stateService = trans.injector().get(StateService)));
 
   const setupTests = () => {
     const configFn = (router: UIRouter) => {

test/ngModule/deferInitialRender.spec.ts

@@ -61,7 +61,7 @@ describe('deferInitialRender == false', () => {
     status = _status;
   }));
 
-  it('should not wait for initial transition', async done => {
+  it('should not wait for initial transition', async () => {
     const { stateService } = router;
     const fixture = TestBed.createComponent(AppComponent);
 
@@ -78,7 +78,6 @@ describe('deferInitialRender == false', () => {
 
     resolveData();
     await goPromise;
-    done();
   });
 });
 
@@ -95,7 +94,7 @@ describe('deferInitialRender == true', () => {
     status = _status;
   }));
 
-  it('should wait for initial transition', async done => {
+  it('should wait for initial transition', async () => {
     const { stateService } = router;
     const fixture = TestBed.createComponent(AppComponent);
 
@@ -116,7 +115,5 @@ describe('deferInitialRender == true', () => {
 
     await timeout();
     expect(status.done).toBe(true);
-
-    done();
   });
 });

test/ngModule/lazyModule.spec.ts

@@ -1,4 +1,4 @@
-import { async, inject, TestBed } from '@angular/core/testing';
+import { inject, TestBed, waitForAsync } from '@angular/core/testing';
 import { UIRouterModule } from '../../src/uiRouterNgModule';
 import { UIView } from '../../src/directives/uiView';
 import { memoryLocationPlugin, UIRouter } from '@uirouter/core';
@@ -42,7 +42,7 @@ describe('lazy loading', () => {
     });
   });
 
-  it('should lazy load a module', async(
+  it('should lazy load a module', waitForAsync(
     inject([UIRouter], (router: UIRouter) => {
       const { stateRegistry, stateService, globals } = router;
       stateRegistry.register(futureFoo);
@@ -70,7 +70,7 @@ describe('lazy loading', () => {
     })
   ));
 
-  it('should throw if no future state replacement is lazy loaded', async(
+  it('should throw if no future state replacement is lazy loaded', waitForAsync(
     inject([UIRouter], (router: UIRouter) => {
       const { stateRegistry, stateService } = router;
       stateService.defaultErrorHandler(() => null);
@@ -96,7 +96,7 @@ describe('lazy loading', () => {
     })
   ));
 
-  it('should support loadChildren on non-future state (manual state cleanup)', async(
+  it('should support loadChildren on non-future state (manual state cleanup)', waitForAsync(
     inject([UIRouter], (router: UIRouter) => {
       const { stateRegistry, stateService } = router;
       stateRegistry.register(augment1);

test/setupJest.ts

@@ -1,2 +1,2 @@
-import 'jest-preset-angular';
+import 'jest-preset-angular/setup-jest';
 import './jestGlobalMocks'; // browser mocks globally available for every test

test/testUtils.ts

@@ -2,3 +2,6 @@ import { DebugElement } from '@angular/core';
 export function clickOnElement(element: DebugElement, button = 0, metaKey = false, ctrlKey = false) {
   element.triggerEventHandler('click', { button, metaKey, ctrlKey });
 }
+
+export const tick = () => new Promise((resolve) => setTimeout(resolve));
+

test/uiSrefActive/uiSrefActive.spec.ts

@@ -1,14 +1,13 @@
 import { Component, Type } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { UIRouter } from '@uirouter/core';
 import { UISrefActive } from '../../src';
 import { UIRouterModule } from '../../src/uiRouterNgModule';
+import { tick } from '../testUtils';
 
 describe('uiSrefActive', () => {
-  const tick = () => new Promise((resolve) => setTimeout(resolve));
-
   const initialize = <T>(ComponentClass: Type<T>, states) => {
     const fixture = TestBed.configureTestingModule({
       declarations: [ComponentClass],
@@ -30,7 +29,7 @@ describe('uiSrefActive', () => {
       expect(des[0].nativeElement.classList.length).toBe(0);
     });
 
-    it('applies the class when the link is active', async(() => {
+    it('applies the class when the link is active', waitForAsync(() => {
       const des = fixture.debugElement.queryAll(By.directive(UISrefActive));
       const router = fixture.debugElement.injector.get(UIRouter);
       router.stateService
@@ -52,7 +51,7 @@ describe('uiSrefActive', () => {
     let fixture: ComponentFixture<TestComponent>;
     beforeEach(() => (fixture = initialize(TestComponent, [{ name: 'statea' }])));
 
-    it('applies all classses when the link is active', async(() => {
+    it('applies all classses when the link is active', waitForAsync(() => {
       const des = fixture.debugElement.queryAll(By.directive(UISrefActive));
       const router = fixture.debugElement.injector.get(UIRouter);
       router.stateService
@@ -67,7 +66,7 @@ describe('uiSrefActive', () => {
   });
 
   describe('on a parent element', () => {
-    it('applies the active class when any child link is active', async(async () => {
+    it('applies the active class when any child link is active', waitForAsync(async () => {
       const template = `
       <li uiSrefActive="active">
         <a uiSref="statea">State A</a>
@@ -93,7 +92,7 @@ describe('uiSrefActive', () => {
     }));
 
     // Test for https://github.com/ui-router/angular/issues/760
-    it('can dynamically add or remove nested uiSref', async(async () => {
+    it('can dynamically add or remove nested uiSref', waitForAsync(async () => {
       const template = `
         <li id="parent" uiSrefActive="active">
           <a uiSref="statea"></a>

test/uiSrefStatus/uiSrefStatus.spec.ts

@@ -1,10 +1,11 @@
 import { Component, DebugElement } from '@angular/core';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import { UISref } from '../../src';
 
 import { SrefStatus, UISrefStatus } from '../../src/directives/uiSrefStatus';
 import { UIRouterModule } from '../../src/uiRouterNgModule';
-import { clickOnElement } from '../testUtils';
+import { clickOnElement, tick } from '../testUtils';
 
 describe('uiSrefStatus', () => {
   @Component({
@@ -20,7 +21,7 @@ describe('uiSrefStatus', () => {
   let de: DebugElement;
   let fixture: ComponentFixture<TestComponent>;
 
-  beforeEach(async(() => {
+  beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       declarations: [TestComponent],
       imports: [
@@ -36,20 +37,19 @@ describe('uiSrefStatus', () => {
     fixture = TestBed.createComponent(TestComponent);
     component = fixture.componentInstance;
     fixture.detectChanges();
-    de = fixture.debugElement.query(By.directive(UISrefStatus));
+    de = fixture.debugElement.query(By.directive(UISref));
   });
 
   describe('when click on `foo` uiSref', () => {
-    beforeEach(async(() => {
-      spyOn(component, 'updated');
+    it('should emit a event with a TargetState pointing to `foo`', async () => {
+      const spy = jest.spyOn(component, 'updated').mockImplementation(() => {});
       clickOnElement(de);
-    }));
+      await tick();
+      expect(spy).toHaveBeenCalledTimes(2);
 
-    it('should emit a event with a TargetState pointing to `foo`', () => {
-      expect(component.updated).toHaveBeenCalled();
-      const arg: SrefStatus = (component.updated as jasmine.Spy).calls.mostRecent().args[0];
+      const arg: SrefStatus = spy.mock.calls[1][0];
       expect(arg.targetStates.length).toEqual(1);
-      expect(arg.targetStates[0].state()).toEqual(jasmine.objectContaining({ name: 'foo' }));
+      expect(arg.targetStates[0].state()).toEqual(expect.objectContaining({ name: 'foo' }));
     });
   });
 });

test/uiView/uiOnParamsChanged.spec.ts

@@ -71,31 +71,27 @@ describe('uiView', () => {
 
     ////////////////////////////////////////////////////////////////////////////////
 
-    it('should not receive the initial parameter values', async done => {
+    it('should not receive the initial parameter values', async () => {
       expect(lifecycle).toEqual([]);
 
       await router.stateService.go('hasDynamicParams', { param1: 'foo1', param2: 'bar1' });
       fixture.detectChanges();
 
       expect(lifecycle).toEqual(['ngOnInit-0']);
       expect(paramChanges).toEqual([]);
-
-      done();
     });
 
-    it('should receive dynamic parameter changes', async done => {
+    it('should receive dynamic parameter changes', async () => {
       expect(lifecycle).toEqual([]);
 
       await router.stateService.go('hasDynamicParams', { param1: 'foo3', param2: 'bar3' });
       fixture.detectChanges();
 
       expect(lifecycle).toEqual(['ngOnInit-0']);
       expect(paramChanges).toEqual([]);
-
-      done();
     });
 
-    it('should receive dynamic parameter changes', async done => {
+    it('should receive dynamic parameter changes', async () => {
       expect(lifecycle).toEqual([]);
 
       await router.stateService.go('hasDynamicParams', { param1: 'foo', param2: 'bar' });
@@ -108,11 +104,9 @@ describe('uiView', () => {
 
       expect(lifecycle).toEqual(['ngOnInit-0']);
       expect(paramChanges).toEqual([{ param2: 'notbar' }]);
-
-      done();
     });
 
-    it('should receive multiple parameter changes', async done => {
+    it('should receive multiple parameter changes', async () => {
       expect(lifecycle).toEqual([]);
 
       await router.stateService.go('hasDynamicParams', { param1: 'foo', param2: 'bar' });
@@ -124,11 +118,9 @@ describe('uiView', () => {
 
       expect(lifecycle).toEqual(['ngOnInit-0']);
       expect(paramChanges).toEqual([{ param2: 'notbar', param3: 'baz' }]);
-
-      done();
     });
 
-    it('should not receive non-dynamic parameter changes', async done => {
+    it('should not receive non-dynamic parameter changes', async () => {
       expect(lifecycle).toEqual([]);
 
       await router.stateService.go('hasDynamicParams', { param1: 'foo', param2: 'bar' });
@@ -141,8 +133,6 @@ describe('uiView', () => {
 
       expect(lifecycle).toEqual(['ngOnInit-0', 'ngOnDestroy-0', 'ngOnInit-1']);
       expect(paramChanges).toEqual([]);
-
-      done();
     });
   });
 });