@angular/cdk/scrolling#ViewportRuler TypeScript Examples

The following examples show how to use @angular/cdk/scrolling#ViewportRuler. You can vote up the ones you like or vote down the ones you don't like, and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
Source File: tab-header.component.spec.ts    From alauda-ui with MIT License 5 votes vote down vote up
describe('TabHeaderComponent', () => {
  const change = new Subject();
  let fixture: ComponentFixture<SimpleTabHeaderAppComponent>;
  let appComponent: SimpleTabHeaderAppComponent;

  beforeEach(() => {
    TestBed.configureTestingModule({
      imports: [CommonModule, PortalModule, IconModule],
      declarations: [
        TabHeaderComponent,
        TabHeaderActiveIndicatorComponent,
        TabLabelWrapperDirective,
        SimpleTabHeaderAppComponent,
      ],
      providers: [
        ViewportRuler,
        {
          provide: Directionality,
          useFactory: () => ({ value: 'ltr', change: change.asObservable() }),
        },
      ],
    });
  });

  describe('pagination', () => {
    beforeEach(() => {
      fixture = TestBed.createComponent(SimpleTabHeaderAppComponent);
      fixture.detectChanges();
      appComponent = fixture.componentInstance;
    });

    // FIXME: looks like JSDom does not work properly with offsetWidth?
    // eslint-disable-next-line jest/no-disabled-tests
    it.skip('should show width when tab list width exceeds container', () => {
      fixture.detectChanges();
      expect(appComponent.tabHeader._showPaginationControls).toBe(false);

      // Add enough tabs that it will obviously exceed the width
      appComponent.addTabsForScrolling();
      fixture.detectChanges();

      fixture.detectChanges();

      expect(appComponent.tabHeader._showPaginationControls).toBe(true);
    });
  });
});
Example #2
Source File: tab-header.component.ts    From alauda-ui with MIT License 5 votes vote down vote up
constructor(
    private readonly _changeDetectorRef: ChangeDetectorRef,
    private readonly _viewportRuler: ViewportRuler,
  ) {}