Adding the React UI console for testing.

[Aditya-eddy]

Hey Keploy Community,
Creating a react UI console for testing will be a big plus for testing with keploy.
I've created a very basic react website. Which Will provide the onine testing.

1. Created a HomePage for website. (/test-generator)
   
2. Created different Tests for the User according to language they want to perform in.
   
3. I've also created a Editor (CodeMirror) and Terminal for the keploy.
   
   

Terminal takes the following command:-record,test,clear and if there is command entered by user it return not found.
Currently It has a very basic UI but will be working on it.
I've also addded the Tutorial section which will tell the user about the commands and How he can perform the testing.
I've also kept it styling according with the blog-website but can also be changed.
Will be waiting on feedback from you guys. Thanks!!

[Aditya-eddy]

Hey Everyone. Today I tried to give it replit like feel. I think these approach will be more suitable with results that we want.

1. Make editor and terminal side by side. Gave them both Monokai theme. (Can be change if we want a lighter theme). I Have also made them have some code depending on their language already. Both the console and editor are working.
   Will working more on the UI.
   One question I have is will this website move into direction of a dark theme or light theme Intitally? Will be waiting on feedback. Thanks!!
   
   

[Aditya-eddy]

Hey everyone Today created a new UI for the cards displaying the Index. Where will be displaying all the tests Present. I'll attach the video with the comments. Please review when you get to it.
Screencast from 05-03-24 04:14:29 PM IST.webm

[nehagup]

Hey @Aditya-eddy ! We're working internally to define the requirements for this project better. Please allow us a few days to get back to you on this.

[nehagup]

Hi @Aditya-eddy here's a very high-level wireframe/idea of how we're planning to place the components. Please note that after the discussions we've decided not to move forward with the separate code-sandbox development, we believe that can be done leveraging existing sandboxing tools.

This project will majorly revolve around adding this Auto-Test generation demo/play area on the keploy website only.

While you can add the styling, animations and other vanity things later, it's advised to build a prototype for the above design and become aware of the scenarios that can happen in this playground.

[Aditya-eddy]

Okay @nehagup this seems exiciting.

[Aditya-eddy]

Hey Everyone, By taking the functionalities listed above in consideration I will describe the features of the project given below.
(Screenshot attached Below)

1. For the Side Tree:-
   I have taken the general medhot of making a side tree by dividing them in following format of rootDir-
   let rootDir: Directory = { id: "0", name: "root", parentId: undefined, type: Type.DIRECTORY, depth: 0, dirs: [], files: [] };
   Hence displaying the Side Tree won't be a problem. For fetching the data in the side tree I would recommend using socket or any low latency bidirectional communication here. It'll be helpful.

2. Code Editor:-
   Code Editor is monaco code editor. Whenever we click anything on the side tree the content will be displayed in the code editor. Currently It supports one tab but that can be fixed for later.
   From Code Editor we can send the data to the backend by saving the file.

3.Terminal
I have taken the Terminal from the previous designed model. For sending commands and receiving the data.
We can type the command in the terminal which will trigger the backend to do the Following process. Also socket will provide high speed. which will be using in fetching data.

4. Content Area:-
   I have not defined much here just wrote some dummy text. Progess Bar and Language button are still remaining.

Overview:-
First the user will select the language and based on that language some files will fetched and shown in the side-tree.Upon clicking on it user can edit the file. Edited file will be send to the backend and saved their. Then the user can run commands on the terminal triggering the backend to send logs,test etc.

FeedBack
Please guide me on this. Correct me anywhere I am wrong or where I can improve. Will waiting from feedback from you guys. Thanks.

ScreenShot:-

cc:- @nehagup , @Hermione2408, @charankamarapu

[nehagup]

@Aditya-eddy Please submit the repo of your prototype for review and start working on the proposal.

[Aditya-eddy]

Hey everyone I am excited to announce that the react console can now capture test Cases. I'll attach the demonstration below.
What I have done is created a scrappy backend to give us a glimpse how will the react console would look like. Ofc many functionalities are still left and I have done this using express-mongo only.
It's a prototype which will help us in the future for online test-case generation.
I'll make the repo public soon.
Screencast from 20-03-24 09:44:11 AM IST.webm

Feedback would be appreciated from you guys.
cc - @nehagup , @Hermione2408 , @charankamarapu .

[charankamarapu]

I think the commands which are present in your demo like curl, fetch. I think either we have to provide exact commands like "keploy record -c "xxxx" " or may be provide a button each action and once you press that button that command will be ran in the terminal. I am suggesting this because users may get confused between the original commands like "keploy record -c "xxxx" " and UI specific commands which you have showed in the demo.

[Aditya-eddy]

Yes I have just made these commands for ease. They can be changed easily! . For fetching and saving the data we can create a button for it.

[Hermione2408]

Hey instead of copy pasting the commands , I was also thinking the same as @charankamarapu suggested to use record,replay buttons that will directly execute the commands, that would bring the number of user actions required to execute a command from 3 to 1.

[Aditya-eddy]

Okay I'll add the original commands and specific buttons for fetching the data ,running the keploy and testing with keploy.

[Aditya-eddy]

Hey @charankamarapu , @Hermione2408 taking the feedback from you guys. Add a task bar. First I'll attach the video for recording.

1. Here I have demonstrated the recording of the task cases. Added the task bar with record,test,stop,fetch. (ps-Sorry for laggy Video).
   good.webm
2. Here I have attached the screenshots when the testsing is started in the application. It will create a log file in the directory and percentage fo the testing with jest and combined converage has been stated here.
   
   
   

• Next I am thinking of the keploy record test -c "xxxx" functionality and add a graph for combined test Coverage in the Side content
• Then I would probably extent it to other application Go-test, J-unit,Py-Test.

Feedback would be Appreciated from you guys.

[Aditya-eddy]

Hey Mentors I have the published the repo here.
Please give your feedback on it.
cc- @nehagup , @Hermione2408 , @charankamarapu

[nehagup]

@Aditya-eddy can you please submit the code for review? You can share it in a personal repo for now.

[Aditya-eddy]

Here is the Protoype's link.