Юнит-тест мат-меню с карма-жасмином - PullRequest
Новая
       60

Юнит-тест мат-меню с карма-жасмином

0 голосов
/ 28 апреля 2020

У меня есть мат-меню, содержание которого может отличаться в зависимости от пользователя. Я пытаюсь написать модульный тест, но из того, что я вижу, Жасмин не видит блок CDK, поэтому я не могу получить записи меню.

Мой шаблон: 

    <button id="account" mat-icon-button [matMenuTriggerFor]="menu" aria-label="Profile">
        <mat-icon>person</mat-icon>
    </button>

      <mat-menu #menu="matMenu">
        <button mat-menu-item *ngxPermissionsOnly="PERMISSION.USER_LIST" id="user-list" (click)="usersList()">
          <mat-icon>recent_actors</mat-icon>
        </button>
        <button mat-menu-item *ngxPermissionsOnly="PERMISSION.INFORMATIONS" id="informations" (click)="infoList()">
          <mat-icon>info</mat-icon>
        </button>
        <button mat-menu-item id="logout" (click)="logout()">
          <mat-icon>exit_to_app</mat-icon>
        </button>
      </mat-menu>

Модульный тест: 

     let component: HeaderComponent;
     let fixture: ComponentFixture<HeaderComponent>;

     const providers: any[] = headerProviders;

     beforeEach(async(() => {
        TestBed.configureTestingModule({
          declarations: [
            HeaderComponent,
            NgxPermissionsRestrictStubDirective
          ],
          providers: providers,
          imports: [
            BrowserAnimationsModule,
            BrowserModule,
            CommonModule,
            CommonSogetrelModule,
            FlexLayoutModule,
            SharedMaterialModule,
            RouterTestingModule.withRoutes([])
          ]
        })
          .compileComponents()
          .then(() => {
            fixture = TestBed.createComponent(HeaderComponent);
            component = fixture.componentInstance;
          });
      }));

    it('should not display elements which needs permissions', () => {
        fixture.nativeElement.querySelector('#account').click();
        fixture.detectChanges();
        expect(logoutBtn).toBeTruthy('Le bouton Déconnexion doit être affiché');
        expect(fixture.debugElement.nativeElement.querySelector('#user-list')).toBeFalsy();

      });

Я пробовал с 

    console.info(fixture.nativeElement.parentNode);
    const menu = fixture.nativeElement.parentNode.querySelector('.mat-menu-panel');
    expect(menu).toBeTruthy();

Что я вижу в console.info, так это то, что на странице нет CDK div, и поэтому очевидно, что .mat-menu-panel isn Не найдено.

Есть идеи о том, как проверить содержимое меню mat?

Thx

1 Ответ

0 голосов
/ 29 апреля 2020

Я думаю, проблема в том, что вы делаете все в одном и том же взаимодействии часов, поэтому DOM не будет обновляться до следующих часов.

Чтобы справиться с этим, вы можете использовать fakeAysn c и отметка из Angular.

Я думаю, мы можем переписать ваш тест с помощью fakeAsyn c следующим образом: 

    it('should not display elements which needs permissions', fakeAsync(() => {
        fixture.nativeElement.querySelector('#account').click();
        tick();
        fixture.detectChanges();
        expect(logoutBtn).toBeTruthy('Le bouton Déconnexion doit être affiché');
        expect(fixture.debugElement.nativeElement.querySelector('#user-list')).toBeFalsy();
      }));

Я думаю, что это должно сработать.

...