我如何模拟没有索引的键值对列表（角度）？

Posted 2023-02-27

【中文标题】我如何模拟没有索引的键值对列表（角度）？

【英文标题】：How do i mock a list of Key,Value pairs (in angular) which does not have indices?

【发布时间】：2019-07-15 06:34:03

【问题描述】：

我正在使用 Jasmine 对 angular 应用程序进行单元测试，我也在其中。 该应用程序有一个用 Spring boot 编写的后端，它公开了一些 API。

从其中一个 API（GET 请求）接收的内容是映射的键、值（对象、值）对列表。

我想要的是模拟响应，使其看起来与下面相同（结果）。

Like this => [
                 key: value *//does not have an index*
             ]

Accessed like this => this.list = result['someList'];

例如，

constructor(private httpClient: HttpCLient) 

ngOnInit() 
    this.getAll().subscribe(result => 
        this.someListInsideResult = result['someList'];
        console.log('result: ', result);
        console.log('someListInsideResult: ', someListInsideResult);
    


getAll() 
    this.headers = new HttpHeaders().set('X-Authorization', 'Bearer  ' + token).set('X-Requested-With', 'XMLHttpRequest').set('Content-Type', 'application/json');
    return httpClient.get(url, headers: headers);

控制台：

// actual respose(result)
result: [
            key1: value1
            key2: value2
            ...
            ...
            someList: 0: "stringValue"
                      1: "ENUM"
                      2: null
        ]

// list inside the response
someListInsideResult: 0: "stringValue"
                      1: "ENUM"
                      2: null

如果有人能提供帮助，将不胜感激。

提前致谢。

【参考方案1】：

将 http 调用移至服务，比如UserService：

UserService.service.ts

export class UserService

getAll(): Observable<any> 
   this.headers = new HttpHeaders().set('X-Authorization', 'Bearer  ' + token).set('X- 
      Requested-With', 'XMLHttpRequest').set('Content-Type', 'application/json');
   return httpClient.get(url, headers: headers);

 

在Controller中，注入服务并用作

User.component.ts

ngOnInit() 
    this.userSvc.getAll().subscribe(result => 
        this.someListInsideResult = result['someList'];
        console.log('result: ', result);
        console.log('someListInsideResult: ', someListInsideResult);
    

然后为测试创建一个模拟服务：

MockUserService.ts

export class MockUserService 

   getAll() 
    return of(
        key1: 'key1',
        someList : [ "0" : "stringValue"]
    )
   

然后在 User.component.spec.ts

beforeEach(async(() => 
    TestBed.configureTestingModule(
        imports: [],
        declarations: [UserComponent],
        providers: [
           provide: UserService, useClass: MockUserService ] // <-- Here we have injected our Mock
    ).compileComponents();
));

【讨论】：

嗨，@Shashank Vivek 感谢您的快速回复，我尝试了您的解决方案，但无法在 of([]) 中设置 key1: 'key1'，因为数组不采用键值对。跨度>

@SaurabhGupta ，尝试更新后的return of(。这是一个错字：D

没有任何区别，因为它现在返回一个 json 对象。我想要的是它返回一个包含键值对的列表，而没有任何索引。例如。 [ 'key': 'value' ]

@SaurabhGupta [ 'key': 'value' ] 与众不同。它是一个数组，如果你想插入，创建一个对象，然后插入类似[ 'key': 'value' ]

@SaurabhGupta (^_^) 。干杯伙伴！