Material Dialog testing data not making it into my dialog

Question

I've been in Angular for a bit, but working on my first major solo project.

I have a basic component that I'm opening as a material dialog.

@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>

I am attempting to test with the follow test

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);
  });
});

When I run it, I get the following:

  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

So, based on the console output, it doesn't appear that the data is getting populated with my data object being passed in. I cannot find what I'm doing wrong. Can someone point out what is probably obvious to everyone else?

I've read the following stack overflow entries, but didn't find them helpful.

• Unit test angular material dialog how to include mat-dialog-data
• How to test angular material dialog
• Matdialog service unit test angular 6 error
• Unit testing matdialog
• Angular how to mock matdialogref while testing

As well as many tutorials I found by googling, but I haven't seen my problem.

I removed the imports for the sake of brevity. Also, please notice the console.log of the data which shows it empty. That is the problem, but I don't know why.

Answer 1

Mocked data isn't supplied to the component. LocationDeleteDialogData affects nothing but TypeScript type of injected provider when it's used with Inject. Since the provider is MAT_DIALOG_DATA, it needs to be:

{provide: MAT_DIALOG_DATA, useValue: locationDeleteData}