Ui Testing

In this lesson, we'll verify that our get event endpoint functions correctly through the user interface.

By testing through the UI, we can ensure our endpoint not only returns data but also that the data is correctly displayed to users.

Testing the API Response

First, let's prepare our development environment:

Clean and compile the project to ensure no issues with Lombok or MapStruct:

./mvnw clean compile

You may notice some warnings about the use of builder, but since we're not using that feature, we can proceed.

Start the application and navigate to the organizer's landing page.
After logging in, go to the "Create an Event" page where you'll see your existing events.

Examining the Network Traffic

When clicking the "Edit" button for an event, we can observe the API request:

Open your browser's Developer Tools (F12) and select the Network tab
Click the "Edit" button for Test Event 2
Observe the GET request:

URL pattern: api/v1/events/{uid}
Response status: HTTP 200
Response body contains:

{
  "id": "...",
  "name": "Test Event 2",
  "start": "...",
  "end": "...",
  "venue": {...},
  "published": false,
  "ticketTypes": [...],
  "createdAt": "...",
  "updatedAt": "..."
}

Verifying UI Display

The UI should correctly display all event details:

Event name
Event dates
Venue information
Sales period dates
Ticket types (including capacity)
Publication status

The fact that all this information displays correctly confirms that:

The API endpoint is working
The response format is correct
The UI can properly parse and display the data

Summary

Tested the get event endpoints works in the user interface