Question

我已经在Angular待了一段时间，但是正在做我的第一个大型个人项目。

我有一个要打开的基本组件作为材质对话框。

@Component({
  selector: 'heavyweight-software-pizza-place-delete',
  templateUrl: './location-delete.component.html',
  styleUrls: ['./location-delete.component.css']
})
export class LocationDeleteComponent implements OnInit {
  @Input()
  currentLocation: PcLocation;

  constructor(protected dialogRef: MatDialogRef<LocationDeleteComponent>,
              @Inject(MAT_DIALOG_DATA) public data: LocationDeleteDialogData) { }

  ngOnInit() {
    console.log('data', this.data);
  }

  onButtonClick(confirmed = false) {
    this.data.confirmed = confirmed;
    this.dialogRef.close();
  }
}

<h3>
  Delete this pizza place?
</h3>
<p id="paraCustomerId">{{data.customerId}}</p>
<p id="paraShopName">{{data.shopName}}</p>
<p id="paraStreet">{{data.street}}</p>
<br/>
<div>
  <button mat-raised-button
          id="btnYes"
          (click)="onButtonClick(true)"> Yes </button>
  <button mat-raised-button
          id="btnNo"
          (click)="onButtonClick(false)"> No </button>
</div>

我正在尝试通过后续测试进行测试

const ID_CUST_ID = "#paraCustomerId";
const ID_SHOP_NAME = "#paraShopName";
const ID_STREET_ADDR = "#paraStreet";
describe('LocationDeleteComponent', () => {
  let component: LocationDeleteComponent;
  let fixture: ComponentFixture<LocationDeleteComponent>;

  let locationDeleteData: LocationDeleteDialogData = new LocationDeleteDialogData();
  locationDeleteData.customerId = CUSTOMER_ID1;
  locationDeleteData.shopName = LOCATION1.shopName;
  locationDeleteData.street = LOCATION_ADDRESS1.street1;

  const matDialogData = {};
  let mockMatDialogRef: MockMatDialogRef;

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [
        LocationDeleteComponent,
      ],
      imports: [
        BrowserAnimationsModule,
        MatButtonModule,
        MatDialogModule,
        MatFormFieldModule,
        MatIconModule,
        MatRadioModule,
        ReactiveFormsModule,
      ],
      providers: [
        {provide: LocationDeleteDialogData, useValue: locationDeleteData},
        {provide: MAT_DIALOG_DATA, useValue: matDialogData},
        {provide: MatDialogRef, useClass: MockMatDialogRef},
      ]
    })
      .compileComponents();
  }));

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

    locationDeleteData = TestBed.inject(LocationDeleteDialogData);
    console.log('locationDeleteData', locationDeleteData);
    mockMatDialogRef = TestBed.inject(MatDialogRef);
    console.log('mockMatDialogRef', mockMatDialogRef);
  });

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

    console.log('customerId', locationDeleteData.customerId);

    const rootElement: HTMLElement = fixture.nativeElement;
    const custId: HTMLParagraphElement = rootElement.querySelector(ID_CUST_ID);
    expect(custId.textContent).toEqual(CUSTOMER_ID1);
  });
});

运行它时，我得到以下信息：

  console.log
    data {}

      at LocationDeleteComponent.ngOnInit (src/app/components/location/location-delete/location-delete.component.ts:19:13)

  console.log
    locationDeleteData LocationDeleteDialogData {
      customerId: 'Who dey?',
      shopName: 'The Restaurant at the End of the Universe',
      street: '100 Hartland Plaze' }

      at beforeEach (src/app/components/location/location-delete/location-delete.component.spec.ts:60:13)

  console.log
    mockMatDialogRef MockMatDialogRef {}

      at beforeEach (src/app/components/location/location-delete/location-delete.component.spec.ts:62:13)

  console.log
    customerId Who dey?

      at it (src/app/components/location/location-delete/location-delete.component.spec.ts:68:13)

  console.error
    Unhandled Promise rejection: expect(received).toEqual(expected) // deep equality
    
    Expected: "Who dey?"
    Received: "" ; Zone: ProxyZone ; Task: Promise.then ; Value: { Error: expect(received).toEqual(expected) // deep equality

因此，基于控制台的输出，似乎没有使用传入的数据对象填充数据。我找不到我做错的事情。有人可以指出其他所有人可能都显而易见的事情吗？

我已经阅读了以下堆栈溢出条目，但没有发现它们有帮助。

以及我通过谷歌搜索找到的许多教程，但是我没有看到我的问题。

为了简洁起见，我删除了进口商品。另外，请注意数据的console.log显示为空。那是问题，但我不知道为什么。

Answer 1

模拟数据未提供给组件。与group by一起使用时，LocationDeleteDialogData不会影响注入的提供程序的TypeScript类型。由于提供者为Inject，因此必须为：

MAT_DIALOG_DATA

材质对话框测试数据未纳入我的对话框

1 个答案: