在嵌入在 ng-switch 中的 ng-container 中进行测试和锚标记点击

Question

我对 angular 中的测试很陌生，而且我找不到解决这个问题的方法。我正在尝试对单击锚标记后调用的方法进行测试。此锚标记位于属于 ng-switch 的 ng-container 内：

<ng-container [ngSwitch]="layout">
    <ng-container *ngSwitchCase="'public'" >
      <div class="d-flex>
        <button
          class="navbar-toggler"
          type="button"
          data-toggle="collapse"
          data-target="#navbarText"          
        >      
        </button>
      </div>
      <div class="class">
        <ul class="class">
          <ng-container *ngFor="let link of object">
            <li class="nav-item">
              <a
                (click)="navigateToURL(link.route)"
              >
                 {{ string }}
              </a>
            </li>
          </ng-container>
        </ul>
      </div>
    </ng-container>

    <ng-container *ngSwitchCase="'other'">
      <div class="class">
        <ul class="class">
          <ng-container *ngFor="let link of otherObject">
            <li class="nav-item">
              <a id='one'
                (click)="navigateToURL(link.route)"
              >
                {{ other string }}
              </a>
            </li>
          </ng-container>
        </ul>
      </div>
    </ng-container>
  </ng-container>

该方法是路由器的某种重定向

navigateToURL(url:stringstring):void{
 this.router.navigateByURL(url)
}

然后在我的测试中

describe('AppComponent [navigation-root]', () => {
  
  let fixture: ComponentFixture<AppComponent>;
  let component: AppComponent;

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [AppComponent],
        providers: [
          {
            provide: Router,
            useValue: routerMock,
          },
        ],
        schemas: [NO_ERRORS_SCHEMA],
      })
        .compileComponents()
        .then(() => {
          fixture = TestBed.createComponent(AppComponent);
          component = fixture.componentInstance;
        })
    
    })
  );

  test('Should create the navigation micro app', () => {
    expect(component).toBeTruthy();
  });



  describe('When user is redirected from  anchor tag click', () => {
   

    test('Should call navigateToURL method from anchor tag on click ', () => {
      const goToRouteSpy = jest.spyOn(component, 'navigateToURL');

      const link = fixture.debugElement.nativeElement.querySelector('[id="one"]') as HTMLElement;
     

      link.click();

      fixture.detectChanges();

      expect......
     
    });
  });
});

但是由于无法点击 null，测试失败并抛出错误有人可以帮我吗？非常感谢

Answer 1

您必须先模拟数据，然后才能对其进行测试。

test('Should call navigateToURL method from anchor tag on click ', () => {
      const goToRouteSpy = jest.spyOn(component, 'navigateToURL');
      // first mock layout to be other
      component.layout = 'other';
      // mock the array of otherObject
      component.otherObject = [{ route: 'abc' }];
      // call fixture.detectChanges() so the HTML is updated with the previous
      // properties
      fixture.detectChanges();
      // hopefully should work now, by the way it is better if you do
      // .querySelector('#one') instead of '[id="one"]'
      const link = fixture.debugElement.nativeElement.querySelector('[id="one"]') as HTMLElement;
     

      link.click();

      fixture.detectChanges();

      expect......
     
    });

在嵌入在 ng-switch 中的 ng-container 中进行测试和锚标记点击

Testing and anchor tag click inside a ng-container embbeded in a ng-switch

angular

unit-testing

jestjs

anchor

ng-container