guidewire-oss / fern-ui

UI for fern-reporter

Fern-UI

Introduction

Welcome to Fern-UI, the front-end of the Fern Test Report Generator. Fern-UI is an open-source React-based application designed to provide a visual dashboard for viewing and analyzing Ginkgo test reports. Built using the Refine framework, Fern-UI connects to the Fern-Reporter backend to display a comprehensive overview of test executions, their results, test insights and historical data.

Key Features

• Real-Time Test Report Visualization: View live test results and detailed reports directly from the Fern-Reporter backend.
• Historical Data Tracking: Access historical test data to monitor and review past test executions.
• Latency and Performance Metrics: Visualize the performance metrics captured by Fern-Reporter to identify bottlenecks.

Installation and Setup

Fern-UI is a React-based application that communicates with the Fern-Reporter API. Follow the steps below to set up and run Fern-UI.

Prerequisites

• Node.js environment
• NPM or Yarn package manager
• Running instance of Fern-Reporter Server. Please refer to Fern-Reporter setup instructions for more details.

Development

1. Clone the Fern-UI Repository: Clone the repository to your local machine.

   git clone [email protected]:Guidewire/fern-ui.git

2. Install Dependencies: Navigate to the project directory and install the required dependencies.

   cd fern-ui
   npm install
   # or
   yarn install

3. Configure API Endpoint: Update VITE_FERN_REPORTER_BASE_URL in .env to point to your running Fern-Reporter instance (this value is http://localhost:8080/api by default).

4. Start the Application: Run the front-end instance.

   npm run dev

Accessing the Dashboard

After starting the application, access the dashboard at http://localhost:5173/ (or your specified port).

Usage

Once the Fern-UI application is running, you can view and interact with test reports generated by Fern-Reporter. Expand each of the test runs to explore detailed test data and results.

Future Enhancements

• Data-Driven Analytics: Incorporating analytics to identify frequently failing tests and other insights.
• Coverage and Test Evolution Analysis: Offering insights into test coverage and evolution over time.
• Authorized Access to Test Reports: Implementing secure access controls for viewing test reports.

Contributing

Contributions to Fern-UI are welcome! Feel free to submit issues, feature requests, and pull requests on the Fern-UI GitHub repository.

License

Fern-UI is open-source software licensed under the MIT License. See the LICENSE file for more information.

---

For more information on setting up the backend, refer to the Fern-Reporter repository. To integrate the client into your Ginkgo test suites, visit the Fern-Ginkgo-Client repository.

Testing

fern-ui's Issues

Feat: Create a summary page with green/red boxes to show at the aggregate level with ability to drill down

Take this as an inspiration: https://github.com/vakenbolt/go-test-report?tab=readme-ov-file#understanding-html-test-report

We should start with a summary page that should show me the following:

1. List of Project names that I have access to
2. Each summary run of the project showing green or red ie. if we have a test that fails in any of the test suites part of a test run for that project, the box should be red, else it should be green
3. I should be able to click on a single box which represents a single test run which should take me to the detail page of that run showing all the test runs as we have it currently in the home page
4. When we hover over the green/red boxes, it should show how many tests passed out of total tests say for example if its a red box, it can show something like 30/32 (93.75%) etc

Feat: Enhance the test runs page

Improvements:

1. Sort the page in reverse chronological order so that the latest test runs should be listed in the beginning.
2. Maintain the state of the tags' colour so that each tag with the same name should have the same colour everywhere.
3. Test failure messages should be pre-formatted text and should be presented exactly as it is received from the API. Example: If the text has a newline character \n, the proceeding text should start from a new line.

Feat: Fern UI Auth

Add authentication that will authenticate and authorize a user based on the groups from their JWT. See the diagram below for details.

Feat: Integrate Fern UI with test insights

Update the Fern UI to support the display of the insights tab in the Fern Reporter (refer to guidewire-oss/fern-reporter#33 )

Chore: Add documentation to deploy to Kubernetes using Kubevela

Chore: Dynamically configure Fern backend URL

The URL for the Fern Reporter backend is currently hardcoded to http://localhost:8080/api. Update the app configuration to allow the developer to set the URL through an environment variable.

Feat: Add Dockerfile and Makefile to run Fern UI

Update the existing Dockerfile and add a Makefile to run the Fern UI

Chore: Need to update README with purpose of project

Feat: Insights Tab for AI insights

Background
We have an issue in the fern-ginkgo-client repository which focuses on the implementation of a feature which gives user the ability to select an AI enabled insights on their tests.

Scope of this Issue
We need to create an insights tab, which should be the place to show all the AI insights extracted from an LLM. refer to this issue or further details.