Prueba angular para material angular en Mat-Menu

No busques más en otras webs ya que llegaste al espacio correcto, tenemos la respuesta que buscas y sin complicaciones.

Solución:

Mi prueba final terminó luciendo así:

import  TestBed, async, ComponentFixture  from '@angular/core/testing';
import  AppComponent  from './app.component';
import  RouterTestingModule  from '@angular/router/testing';

import  AppRoutes  from './app.routes';
import 
  MatToolbarModule,
  MatIconModule,
  MatMenuModule,
  MatButtonModule
 from '@angular/material';

import  HomeComponent  from './home/home.component';
import  UserService  from './user/user.service';
import  NoopAnimationsModule  from '@angular/platform-browser/animations';
import  BehaviorSubject  from '../../node_modules/rxjs';

class MockUserService 
  signedIn$: BehaviorSubject = new BehaviorSubject(false);
  signIn() 


describe('AppComponent', () => 
  let app: AppComponent;
  let fixture: ComponentFixture;
  let dom;
  let button;

  beforeEach(async(() => 
    TestBed.configureTestingModule(
      declarations: [AppComponent, HomeComponent],
      providers: [ provide: UserService, useClass: MockUserService ],
      imports: [
        NoopAnimationsModule,
        MatIconModule,
        MatToolbarModule,
        MatMenuModule,
        MatButtonModule,
        RouterTestingModule.withRoutes(AppRoutes)
      ]
    ).compileComponents();
  ));

  beforeEach(() => 
    fixture = TestBed.createComponent(AppComponent);
    fixture.autoDetectChanges(true);                                           //this was the key fix
    spyOn(MockUserService.prototype, 'signIn').and.callThrough();
    app = fixture.debugElement.componentInstance;
    dom = fixture.nativeElement;
    button = dom.querySelector('#userMenu');
  );

  it('should create the app', async(() => 
    expect(app).toBeTruthy();
  ));

  describe('user menu', () => 
    it('should not have the menu open', async () => 
      const menu = dom.parentNode.querySelector('.mat-menu-panel');
      expect(menu).toBeFalsy();
    );

    it('open the menu when clicking on the account button', async () => 
      button.click();
      const menu = dom.parentNode.querySelector('.mat-menu-panel');
      expect(menu).toBeTruthy();
    );

    it('call user.signIn() once sign in button is pressed', async () => 
      button.click();
      const mockUser = TestBed.get(UserService);
      dom.parentNode.querySelector('#userSignIn').click();
      expect(mockUser['signIn']).toHaveBeenCalled();
    );
  );

  describe('navigation icons', () => 
    it('navigation icons show when user.signedIn$ emits true', async () => 
      const mockUser = TestBed.get(UserService);
      await mockUser.signedIn$.next(true);
      await fixture.detectChanges();
      expect(
        dom.parentNode.querySelector('button[routerLink="/emails/received"]')
      ).toBeTruthy();
      expect(
        dom.parentNode.querySelector('button[routerLink="/emails/mapping"]')
      ).toBeTruthy();
    );

    it('navigation icons dont show until user.signedIn$ emits true', async () => 
      expect(
        dom.parentNode.querySelector('button[routerLink="/emails/received"]')
      ).toBeFalsy();
      expect(
        dom.parentNode.querySelector('button[routerLink="/emails/mapping"]')
      ).toBeFalsy();
    );

    it('navigation icons dont show until user.signedIn$ emits false', async () => 
      const mockUser = TestBed.get(UserService);
      await mockUser.signedIn$.next(false);
      await fixture.detectChanges();
      expect(
        dom.parentNode.querySelector('button[routerLink="/emails/received"]')
      ).toBeFalsy();
      expect(
        dom.parentNode.querySelector('button[routerLink="/emails/mapping"]')
      ).toBeFalsy();
    );

    it('navigation icons re-hide on user.signedIn$ false', async () => 
      const mockUser = TestBed.get(UserService);
      await mockUser.signedIn$.next(true);
      await fixture.detectChanges();
      await mockUser.signedIn$.next(false);
      await fixture.detectChanges();
      expect(
        dom.parentNode.querySelector('button[routerLink="/emails/received"]')
      ).toBeFalsy();
      expect(
        dom.parentNode.querySelector('button[routerLink="/emails/mapping"]')
      ).toBeFalsy();
    );
  );
);

Hay una manera más simple:

puedes usar @ViewChild en el componente

@ViewChild('menuTrigger') menuTrigger: MatMenuTrigger;

en la plantilla html hay:

entonces hay “openMenu ()” en la prueba:

 fit('should show menu', () => 
  component.menuTrigger.openMenu()
 

Comentarios y calificaciones del artículo

Te invitamos a añadir valor a nuestra información colaborando tu veteranía en las acotaciones.

---

---

Utiliza Nuestro Buscador