typescript 如何在angular中使用jest for directive编写单元测试

bvjveswy  于 2023-03-31  发布在  TypeScript
关注(0)|答案(1)|浏览(173)

我正在使用jest来覆盖我的angular项目中的单元测试,我是使用jest进行单元测试的新手。
下面是我的DragDropDirective代码:

  1. @HostListener('dragenter',['$event'])
  2. @HostListener('dragover',['$event'])
  3. public handleDragOver(event:DragEvent):void{
  4. if(!this.enabled){
  5. return;
  6. }
  7. event.dataTransfer?.dropEffect=='move';
  8. this.stopAndPreventDefault(event);
  9. this._dragInProgress=true;
  10. }
  11. @HostListener('dragleave',['$event'])
  12. @HostListener('dragend',['$event'])
  13. public handleDragEnd(event:DragEvent):void{
  14. if(!this.enabled){
  15. return;
  16. }
  17. this.stopAndPreventDefault(event);
  18. event.dataTransfer?.effectAllowed=='copy';
  19. this._dragInProgress=false;
  20. }
  21. stopAndPreventDefault(e:UIEvent):void{
  22. e.stopPropagation();
  23. e.preventDefault();
  24. }

有人能帮我一下吗?

lyfkaqu1

lyfkaqu11#

下面是使用Jest编写DragDropDirective单元测试的示例:

  1. import { Component } from "@angular/core";
  2. import { TestBed } from "@angular/core/testing";
  3. import { DragDropDirective } from "./drag-drop.directive";
  4. @Component({
  5. template: `<div appDragDrop></div>`,
  6. })
  7. class TestComponent {}
  8. describe("DragDropDirective", () => {
  9. let fixture: any;
  10. beforeEach(async () => {
  11. await TestBed.configureTestingModule({
  12. declarations: [DragDropDirective, TestComponent],
  13. }).compileComponents();
  14. fixture = TestBed.createComponent(TestComponent);
  15. fixture.detectChanges();
  16. });
  17. it("should set _dragInProgress to true on drag enter or drag over", () => {
  18. const div = fixture.nativeElement.querySelector("div");
  19. const event = new DragEvent("dragover");
  20. const directive = div.directive;
  21. directive.enabled = true;
  22. directive.handleDragOver(event);
  23. expect(directive._dragInProgress).toBe(true);
  24. });
  25. it("should set _dragInProgress to false on drag leave or drag end", () => {
  26. const div = fixture.nativeElement.querySelector("div");
  27. const event = new DragEvent("dragleave");
  28. const directive = div.directive;
  29. directive.enabled = true;
  30. directive.handleDragEnd(event);
  31. expect(directive._dragInProgress).toBe(false);
  32. });
  33. it("should not set _dragInProgress if disabled", () => {
  34. const div = fixture.nativeElement.querySelector("div");
  35. const event = new DragEvent("dragover");
  36. const directive = div.directive;
  37. directive.enabled = false;
  38. directive.handleDragOver(event);
  39. expect(directive._dragInProgress).toBe(false);
  40. });
  41. it("should call stopAndPreventDefault on drag enter, drag over, drag leave, and drag end", () => {
  42. const div = fixture.nativeElement.querySelector("div");
  43. const spy = spyOn(div.directive, "stopAndPreventDefault");
  44. const event1 = new DragEvent("dragover");
  45. const event2 = new DragEvent("dragleave");
  46. const directive = div.directive;
  47. directive.enabled = true;
  48. directive.handleDragOver(event1);
  49. directive.handleDragEnd(event2);
  50. expect(spy).toHaveBeenCalledTimes(2);
  51. });
  52. });

前两个测试检查当使用DragEvent调用handleDragOverhandleDragEnd方法时,是否正确设置了_dragInProgress
第三个测试检查在禁用指令时是否未设置_dragInProgress
第四个测试检查在调用handleDragOverhandleDragEndhandleDragEnterhandleDragLeave方法时是否调用了stopAndPreventDefault

展开查看全部

相关问题