dman's questions

使用 Angular 16 和 Jasmine/Karma。

我订阅了一个名为tableList$

    ngOnInit() {                                                   
      const { pageNumber } = this.subscribersService.getMiscValues();
      this.subscribersService.initPage(pageNumber);
>>    this.subscribersService.tableList$.subscribe((tableList) => {
        //  this.tableList = this.deleteSubscribersService.setDeleteCheckboxStates(tableList);                    
      });                                                                                
    } 

我正在尝试嘲笑行为主题，但我却得到了this.subscribersService.tableList$.subscribe is not a function。

请问我做错了什么吗？

注意，我也尝试过，subscribersServiceMock.tableList$.and.returnValue({ subscribe: () => tableListMock$.subscribe });但没有成功

fdescribe('ManageSubscribersComponent', () => {
  let component: ManageSubscribersComponent;
  let fixture: ComponentFixture<ManageSubscribersComponent>;
  let miscMockValues;
  let tableMockData;
  let tableListMock$;
  let dialogServiceMock
  let dialogSubjectMock;
  let subscribersServiceMock;
  let deleteSubscribersServiceMock;

  const displayedColumns = [
    'id',
    'name',
    'description',
    'createdBy',
    'createdOn',
    'updatedBy',
    'updatedOn',
  ];

  beforeEach(() => {
    tableListMock$ = new Subject();
    dialogSubjectMock = new Subject();

    dialogServiceMock = jasmine.createSpyObj([
      'open',
      'afterClosed',
    ]);

    deleteSubscribersServiceMock = jasmine.createSpyObj([
      'deleteSubscribers',
    ]);


    subscribersServiceMock = jasmine.createSpyObj([
      'resetMiscValues',
      'getMiscValues',
      'initPage',
      'tableList$',
    ]);

    miscMockValues = {
      pageNumber: 1,
      pageSize: 25,
      sort: '',
      active: true,
      testMode: false,
      searchTerms: '',
    };


    subscribersServiceMock.getMiscValues.and.returnValue(miscMockValues);
    subscribersServiceMock.tableList$.and.returnValue(tableListMock$);
    dialogServiceMock.afterClosed.and.returnValue(dialogSubjectMock);

    TestBed.configureTestingModule({
      declarations: [ManageSubscribersComponent],
      imports: [
        HttpClientTestingModule,
        MatFormFieldModule,
        MatIconModule,
        MatSliderModule,
        MatTableModule,
        MatFormFieldModule,
        MatInputModule,
        BrowserAnimationsModule,
        MatPaginatorModule,
        MatDialogModule,
      ],
      schemas: [
        CUSTOM_ELEMENTS_SCHEMA,
        NO_ERRORS_SCHEMA,
      ],
      providers: [
        {
          provide: SubscribersService,
          useValue: subscribersServiceMock,
        },
        {
          provide: DeleteSubscribersService,
          useValue: deleteSubscribersServiceMock,
        },
      ],
    });

    fixture = TestBed.createComponent(ManageSubscribersComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });


  fit('should init', fakeAsync(() => {
    fixture.whenStable().then(() => {
      expect(component.displayedColumns).toEqual(displayedColumns);
      expect(subscribersServiceMock.getMiscValues).toHaveBeenCalled();
    })
  }));

我有这个角度对话框组件，我只想在 api 完成后关闭它。我有以下内容，但完成后对话框没有关闭this.matchComplete = true。

   <mat-dialog-actions align="end">
    <button mat-button mat-dialog-close color="accent">Cancel</button>
    <button
      mat-raised-button
      [mat-dialog-close]="matchComplete"
      cdkFocusInitial    
      (click)="matchDialog()"
      color="accent">Continue</button>
  </mat-dialog-actions>   

  @Component({
    selector: 'match-dialog',
    templateUrl: 'match-dialog.html',
  })
  
  export class MatchDialog {
    matchComplete: boolean;
  
    constructor(
      @Inject(MAT_DIALOG_DATA) public data: {text: string, foo: object},
      private apiService: ApiService,
    ) {
      this.matchComplete = false;
    }
  
    matchDialog() {
      this.apiService.add()
        .subscribe(null, null, () => this.matchComplete = true);
    }                                             
  }