小编Ale*_*liy的帖子

如何订阅 Storybook for Angular 中的组件 Output？

例如，我有这样的组件及其输出操作：

import { Component, Input, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-task',
  template: `
    <div class="list-item">
      <input type="text" [value]="task.title" readonly="true" />
    </div>
  `,
})
export class TaskComponent {
  @Input() task: any;

  // tslint:disable-next-line: no-output-on-prefix
  @Output()
  onPinTask = new EventEmitter<Event>();

  // tslint:disable-next-line: no-output-on-prefix
  @Output()
  onArchiveTask = new EventEmitter<Event>();
}

我还有该组件的 Storybook 文件：

import { Story, Meta } from '@storybook/angular/types-6-0';
import { action } from '@storybook/addon-actions';

import { TaskComponent } from './task.component';

export default { …

1. Angular 中的单元、集成和端到端测试有什么区别？
2. 我应该知道哪些原则或范式来实施这些测试，它是如何工作的？

我发现单元测试是针对组件类的，集成测试是针对组件的类和模板一起进行的。

但是我没有发现端到端测试与这些测试有何不同，我如何在 Angular 中实现它们，这是这些类型测试的原则和范例。

我试图在通过这种方式解析之前转换数据，但订阅者获得未转换的数据。

@Injectable()
export class OrderService {
    getAll(): Observable< Array<Order> > {
        let url = 'http://fakeapi.com';
        return this.http.get( url )
          .pipe(
            tap( (data: any) => {
                /*
                * MAKE DATA TRANSFORMATIONS HERE
                */
            }),
            catchError( (err: any, caught: Observable<{}>) => {
              console.log('error while GET : ' + url);
              console.warn(err);
              return caught;
            })
          );
    }
}

这是一个订阅者：

this._orderService.getAll().subscribe( data => {
  this.orders = data;
  console.log('\nplanning-overview-page : _orderService.getAll : data ', data);
});