Websockets Implementation for the Connecting screen

[codingLogan]

How the feature works

The hosting app does a lot of the heavy lifting and passes in what is required by the UI

• Set up an Observable that will emit appropriate messages
  • members/updated
  • members/priority_data_ready
• Set up a function that can return true when the socket connection is healthy.
• Send in a feature flag value of true to enable the usage of the above Observable

How to pass the values into the UI package

In the hosting app, pass in a new prop object to the ConnectWidget named webSocketConnection

webSocketConnection={{
  isConnected: () => function that returns a boolean,
  webSocketMessages$: Observable,
}}

To enable the widget to use those values, you must also enable the useWebSockets experimental feature

experimentalFeatures={{
  ...other features
  useWebSockets: boolean,
}}

[codingLogan]

Recent Test Runs

With the new feature enabled

       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  group-1/additionalProduct.cy.js          04:59        9        9        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-1/additionalProductNotSupport      00:13        1        1        -        -        - │
  │    ed.cy.js                                                                                    │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-1/demoConnectGuard.cy.js           00:22        2        2        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-1/externalLinkPopUp.cy.js          00:36        3        3        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-2/connectHappyPath.cy.js           02:56       11       11        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-2/connections.cy.js                02:59        6        6        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✖  group-2/iavConnectAccountNonDda.cy.      00:42        6        -        1        -        5 │
  │    js                                                                                          │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-2/newUserWithNoAccounts.cy.js      00:09        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-2/postMessages.cy.js               00:05        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-4/Search.cy.js                     00:54        8        8        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-4/connectSadPath.cy.js             02:02        6        6        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-4/mfaChallenges.cy.js              01:00        2        2        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-4/singleAccountSelect.cy.js        01:06        3        3        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-5/blockedRoutingNumbers.cy.js      00:09        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-5/microdepositFlow.cy.js           00:48        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-5/sharedRoutingNumbers.cy.js       00:10        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-3/comboJob.cy.js                   01:54        8        8        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-3/connectConfigTests.cy.js         00:51        5        5        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-3/globalNavTests.cy.js             02:06        7        7        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-3/jobError.cy.js                   00:15        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-3/lightDisclosure.cy.js            03:44       36       36        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-3/memberUseCases.cy.js             01:02        3        3        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✖  1 of 22 failed (5%)                      29:12      122      116        1        -        5  

With the new feature disabled

       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✔  group-1/additionalProduct.cy.js          05:40        9        9        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-1/additionalProductNotSupport      00:13        1        1        -        -        - │
  │    ed.cy.js                                                                                    │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-1/demoConnectGuard.cy.js           00:23        2        2        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-1/externalLinkPopUp.cy.js          00:38        3        3        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-2/connectHappyPath.cy.js           03:17       11       11        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-2/connections.cy.js                02:55        6        6        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-2/iavConnectAccountNonDda.cy.      01:15        6        6        -        -        - │
  │    js                                                                                          │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-2/newUserWithNoAccounts.cy.js      00:09        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-2/postMessages.cy.js               00:05        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-3/comboJob.cy.js                   01:55        8        8        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-3/connectConfigTests.cy.js         00:51        5        5        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-3/globalNavTests.cy.js             02:05        7        7        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-3/jobError.cy.js                   00:14        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-3/lightDisclosure.cy.js            03:37       36       36        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-3/memberUseCases.cy.js             01:03        3        3        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-4/Search.cy.js                     00:53        8        8        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-4/connectSadPath.cy.js             01:35        6        6        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-4/mfaChallenges.cy.js              01:27        2        2        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-4/singleAccountSelect.cy.js        01:24        3        3        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-5/blockedRoutingNumbers.cy.js      00:09        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-5/microdepositFlow.cy.js           00:46        1        1        -        -        - │
  ├────────────────────────────────────────────────────────────────────────────────────────────────┤
  │ ✔  group-5/sharedRoutingNumbers.cy.js       00:10        1        1        -        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✔  All specs passed!                        30:54      122      122        -        -        -  

[wesrisenmay-mx]

Looks good if you take out the ADR change, or get most of the team onboard with the ADR change

[codingLogan]

Update - The one failing test now passes. The websocket server now has the ability to forward along actionable error details.

[github-actions]

🎉 This PR is included in version 2.20.0 🎉

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot 📦🚀