src/material/divider/divider.spec.ts - main - githubmirror/components

src/material/divider/divider.spec.ts
68 строк3 KB
Kristiyan Kostadinov
build: add explicit change detection to tests (#33010)
30 мар 2026, 10:52
30 мар 2026, 10:527806398
import {ComponentFixture, TestBed} from '@angular/core/testing';
import {Component, ChangeDetectionStrategy} from '@angular/core';
import {By} from '@angular/platform-browser';
import {MatDividerModule} from './divider-module';

describe('MatDivider', () => {
  let fixture: ComponentFixture<MatDividerTestComponent>;

  beforeEach(() => {
    fixture = TestBed.createComponent(MatDividerTestComponent);
  });

  it('should apply vertical class to vertical divider', () => {
    fixture.componentInstance.vertical = true;
    fixture.detectChanges();

    const divider = fixture.debugElement.query(By.css('mat-divider'))!;
    expect(divider.nativeElement.classList).toContain('mat-divider');
    expect(divider.nativeElement.classList).toContain('mat-divider-vertical');
  });

  it('should apply horizontal class to horizontal divider', () => {
    fixture.componentInstance.vertical = false;
    fixture.detectChanges();

    const divider = fixture.debugElement.query(By.css('mat-divider'))!;
    expect(divider.nativeElement.classList).toContain('mat-divider');
    expect(divider.nativeElement.classList).not.toContain('mat-divider-vertical');
    expect(divider.nativeElement.classList).toContain('mat-divider-horizontal');
  });

  it('should apply inset class to inset divider', () => {
    fixture.componentInstance.inset = true;
    fixture.detectChanges();

    const divider = fixture.debugElement.query(By.css('mat-divider'))!;
    expect(divider.nativeElement.classList).toContain('mat-divider');
    expect(divider.nativeElement.classList).toContain('mat-divider-inset');
  });

  it('should apply inset and vertical classes to vertical inset divider', () => {
    fixture.componentInstance.vertical = true;
    fixture.componentInstance.inset = true;
    fixture.detectChanges();

    const divider = fixture.debugElement.query(By.css('mat-divider'))!;
    expect(divider.nativeElement.classList).toContain('mat-divider');
    expect(divider.nativeElement.classList).toContain('mat-divider-inset');
    expect(divider.nativeElement.classList).toContain('mat-divider-vertical');
  });

  it('should add aria roles properly', () => {
    fixture.detectChanges();

    const divider = fixture.debugElement.query(By.css('mat-divider'))!;
    expect(divider.nativeElement.getAttribute('role')).toBe('separator');
  });
});

@Component({
  template: `<mat-divider [vertical]="vertical" [inset]="inset"></mat-divider>`,
  imports: [MatDividerModule],
  changeDetection: ChangeDetectionStrategy.Eager,
})
class MatDividerTestComponent {
  vertical = false;
  inset = false;
}