Ui Testing

Now that we've built our list published events endpoint, let's validate it works correctly by testing it through our user interface, where we'll see our events displayed on the landing page.

Setting Up for Testing

Before we begin testing in the browser, we need to ensure our application is running correctly:

1. Clean and compile the project to ensure everything is in order
2. Start the application
3. Navigate to http://localhost:5173 in your browser

Testing the User Interface

The landing page has been updated to showcase published events to attendees.

The page now features:

• A hero image at the top
• A login button
• Event cards displaying published events

Each event card shows:

• A placeholder random image
• The event name
• Venue details
• Event dates

An important aspect to test is that these events are visible without requiring authentication.

Verifying the API Call

We can confirm our endpoint is working correctly by examining the network traffic:

1. Open your browser's developer tools
2. Navigate to the Network tab
3. Filter to show API calls
4. Refresh the page

You should see a successful HTTP 200 response from api/v1/published-events.

The response includes events marked as published, with our test demonstrating that both "Test Event 3" and "Test Event 4" are visible.

To verify the authentication requirement is working as intended:

1. Log in as an organizer
2. Confirm you can see the same events in the organizer view
3. Log out
4. Verify the events remain visible on the landing page

Summary

• Tested the list published events endpoint works by using the user interface