📅 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 https://github.com/angular/components/issues/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 https://github.com/angular/components/issues/20871, mostly reviewing and updating the provided feedback.
  • Discussed https://github.com/angular/components/issues/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

[Splaktar]

From Lars:

Reproducing ZURB Foundation's own tests for the Tabs component with component harnesses.

Unit tests

• https://github.com/LayZeeDK/ngx-foundation-sites/blob/feat/ivy-cdk-test-harness/src/lib/src/lib/tabs/tabs-harness.spec.ts

End-to-end tests:

• https://github.com/LayZeeDK/ngx-foundation-sites/blob/feat/ivy-cdk-test-harness/src/e2e/src/tabs/tabs-basics-po.e2e-spec.ts

Page object with harness:

• https://github.com/LayZeeDK/ngx-foundation-sites/blob/feat/ivy-cdk-test-harness/src/e2e/src/tabs/tabs.po.ts

e2e test with harness but no page object

• https://github.com/LayZeeDK/ngx-foundation-sites/blob/feat/ivy-cdk-test-harness/src/e2e/src/tabs/tabs-basics.e2e-spec.ts

[LayZeeDK]

Support for waitForTasksOutsideAngular in ProtractorHarnessEnvironment is work in progress: https://github.com/angular/components/pull/20351

[LayZeeDK]

@mmalerba here's the repo where I experienced flakiness when using the Angular Material Select component as mentioned in Create a component harness for your tests with Angular CDK > Slight differences.

Custom component harness: https://github.com/LayZeeDK/ngx-component-harnesses/blob/master/src/app/favorite-ocean-creature/favorite-ocean-creature.harness.ts

Unit test suite: https://github.com/LayZeeDK/ngx-component-harnesses/blob/master/src/app/favorite-ocean-creature/favorite-ocean-creature.spec.ts

End-to-end test suite: https://github.com/LayZeeDK/ngx-component-harnesses/blob/master/e2e/src/app.e2e-spec.ts

For the end-to-end tests, the BrowserAnimationsModule is used since it's testing an actual application. Approximately every other test run, I would experience a timing issue where the end-to-end tests would fail, probably when waiting for the dropdown appearance animation to finish. This repo is using Angular Material and CDK 9.0, so I'm not sure whether it's still an issue.

[praveeno]

how can i join these calls, calender link is blank for me

[yjaaidi]

Hi @praveeno, you can just post your email here or DM me on Twitter and https://twitter.com/yjaaidi/status/1364895370107637765 we'll add you to the next session.

[yjaaidi]

Here comes a new version of cypress-harness that allows harness reuse & chaining. This solves the following issues: ✅ fixes: trying to figure out a better, more simple API with less boilerplate ✅ fixes: there are also some challenges with inferring the return type of methods. Could be caused by intersection.