📅 Chat: Creating Harnesses (Feb24th, 7pm UTC 2021)

[willi84]

Using harnesses is straightforward, creating them is hard.
See issue feat(@angular/cdk/testing): Component Harness Feedback · Issue #20871 · angular/components
Host: Younes Jaaidi

February 24th, 2021, 7PM UTC

(Younes: can that be a wednesday? I initially suggested the 25th but the 24th works better for me)

Invitees

• stephenfluin@google.com
• mikehartington@gmail.com
• larsbrinknielsen@gmail.com
• splaktar@devintent.com
• serkan.sipahi.1979@gmail.com
• mmalerba@google.com

Event:
https://calendar.google.com/event?action=TEMPLATE&tmeid=NjBjNnRybnNqamRvdTM0YTRvdjI5ODk5bjkgYjRvamFhajlib2E4Y2tkZWp1ZXBzbzI0NGdAZw&tmsrc=b4ojaaj9boa8ckdejuepso244g%40group.calendar.google.com

[yjaaidi]

Thanks Robert for regrouping all of this here.
Let's go for Feb 24th 7pm UTC

[yjaaidi]

@mmalerba would you like to join?

[willi84]

if I have time, sure. can you give me ur email to share the appointment with u?

[mmalerba]

sure, I'd be interested: mmalerba@google.com

[willi84]

gosh. sorry for the invitation problem, but google is duplicating my appointments :-/

[julianobrasil]

Hey, I'd like to attend to this one too: juliano.brasil@gmail.com

[signuspl]

I am interested: signus.pl@gmail.com

[yjaaidi]

Here is the link to the related issue angular/components#20871

[Splaktar]

Meeting Notes

• Moving to MDC components with different DOM structure is the critical motivator to implementing test harnesses. Need to migrate components without breaking all of the tests in Google, as that would be too much work.
• Built on top of Vikram's harness design
• Younes using the harnesses with multiple projects. Cypress testing approach is very different. Also using Jest. Gives testing workshops.
  • Using the Angular Material harnesses is great, authoring harnesses for Angular libraries needs to be more accessible and better documented.
  • Want to simplify the API.
  • getHarness() helper exists in Google and has been collecting feedback before moving to open source. So far it is going well and there is a plan to move that to the public API.
  • Walked through feat(@angular/cdk/testing): Component Harness Feedback angular/components#20871, mostly reviewing and updating the provided feedback.
  • Discussed feat(cdk/testing): Consider adding a TestElementPromise class angular/components#21183
  • Discussed change detection features of harnesses, like manualChangeDetection(), parallel(), handleAutoChangeDetectionStatus() and stopHandlingAutoChangeDetectionStatus ().
    • Fake async tests directly trigger change detection.
    • forceStabilize() may be needed in some edge cases
    • parallel() needs some docs, but Promise.all() should be replaced with parallel() in most cases. Useful when you want to run a batch of operations and then run change detection afterwards.
    • waitForTasksOutsideAngular is still not implemented in the ProtractorHarnessEnvironment, only in the TestbedHarnessEnvironment
      • https://indepth.dev/posts/1102/create-a-component-harness-for-your-tests-with-angular-cdk#slight-differences
  • Discussed cypress-harness
    • With Cypress you are adding actions in a chain, similar to Protractor before async await approach.
    • Has a getHarness() function but it has to be re-called many times
      • Hooks into jQuery which is used by Cypress under the hood
      • @angular/cdk/testing/testbed has dependencies upon rxjs and @angular/core that cause the loading to be slow
      • Need to break out the dependencies in cdk/testing/testbed/testbed-harness-environment.ts#L18 to not cause RxJS and @angular/core/testing to be loaded in tests.
    • invoke() to call methods on the component
    • should() that will wait until a value is matched
    • Main challenges are
      • trying to figure out a better, more simple API with less boilerplate
        • support for chaining methods would help with Cypress support a lot
      • Cypress performance issues due to loading too many dependencies / cycling
    • There are also some challenges with inferring the return type of methods. Could be caused by intersection.
  • Need to improve HarnessPredicate docs
  • protractor-flake library will retry your tests