以前触ってみたときはRC3でRC5が出たらもう一回触るかってことで、以前作ったサンプルのRC5への更新、ステート管理の変更、ユニットテストについて試してみた。情報収集をするとNgModuleが追加されたことが大きいようで、コンポーネントごとにdirectivesやpipesでの指定を行う必要がなくなり、stableでこの方法は廃止になるとのこと。現状、このサンプルにおいてはRC3のコードのまま動作するしwarningもでなかった。詳細は以下で確認すると良さそう。ng2-info.github.iong2-info.github.ioNgModuleの導入まずは@NgModuleを使用してモジュールを作ることになる。前回コンポーネントごとに記述していたディレクティブはdeclarationsに記述することになる。これによりモジュール配下のコンポーネントにおいて、ここで記述したディレクティブが使用できるようになる。サンプルでは未使用だがパイプなどもここにまとめて記述することになる。providerにはDIプロバイダ、bootstrapにはエントリポイントとなるコンポーネントを指定する。platformBrowserDynamic().bootstrapModule(AppModule);あとは各コンポーネントのdirectivesを削除し、動作した。前回のRC3からRC5への差分は以下。github.comステート管理の見直し前回のサンプルを作成したときには、containerにステートを持たせて管理する方法をとっていた。ReactとReduxなどを使っていて、コンポーネントに状態を閉じた場合、後々いい結果にならないケースが多い、印象があるので模索していたところ以下の記事を見つけたので今回のサンプルに反映してみることにした。コンポーネント数が多く、コンポーネントのステートが様々なコンポーネントに影響するような構成の場合、アプリケーションのステートを局所化する手段はあったほうがいいと思う。基本的にはReduxライクな構成でイミュータブルなステートをアクション経由で変更するというもの。そこにRxJS(というよりObservableか)を使用することでaction発行毎にreducerが走る問題などを解決しつつ、RxJSの恩恵を受ければ状態管理シンプルにできるよ。Actionsアクションを用意する。payloadにデータを放り込んでる。FetchCommentAction;ObservableActionをもらってアプリケーションステートのObservableを返すステート関数を用意する。Reduxでのreducerに相当する関数。reducerと違いこの関数自体は一度しか呼ばれないことを利点として上げている。initState);}次にrootReducerに相当する各ステート関数をcombineするstateFnを用意する。このサンプルではcombineする必要はないけど、参照記事ではfilter機能などを実装しているため、複数のステート関数をcombineしている。このサンプルではあまり意味を成さないものになっているので詳細は参照記事を確認してください。res;}一つ注意点があって、wrapIntoBehaviorを実行しないとコンポネーントがsubscribeしたときにemitされるまでデータが受け取れないことになる。その問題をBehaviorSubjectで解決しているとのこと。このあたりRxJSの理解力が乏しくてアレなんだが、BehaviorSubjectの挙動としては以下のようなものらしい。直前にonNextで渡された値を保持し、subscribe()した直後に保持していた値を流します。その後の動作は後述のPublishSubjectと同等です。Rxで知っておくと便利なSubjectたちよりこの辺りの挙動はテストを書いてみるとわかりやすく、参照記事と同様のものを書いてみた。後述するが、テストまわりは不明点周りで現状かなり辛い印象をもったが、この辺りはAngularから切り離されているためテストも容易だった。Boundary上記のactionやstateをView側で扱う準備をする。対して値をセットしており、OpaqueTokenはProviderのトークンとして使いやすいインスタンスを提供してくれると書いてある。詳細は以下を参照すると良さそう。}];そして、こいつを@NgModuleで登録してやる。...View以下のようにInjectしてdispatchと、stateを使用している。}}書いてて思ったけど、このコンポーネントはSmartComponentとしての責務に専念して、templateへの記述は最小限に抑えるべきな気がする。あとこういった構成の場合複雑な非同期処理が必要となった場合(API設計が悪いとか、BFFが、とかはひとまず置いておいて)、シンプルに対応できるかというのが頭をよぎるんだが、この場合サービス側でごにょごにょやる感じになるのかな。これはAngularではなくRxJS力の低さの問題なんだけど、非同期処理をチェーンさせる(たとえばユーザーリストをフェッチ後、ユーザidからお友達リストを取ってここなくてはならない、など)場合、どう書くのがシンプルなのかわからない。power-assertでテストが書けるとのことなので一番シンプルなコンポーネントで試してみた。言え、現状不明点が多く、「こうしたらなんか動いた」的な状態に近い。APIが追加されたらしく、こいつを使ってテスト用のコンポーネントを作成したりしてテストしていくことになりそう。ng2-info.github.io最初はTestBed.createComponent(CommentList)として、createComponentに直接テスト対象のコンポーネントを追加していたんだけど、この場合@Inputをどのように解決するのかわからず、上位コンポーネントとしてTestCmpを作成し、こいつを渡すことにした。以下のモジュールのテストを参考にしていて、これならspyやstubなどを仕込むのも簡単にできそう。github.comまた、以下の記事もユニットテストやマーブル記法のテストまで触れてあって参考になった。CommentItem]});としてテスト用のモジュール設定を行っている。これは@NgModuleに相当するところのようで、使用するディレクティブなどはここで設定しておく必要がある。(子や孫なども含めて)。HTMLElement;あとは上記のようにすることでレンダリング後のHTMLElementがもらえるので、querySelectorで検索してテストしてみた。ここまでやって思ったのはShallowRenderingまたはそれに相当するものが欲しい。あるのかどうかわからないが。しないとすべてのコンポーネントが展開されてしまい、不味いことになる。ShallowRenderingのようなものがあって見つけられていないのか、それとも、TestBed.configureTestingModuleのdeclarationsにモックを登録したりTestBed.overrideComponentを上手く使ってやりくりしたりするのかよく分かっていない。上記の記事にも書いてあるけど、とにかく今は情報が少なくて辛い。今回は雑にquerySelectorを使っているけど、Enzyme的なView用テストユーティリティがあると良さそう。あるのかもしれないけど・・。UserPoolで行い、AppSyncからLambda...2019-01-11Denoを読む(1)正月にDenoを読んでたメモです。間違ってる可能性が高...2019-01-04Deno用のpretty_assertを作ったあけましておめでとうございます。12引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。