Merge pull request #123 from open-source-labs/dev

Updated readme

.env

@@ -1,4 +1,4 @@
 APP_DEV=true
 BROWSER=non
 SKIP_PREFLIGHT_CHECK=true
-MONGO_LINK=
+MONGO_LINK=mongodb://localhost:27017

Dockerfile

@@ -1,4 +1,4 @@
-# FROM node:14
+# use node version 16.13
 FROM node:16.13
 RUN apt-get update && apt-get install \
     git libx11-xcb1 libxcb-dri3-0 libxshmfence-dev libdrm-dev \
@@ -9,47 +9,34 @@ RUN apt-get update && apt-get install \
     && apt-get clean && rm -rf /var/lib/apt/lists/*
 
 RUN useradd -d /spearmint spearmint
-#creates home directory for the user and ensures bash is default shell 
+
+# root here to bypass permissions, not the best way to do this 
 # USER spearmint
 USER root
-# root here to bypass permissions, not the best way to do this 
-WORKDIR /spearmint 
+
 # WORKDIR sets the working directory for subsequent commands
+WORKDIR /spearmint 
+
 COPY . .
 COPY package.json .
 
-# RUN npm run install-once
-# # RUN npm install
-RUN rm -rf node_modules
 # remove node modules from the file and only leave dependencies to be installed later 
-# RUN npm install -g npm@latest
-# USER node 
+RUN rm -rf node_modules
+# install node modules
 RUN npm install -force 
-# global configuration 
-# RUN npm install --save --legacy-peer-deps
-# "restor peer dependy instalatino behavrio from NPM v4 thru v6"
-# RUN npx electron-forge package
-# RUN npx electron-forge make
 RUN npx electron-rebuild -f -w node-pty
 
 
-# EXPOSE 3000
+# EXPOSE port 3001
 EXPOSE 3001
+
 # Electron needs root for sandboxing
 # see https://github.com/electron/electron/issues/17972
 USER root
 RUN chown root /spearmint/node_modules/electron/dist/chrome-sandbox 
 # adding additional layers to the image without deleteing the previos layer
 RUN chmod 4755 /spearmint/node_modules/electron/dist/chrome-sandbox
-# USER spearmint
-#commands to try to run using XQuartz 
-# RUN apt-get update && apt-get install -y firefox
-# CMD ["/usr/bin/firefox"]
-
-# ADD start.sh /
-# RUN chmod +x /start.sh
 
-# CMD ["/start.sh"]
+# USER spearmint
 USER root
 CMD bash
-# CMD npm run start

README-dev.md

@@ -0,0 +1,75 @@
+# How to use in development mode
+
+**Mac Developers**: Install Xcode 
+
+**Windows Developers**: Install Node.js globally, may also have to run Spearmint in admin mode. 
+
+1. Fork and clone this repository.
+2. Use node version 16.13: ```nvm use 16.13``` (make sure that you already installed v 16.13, ```nvm install 16.13```)
+3. ```npm install```
+4. Create a .env file in the root directory of the project
+5. Insert the following lines of code into the .env file
+    ```
+    APP_DEV=true
+    BROWSER=non
+    SKIP_PREFLIGHT_CHECK=true
+    MONGO_LINK=
+    ```
+6. Set MONGO_LINK to your MongoDB URI (ex: mongodb://localhost:27017)
+7. Make sure your MongoDB is running if it's hosted locally. 
+8. ```npm run rebuild``` 
+9. ```npm run watch``` on one terminal
+10. ```npm run start-dev``` on another terminal, make sure you also use node version 16.13 in this terminal. 
+
+
+
+# Build and Run image on Docker
+
+## Pre-requisites 
+- Mongo: Mongodb is used for authentication functionality. If you didn't use locally hosted mongodb URI in .env file, you may skip to the X server section. 
+
+    1. Add `172.17.0.1` and `0.0.0.0` to the network interfaces of mongo config file.
+
+        a. Open `mongod.cfg` (Usually located in C:\Program Files\MongoDB\Server\4.4\bin)
+
+            # network interfaces
+            net:
+              port: 27017
+              bindIp: 127.0.0.1, 172.17.0.1, 0.0.0.0
+
+     2. Run mongo on port 27017
+
+- X server
+
+    1. Download and run either [X410](https://x410.dev/) or [VcXsrv](https://sourceforge.net/projects/vcxsrv/)
+
+        * For X410, use the following configuration
+
+        ![x410 with display = 0](/public/x410.png)
+
+        * For VcXsrv: change the display number to 0, for other settings, use default. 
+
+        ![VcXsrv with display = 0](/public/VcXsrv.png)
+
+
+## Running the image 
+After running the mongo on port 27017 and running the x server with display number of 0, follow the steps below. 
+
+1. Build the docker image by running the following command
+
+    `docker build -t [image name] .`
+
+2. Run the docker image by using the following command: 
+
+    `docker run -e DISPLAY='host.docker.internal:0.0' -it -v [directory of project to be tested]:/[directory to create volume] [image name]`
+
+    - `-e DISPLAY='host.docker.internal:0.0'`: Set environment variable ‘display’ to host.docker.internal:0.0 
+
+    - `-it`: Run container as interactive
+
+    - `-v`: Creates a volume and mounts the testing application into the container. (ex: `-v [testing files]:[created volume]`)
+
+    *Please note that once the spearmint container is running, you can only access the folders that you mounted here.
+
+*Please note that the image uses root user, as shown in the Dockerfile.
+    

README.md

@@ -1,34 +1,14 @@
 ![](/public/spearmint_crop.png)
 
-Spearmint helps developers easily create functional Accessibility, Endpoint, GraphQL, Puppeteer, React, Hooks, Redux, Svelte, Vue, and Security tests without writing any code. It dynamically converts user inputs into executable Jest test code by using DOM query selectors provided by @testing-library.
+Spearmint helps developers easily create functional Accessibility, Endpoint, GraphQL, Puppeteer, React, Hooks, Redux, Svelte, Vue, Security, and now **_Solid.js_** tests without writing any code. It dynamically converts user inputs into executable Jest test code by using DOM query selectors provided by @testing-library.
 
 # Installation 
-Please download spearmint from our [website](https://www.spearmintjs.com/). Available for Mac OS, Windows, and Linux.
+Please download spearmint from our [website](https://www.spearmintjs.com/).
 
 
 # How to use in development mode
 
-**Mac Developers**: Install Xcode 
-
-**Windows Developers**: Install Node.js globally
-
-1. Fork and clone this repository.
-2. ```npm install```
-3. ```npm run watch```
-4. ```npm run start-dev```
-
-Note: Windows users may also have to run Spearmint in admin mode
-
-5. Create a .env file in the root directory of the project
-6. Insert the following lines of code into the .env file
-```
-APP_DEV=true
-BROWSER=non
-SKIP_PREFLIGHT_CHECK=true
-MONGO_LINK=
-```
-7. Set MONGO_LINK to your MongoDB URI
-
+Please refer to [README-dev.md](https://github.com/open-source-labs/spearmint/blob/main/README-dev.md)
 
 <br>
 
@@ -38,93 +18,55 @@ MONGO_LINK=
 
 1.  On the initial screen, a user is prompt to login, sign up (via OAuth or standard sign-up/login), or login as a guest. Once logged in, choose your file and load your application to start creating tests.
 
-![](/public/darkModeLogin.gif)
+![Demo of the login page](/public/LoginDemo.gif)
 
-2.  Utilize our auto-complete, drop-down options, and tooltips features to easily create arrangement, action, and assertion test statements for React, Vue, and Svelte; reducer, action creator, asynchronous action creator, and middleware test statements for Redux; and hooks, context, endpoint, and GraphQL test statements. Spearmint can save test templates for future use for logged in user (not guests). 
+2.  Utilize our auto-complete, drop-down options, and tooltips features to easily create arrangement, action, and assertion test statements for React, Vue, Svelte, and Solid; reducer, action creator, asynchronous action creator, and middleware test statements for Redux; and hooks, context, endpoint, and GraphQL test statements. Spearmint can save test templates for future use for logged in user (not guests). 
 
-![](/public/testingModal.png)
+![Demo of the show button](/public/ShowDemo.gif)
 
 3.  Spearmint will then convert user input to dynamically generate a test file. You can click the export icon on the nav bar to automatically save the test file in the **\_\_tests\_\_** folder to run test or to modify in the future.
 
-![](/public/saveTest.png)    
+![Demo of the save button](/public/SaveDemo.gif)    
 
 
 4.  Lastly click **Run Test** button and follow the guide on the popup and click what type of test you would like to perform.
-![](/public/runTest.png) 
-
+![Demo of the run button](/public/RunDemo.gif)
 
-5. The latest version of Spearmint adopted testing capability for Svelte and GraphQL. The [Svelte](https://testing-library.com/docs/svelte-testing-library/intro/) library has been utilized to test your Svelte application. 
+5. Spearmint v.0.11 now supports Solid.js, an up-and-coming front-end JavaScript library.
 
-![](/public/svelte.gif)
+![Screenshot of the solid panel](/public/demo.png)
 
-# New features with version 0.10.0
+# Containerization with Docker
+Spearmint is now available as an OCI-compliant container image via Docker. 
 
-* Testing capability for Svelte components
+Windows and Linux users may access Spearmint by running a Docker image.
 
-* GraphQL endpoint testing functionality
+Please pull down the image from [Docker hub](https://hub.docker.com/repository/docker/spearmintoslabs/spearmint) if you would like to run Spearmint on Docker. 
 
-* Google Oauth 
+![Screenshot of spearmint's docker hub webpage](/public/docker.png)
 
-* Facebook Oauth
+For developers: [README-dev.md](https://github.com/open-source-labs/spearmint/blob/main/README-dev.md)
 
-* Dependency refactoring
+# New features with version 0.11.0
 
-* Additional typescript component conversions
+* Testing capability for Solid.js components
 
-* Logout button
+* Optimized UI/UX features
 
-* UI/UX streamlining
-
-* Ample bug fixes
+* Containerization in Docker
 
 <br>
 
-<!-- # Demos
-
-### Guest login
-![](/public/demos/guest-login.gif)
-
-### Signup + login 
-![](/public/demos/pwlogin.gif)
-
-### Github Oauth login
-![](/public/demos/oauth.gif)
-
-### Facebook Oauth login
-![](/public/demos/oauth2.gif)
-
-### Google Oauth login
-![](/public/demos/oauth3.gif)
-
-### Vue Test
-![](/public/demos/vuetest.gif)
-
-### Svelte Test
-![](/public/demos/sveltetest.gif)
-
-### GraphQL Test
-![](/public/demos/graphqltest.gif)
-
-### Dark Mode + Upgraded UI/UX
-![](/public/darkMode.gif)
-
-### Save Test Functionality
-![](/public/saveTest.gif)
-
-### Run a security test 
-![](/public/demos/snyk-auth-testdep.gif)
-
-<br> -->
-
-
 # The Spearmint Team
 <hr>
 
 > Alan [@alanrichardson7](https://github.com/alanrichardson7) <br />
 > Alex [@apark0720](https://github.com/apark0720) <br />
 > Alfred  [@astaiglesia](https://github.com/astaiglesia) <br />
+> Anjanie [@anjaniemccoy](https://github.com/anjaniemccoy) <br />
 > Annie  [@annieshinn](https://github.com/annieshinn) <br />
 > Ben [@bkwak](https://github.com/bkwak) <br />
+> Chacta [@StaticShock93](https://github.com/StaticShock93) <br />
 > Charlie [@charlie-maloney](https://github.com/charlie-maloney) <br /> 
 > Chen(Chloe) [@chloelu29](https://github.com/chloelu29) <br />
 > Chloe [@HeyItsChloe](https://github.com/HeyItsChloe) <br />
@@ -134,7 +76,8 @@ MONGO_LINK=
 > Dave [@davefranz](https://github.com/davefranz) <br />
 > Deriante [@dsin16](https://github.com/dsin16) <br />
 > Dieu [@dieunity](https://github.com/dieunity) <br />
-> Eric [@ericgpark](https://github.com/ericgpark) <br />
+> Eric K. [@etkomatsu](https://github.com/etkomatsu) <br />
+> Eric P. [@ericgpark](https://github.com/ericgpark) <br />
 > Evan [@Berghoer](https://github.com/Berghoer) <br /> 
 > Gabriel [@bielchristo](https://github.com/bielchristo) <br />
 > Huy [@huyqbui](https://github.com/huyqbui) <br />
@@ -144,10 +87,11 @@ MONGO_LINK=
 > Julie [@julicious100](https://github.com/julicious100) <br />
 > Justin [@JIB3377](https://github.com/JIB3377) <br />
 > Karen [@karenpinilla](https://github.com/karenpinilla) <br /> 
+> Li [@delacour124](https://github.com/delacour124) <br />
 > Linda [@lcwish](https://github.com/lcwish) <br />
 > Luis [@Luis-KM-Lo](https://github.com/Luis-KM-Lo) <br />
-> Max B[@mbromet](https://github.com/mbromet) <br />
-> Max W [@MaxWeisen](https://github.com/MaxWeisen) <br />
+> Max B. [@mbromet](https://github.com/mbromet) <br />
+> Max W. [@MaxWeisen](https://github.com/MaxWeisen) <br />
 > Mike [@mbcoker](https://github.com/mbcoker) <br />
 > Mina [@alsdk850](https://github.com/alsdk850) <br />
 > Mo [@mhmaidi789](https://github.com/mhmaidi789) <br /> 
@@ -157,21 +101,21 @@ MONGO_LINK=
 > Owen [@oweneldridge](https://github.com/oweneldridge) <br />
 > Rachel [@rachethecreator](https://github.com/rachethecreator) <br />
 > Ruzeb [@Ruzeb](https://github.com/Ruzeb) <br />
-> Sean Y [@seanyyoo](https://github.com/seanyyoo) <br />
-> Sean H [@sean-haverstock](https://github.com/Sean-Haverstock) <br /> 
+> Sean H. [@sean-haverstock](https://github.com/Sean-Haverstock) <br /> 
+> Sean Y. [@seanyyoo](https://github.com/seanyyoo) <br />
 > Sharon [@sharon-zhu](https://github.com/sharon-zhu) <br /> 
 > Sieun [@sieunjang](https://github.com/sieunjang) <br />
 > Terence [@TERR-inss](https://github.com/TERR-inss) <br />
 > Tolan [@taoantaoan](https://github.com/taoantaoan) <br />
 > Tristen [@twastell](https://github.com/twastell) <br />
-> Tyler [@tytyjameson](https://github.com/tytyjameson)
+> Tyler [@tytyjameson](https://github.com/tytyjameson) <br />
+> Yeunha [@yeunhakim93](https://github.com/yeunhakim93)
 <hr>
 
 ***
 
 # If You Want To Contribute: 
 The following is a list of features + improvements for future open-source developers that the Spearmint team has either started or would like to see implemented. Or, if you have additional new ideas, feel free to implement those as well! 
-- Containerization with Docker
 - Exporting test files in TypeScript
 - Additional security testing functionality 
-- Dry refactoring of codebase
+- Dry refactoring of codebase