src/material/tabs/tab-body.spec.ts - main - githubmirror/components

src/material/tabs/tab-body.spec.ts
154 строки5 KB
Kristiyan Kostadinov
build: add explicit change detection to tests (#33010)
30 мар 2026, 10:52
30 мар 2026, 10:527806398
import {Direction} from '@angular/cdk/bidi';
import {PortalModule, TemplatePortal} from '@angular/cdk/portal';
import {CdkScrollable, ScrollingModule} from '@angular/cdk/scrolling';
import {provideFakeDirectionality} from '@angular/cdk/testing/private';
import {
  AfterViewInit,
  Component,
  TemplateRef,
  ViewChild,
  ViewContainerRef,
  WritableSignal,
  inject,
  signal,
  ChangeDetectionStrategy,
} from '@angular/core';
import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
import {By} from '@angular/platform-browser';
import {MatRippleModule} from '../core';
import {MatTabBody} from './tab-body';

describe('MatTabBody', () => {
  let dir: WritableSignal<Direction>;

  beforeEach(waitForAsync(() => {
    dir = signal('ltr');
    TestBed.configureTestingModule({providers: [provideFakeDirectionality(dir)]});
  }));

  it('should be center position if origin is unchanged', () => {
    const fixture = TestBed.createComponent(SimpleTabBodyApp);
    fixture.componentInstance.position = 0;
    fixture.detectChanges();

    expect(fixture.componentInstance.tabBody._position).toBe('center');
  });

  describe('should properly set the position in LTR', () => {
    let fixture: ComponentFixture<SimpleTabBodyApp>;

    beforeEach(() => {
      dir.set('ltr');
      fixture = TestBed.createComponent(SimpleTabBodyApp);
      fixture.detectChanges();
    });

    it('to be left position with negative position', () => {
      fixture.componentInstance.position = -1;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(fixture.componentInstance.tabBody._position).toBe('left');
    });

    it('to be center position with zero position', () => {
      fixture.componentInstance.position = 0;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(fixture.componentInstance.tabBody._position).toBe('center');
    });

    it('to be left position with positive position', () => {
      fixture.componentInstance.position = 1;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(fixture.componentInstance.tabBody._position).toBe('right');
    });
  });

  describe('should properly set the position in RTL', () => {
    let fixture: ComponentFixture<SimpleTabBodyApp>;

    beforeEach(() => {
      dir.set('rtl');
      fixture = TestBed.createComponent(SimpleTabBodyApp);
      fixture.detectChanges();
    });

    it('to be right position with negative position', () => {
      fixture.componentInstance.position = -1;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(fixture.componentInstance.tabBody._position).toBe('right');
    });

    it('to be center position with zero position', () => {
      fixture.componentInstance.position = 0;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(fixture.componentInstance.tabBody._position).toBe('center');
    });

    it('to be left position with positive position', () => {
      fixture.componentInstance.position = 1;
      fixture.changeDetectorRef.markForCheck();
      fixture.detectChanges();

      expect(fixture.componentInstance.tabBody._position).toBe('left');
    });
  });

  it('should update position if direction changed at runtime', () => {
    const fixture = TestBed.createComponent(SimpleTabBodyApp);

    fixture.componentInstance.position = 1;
    fixture.detectChanges();

    expect(fixture.componentInstance.tabBody._position).toBe('right');

    dir.set('rtl');

    fixture.detectChanges();

    expect(fixture.componentInstance.tabBody._position).toBe('left');
  });

  it('should mark the tab body content as a scrollable container', () => {
    TestBed.resetTestingModule().configureTestingModule({
      imports: [PortalModule, MatRippleModule, ScrollingModule, SimpleTabBodyApp],
    });

    const fixture = TestBed.createComponent(SimpleTabBodyApp);
    const tabBodyContent = fixture.nativeElement.querySelector('.mat-mdc-tab-body-content');
    const scrollable = fixture.debugElement.query(By.directive(CdkScrollable));

    expect(scrollable).toBeTruthy();
    expect(scrollable.nativeElement).toBe(tabBodyContent);
  });
});

@Component({
  template: `
    <ng-template>Tab Body Content</ng-template>
    <mat-tab-body [content]="content()!" [position]="position"></mat-tab-body>
  `,
  imports: [PortalModule, MatRippleModule, MatTabBody],
  changeDetection: ChangeDetectionStrategy.Eager,
})
class SimpleTabBodyApp implements AfterViewInit {
  content = signal<TemplatePortal | undefined>(undefined);
  position!: number;

  @ViewChild(MatTabBody) tabBody!: MatTabBody;
  @ViewChild(TemplateRef) template!: TemplateRef<any>;

  private readonly _viewContainerRef = inject(ViewContainerRef);

  ngAfterViewInit() {
    this.content.set(new TemplatePortal(this.template, this._viewContainerRef));
  }
}