How To Add Multiple Modules    in Hyperverse UI Harness
Tags: webdev, testing, tutorial
Published: 2021-12-08 14:37:33

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!](https://dev.to/williblue/how-to-get-your-dapp-started-with-hyperverse-easy-4hd4)

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.

 ![Harness](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2ri5k6k1o3gug9rydbmk.png)
![Multiple modules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ax8z9rhq6fo69qhh9j03.png)

`fast_floward-harness.js` contains action cards that we can see on the client preview.

![fast_floward-harness.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/woi6nfwuntur3ja16jvd.png)
![Action card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/klfwrhbna083rde0hmnx.jpg)


### 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`


![Rename file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rvns5b6ikpbaxmugbygh.png)

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 `


![Line 12](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k76oqvwmy54n2htkt4ft.png)

To start with there is one UI Harness module. 
![UI Harness module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cjcjy21mikpsv45vbmzx.png)

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"
 }

```


![harness.js](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c5ojsqys542a4y4yr6x0.png)

![harness.js second module](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kvv98jvt4zsj2fd4lz7f.png)

Now the module should be visible!


![2 modules](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy8cf9p54qlc8xrco2ad.png)

When entering Your Dapp module it should display action cards like this 👏
![Your Dapp action card](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gt7jxopftw5pr1lei0ax.png)

There you have it! Add as much UI Harness modules as your heart desires! ❤️‍🔥

Learn to build dapps with [Hyperverse](https://www.decentology.com/hyperverse) regardless of your coding skills. Join Decentology's [Discord](https://discord.gg/JpytNvQQRN) and discover new possibilities for web development and more!