はじめに ウェブフロントエンドアプリケーションを開発しているといくらユニットテストを書いていても、変更に不安を覚えるものがある。代表的なものがスタイルの変更かと思う。 このスタイルの変更にも安心感を与えてくれるテストの一つが Visual regressio…

はじめに Angular アプリケーションとレイヤードアーキテクチャとディレクトリ構成 - とんかつ時々あんどーなつ に書いたようにアーキテクチャやディレクトリ構成を考えるときに、そのメリットとしてテスタビリティの向上も期待の一つとすることが多い。プロ…

はじめに この記事で触れる page component は routed component のこと指している。 component の分類については下記でも少し記載しているので、リンクしておく。 Angular アプリケーションとレイヤードアーキテクチャとディレクトリ構成 - とんかつ時々あ…

はじめに Angular で単体テストを書いているとき、テストケースは pass するがコンソールエラーが出ていることがしばしばある。 例えば次のようなエラーだ。 ERROR: 'NG0304: 'app-home-child' is not a known element (used in the 'HomeComponent' compone…

はじめに これは Angular Advent Calendar 2022 1 日目の記事です。 今回は Angular アプリケーションに Testing Library を導入してみたので紹介します。 Testing Library とは Testing Library | Testing Library ユーザーがページ上で要素を見つけるのと…

この記事は Angular アプリケーションでコンポーネントのテストを書くときに安易に NO_ERRORS_SCHEMA を使いすぎていたという反省とそれをやめたいという話である。 NO_ERRORS_SCHEMA を使っていた背景 Angular でアプリケーションを作っているとコンポーネ…

はじめに 今回は Angular アプリケーションの単体テストフレームワークを Jasmine / Karma から Jest に変更する方法を調べてみた。 Jest にする理由は「早いらしい」「ナウい」とかそんな感じだが、使ってみたいので試してみる。 Angular アプリケーション…

はじめに この記事は Classi Advent Calendar 2020 の 10 日目の記事です。 昨日はそーだいさんが書いてくれました。 soudai.hatenablog.com 今回は Angular アプリケーションの E2E テストフレームワークを Cypress に変更する方法について紹介します。 Ang…

いつも ng new 一発でテスト環境まで準備済みだが、ふとユニットテスト環境を作るのにどういうパッケージとどういう設定が必要かきになったので試してみた記録 テスト環境がない状態で Angular アプリケーションを用意 ng new のオプションにめちゃくちゃ都…

ComponentHarness を使って Angular アプリケーションの単体テストを書いてみた 試したコード github.com ComponentHarness とは angular/components v9.0.0 に追加された testing tool テストコードを書く時の役割が ComponentHarness を作る人と Component…