bug(mat-tab-nav-bar): Having mat-tab-nav-bar on the page breaks harnesses if browser is not visible

[ckorherr]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

I already had the problem with Angular 12, but then couldn't find the reason.

Description

Having mat-tab-nav-bar on the page breaks harnesses if browser is not visible.

Reproduction

Creating a stackblitz for this problem didn't work, I tried to make the problem locally reproducible as easily as possible:

Steps to reproduce:

1. create a new Angular project and add Angular Material:

ng new tabs-test --routing=false --style=scss
cd tabs-test
ng add @angular/material

2. add MatTabsModule to app.module.ts

3. change app.component.html to:

<nav mat-tab-nav-bar>
  <a mat-tab-link>
      Test
  </a>
</nav>

4. create file: app.component.harness.ts with following content:

import { ComponentHarness } from '@angular/cdk/testing';

export class AppComponentHarness extends ComponentHarness {
  static readonly hostSelector = 'app-root';
}

5. change the content of app.component.spec.ts to:

import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { TestBed } from '@angular/core/testing';
import { MatTabsModule } from '@angular/material/tabs';
import { BrowserModule } from '@angular/platform-browser';
import { NoopAnimationsModule } from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { AppComponentHarness } from './app.component.harness';

describe('AppComponent', () => {
  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [
        AppComponent,
      ],
      imports: [
        BrowserModule,
        NoopAnimationsModule,
        MatTabsModule
      ],
    }).compileComponents();
  });

  fit('should create the app', async () => {
    const fixture = TestBed.createComponent(AppComponent);
    const harness = await TestbedHarnessEnvironment.harnessForFixture(fixture, AppComponentHarness);
    expect(harness).toBeTruthy();
  });
});

6. run tests

ng test

By default the browser will pop up and be visible and the test will execute without a problem.

7. Click refresh on the browser and minimize it or make sure the browser is not visible by hiding it behind another window like vscode

now the test will fail with following error:
Error: Timeout - Async function did not complete within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)

Expected Behavior

The tests will succeed even if the browser is not visible.

Actual Behavior

If the browser is not visible the test will fail with following error:
Error: Timeout - Async function did not complete within 5000ms (set by jasmine.DEFAULT_TIMEOUT_INTERVAL)

Environment

• Angular: 13.0.1
• CDK/Material: 13.0.1
• Browser(s): Chrome 95.0.4638.69 (64-Bit)
• Operating System: Windows 10

[crisbeto]

The tab header has a couple of requestAnimationFrame calls which the browser could pause if it's minimized. I wonder if that is causing the issue.

[ckorherr]

Yes, you might be right, changing the following line will fix the problem:

components/src/material/tabs/paginated-tab-header.ts

Line 203 in 59002e1

typeof requestAnimationFrame !== 'undefined' ? requestAnimationFrame(realign) : realign();

to:
realign();

[ckorherr]

This workaround is working for me without changing the source code:

let requestAnimationFrameBackup: (callback: FrameRequestCallback) => number;

 beforeEach(() => {
   requestAnimationFrameBackup = requestAnimationFrame;
   (globalThis as any).requestAnimationFrame = undefined;
 });
 
 afterEach(() => {
   globalThis.requestAnimationFrame = requestAnimationFrameBackup;
 });

[crisbeto]

I've submitted #24000 to try and avoid the timeouts. Can you try swapping out the requestAnimationRef calls with ngZone.onStable like in the PR to confirm that it resolves your issue?

[ckorherr]

I removed my workaround and applied your changes, the tests work as expected. Yes it resolves the issue.