CS 312 - Software Development

CS 312 - Practical Two

Goals

  • Enhance a React application created with Create Next App
  • Practice integration via GitHub pull request (PR)
  • Use a CI server (Travis CI) to test a PR before integration
  • Deploy an application to a PaaS (Heroku)

Today you will add a feature to the color picker to enable the user to enter the color component by number. As part of that process we will practice testing, CI and automated deployment. Check out a deployed version of the final result.

Prerequisites

  1. Click through to the GitHub classroom assignment to create your private repository.

  2. Clone the newly created repository to your computer. Then clone that newly created repository to your local computer as you have done previously. To do that, click the green Code button on GitHub. Copy the URL. In the terminal, go to where you would like the repository to live (you don't need to make a new directory for it -- it will crate one for you). Run git clone copied URL. For me, that would be git clone https://github.com/csci312-f20/practical02-ChristopherPAndrews.git.

  3. Install the package dependencies by running npm install inside the root directory of the newly cloned repository.

  4. Before making any changes, verify that the current tests pass by running npm test.

    The skeleton includes a basic test that simulates changing the slider and checks that the background of the color swatch is updated. We will learn more about this kind of behavioral testing for React applications soon. In the meantime, we will just use these tests to experiment with Continuous Integration (CI).

  5. Travis CI should start testing your application automatically (it detects the .travis.yml file). When getting started, you should have signed up for a Travis CI account.

Note that you may need to click on your name in the upper right hand corner to see the repositories, then "Sync Account" so that Travis is aware of your newly created repository. Even after syncing the list of repositories doesn't always update and so you need to use the search function to show the repository (search for "react"). If you do not have a Travis CI account setup or can't see your repository check in with the instructors.

Enhancing the color picker with controllable number

Before you make any changes, create a feature branch named "editable-number" to segregate your modifications from the master branch:

git checkout -b editable-number

You can practice with the two ways to test your progress.

The informal way is to fire up the development server so you can see your changes in real-time. You can start the development server with npm run dev.

The test suites can be run with npm test. Currently, the tests should all pass, but only because most of them have been skipped. Got into 'ColorPicker.test.js' and remove the .skip from the skipped tests. The new tests should now fail.

You are now ready to replace the existing <span> elements with <input> elements, specifically a number input element. Modify ColorPicker.js. Your numerical input will be very similar to its slider counterpart, i.e. its value should be controlled by the React state (so that all the elements that depend on or modify that value remain in sync), it should update the color component as specified, and have appropriate min and max values.

Verify that your numerical input works as specified. When it does, terminate the development server Ctrl + c.

Run the tests again. They should now be passing.

We will learn more about how these tests work later in the course. For context, the new test code finds the newly added <input>s, asserts that their values were updated by the sliders and then changes the color via the newly added numeric inputs. If the numeric inputs are implemented correctly in your React component, those changes should update the color swatch (the final expectation).

Once the tests pass, you are ready to integrate and ultimately deploy your changes.

Integration with Travis CI

Add and then commit your changes to the editable-number branch, e.g. git commit -a -m "Transition span to numeric input". Push those changes GitHub on the editable-number branch.

git push origin editable-number

Open your repository at GitHub and create a pull request (PR) to merge the changes from your newly pushed editable-number branch onto the master branch. You should be able to create the PR on the main page of your repository or alternately you can create a PR from the "Pull request" tab.

Navigate to the page for your PR. Here you should see the notifications from Travis CI. Make sure all checks have passed before merging the changes into the master branch (note that it may take a few minutes for the Travis checks to complete, especially with the entire class creating PRs at the same time). Once you have merged the changes you can delete the feature branch on GitHub using the button that replaces the 'Merge' button.

Clean up your local repository after the merge. Return to the master branch on your local computer, pull the changes from GitHub pruning deleting remote tracking references. Then delete your local branch. To avoid mistakes when deleting branches, you can add the --dry-run option to the --prune option, e.g. git pull --prune --dry-run to double check before actually pruning anything (note this doesn't do anything, it will just report what would happen -- you still need to run the command without the --dry-run option). The command sequence is:

git checkout master
git pull --prune
git branch -d editable-number

Deploy with Heroku

You are now ready to deploy your updated application. When getting started, you should have signed up for a Heroku account and installed the command line tool.

Log in

heroku login

Create your application via

heroku create

then push your application to Heroku to deploy your new color picker

git push heroku master

and then open your newly deployed application

heroku open

You have now successfully completed an integration and deployment cycle!

Finishing Up

Your GitHub repository should already be "up-to-date" as a result of the pull request. If you have made any subsequent changes, push your completed practical to GitHub via git push --all origin. Then submit your repository to Gradescope as described here.