监视函数内部的局部变量

huangapple
go评论92阅读模式
英文:

Spy on local variable inside function

问题

I have a method that opens a Dialog and then when closed the dialog, it will delete an element which has been passed.

What i would like to do is to 'spy' on the afterClosed().subscribe method, the method:

deleteDialog = MatDialog;
onDeleteElementClicked($event: any, elementName: string): void {
const dialogRef = this.deleteDialog.open(CustomDialog, {
data: {
//SOME DATA
});

  1. dialogRef.afterClosed().subscribe(result => {
  2.     this.toggleFlagAndCall(result, () => {
  3.         this.deleteElement(this.result.name);
  4.     });
  5. });

}

The test:

describe('DeleteComponent', () => {
let component: DeleteComponent;
let fixture: ComponentFixture;

  1. beforeEach(async () => {
  2.     await TestBed.configureTestingModule({
  3.         declarations: [
  4.             DeleteComponent,
  5.         ],
  6.         imports: [
  7.             // some imports
  8.         ],
  9.         providers: [
  10.             { provide: MatDialogRef, useClass: MatDialogRef, useValue: { afterOpen: () => of(true)}},
  11.             { provide: DeleteDialogComponent, useValue: { afterClosed: () => of(true)}},
  12.             { provide: MatDialog, useValue: { afterClosed: () => of(true),
  13.                 open: () => of(true)}},
  14.             }
  15.         ]
  16.     })
  17.         .compileComponents();
  18. });
  20. beforeEach(() => {
  21.     fixture = TestBed.createComponent(DeleteComponent);
  22.     component = fixture.componentInstance;
  23.     fixture.detectChanges();
  24. });
  26. it('should create', () => {
  27.     expect component).toBeTruthy();
  28. });
  30. it('should delete a single element', () => {
  31.     const event = {
  32.         preventDefault: () => {},
  33.         stopPropagation: () => {}
  34.     };
  36.     component.onDeleteElementClicked(event, 'toBeDeletedElement');
  37.     expect(component.elements.length).toBe(0);
  38. });

});

I get the error:

TypeError: dialogRef.afterClosed is not a function
But i thought that this line:

{ provide: MatDialog, useValue: { afterClosed: () => of(true),

Would create the mock method for 'afterclosed' and would return an observable, but it does not even get invoked.
How can i spy on dialogRef.afterClosed().?

英文:

I have a method that opens a Dialog and then when closed the dialog, it will delete an element which has been passed.<br>
What i would like to do is to 'spy' on the afterClosed().subscribe method, the method:

  1. deleteDialog = MatDialog;
  2. onDeleteElementClicked($event: any, elementName: string): void {
  3.         const dialogRef = this.deleteDialog.open(CustomDialog, {
  4.             data: {
  5.                 //SOME DATA
  6.            });
  8.  
  9.         dialogRef.afterClosed().subscribe(result =&gt; {
  10.             this.toggleFlagAndCall(result, () =&gt; {
  11.                 this.deleteElement(this.result.name);
  12.             });
  13.         });
  14.     }

The test:

  1. describe(&#39;DeleteComponent&#39;, () =&gt; {
  2.     let component: DeleteComponent;
  3.     let fixture: ComponentFixture&lt;DeleteComponent&gt;;
  5.     beforeEach(async () =&gt; {
  6.         await TestBed.configureTestingModule({
  7.             declarations: [
  8.                 DeleteComponent,
  9.             ],
  10.             imports: [
  11.                 // some imports
  12.             ],
  13.             providers: [
  14.                 { provide: MatDialogRef, useClass: MatDialogRef, useValue: { afterOpen: () =&gt; of(true)}},
  15.                 { provide: DeleteDialogComponent, useValue: { afterClosed: () =&gt; of(true)}},
  16.                 { provide: MatDialog, useValue: { afterClosed: () =&gt; of(true),
  17.                     open: () =&gt; of(true)}},
  18.                 }
  19.             ]
  20.         })
  21.             .compileComponents();
  22.     });
  24.     beforeEach(() =&gt; {
  25.         fixture = TestBed.createComponent(DeleteComponent);
  26.         component = fixture.componentInstance;
  27.         fixture.detectChanges();
  28.     });
  30.     it(&#39;should create&#39;, () =&gt; {
  31.         expect(component).toBeTruthy();
  32.     });
  34.     it(&#39;should delete a single element&#39;, () =&gt; {
  35.         const event = {
  36.             preventDefault: () =&gt; {},
  37.             stopPropagation: () =&gt; {}
  38.         };
  40.         component.onDeleteElementClicked(event, &#39;toBeDeletedElement&#39;);
  41.         expect(component.elements.length).toBe(0);
  42.     });
  43. });

I get the error:

  1. TypeError: dialogRef.afterClosed is not a function

But i thought that this line:

{ provide: MatDialog, useValue: { afterClosed: () => of(true),

Would create the mock method for 'afterclosed' and would return an observable, but it does not even get invoked.<br>
How can i spy on dialogRef.afterClosed().?

答案1

得分: 1

你可以创建一个模拟类 MatDialog

  1. class MatDialogMock {
  2.   open() {
  3.     return {
  4.       afterClosed: () => of(true)
  5.     };
  6.   }
  7. }

然后在测试中，你可以使用这个模拟类

  1. providers: [
  2.   { provide: MatDialog, useClass: MatDialogMock }
  3. ]

现在，当你的组件使用 MatDialog 时，你会得到一个 MatDialogMock 的实例，然后你可以使用 afterClosed 属性来进行监视。

英文:

You could make a mock class MatDialog

  1. class MatDialogMock {
  2.   open() {
  3.     return {
  4.       afterClosed: () =&gt; of(true)
  5.     };
  6.   }
  7. }

Then in the test, you can use that mock class

  1. providers: [
  2.   { provide: MatDialog, useClass: MatDialogMock }
  3. ]

You now get an instance of MatDialogMock when your component uses MatDialog, and you can then use the afterClosed property to spy on it.

huangapple
  • 本文由 发表于 2023年2月18日 17:57:28
  • 转载请务必保留本文链接：https://go.coder-hub.com/75492521.html
  • angular
  • jasmine
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定