Odtnhj

I don't understand why on earth
this simple test doesn't work.

BannerComponent should not have welcome message after construction
Expected 'welcome' to be undefined.

// Component

@Component(
 selector: 'iwdf-banner',
 template: `
 <p>
 me
 </p>
 `,
 styles: 
)
export class BannerComponent implements OnInit 
 me: string;
 constructor() 
 ngOnInit() 
 this.me = 'welcome';
 

// Test

describe('BannerComponent', () => 
 let component: BannerComponent;
 let fixture: ComponentFixture<BannerComponent>;

 beforeEach(async(() => 
 TestBed.configureTestingModule(
 declarations: [ BannerComponent ]
 )
 .compileComponents();
 ));

 beforeEach(() => 
 fixture = TestBed.createComponent(BannerComponent);
 component = fixture.componentInstance;
 fixture.detectChanges();
 );

 it('should create', () => 
 expect(component).toBeTruthy();
 );

 it('should not have welcome message after construction', () => 
 expect(component.me).toBeUndefined();
 );

 it('should welcome logged in user after Angular calls ngOnInit', () => 
 component.ngOnInit();
 expect(component.me).toContain('welcome');
 );
);

Calling TestBed.createComponent will call the constructor of the component, but not any lifecycle hooks.

The OnInit lifecycle hook will be called the first time you call fixture.detectChanges(), which you do before every test. So that's why me has the value welcome instead of being undefined.

You can fix this by removing fixture.detectChanges() from the beforeEach, and moving it to individual tests that need it (which will be all but that one failing test). You do not need to call ngOnInit manually on that last test once you replace the line with fixture.detectChanges().

Calling ngOnInit manually might be useful if you want to test your component without the angular testbed - you would then have to take care of the dependencies and lifecycles yourself, which I don't suggest.

Well, TestBed does run all the nescessary lifecycle hooks on detect changes. So it is to be expected that the variable is defined. Don't use fixture.detectChanges(). That one runs the hook.