SECRET OF CSS

Web3 DevOps: Part 1— Compiling and Testing | by Donovan Brown | Jun, 2022


Web3 needs DevOps

Building a DevOps pipeline for the Ethereum blockchain

0*7JFZ lfDPEu7IFFp
Photo by Shubham Dhage on Unsplash

In the previous post of this series Web3 DevOps: The Series, I explained the motivation behind this series. In this post, we get started by scaffolding our application and learning how to compile and test it.

To begin we need a project. For this example, I will be using Truffle to scaffold my Distributed Application (dApp).

truffle unbox react myapp

This command created a project with a React front end and contracts written in Solidity. I wrote my tests in JavaScript so I deleted the TestSimpleStorage.sol file in the test folder. I also used NPM instead of Yarn, so I deleted the yarn.lock file from the client folder. With the project cleaned up I initialized and committed my code with git.

git init
git branch -m main
git add -–all
git commit -a -m “init”

I created a new branch named “blog/part1” for this post.

git checkout -b blog/part1

Before I got too far I wanted to determine how to compile, test and deploy the code locally using Truffle. I will duplicate these commands in the final pipeline.

Compiling

To compile the contracts, I ran the following command:

truffle compile

This created a new contracts folder under the client/src folder.

VS Code project window with contracts folder selected
New contracts folder under client/src folder

Because I will be compiling these files in my pipeline I added them to the .gitignore file for the client project. At the bottom of my .gitignore I added the following:

Changes to .gitignore

Once I knew how to compile the contracts I needed to test them.

Testing

I ran the test for my smart contracts with the following command:

truffle test

The test ran and succeeded but I noticed there was no results file. For the results to be displayed in my pipeline the test results must be in a file that can be published during the pipeline. The JavaScript tests run with Truffle use Mocha. I can configure Mocha to create a results file by updating the truffle-config.js file at the root of my project. Below the networks section, I added this block of code:

Mocha section of truffle-config.js

Now running the truffle test command, a TEST-results.xml file is created in the root of the project. This will be used to publish the results during my pipeline. This file should not be tracked by git so I added a .gitignore file to the root of the project and added TEST-results.xml to the file.

Adding TEST-results.xml to .gitignore

Building

With the contracts compiled and tested, I moved to building and testing the front end. Switching into the client directory, running the following command built the front end:

npm run build

Testing

With the front end built I ran the tests using:

npm test

Attempting to run the test, I quickly realized I had a problem. The front end is using Jest to run the tests and it prompted me for input.

Terminal showing Jest test framework prompting for input.
Jest prompting for input

This is not going to work in an automated pipeline. After some research I discovered that I could run the test by setting an environment variable, therefore letting Jest know it is being run in CI.

CI=true npm test

That worked but now I am back to the same problem I had before. I need a file with the test results. Getting a results file compatible with my pipeline requires the jest-junit package. Using npm I installed it and saved it as a dev dependency.

npm install --save-dev jest-junit

With the package installed I needed to add some arguments to my npm test command to generate the file.

CI=true npm test -- --reporters=default --reporters=jest-junit

This generated a junit.xml file. This file should not be tracked so at the bottom of my .gitignore file in the client folder I added the following:

With all the compiling and testing figured out, I committed all the changes.

git commit -a -m "compile and test"

Then I merged my changes into main.

git checkout main
git merge blog/part1

The next thing to do is deploy my smart contracts. I will cover that in the next post because that is where things get very tricky.

Credits

Editor: Chelsea Brown
Technical Review: Brian Benz



News Credit

%d bloggers like this: