ng-japan OnAir vol.16 Show Note

# ng-japan OnAir vol.16 Show Note https://hackmd.io/@lacolaco/BklkGSovL https://www.youtube.com/watch?v=QZ1wfGorelo --- ## CDK Testing APIs Topics - @angular/cdk/testing Overview - How to use ComponentHarness - Demo --- ## @angular/cdk/testing - Since @angular/cdk v9.0 - `ComponentHarness` API --- ## `ComponentHarness` https://material.angular.io/cdk/test-harnesses/overview > A component harness is a class that lets a test interact with a component via a supported API. > Each harness's API interacts with a component the same way a user would. --- ![](https://i.imgur.com/wySjoQx.png) --- ## Why - Save specs from internal changes - Like **PageObject** Pattern - Interact with 3rd-party Components in specs --- ## Demo - Add Angular CDK - Create Counter Component - Without Harness - Write Component Spec - With Harness - Write Component Harness - Write Spec for the harness Code: https://github.com/lacolaco/cdk-testing-example --- ## Using Material's Harness https://material.angular.io/guide/using-component-harnesses - No need to *dig* 3rd-party DOM structure - `MatButtonHarness` from `@angular/material/button/testing` - Load child harnesses via `HarnessLoader` Demo --- ## Tips - [Create a component harness for your tests with Angular CDK \- Angular inDepth](https://indepth.dev/create-a-component-harness-for-your-tests-with-angular-cdk/) - [Autify \| なぜE2Eテストでidを使うべきではないのか](https://blog.autify.com/ja/why-id-should-not-be-used) ###### tags: `ng_jp_onair`