search

shapeshift / web

ShapeShift Web
https://app.shapeshift.com
MIT License
159 stars 180 forks source link

Add ability to mock WebSocket connections in Cypress #949

Closed 0xApotheosis closed 2 years ago

0xApotheosis commented 2 years ago

IMPORTANT: NO BOUNTIES WILL BE PAID FROM 2/5 - 2/14 - IF YOU COMPLETE THIS BOUNTY DURING THIS TIMEFRAME WE WILL REMIT PAYMENT ON 2/14

Background

Cypress supports intercepting and mocking REST communications out of the box. It does not, however, support WebSocket connections in the same way.

We use WebSockets to provide data to the web Dashboard, notably transaction data relating to the connected wallet. We are not currently able to test the rendering of transactions due to this Cypress limitation.

Other considerations

A number of libraries exist that may be of use, e.g.:

An example response from a WebSocket server relating to transactions is available in cypress/factories/ethereum/transactions.ts

We have several intercepted REST endpoints here that could be used for inspiration - we probably want to have a Cypress WebSocket command implemented similarly.

Acceptance Criteria

Bounty Documentation

gitcoinbot commented 2 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

This issue now has a funding of 2200.0 FOX (799.36 USD @ $0.36/FOX) attached to it.

0xdef1cafe commented 2 years ago

@visitskyworld how are you going with this one?

visitskyworld commented 2 years ago

Hi, @0xdef1cafe Sorry, I have been a little busy for 2 days, I will make a pull request this weekend.

visitskyworld commented 2 years ago

As transaction type is different from ethereum socket server and mock server, mocked transactions are not rendered in dashboard page.

Real transaction type:

{
  address: '0xA44C286BA83Bb771cd0107B2c1Df678435Bd1535',
  blockHash: '0xc2f42f9dfbeb1c600ecd13dbcd624af1ea70631e13ad4d972b83a2a7c805360c',
  blockHeight: 1,
  blockTime: 1637201790,
  confirmations: 29807,
  caip2: 'eip155:1',
  txid: '0x5b25d67e43ba2cdfcb584c8069330874e838607d06b9dc64bf174547ca11e171',
  fee: {
    caip19: 'eip155:1/slip44:60',
    value: '3192000000000000'
  },
  status: chainAdapters.TxStatus.Confirmed,
  chain: ChainTypes.Ethereum,
  transfers: [
    {
      caip19: 'eip155:1/slip44:60',
      from: '0xA44C286BA83Bb771cd0107B2c1Df678435Bd1535',
      to: '0x67ffc0d460c38CeEe3a29A94def9Ff828E92E165',
      value: '230757160394687',
      type: chainAdapters.TxType.Send
    }
  ]
}

Mock transaction in cypress/factories/cypress/transactions.ts:

      {
        txid: '0x8e3528c933483770a3c8377c2ee7e34f846908653168188fd0d90a20b295d002',
        status: 'confirmed',
        from: '0xB3DD70991aF983Cf82d95c46C24979ee98348ffa',
        to: '0x642F4Bda144C63f6DC47EE0fDfbac0a193e2eDb7',
        blockHash: '0x94228c1b7052720846e2d7b9f36de30acf45d9a06ec483bd4433c5c38c8673a8',
        blockHeight: 12267105,
        confirmations: 1837143,
        timestamp: 1618788849,
        value: '737092621690531649',
        fee: '3180000000009000'
      },

Should I change mock data? @0xApotheosis

0xApotheosis commented 2 years ago

Should I change mock data? @0xApotheosis

@visitskyworld absolutely - please update them to whatever accurately represents the actual data received via WebSockets.

The current transaction file is not yet used anywhere, and is more a placeholder. Adapt it to your needs 👌

gitcoinbot commented 2 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

Work for 2200.0 FOX has been submitted by:

  1. @visitskyworld

@0xdef1cafe please take a look at the submitted work:

0xApotheosis commented 2 years ago

@visitskyworld how are you going with the requested changes on this one?

Are you able to provide an indication of when you'll be able to update the PR for review?

visitskyworld commented 2 years ago

@0xApotheosis , sorry for missing this one. I will push updates asap. But regarding implementation, I need your detailed explanation how to make mock server extensible and add mechanism for websocket intercepting.

As I understand it, the instance of web Cypress is talking to needs to point to the local, mocked, WebSocket server (ws://localhost:8080). We can handle this by updating the CI configuration, though my concern is that this causes all WebSocket requests to be intercepted. Can we implement a pass-through mechanism, where if we haven't mocked a subscription topic, we'll send that subscription request through to the actual server? This would require the more generic WebSocket server logic noted above, and will prevent Cypress from breaking when we add new WebSocket topics that are not explicitly mocked.

0xApotheosis commented 2 years ago

@visitskyworld checking in on this - none of the one-liner comments have been addressed yet, and the branch is getting stale with merge conflicts again - will you have time to address these this week?

Re: making the mock server more extensible, it should be fairly straightforward - take inspiration from my comment here, https://github.com/shapeshift/web/pull/1061#pullrequestreview-891961157, and extend the implementation so that when setting up the mock server for Cypress, we can tell it which topic(s) we want to mock, and what data should be returned for said topic.

Re: the pass-through mechanism, I'd need to look into a way that would work with your implementation - ideally, this is something you can contribute.

0xApotheosis commented 2 years ago

Hey @visitskyworld - I can see you've made some of the suggested changes in a new branch.

Will you be able to get the remaining changes to us in the next 24 hours?

If not, in the interest of expediency we may need to bring the remaining work in-house, or re-bounty what's left - we will of course issue a partial payment for the work done thus far!

gitcoinbot commented 2 years ago

Issue Status: 1. Open 2. Started 3. Submitted 4. Done

The funding of 2200.0 FOX (603.39 USD @ $0.27/FOX) attached to this issue has been cancelled by the bounty submitter

0xean commented 2 years ago

1103

0xApotheosis commented 2 years ago

@0xean I'm reopening this, as it's actually a related but separate issue to https://github.com/shapeshift/web/issues/1103.

0xApotheosis commented 2 years ago

@GMSteuart is keen to bring this home 🤙

GMSteuart commented 2 years ago

@0xApotheosis The cypress-websocket-testing package only adds support for mocking websocket connections and not mocking websocket responses. While there has been some additional code added to try and do some simple response mocking in the existing branch, mock responses are not resulting in ui updates. Going to take a step back from the current implementation in the PR and get a better bird's eye view.

0xApotheosis commented 2 years ago

Sounds good @GMSteuart - I'm not wedded to the current implementation in any way, and I'd even caution against taking too much inspiration from it.

I'd recommend taking a holistic look at how you'd approach it from scratch.

0xean commented 2 years ago

@GMSteuart - can you provide an update on the status of this one? TY!

0xean commented 2 years ago

@GMSteuart - still working on it, modifying scope to simplify with @0xApotheosis

MBMaria commented 2 years ago

@0xApotheosis do you have a rough estimate how many expected hours this ticket should take so I can update the amount the bounty needs to be in Dework?

0xApotheosis commented 2 years ago

It depends on the implementation method chosen, as there are a few possible approaches. I'd expect 2-3 days of effort - @GMSteuart may have further thoughts, as I believe he is (or was?) working on this.

GMSteuart commented 2 years ago

@0xApotheosis I was waiting on refactoring to be completed with lib/chain-adapters package before starting since mocking of web sockets is dependent on it's implementation. Ideally, there would be some reusable code for both testing the chain-adapters package and mocking the web sockets.

@MBMaria I would agree with the time estimate @0xApotheosis gave of 2-3 days of effort.

MBMaria commented 2 years ago

Thank you both. I’ll update the bounty in Dework!

On Fri, 13 May 2022 at 11:11 pm, Grant Steuart @.***> wrote:

@0xApotheosis https://github.com/0xApotheosis I was waiting on refactoring to be completed with lib/chain-adapters package before starting since mocking of web sockets is dependent on it's implementation. Ideally, there would be some reusable code for both testing the chain-adapters package and mocking the web sockets.

@MBMaria https://github.com/MBMaria I would agree with the time estimate @0xApotheosis https://github.com/0xApotheosis gave of 2-3 days of effort.

— Reply to this email directly, view it on GitHub https://github.com/shapeshift/web/issues/949#issuecomment-1126041759, or unsubscribe https://github.com/notifications/unsubscribe-auth/AX4EULIDLHPA6SA6FXDMYMDVJZIJBANCNFSM5NVYA7QQ . You are receiving this because you were mentioned.Message ID: @.***>

0xApotheosis commented 2 years ago

We should kill this - the main reason we wanted it is to get TX history via websockets.

Recent architectural changes, i.e. https://github.com/shapeshift/web/pull/1900, mean that we now get TX history RESTfully, and so this is no longer important.

0xApotheosis commented 2 years ago

@MBMaria FYI ^