implemented E2E suite for multi-file upload, state resets, and UI ins…

[stephenOwino]

This PR adds a Playwright testing suite for the Upup uploader component to automate manual checks and catch regressions early.

What was added:
E2E Framework: Set up a Page Object Model (POM) structure for cleaner, reusable tests.

Test Coverage:

Initial state: Checks that upload instructions display correctly.

Multi-file upload: Validates the component's 10-file limit.

State reset: Confirms "Remove all files" resets the UI.

Bug Documentation: Added a failing test for the "Upload" button, which remains active after a click.

How to run
Ensure Storybook is running on port 6007.

Run pnpm run test:e2e from the packages/upup directory.

[codesandbox]

Review or Edit in CodeSandbox

Open the branch in Web Editor • VS Code • Insiders

Open Preview

[AminDhouib]

Hi @stephenOwino thank you so much for your pull request!

Added a failing test for the "Upload" button, which remains active after a click. Thanks for spotting that issue. If you want, feel free to fix the issue and submit a separate pull request to address it. Let us know if you need any help. You can reach out to us in our Discord server: https://discord.com/invite/ny5WUE9ayc

There are also some failing checks on this PR; please make sure those are addressed so we can consider merging these tests.

[AminDhouib]

An additional note: I changed the PR to point to the dev branch rather than pointing directly to the master branch.

[stephenOwino]

@AminDhouib thanks for the feedback.!

I've submitted PR #300 to fix the issue.The upload button visibility bug. The button was remaining visible (though disabled) after upload failures due to the condition in FileList.tsx only checking for successful uploads.

While testing locally without S3 environment variables configured, uploads fail with a 500 error. This failure scenario revealed that the upload button was staying visible instead of disappearing.

The fix ensures the button hides for both SUCCESSFUL and FAILED states.
I'll address the failling checks separately and do the updates.
Thanks!

[stephenOwino]

test.mp4

the problem

The tests were previously failing because they attempted to communicate with a live /api/upload endpoint. Without the correct environment variables , the requests failed (500 errors)

my solution

Implemented Playwright page.route to mock successful 200 OK responses for all upload actions. This ensures the UI receives the "Success" signal regardless of the environment.

[BSalaeddin]

Thanks for the PR @stephenOwino !
I made a few follow-up tweaks on top (reusable mock upload fixture to reduce duplication, env loading for local e2e runs, and Storybook port alignment). If you disagree with any of these changes, let me know; otherwise, I’ll move forward with the merge.

[stephenOwino]

@BSalaeddin Felle free to merge!

thanks for the improvements!
the reusable mock fixture is a great,
The env loading and port alignment make perfect sense too.