Friday, January 17, 2020

.textContent is kind of like .innerHTML in JavaScript

Recently, I made an Angular 8 application and replaced the default tests with the following.

import { TestBed, async } from '@angular/core/testing';
import { RouterTestingModule } from '@angular/router/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
   beforeEach(async(() => {
      TestBed.configureTestingModule({
         imports: [
            RouterTestingModule
         ],
         declarations: [
            AppComponent
         ],
      }).compileComponents();
   }));
   
   it('should create the app', () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app).toBeTruthy();
   });
   
   it(`should have as title 'Conklin Business Portal'`, () => {
      const fixture = TestBed.createComponent(AppComponent);
      const app = fixture.debugElement.componentInstance;
      expect(app.title).toEqual('Conklin Business Portal');
   });
   
   it('should render alt tag at logo link', () => {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('img').alt).toContain('Conklin Business Portal');
   });
   
   it('should render menu system', () => {
      const fixture = TestBed.createComponent(AppComponent);
      fixture.detectChanges();
      const compiled = fixture.debugElement.nativeElement;
      expect(compiled.querySelector('li').textContent).toContain('Main Navigation');
   });
});

 
 

Here we see, in the last test, the old Jasmine convention of using .textContent in lieu of .innerHTML which you never see anywhere else. It turns out that I could have used .innerHTML for this particular test too and that the difference between the two per this is that .innerHTML would have the markup tags (should there be any) inside the wrapping tag as part of the string of guts that comes back. The link I give here touches on .innerText too which seems to be like .textContent with any extra spaces stripped out.

No comments:

Post a Comment