angular - 如何对组件进行单元测试以获取 ActivatedRoute paramMap 值并隐藏或显示 div

Question

我的 Angular 组件 1 中有代码，它使用 router.navigate 传递真值或假值，而 coponent2 获取值并在值为真时显示面板，如果值为假则隐藏。如何单元测试获取值并在值为 true 时显示 DIV 并在值为 false 时隐藏 URL：

组件 1 TS

  this.router.navigate(['product', {showrating: true}])

COMPONET2 TS

  showRating :boolean = false;
  ngOnInit(): void { 
  this.showDIV;
  }
  showDIV(){
  this.showRatings =  Boolean(this.route.snapshot.paramMap.get('showRating'));
  }

COMPONET2 HTML

<div class="container" *ngIf="showRating">
<p> test</p>
</div>

规格文件

 describe('ProductComponent', () => {
 let component: ProductComponent;
 let fixture: ComponentFixture<ProductComponent>;
 const activatedRouteMock ={
 snapshot:{
 paramMap :{
  get:{ 'showRatings':true
   },
  },
},
};

  beforeEach(() => {
 TestBed.configureTestingModule({
  imports:[HttpClientTestingModule, RouterTestingModule.withRoutes([])],
   declarations: [ProductComponent ],
  providers: [
    { provide: ProductService },
    {provide: ActivatedRoute , usevalue: activatedRouteMock},
  ],
 .compileComponents();
});   
describe('ngOnInit', () => {
beforeEach(waitForAsync(async () => {
  fixture = TestBed.createComponent(ProductComponent);
  component = fixture.componentInstance;
}));

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

 it('should  show a panel if value is true ', () => {
//Arrange
// Act
// Assert
});
it('should  hide a panel if value is false ', () => {
// Arrange
// Act
// Assert
});
  } }