読者コミュニティ｜Angular After Tutorial
lacolaco本の感想や質問をお気軽にコメントしてください。
lacolaco「基礎編: 依存性の注入」の章を追加しました。
youpongAngular を学ぶうえでとても役立つドキュメントだと思っています。ありがとうございます。
さて、「3-1. コンポーネントのテスト」の「コンポーネントのインプットのテスト」のコード例をテストした際に以下のようなエラーメッセージが表示されることに気づきました。
Error: src/app/title/title.component.spec.ts:13:13 - error TS2339: Property 'change' does not exist on type 'RenderResult<TitleComponent, TitleComponent>'.
13 const { change } = await render(TitleComponent, {
このとき、@testing-library/angular のバージョン 14.1.0 を使用しています。
上記エラーメッセージは @testing-library/angular のバージョン 13.4.0 ではエラーがでないことを確認しています。
youpong2-2. Observable にて、TypeScript でのプログラム例で、下記のように equality operators(==)が使われている箇所が２つあります。
.filter((i) => i % 2 == 0)
これを strict equality operators(===)とした方が私は好きなのですが、いかがでしょうか。
lacolacoそのとおりですね。修正します！
T.Kawaいつも参考にさせてもらっています。ありがとうございます。
3-2.Single State StreamパターンのSingle State Stream の合成を実際に書いて試していたところ、意図しないであろう出力になりました（文字列の1文字目が表示される）。
意図するところとしては、下記のようにcombineLatestの第2引数の関数の引数は、配列でなくそのまま文字列ではないでしょうか。
this.state$ = combineLatest(
[this.dataService.valueChanges],
(value) => ({ value }), // 引数は配列でなく文字列？
);
ご確認のほど、よろしくお願いいたします。
（私が何か勘違いして間違っていたら無視してください）
追記：私の試した環境は以下のとおりです。
- angular v16.2.0
- rxjs 7.8.0
youpong私も同様の結果（文字列の１文字目が表示される）結果となりました。修正案は期待した通りの振る舞いとなりました。
私の環境：
- angular v16.1.4
- rxjs v7.8.1
lacolacoこちら、combineLatest関数の仕様がRxJS v7で変わったのに追従できていませんでした。第2引数のコールバック関数を使うのではなく、 map オペレータを使うのが適切ですね。修正します。
@Component({})
export class AsyncPipeComponent {
// Single State Stream
readonly state$: Observable<State>;
constructor(private dataService: DataService) {
this.state$ = combineLatest([this.dataService.valueChanges]).pipe(
map(([value]) => ({ value }))
);
}
}