将 Angular6 入门项目提升到一个新的层次 - 模拟服务

前端

2024-01-15 15:59:59

组件职责分离的必要性

在软件设计中，组件职责分离是至关重要的。组件应该专注于其核心职责，而不应该承担与核心职责无关的任务。对于 Angular6 应用程序而言，组件应该专注于视图的渲染和与用户的交互，而不应该直接获取或保存数据。

这样做的原因有以下几点：

可测试性： 组件与数据访问分离后，我们可以更容易地对组件进行单元测试。我们只需要模拟服务来提供数据，而不需要关心组件是如何获取数据的。
可维护性： 当组件与数据访问分离后，代码更容易维护。如果我们想要更改数据访问的方式，我们只需要修改服务，而不需要修改组件。

使用模拟服务进行单元测试

在 Angular6 中，我们可以使用模拟服务来进行单元测试。模拟服务可以模拟真实的服务，并提供相同的数据。这样，我们就可以在不实际调用真实服务的情况下，测试组件的行为。

以下是使用模拟服务进行单元测试的步骤：

创建一个模拟服务，并提供与真实服务相同的方法和属性。
在组件的构造函数中，将模拟服务注入到组件中。
在组件的单元测试中，使用模拟服务来模拟数据。

将 BooksComponent 组件重构为使用模拟服务

现在，让我们将 BooksComponent 组件重构为使用模拟服务。

首先，我们需要创建一个模拟服务。

import { Injectable } from '@angular/core';

@Injectable()
export class MockBooksService {

  getBooks() {
    return [
      { id: 1, title: 'Book 1', author: 'Author 1' },
      { id: 2, title: 'Book 2', author: 'Author 2' },
      { id: 3, title: 'Book 3', author: 'Author 3' },
    ];
  }

}

然后，我们需要在 BooksComponent 组件的构造函数中，将模拟服务注入到组件中。

import { Component, OnInit } from '@angular/core';
import { MockBooksService } from './mock-books.service';

@Component({
  selector: 'app-books',
  templateUrl: './books.component.html',
  styleUrls: ['./books.component.css'],
  providers: [MockBooksService]
})
export class BooksComponent implements OnInit {

  books: any[];

  constructor(private booksService: MockBooksService) { }

  ngOnInit() {
    this.books = this.booksService.getBooks();
  }

}

最后，我们需要在 BooksComponent 组件的单元测试中，使用模拟服务来模拟数据。

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { BooksComponent } from './books.component';
import { MockBooksService } from './mock-books.service';

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

  beforeEach(async(() => {
    TestBed.configureTestingModule({
      declarations: [BooksComponent],
      providers: [MockBooksService]
    })
    .compileComponents();
  }));

  beforeEach(() => {
    fixture = TestBed.createComponent(BooksComponent);
    component = fixture.componentInstance;
    fixture.detectChanges();
  });

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

  it('should get books', () => {
    expect(component.books.length).toBe(3);
  });

});