Merge pull request #43 from oslabs-beta/JIB3377-patch-1

Updated Readme document

Author: MaxWeisen

README.md

@@ -2,7 +2,33 @@
 
 Spearmint helps developers easily create functional React/Redux/Endpoint/Paint Timing tests without writing any code. It dynamically converts user inputs into executable Jest test code by using DOM query selectors provided by @testing-library.
 
-# How to use
+# Installation 
+Please download spearmint from our [website](https://www.spearmintjs.com/). Available for Mac OS, Windows and Linux.
+
+
+# How to use in development mode
+
+### For Mac developers
+
+**Prerequisite**: Install Xcode 
+
+First install
+1. Fork and clone this repository.
+2. ```npm run install-once```
+3. ```npm run start```
+
+***
+
+### For Windows developers
+
+**Prerequisite**: Install Python and Microsoft C++ Build Tools.
+
+In an Administrator PowerShell run the following command:
+```choco install python visualcpp-build-tools -y npm config set msvs_version 2017```
+        
+1. Fork and clone this repository.
+2. ```npm run install-once```
+3. ```npm run start-windows```
 
 Download spearmint @ spearmintjs.com. Available for Mac OS, Windows and Linux.
 
@@ -15,51 +41,64 @@ Mac users:
 <br>
 
 
-
-
 # How it works
 
-1.  On the initial screen, enter the URL of your project and load your application to start creating tests.
 
-![](https://lh4.googleusercontent.com/CAFpoefRUUxgNosudQuc7gabSReFiI_puZ_WTjrzUSzB6pgOUdQ1babF2mxJql2lC8TQ-jjVLOgG5Qka8SUfF2fi-u2H9xSP7rZ_0Udpj-ISFPAY028UYKIUZcgOApnipVZwE7xh)
+1.  On the initial screen, load your application to start creating tests.
+
+![](/public/mainPage.JPG)
 
 2.  Utilize our auto-complete, drop-down options, and tooltips features to easily create arrangement, action, and assertion test statements for React; reducer, action creator, asynchronous action creator, and middleware test statements for Redux; and hooks, context, and endpoint test statements.
 
-![](/public/newReact.png?raw=true)
+![](/public/generateTest.JPG)
 
-3.  Refer to the browser view of your app that is displayed on the right to quickly identify values for your selectors and use the file directory to open up a code editor view to easily refer to your codebase for props information.
+3.  Spearmint will then convert user input to dynamically generate a test file, which you can click export icon on the left nav bar to automatically save the test file in the **\_\_tests\_\_** folder.  
 
-4.  Spearmint will then convert user input to dynamically generate a test file that will be saved inside a **tests** folder, which you can use to run ‘npm test’ on.
 
-![](/public/testfile.png?raw=true)
+4.  Lastly click **Run Test** button and follow the guide and click what type of test you would like to perform
+![](/public/runTest.JPG) 
+
+5.  Optionally, accessibility lenese have been added in the app to give developers with different mismatches various options to interact with the app. 
+![](/public/AccLens_Demo.gif)
 
 <br>
 
+
+# Demo
+
+![](/public/AccLens_Demo.gif)
+
+***
+
 ### The Spearmint Team
 <hr>
 
 > Alex [@apark0720](https://github.com/apark0720) &nbsp;&middot;&nbsp;
 > Alfred  [@astaiglesia](https://github.com/astaiglesia) &nbsp;&middot;&nbsp;
 > Annie  [@annieshinn](https://github.com/annieshinn) &nbsp;&middot;&nbsp;
 > Ben [@bkwak](https://github.com/bkwak) &nbsp;&middot;&nbsp;
-> Charlie [@charlie-maloney](https://github.com/charlie-maloney) <br />
+> Charlie [@charlie-maloney](https://github.com/charlie-maloney) &nbsp;&middot;&nbsp; <br />
 > Chloe [@HeyItsChloe](https://github.com/HeyItsChloe) &nbsp;&middot;&nbsp;
 > Cornelius [@corneeltron](https://github.com/corneeltron)  &nbsp;&middot;&nbsp;
 > Dave [@davefranz](https://github.com/davefranz) &nbsp;&middot;&nbsp;
-> Evan [@Berghoer](https://github.com/Berghoer) &nbsp;&middot;&nbsp;
-> Gabriel  [@bielchristo](https://github.com/bielchristo) <br />
+> Dieu [@dieunity](https://github.com/dieunity) &nbsp;&middot;&nbsp;
+> Evan [@Berghoer](https://github.com/Berghoer) &nbsp;&middot;&nbsp; <br />
+> Gabriel [@bielchristo](https://github.com/bielchristo)
 > Johnny [@johnny-lim](https://github.com/johnny-lim) &nbsp;&middot;&nbsp;
 > Julie [@julicious100](https://github.com/julicious100) &nbsp;&middot;&nbsp;
-> Karen [@karenpinilla](https://github.com/karenpinilla) &nbsp;&middot;&nbsp;
+> Justin [@JIB3377](https://github.com/JIB3377) &nbsp;&middot;&nbsp;
+> Karen [@karenpinilla](https://github.com/karenpinilla) &nbsp;&middot;&nbsp; <br />
 > Linda [@lcwish](https://github.com/lcwish) &nbsp;&middot;&nbsp;
-> Luis [@Luis-KM-Lo](https://github.com/Luis-KM-Lo) <br />
+> Luis [@Luis-KM-Lo](https://github.com/Luis-KM-Lo) &nbsp;&middot;&nbsp;
+> Max [@MaxWeisen](https://github.com/MaxWeisen) &nbsp;&middot;&nbsp;
 > Mike [@mbcoker](https://github.com/mbcoker) &nbsp;&middot;&nbsp;
-> Natlyn [@natlynp](https://github.com/natlynp) &nbsp;&middot;&nbsp;
+> Mo [@mhmaidi789](https://github.com/mhmaidi789) &nbsp;&middot;&nbsp; <br />
+> Natlyn [@natlynp](https://github.com/natlynp) &nbsp;&middot;&nbsp; 
 > Nick [@nicolaspita](https://github.com/nicolaspita) &nbsp;&middot;&nbsp;
 > Rachel [@rachethecreator](https://github.com/rachethecreator) &nbsp;&middot;&nbsp;
-> Sean [@sean-haverstock](https://github.com/Sean-Haverstock) <br />
-> Sharon [@sharon-zhu](https://github.com/sharon-zhu) &nbsp;&middot;&nbsp;
+> Sean [@sean-haverstock](https://github.com/Sean-Haverstock) &nbsp;&middot;&nbsp; <br />
+> Sharon [@sharon-zhu](https://github.com/sharon-zhu) &nbsp;&middot;&nbsp; 
 > Sieun [@sieunjang](https://github.com/sieunjang) &nbsp;&middot;&nbsp;
 > Tolan [@taoantaoan](https://github.com/taoantaoan) &nbsp;&middot;&nbsp;
-> Tristen [@twastell](https://github.com/twastell) <br />
-<hr>
+> Tristen [@twastell](https://github.com/twastell) 
+<hr>