TestJS Summit

TestJS Summit 2022

We will go through a brief explanation of what is Web3 and the architecture of a web3 application. Then we will talk about how to end-to-end test, its challenges, some test tools that are available, and a demo using cypress and metamask.Agenda: What is Web3; The Architecture of a Web3 Application; Web3 E2E Tests Introduction; Web3 E2E Tests Challenges; E2E Test Tools; Demo. by <a href="https://www.froala.com/wysiwyg-editor?pb=1"> </a>

E2E Tests for Web3 Applications

Hello, everybody. I'm Rafaela and I'm going to share a bit of my experience with end-to-end tests for Web3 applications. So, just a bit about me, I have 15 years experience in QA, test automation, test strategy, architecture, and leadership. And I got really passionate about the QA area, so I created this blog in 2011, where you can find everything that I have learned in the past couple of years. So code snippets, programming, DevOps, leadership, and test automation, of course. I was born and raised in Brazil, to be more specific, I'm from a coastal city called Santos in Sao Paulo. And you can see the picture on the screen. I'm also a really big fan of Harry Potter, as you can see, and this is one of the reasons why I moved to London eight years ago. And the weather as well, but nobody believes when I say that. But yeah, the agenda is going to be this one. We are going to talk about what is Web3, then the architecture of the Web3 application, some introduction about the end-to-end tests, and the challenge, then the tools that you can use. And we are going to have two demos, one just using a mock and another one using a framework called SyncPress. And then in the end, we are going to talk about the trade-offs of each approach. So what is Web3? Web3 is just a new version of the web. We are on Web2 right now. And this Web3, it comes with the ideas of decentralization, token-based economics, and also blockchain technology. So it offers a read-write-own model. So people, they have financial stake and more power over the online communities they belong to. So they own the data, which is not the case right now. The online experience is expected to change as cell phones and smartphones and the pieces they did in the past. So it's going to be a big change for us that we are living in this moment. Some business, they try to join this new market, but they encounter some pushbacks with blockchain as well, like the negative impact on the environment and the financial speculation as well. This is the evolution of the web. So from the first version to now, so the first version we had the static read-only pages where you couldn't interact too much with them. And then now what we have is a bit more dynamic and interactive. So we can go there and post things. So Twitter, we can just send our data away basically to these big corporations. And the Web3, which is the one coming now, is more private, secure, and decentralized. So the idea is our data is not going to be owned by these big corporations, but by yourself. And the architecture of the Web3 is also quite different because it's based on smart contracts like blockchain. So if we see now what we have is basically the frontend backend database inside of this web server, and this is controlled by the corporation or the company, somebody. And the Web3, we have just the frontend in the web server. So this is going to be controlled by the company or the corporation. But then the smart contracts, the EVM and the Ethereum blockchain, this is something that is going to be decentralized. And the smart contracts, they have the business logic or the protocol of these transactions and this business. So basically now what we have is just we are going to interact with the frontend and then the frontend is going to interact with the smart contracts and then EVM, the Ethereum virtual machine. And this is going to add the transaction to the blockchain. So it's going to add a new block to this Ethereum blockchain. And this is the part where it's decentralized. So this is an example of a Web3 stack. So we have some examples of like tools and frameworks, but you can see the layers. So you have the first layer with decentralized applications. So it can be something like MetaMask, which is a plugin to authorize identity, have wallets. It's a cryptocurrency wallet. Then you have Uniswap, then you have another layer, presentation layer, which is called and you have the developer environments where you can test your product. And then you have the other layers like blockchain interaction layer and the network layer with the EVM blockchains. So this is not all the tools that you can use. It's just like an example with the most popular ones, I believe. But at least you have an idea of how it is, the Web3 stack. And then the tasks, the end-to-end tasks are more like the problem with Web3. But if you want to do the unit tasks, it's fine. You can use something that you already use for Web2 applications. You can use Jest, you can use Mocha, it's still the same kind of framework. And then you can just verify if the components are operating as intended. So UI tasks are also not a problem because you can still use the same frameworks that you use right now to do the tasks. And yeah, the integration tests, they are not a problem as well because you can just use the smart contract libraries to mimic their own changes by just mocking the underlying EVM. So the problem is when you go and you try to do the full end-to-end tests without the mocking because you have this third-party provider that you need to use to communicate with the blockchain and submit the transactions. And most of the frameworks right now that do end-to-end tests, they cannot access this plugin. So one of the most used plugins is Metamask, as I said, it's a cryptocurrency wallet. And you need these to interact with the Ethereum blockchain and sign the private keys and do the full transaction cycle flow. So yeah, faking these UI interactions is really complex and the test frameworks that we have right now, they don't support these plugins, even when running headless browser. So one of the approaches that I'm going to show you after is just mocking the web tree, but this is basically what is the flow. So the user goes and interacts with the web tree that interacts with the Metamask or the third-party provider. And then finally, Metamask is able to send this transaction to the Ethereum blockchain and add the block there. And these transactions, they are signed by a private scheme. So UI frameworks, they cannot do that at the moment as well. And one of the approaches is using the web tree mock. So now, while it is a good practice anyway, not using the real third-party integration because you shouldn't be dependent on this because you don't have control of this third-party, you don't have control of the plugins. So if it crashes or if there is a bug, you might need to pause your entire development just because you cannot test your own application full end-to-end cycle. So one idea is to mock the web tree and then just do the same sending transactions and then simulating this part with the Ethereum blockchain. And then yeah, with the web tree mock, you can solve the problem by signing the transactions with a private key automatically and then sending to the EVM and the Ethereum blockchain. Another approach would be using this framework called Synpress, which is a wrapper from Cypress.io and has MetaMask support. But yeah, the problem with this is you are tied to use only MetaMask with this. It's the only third-party provider plugin that supports at the moment. And you need to use Cypress.io as well because it's a wrapper from Cypress.io. But at least you can choose between locking the version of the MetaMask so you don't have unexpected failures or you can just make sure that Synpress can just run the tests but before that update the MetaMask plugin just to have the latest one. So you can decide what you want to do. Basically if you want to lock the version or if you want to update with the latest MetaMask before running your tests, which would be good to figure out if your application has any problems with the new version of MetaMask. And you can still use any of other instrument test tools that are in the market already. The only problem is they don't have something like Synpress. They don't have a framework that is built on top of them, apart from Cypress.io, just to do the integration with this third-party provider. But you can use the mock strategy. So you can still use, for example, Taskafa that I really like as well. You can use that and then mock the Web3. But of course they have downsides as well. So if you want to use something different from MetaMask you can use it with the mock but then if you go with Synpress the only thing that you can use is the MetaMask plugin. So now we are going to just see the first demo which is with the mock. So it's going to be Cypress and the mock of Web3. Let me just go to the other screen. Oops. Sorry. This one. Yeah, this is on my GitHub and it's just a fork from another project but you can see already how that works. So it's a simple... You just need to use ER and start to start a local host webpage, simple page, and then you can use ER and Cypress run to run the tasks. But basically it's just this task is sending the transaction. It's really fast so you cannot see properly. But the first one is just connecting to MetaMask. You can see... Oops. You can see the connect with the login and this is the sample they created. So you can see here it's expecting to have the address of the wallet that you connected. Then you are signing the messages as well and then you need to check here the data response if it's exactly what you expect and if it's doing the right transactions. And then in the end, yeah, try to send a transaction which you sent to this wallet, this address, this amount, and then you should have... Yeah, in this case, it's okay to have this service. It cannot send transactions which was expected in this case. And then signing out as well which you should be... It's really, really simple this one but you can at least see how the mock is done. And whoops. And the other... This is the address so if you want to have a look. And the other demo is going to be using the SyncPress tool. So you can see that we are using the SyncPress and we are really integrating with MetaMask. So this one is just running Cypress and it's loading Cypress and then it's going to load the specs and just run straight away. So this is the MetaMask plugin. You can see that it's starting and it's not mocking. So if you go and install MetaMask plugin, you can see that it's exactly like that. And also on the top, you can see Chrome extension so it is the real plugin. Then now, it was just setting up the MetaMask with importing the account. And now it is using the plugin to send... Yeah, to accept the connection request and just connect to this account. And now we're just creating the network as well. And yeah, basically this is another demo with the SyncPress. It's really straightforward as well, but it's well-maintained. You can also check on the official SyncPress repo on GitHub. They have other examples there, if I'm not wrong. But this one is really simple and is on my GitHub repo as well. GitHub account, sorry. And yeah, of course, the trade-offs. So we have the test speed that we need to take into account. So when you use the mock, of course, it's faster than using the third-party plugin and waiting to load and also the network. All the problems that you have when you are not mocking this third-party provider. Then you have the dependency on third-party app when you are doing the full real end-to-end tests. So if something crashes, if there is a bug, you might need to just stop or revert the version that you were using before the bug. Then you might need to pause, or if you are really testing and you want to make sure that it's going to work with the latest version. If there is a bug, you might need to wait until this bug is fixed just to make sure that it's okay. And also end-to-end with the end-to-end test with SyncPress is the real-world test. So you know that this is really what the user is going to do. They are not going to mock, of course. And then the other one is mock maintenance. So you need to worry about that if you are mocking, just to keep up to date if you want to make sure the latest is working with your app. And then you have the test app in isolation as well. So when you do with the mock, you don't care about this third-party if it's working or not, then you are making sure that your app is always working fine. You don't need to pause. You don't need to stop your development. You don't need to worry about the third-party should be fixed or anything like that. It is a good practice anyway to do that, to mock. So one thing that you can do as a strategy is just to have a good balance between the unit tests, the integration tests, so you can mock most of the tests, and then having, I don't know, maybe 10% or even less of end-to-end tests. So you can use something, for example, the framework in automating these 10%, or you can have some exploratory tests doing the full end-to-end, or you can just have manual tests for that. It's really up to you, your project, the strategy that you use, what are your needs, but a good balance always make sure that, okay, we cannot test end-to-end with the latest version of the third-party, but we know that with integration is working fine, we have everything covered, so it's more robust, it's more trustworthy in the end. And yeah, that's it. So thank you. If you want to connect to me in any of these social medias, just feel free to do so, or send any questions or feedbacks. I'm open for these as well. It's always good to improve. So yeah, that's it. Thank you.
