Idea for UI Console for Test Generation demonstration

[sahadat-sk]

Hello everyone, I'd like to discuss my proposed design for the UI console for the test generation demonstration. Here's what I'm thinking:

The UI consists of three main sections:

1. API Section: Users can request different API endpoints and observe how keploy automatically generates tests by capturing those endpoints.

2. Console: This section displays what the tests will look like when recorded, as well as the output when tests are run.

3. Files Section: Here, users can see the files we are running tests for. This section contains pre-written code similar to the projects in the quickstart section of keploy documentation. Users can also view the new test files created when any API endpoint is hit.

These are my initial thoughts on the design. I welcome any suggestions or feedback.

Figma Link

[nehagup]

Hey @sahadat-sk ! 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 @sahadat-sk ! 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.

[sahadat-sk]

Hey @nehagup, I've created a prototype based on the wireframe. It allows users to view the project's file tree , alongside a config.yaml file for configuration. A vertical stepper guides users through the process, while basic terminal commands can be run to see sample outputs from keploy.
This prototype focuses on the record function but can be expanded to other sections like a 'test section' using a horizontal stepper. Additionally, we can display auto-generated test files to users.

Video Demo of the prototype:

keploy_ui_console.mp4

This isn't the final design; it's simply to demonstrate some of the application's functionality.
Do share your thoughts on this!!

[charankamarapu]

Hi @sahadat-sk providing the schema of the backend server for more context. Currently it is in REST but it will be migrated to graphql server soon

LANDING PAGE

Overview

This project is a Kubernetes-based code execution platform that supports various programming languages and offers functionalities for code submission. It is integrated with Keploy, allowing users to utilize Keploy's features such as test case generation, API mock recording, and more, directly within the platform.

Features

• Code Submission: Submit and execute code in Python, Golang, and JavaScript.
• Keploy Integration: Leverage Keploy features for automated test generation and API mocking etc.
• Submission Management: Create, edit, and delete code submissions.
• Real-time Logging: Stream command execution logs in real-time for monitoring purposes.

APIs

1. Submit Code

Endpoint: /submit-code
Method: POST

Body:

{
  "language": "PYTHON/GOLANG/JAVASCRIPT",
  "code": "<code_content>",
  "code_submission_id": "<submission_id>"
}

Usage:

• Creating a New Submission: To submit new code, provide the language and code content. The server will return a unique code_submission_id for this submission.
• Re-editing an Existing Submission: If you have a code_submission_id, you can resubmit with this ID to update the existing code. This is useful for iterative development and testing within the same environment.

Responses:

• Success: Returns the code_submission_id.
• 400 Bad Request: Invalid request body.
• 429 Too Many Requests: Max submission limit exceeded.

2. Run Command

Endpoint: /run-command
Method: POST

Body:

{
  "code_submission_id": "<submission_id>",
  "command": "<command_name>",
  "command_content": "<custom_command>",
  "test_set_name": "<test_set_name>",
  "test_case_name": "<test_case_name>",
  "report_name": "<report_name>"
}

Responses:

• Success: Command output or real-time logs stream.
• 400 Bad Request: Invalid request body or missing required fields.
• 404 Not Found: Submission ID does not exist or expired.
• 500 Internal Server Error: Failure in executing the command.

Available Commands and Usage in Run command API:

• command and code_submission_id are always required in the request body

1. Keploy Record

   • Command: RECORD
   • Usage: Starts the Keploy recording process.
   • Output: Real-time streaming logs of the recording process.
   • Required Parameters: None.

2. Keploy Test

   • Command: TEST
   • Usage: Initiates testing using Keploy.
   • Output: Real-time streaming logs of the testing process.
   • Required Parameters: None.

3. Run Application

   • Command: RUN_APP
   • Usage: Runs the application using the specified language command.
   • Output: Real-time streaming logs of the application execution.
   • Required Parameters: None.

4. CURL

   • Command: CURL
   • Usage: Executes a specified curl command within the pod.
   • Output: Output of the curl command execution.
   • Required Parameters: command_content - The curl command to be executed.

5. Fetch Test Sets

   • Command: FETCH_TEST_SETS
   • Usage: Retrieves a list of test sets available in the pod.
   • Output: List of test sets.
   • Required Parameters: None.

6. Fetch Tests List

   • Command: FETCH_TESTS_LIST
   • Usage: Fetches a list of tests within a specified test set.
   • Output: List of tests in the specified test set.
   • Required Parameters: test_set_name - Name of the test set.

7. Fetch Test

   • Command: FETCH_TEST
   • Usage: Retrieves a specific test case from a test set.
   • Output: Contents of the specified test case.
   • Required Parameters: test_set_name, test_case_name - Names of the test set and test case.

8. Edit Test

   • Command: EDIT_TEST
   • Usage: Edits the content of a specific test case.
   • Output: Confirmation of test edit.
   • Required Parameters: test_set_name, test_case_name, command_content - Names of the test set and test case, and the new content for the test.

9. Delete Test

   • Command: DELETE_TEST
   • Usage: Deletes a specific test case from a test set.
   • Output: Confirmation of test deletion.
   • Required Parameters: test_set_name, test_case_name - Names of the test set and test case.

10. Delete Test Set

    • Command: DELETE_TEST_SET
    • Usage: Deletes an entire test set.
    • Output: Confirmation of test set deletion.
    • Required Parameters: test_set_name - Name of the test set to be deleted.

11. Fetch Reports List

    • Command: FETCH_REPORTS_LIST
    • Usage: Retrieves a list of test reports.
    • Output: List of available test reports in the pod.
    • Required Parameters: None.

12. Fetch Report

    • Command: FETCH_REPORT
    • Usage: Retrieves a specific test report.
    • Output: Contents of the specified test report.
    • Required Parameters: report_name - Name of the report to be fetched.

13. Fetch Mock

    • Command: FETCH_MOCK
    • Usage: Retrieves the mock configuration for a specific test set.
    • Output: Mock configuration of the specified test set.
    • Required Parameters: test_set_name - Name of the test set for which the mock configuration is requested.

14. Delete Mock

    • Command: DELETE_MOCK
    • Usage: Deletes the mock file for a specific test set.
    • Output: Confirmation of mock file deletion.
    • Required Parameters: test_set_name - Name of the test set for which the mock is to be deleted.

3. Delete Code Submission

Endpoint: /delete-code-submission
Method: POST

Body:

{
  "code_submission_id": "<submission_id>"
}

Responses:

• Success: Confirmation of deletion.
• 400 Bad Request: Missing code submission ID in the request body.
• 404 Not Found: Submission ID does not exist or expired.
• 500 Internal Server Error: Failure in deleting the code submission.

[nehagup]

@sahadat-sk Please submit the repo of your prototype for review and start working on the proposal. Please see if you can work on a few more website repo issues to make your proposal stronger.

[sahadat-sk]

Providing the repository link here. Just a heads up, some features are missing or not functional yet. I'm currently addressing them.

[sahadat-sk]

Hi @charankamarapu, thanks for sharing the backend schema. Could you please share the backend server URL? It would help a lot with integrating it into the prototype. Thanks!

[its-kunal]

Hey @nehagup , @charankamarapu can you please review my prototype - Link

[its-kunal]

Hey @nehagup can you please provide feedback for my prototype? Link

[sahadat-sk]

Hey everyone, I was thinking this could be a possible design for the console,
Desktop view

Mobile view

Can you guys review them, and share your thoughts?
Thank you!!
Figma File Link: here

[its-kunal]

Hey @nehagup, please review my prototype. Also, I would be grateful if you could suggest changes to strengthen my GSoC proposal.