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

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

1. add MatTabsModule to app.module.ts

2. change app.component.html to:

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

1. 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';
}

1. 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();
  });
});

1. run tests

ng test

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

1. 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

[ckorherr]

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

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity. Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}