Testing your code is important. Hyperverse has made it easy for you to do visual testing with UI Harness feature! You can create multiple testing modules which is great when you want to separate testing for e.g. localhost (emulator) and testnet.
If you haven’t created your dapp yet. See the guide below.
How To Get Your Dapp Started with Hyperverse - Easy!
This guide will use Flow blockchain with react framework and Fast Floward as smart contract features.
UI Harness File Location
In your preferred code editor open your dapp repository and go to packages > client > src > harness. The harness folder will contain two js files fast_floward-harness.js and harness.js
UI Harness Files
harness.js file is where you edit to organize your UI Harness modules as seen below.
fast_floward-harness.js contains action cards that we can see on the client preview.
Add New UI Harness Module
Copy the pre-coded fast_floward-harness.js file in the same folder and rename it. This guide will rename the file to your_dapp-harness.js. The logic for renaming harness.js file is name1_name2-harness.js
In the new harness file your_dapp-harness.js. Change the name in the parentheses in line 12 to the new name. For this guide your-dapp-harness and save the file. Logic is name1-name2-harness
To start with there is one UI Harness module.
In harness.js file you can add the visibility of the new module. After line 45 add the example block of code below and save the file.
{
"name": "core-your_dapp",
"title": "Your Dapp",
"description": "Explore UI Harness",
"category": "Foundations",
"route": "/core-your_dapp"
}
Now the module should be visible!
When entering Your Dapp module it should display action cards like this 👏
There you have it! Add as much UI Harness modules as your heart desires! ❤️🔥
Learn to build dapps with Hyperverse regardless of your coding skills. Join Decentology's Discord and discover new possibilities for web development and more!
Top comments (0)