Acceptance Test the Shopping Cart (Part I)

Test scenarios

All the code for our shopping cart is in place. We’ll walk through a few different scenarios and ensure the cart works as expected in each. We would be performing these tests incrementally as we build the system, but it’s essential to run through all of the scenarios again when the code is complete.

Our test scenarios revolve around the requirements—we’ll combine multiple requirements into a single scenario to quickly work through our acceptance tests. We won’t test what happens after clicking the purchase button to keep things concise.

Our first scenario will test the add and remove item features.

First scenario

We’ll follow the same pattern outlined in the Section Break Your Application with Acceptance Tests: define the test, write steps for the test, write expectations for the test, and execute the test. Our first test will hit on most requirements except for out-of-stock notifications.

Define the test

A shopper is connected to the store, waiting for the shoes to be released. The shoes are released, and the shopper adds each shoe to their cart. The shopper removes one of the shoes from their cart. The shopper closes the page and re-opens it. The shopper opens a second tab. The shopper removes all items from their cart and then adds two sizes of each shoe. The shopper clicks the checkout button.

Write steps for the test

1. Start the server in a freshly seeded state.
2. Load the webpage.
3. Release both shoes.
4. Add size 6 of the top shoe and size 10 of the bottom shoe.
5. Remove the size 10 shoe.
6. Navigate away from the current page to educative.io.
7. Navigate back to your webpage.
8. Open a second tab of your webpage.
9. Remove all items in the cart by clicking on the “×” symbol from the second tab.
10. Switch to the first tab.
11. Add any two sizes from each shoe—four total.
12. Click the checkout button.

Write expectations for the test

1. The shopper sees “coming soon” and no cart after step 2.
2. The shopper sees the size selectors after step 3.
3. The shopper sees two items in their cart after step 4.
4. The shopper sees one item in their cart, size 6, after step 5.
5. The shopper sees each cart matches the other after step 8.
6. The shopper sees that each tab has an empty cart (it disappears) after step 10.
7. The shopper sees four shoes in their cart after step 11.
8. The shopper sees the shoes they selected on the checkout page after step 12.

Acceptance tests can get lengthy, like this one. It’s crucial to ensure that all behavior works as expected, even if an area of the application wasn’t affected by the current changes.

Let’s use the following instructions to execute the test. If one of the shoes we’re supposed to add is sold out, which can happen due to the random seed, then select a different available size.