javascript - 仅使用 ngOnInit 函数测试简单的 Angular 组件

标签 javascript angular unit-testing testing karma-runner

在测试方面我是初学者,我希望您能向我解释什么是好的做法。

我有一个简单的服务:

export class SessionService {
fetchFromStorage() {
    let x = localStorage.getItem('email');
    return JSON.parse(x);
}

saveInStorage(email) {
    localStorage.setItem('email', JSON.stringify(email));
}
}

和使用该服务的组件:

export class LoginComponent implements OnInit, OnChanges {
email;

constructor(private service: SessionService) {
}

ngOnInit() {
    this.email = this.service.fetchFromStorage();
}

save() {
    this.service.saveInStorage(this.email);
}
}

我知道我应该创建 localStorageMock 吗?例如,在调用 saveInStorage() 之后,我必须检查 localStorageMock 是否包含我传递给该函数的参数? 我不确定如何测试 fetchFromStorage,我是否应该像这样在 localStorageMock 中创建:

export class {
getItem(x){
if(x = 'email') return 'sth';
}
}

第三个问题是我的组件中的 ngOnInit 是什么?写个测试是不是很简单?

最佳答案

我认为值得测试您的组件是否可以从本地存储成功获取数据,然后是否可以从那里获取数据。我会用ng-test-runner使测试 Angular 组件更容易一些的库。

我的组件有模板:

<button class="update-button" (click)="save()"> </button>
<input class="email-input" [(ngModel)]="email" />

和测试:

import {AppComponent} from "./app.component";
import {AppModule} from "./app.module";
import test, {App, click, expectThat, type} from "ng-test-runner";

describe('Local storage Component', () => {

  let app: App;
  let store = {};

  beforeAll(() => {
    spyOn(localStorage, 'getItem').and.callFake(function (key) {
      return store[key];
    });
    spyOn(localStorage, 'setItem').and.callFake(function (key, value) {
      return store[key] = value + '';
    });
    spyOn(localStorage, 'clear').and.callFake(function () {
      store = {};
    });
  });

  beforeEach(() => {
    app = test(AppModule);
  });

  afterEach(() => {
    localStorage.clear();
  });

  it('fetch email from local storage', () => {
    localStorage.setItem('email', 'emailFromLocalStorage');
    const comp = app.run(AppComponent);

    comp.verify(
      expectThat.textOf('.email').isEqualTo('emailFromLocalStorage')
    );
  });

  it('update email in local storage', () => {
    localStorage.setItem('email', 'emailFromLocalStorage');
    const comp = app.run(AppComponent);

    comp.perform(
      type('newEmail@gmail.com').in('.email-input'),
      click.in('.update-button')
    );

    comp.verify(
      () => expect(localStorage.getItem('email')).toEqual('newEmail@gmail.com')
    );
  });
});

我只为 localStorage 创建了 spy 。如果您将在 localStorage 上进行更多测试,将它提取到某个类中可能是更好的主意 - 然后您可以将它作为依赖项添加到您的测试中。

关于javascript - 仅使用 ngOnInit 函数测试简单的 Angular 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48079260/

相关文章:

javascript - Vue.js 如何选择 `v-on:click` 选择器?

javascript - Angular 路由器链接不起作用

javascript - 文档已创建但响应为空

html - SVG 过滤器 url 在 Angular 4 中不起作用

java - 维护 Junit 中测试的执行顺序

asp.net - 在 Asp.net 页面中测试 UI?

angularjs - 模拟 e2e 测试时如何检测 API 修改?

javascript - 这段代码如何更新 React 中的状态?

angular - Typescript获取当前位置传给后台获取结果传给Material Table数据源

javascript - 是否有使用 anchor 标记中的参数调用 JavaScript 的最佳实践?