Jasmine Angular Mock 组件属性答案

【问题标题】：Jasmine Angular Mock component attributeJasmine Angular Mock 组件属性
【发布时间】：2020-07-13 12:58:13
【问题描述】：

运行命令：

ng 测试 --codeCoverage=true --progress=false --watch=false

错误信息：

TypeError: 无法读取未定义的属性“子字符串”

组件的NgOnInit

private serv: ExtratosMensaisService,
ngOnInit(): void {
  const serventia: Serventia = this.serv.getServentiaSelecionada();
  const competencia: Competencia = this.serv.getCompetenciaSelecionada();
  const titularidade = serventia.titularidade.substring(0, 1).toUpperCase();
}

服务文件方法：

getServentiaSelecionada(): Serventia {
   return JSON.parse(sessionStorage.getItem('serventia'));
}

我知道该属性是未定义的，但我无法将其设为“已定义”。我已经尝试使用 jasmine.createSpyObj() 中的第三个数组来监视属性，但错误仍在继续。并尝试在 mockExtratosMensaisService returnValue(of({ object })) 上传递一个 JSON 对象，并尝试了这个：

 mockExtratosMensaisService.getServentiaSelecionada.and.returnValue(of({ titularidade: 123 }));

我是否使用了错误的方法？我需要通过这个测试。

spec.component 文件：

describe('PrestacaoContasTitularComponent', () => {
let component: PrestacaoContasTitularComponent;
let fixture: ComponentFixture<PrestacaoContasTitularComponent>;
const mockExtratosMensaisService = jasmine.createSpyObj('Obj',
['getServentiaSelecionada', 'getCompetenciaSelecionada'],
['titularidade']);

beforeEach(async(() => {
TestBed.configureTestingModule({
  imports: [ RouterTestingModule, HttpClientTestingModule ],
  declarations: [ PrestacaoContasTitularComponent ],
  providers: [ MatDialog, Overlay, MatSnackBar,
    { provide: ActivatedRoute, useValue: {} },
    { provide: InjectionToken, useValue: {} },
    { provide: MAT_DIALOG_SCROLL_STRATEGY, useValue: {} },
    { provide: ExtratosMensaisService, useValue: mockExtratosMensaisService }
  ]
})
.compileComponents();
}));

beforeEach(() => {
  fixture = TestBed.createComponent(PrestacaoContasTitularComponent);
  component = fixture.componentInstance;
  mockExtratosMensaisService.getServentiaSelecionada.and.returnValue(of({ titularidade: 123 }));
  mockExtratosMensaisService.getCompetenciaSelecionada.and.returnValue(of({ data: 'competencia'        }));
  fixture.detectChanges();
});

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

});

【问题讨论】：

尝试将模拟更改为：const mockExtratosMensaisService = jasmine.createSpyObj('Obj', ['getServentiaSelecionada', 'getCompetenciaSelecionada']);，然后执行mockExtratosMensaisService.getServentiaSelecionada.and.returnValue({ titularidade: 'abc' });。我将 123 更改为“abc”，因为我不确定 substring 是否可以处理某个数字。之前，您仍然返回 of，这是不正确的，因为它不是可观察的，而是常规的 JavaScript 对象。
此解决方案运行良好。再次感谢。你能像回答我“接受这个答案”一样回答这个问题吗？只是为了正确地归功于您。

标签： angular testing mocking jasmine

【解决方案1】：

尝试将模拟更改为：

const mockExtratosMensaisService = jasmine.createSpyObj('Obj', ['getServentiaSelecionada', 'getCompetenciaSelecionada']);

然后做

mockExtratosMensaisService.getServentiaSelecionada.and.returnValue({ titularidade: 'abc' });.

我将 123 更改为 'abc' 因为我不确定 substring 是否适用于数字。之前，您仍在返回，这是不正确的，因为它不是可观察的，而是常规的 JavaScript 对象。

【讨论】：

【解决方案2】：

您使用：mockExtratosMensaisService.getServentiaSelecionada.and.returnValue(of({ titularidade: 123 })); 的方法非常好。但是您需要一个可以调用.and.returnValue() 的间谍对象要得到这个，你可以这样做：spyOn(mockExtratosMensaisService, 'getServentiaSelectionada').and.returnvalue(of({titularidade: 123}))

这应该是一条路。

【讨论】：

嘿，感谢您的回答，我也尝试了您的解决方案，但我无法使其工作。但是 AliF50 的答案已经奏效了。但再次感谢。 =)