CODEWITHSUNDEEP
htmlangulartestingkarma-jasmine
DLO
DLO

Reputation: 1194

HTML image gets rendered on top of Karma

How come a logo which I have in my navbar component is rendered in Karma when I run "ng test"?

When running "ng test" it appears like in the image below:

enter image description here The following code is from my app.component.spec.ts file.

describe("AppComponent", () => {
  let component: AppComponent;
  let fixture: ComponentFixture<AppComponent>;
  let de: DebugElement

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      imports: [
        RouterTestingModule, 
        AngularFireDatabaseModule,
        AngularFireAuthModule,
        AngularFirestoreModule,
        AngularFireStorageModule,
        AngularFireModule.initializeApp( environment.firebase)],
      declarations: [
        AppComponent, 
        NavbarComponent],
      providers: 
        [ 
          DatabaseService, 
        ],
    }).compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(AppComponent);
    component = fixture.componentInstance;
    de = fixture.debugElement;
    fixture.detectChanges();
  });

  it("should create", () => {
    expect(component).toBeTruthy();
  });
});

Upvotes: 2

Views: 134

Answers (1)

AliF50
AliF50

Reputation: 18859

I am guessing the image appears without CSS of how big or small it should be.

If NavbarComponent is not important to your unit tests for AppComponent, you can use NO_ERRORS_SCHEMA to make NavbarComponent be a dead HTML element in your unit tests.

Try:

import { NO_ERRORS_SCHEMA } from '@angular/core';
....
declarations: [
        AppComponent, 
        // NavbarComponent,
   ],
schemas: [NO_ERRORS_SCHEMA],

Then hopefully the image will not appear.

Upvotes: 1

Related Questions