错误：“NG0303：无法绑定到‘max’，因为它不是‘mat-progress-bar’的已知属性。” 同时 angular 测试

Question

component.spec file

trying to test a component nut keep getting these messages in terminal. It does not fail the test but gives error like a warning. Could anyone provide a solution here. I am importing all the required modules here.

import { HttpClientTestingModule } from '@angular/common/http/testing';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ReactiveFormsModule } from '@angular/forms';
import { MatDialogModule } from '@angular/material/dialog';
import { MatProgressBar, MatProgressBarModule } from '@angular/material/progress-bar';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { RouterTestingModule } from '@angular/router/testing';
import { AppConfigService } from 'src/app/services/config/app-config.service';
import { SharedModule } from 'src/app/shared/shared.module';
import { MaterialModule } from 'src/material.module';
import { VesselManagementPopupComponent } from '../vessel-management/vessel-management-popup/vessel-management-popup.component';
import { PriceCardComponent } from './components/price-card/price-card.component';

import { RfqPageComponent } from './rfq-page.component';

fdescribe('RfqComponent', () => {
  let component: RfqPageComponent;
  let fixture: ComponentFixture<RfqPageComponent>;

  beforeEach(async () => {
    await TestBed.configureTestingModule({
      declarations: [RfqPageComponent ,PriceCardComponent, VesselManagementPopupComponent],
      imports: [RouterTestingModule,
                ReactiveFormsModule,
                MatSnackBarModule,
                MatDialogModule,
                HttpClientTestingModule,
                MaterialModule,
                BrowserAnimationsModule,
                
                SharedModule
                ],
                providers: [
                  {
                     provide: 
                     MatProgressBar,
                     AppConfigService,
                     useValue: {
                         getConfig: () => ({ 
                           baseUrl: 'dummy-url',
                           serviceBase: 'api-base'
                         })
                     }
                  }
               ],
    })
    .compileComponents();
  });

  beforeEach(() => {
    fixture = TestBed.createComponent(RfqPageComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

  fit('should create', () => {
    expect(component).toBeTruthy();
  });

  it('should call method loadRipCodeErrorMsg', () => {
    component.loadRipCodeErrorMsg();
    expect(component).toBeTruthy();
  });

it is giving message as following but test cases are passed.

ERROR: 'NG0303: Can't bind to 'max' since it isn't a known property of 'mat-progress-bar'.'

.html file

<mat-progress-bar class="headder-mat-progress" mode="determinate" height="4px" [value]="loadingProgressValue"
            [max]="100">
        </mat-progress-bar>

Answer 1

You most likely need to add MatProgressBarModule to the imports array of TestBed.configureTestingModule({ .

Also, I have never used Angular Material and it seems on the latest version, there is no max input property (on the API tab here: https://material.angular.io/components/progress-bar/api ).