Skip to content

Added unit tests for frontend#104

Open
HarK-github wants to merge 18 commits intogittuf:mainfrom
HarK-github:main
Open

Added unit tests for frontend#104
HarK-github wants to merge 18 commits intogittuf:mainfrom
HarK-github:main

Conversation

@HarK-github
Copy link
Copy Markdown

@HarK-github HarK-github commented Mar 31, 2026

Description

References Issue: #31
This pull request introduces the initial automated end-to-end test suite for the gittuf Security Explorer using Playwright. As these are the first E2E tests for the project, the focus is on establishing foundation for testing repository selection, commit browsing, and metadata visualization.

Key features of this initial setup:

  1. Base Repository Selection Logic
    Established the core flow for connecting to repositories. The tests are designed to handle the transition from the initial landing state to a "Connected" state, ensuring the UI has successfully processed repository metadata before proceeding.
    For testing purposes, demo repository is used to generate interactions.

  2. Commit Browsing and Analysis
    Created the first tests for the commit list component. These include logic to ensure the "Browse Commits" view is correctly populated and accessible, even when application defaults might trigger automatic transitions to other views.

  3. Visualization Rendering Foundation
    Introduced specialized tests for the Trust Graph and JSON Tree View. These tests implement wait-logic for loading overlays and verify that the complex rendering components (Canvas and SVG) are correctly initialized in the DOM.

  4. Resilient Synchronization Patterns
    Given the variable latency of Git operations, this setup implements strategic timeouts and visibility checks. By avoiding static sleeps and instead waiting for specific UI markers, the suite provides a stable framework that reduces flakiness in CI environments.

AI Usage

  • I did use generative AI in some form in making the content of this pull request. I have described my use of AI below.

I used generative AI to help diagnose race conditions between the React state transitions and the Playwright test runner during this initial setup. The AI provided guidance on utilizing role-based locators. I manually reviewed all outputs, aligned them with Playwright best practices, and integrated the logic into the final test code to ensure a high-performance testing foundation.

Contributor Checklist

Signed-off-by: Harshit Kandpal <kandpalhar@gmail.com>
Signed-off-by: Harshit Kandpal <kandpalhar@gmail.com>
Signed-off-by: Harshit Kandpal <kandpalhar@gmail.com>
Signed-off-by: Harshit Kandpal <kandpalhar@gmail.com>
Signed-off-by: Harshit Kandpal <kandpalhar@gmail.com>
Signed-off-by: Harshit Kandpal <kandpalhar@gmail.com>
@HarK-github
Copy link
Copy Markdown
Author

@patzielinski please review

Copy link
Copy Markdown
Collaborator

@patzielinski patzielinski left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for opening this, @HarK-github.

In addition to the items that I've flagged, please also check off the appropriate boxes in the pull request template (the checklist was left empty).

Once you've addressed these items, I'm going to take a second review pass. Let me know if you have questions. Thanks!

- name: Run Playwright tests
run: npx playwright test
- uses: actions/upload-artifact@v4
if: ${{ !cancelled() }}
Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What is this line for?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is for uploading the test reports. In this case it will upload and store tests reports regardless of whether if it fails or pass.

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, but why is there the if statement?

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add this as another job to the Frontend CI?

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bump on this?

Copy link
Copy Markdown
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please check.

@HarK-github HarK-github requested a review from patzielinski April 1, 2026 18:27
@HarK-github
Copy link
Copy Markdown
Author

@patzielinski could you please review remaining code

@HarK-github
Copy link
Copy Markdown
Author

@patzielinski I have fixed some tests and frontend ci is running the tests successfully .

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants