Angular 中 Mock.js 的使用（不使用内置测试文档.spec的情况下）

最新推荐文章于 2024-04-10 09:43:46 发布

哔哔咩咩

最新推荐文章于 2024-04-10 09:43:46 发布

阅读量198

点赞数

文章标签： javascript angular.js 前端

原文链接：https://juejin.cn/post/7009300794834944007

版权

MOCK-DATA

１．npm install mockjs --save

２．environment.ts

export const environment = {
  production: false,
  isMock: true
};

３．main.ts

if(environment.isMock){
  import('./app/mock-heroes').then(() => {
    console.log('mock is start');
  });
}

４．mock-heroes.ts

export const HEROES: Hero[] = Mock.mock({
  'list|8': [{
    'id|+1': 12,
    'name|1': "@cname()"
  }]
})

MOCK-SERVICE

hero.service.ts　　　

getHeros(){
    return this.httpClient.get('/api/heros') as Observable<Hero[]>;
}

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　hero.service.interface.ts

export interface IHeroService {
    getHeros():Observable<Hero[]>;
}

hero.mock.service.ts

export class HeroService implements IHeroService {

    getHeros(){
        return of([
            {
                id: 1,
                name: 'W'
            },
            {
                id: 2,
                name: 'T'
            }
        ]);
    }

}

heros: Hero[] = [
    {
        id: 1,
        name: 'W',
    },
    {
        id: 2,
        name: 'D',
    }
];

getTodos(): Observable<Todo[]> {
    return of(this.todos);
}

addTodo(todo: Todo){
    this.todos.push(todo);
}

environment.ts

export const environment = {
    production: true,
    providers:[
        { provide: MockHeroService, useClass: HeroService },
    ]
};

app.module.ts

@NgModule({
    declarations: [
        AppComponent    
    ],
    imports: [
        BrowserModule,
        ....
    ],
    providers: [
        ...environment.providers,
    ],
    bootstrap: [AppComponent]
})