如何检测Angular未使用模板?排查HousingListComponent未识别问题
问题描述
我需要检查HousingListComponent或其模板标签<app-housing-list>是否未被使用。目前遇到的问题是:在app.component.html中注释掉<app-housing-list>后,代码检查工具(linter)没有提示该组件未被使用。我尝试用Karma编写测试,但即使AppModule中不声明HousingListComponent,测试仍然通过,相关代码如下:
已尝试的Karma测试代码
import { TestBed } from '@angular/core/testing'; // import { RouterTestingModule } from '@angular/router/testing'; import { AppComponent } from './app.component'; // import { HousingListComponent } from './housing-list/housing-list.component'; // import { HousingLocationService } from './housing-location.service'; import { AppModule } from './app.module'; import { NO_ERRORS_SCHEMA } from '@angular/core'; describe('AppComponent', () => { beforeEach(async () => { await TestBed.configureTestingModule({ imports: [ // if lazy to write unit tests // if no need to fake service. AppModule // RouterTestingModule ], // declarations: [ // AppComponent, // HousingListComponent // ], // providers: [HousingLocationService] schemas: [NO_ERRORS_SCHEMA] }).compileComponents(); }); it('should use the HousingListComponent in the template', () => { const fixture = TestBed.createComponent(AppComponent); fixture.detectChanges(); // Trigger change detection const compiled = fixture.nativeElement as HTMLElement; const housingListElement = compiled.querySelector('app-housing-list'); expect(housingListElement).toBeTruthy(); // Check if <app-housing-list> element is present in the template }); });
app.module.ts代码
import { NgModule } from '@angular/core'; import { BrowserModule } from '@angular/platform-browser'; import { AppComponent } from './app.component'; import { HousingListComponent } from './housing-list/housing-list.component'; import { HousingLocationService } from './housing-location.service'; @NgModule({ declarations: [ AppComponent, HousingListComponent <= main concern ], imports: [ BrowserModule ], providers: [HousingLocationService], bootstrap: [AppComponent] }) export class AppModule { }
app.component.html代码
<main> <header><img src="../assets/logo.svg" alt="fairhouse">Fairhouse</header> <section> <!-- The locationList attribute must be enclosed in square brackets ( [ ] ) so that Angular can dynamically bind the value of the locationList property to a variable or expression. Otherwise, Angular treats the value on the right-hand side of the equals sign as a string. --> <!-- The $event is provided by Angular when dealing with event handlers in templates. The $event argument is an object of type HousingLocation because that is what we set the EventEmitter's type parameter to be. --> <!-- <app-housing-list [locationList]="housingLocationList" --> <!-- (locationSelectedEvent)="updateSelectedLocation($event)"></app-housing-list> --> <article> <!-- If you apply the ngIf directive to the article element directly, it causes a layout shift when the user makes the first selection. To improve this experience, you can wrap the location details in another element that is a child of the article. This element has no styling or function and just adds weight to the DOM. To avoid that, you can use ng-container. You can apply directives to it, but it won't show up in the final DOM. --> <ng-container *ngIf="selectedLocation"> <img [src]="selectedLocation.photo"> <p>{{selectedLocation.name}}</p> <p>Available Units: {{selectedLocation.availableUnits}}</p> <p>{{selectedLocation.city}}, {{selectedLocation.state}}</p> <p>{{selectedLocation.laundry ? "Has laundry" : "Does Not have laundry"}}</p> <p>{{selectedLocation.wifi ? "Has wifi" : "Does Not have wifi"}}</p> </ng-container> </article> </section> </main>
内容的提问来源于stack exchange,提问作者Jason Rich Darmawan
相关产品推荐
相关产品推荐

