Ui Testing

Watch Code

In this lesson, we'll test our ticket purchasing functionality through the user interface to verify the purchase flow works correctly and validate both the frontend and backend components work together properly.

Testing Through the UI

The first step in testing our ticket purchase functionality is to start our backend application.

We'll begin by cleaning and compiling our project using Maven, then starting the Spring Boot application.

Once the application is running, we can access the attendee landing page in our browser.

Here's the sequence of steps to test the ticket purchase:

Select an event from the landing page
Choose a ticket type (e.g. standard entry)
Open browser dev tools to monitor network requests
Click "Purchase Ticket" button
Login with attendee credentials
Enter mock payment information
Complete purchase

Troubleshooting Issues

When testing the purchase flow, we may encounter errors that need debugging.

If you receive an HTTP 500 error after attempting to purchase, check the server logs.

In our case, we discovered a null pointer exception in the QrCodeService due to a missing final keyword on the repository field.

After fixing the code and restarting the server, the purchase flow should complete successfully with an HTTP 204 response.

Verifying the Purchase

To confirm the ticket purchase worked correctly:

-- Check the tickets table
SELECT * FROM tickets;

-- Check the QR codes table
SELECT * FROM qr_codes;

When examining the database records, verify:

The purchaser ID matches the logged in user
The ticket type ID matches the selected ticket
A QR code was generated and stored
The timestamps are correct

Summary

Fixed NPE bug
Created a ticket in the database
Created a QRCode in the database