This post is part of a series on the test IO blog about real bugs that our testers have found during test cycles. In each post, we explore the details of the issue, explain its impact, and discuss what software teams can do to avoid similar problems.
Minus and Plus Buttons
In online shopping carts, minus (-) and plus (+) buttons are an additional interface element that can be used to increment or decrement item quantity, not as arithmetic symbols for calculations. When it comes to the quantity of products in a shopping cart, the numeric value is what is used to calculate the total price or other cart-related calculations. In user design, minus and plus buttons add a certain elegance and user-friendliness to the website. For example, without a minus or plus button a user may have to type the quantity in the text field and then use another button to update.
With the minus and plus buttons, the user can decrease and increase dynamically, as the plus and minus buttons give the user an option other than entering numbers manually. The front-end development process of shopping carts can be accomplished with HTML, CSS and Javascript. One of the important events when implementing plus and minus buttons is the event.preventDefault().
For our bug of the week, we’re taking a look at a bug on an ecommerce site that is preventing users from decreasing the quantity using the minus button.
Unable to decrease product quantity with minus button bug
While testing an ecommerce site, one of our testers found a bug during usability testing by attempting to decrease the quantity of an item in the shopping cart using the minus button. First, the tester added the items. In a separate step, the tester tried to remove those items by clicking the minus button. The tester then tried to increase the quantity with the plus button. The tester was able to increase the quantity with the plus button, but was not able to decrease the quantity with the minus button.
The bug was initially discovered on Mac OS 10.10, Safari. However, it ended up being reproducible on multiple devices and versions of iOS.
Lessons learned and best practices from test IO
This bug highlights the importance of properly implementing your shopping cart behavior on the front-end. If you’re using HTML, CSS, and Javascript you must ensure they are properly implemented, along with your plus and minus button event.preventDefault() event. You’ll set up your <div> using HTML, which will include things like minus/plus buttons, product images, product descriptions, and total price. CSS will include the styling for the cart, within the <body> tags will be your font type, color, and width for the cart.
For the main course you will implement your Javascript. The Javascript will house all of your click events. In addition to setting up the (OnClick) for your plus and minus buttons, you will have to be sure that they both have event.preventDefault() beneath the click function. The plus and minus buttons work in conjunction with the numeric quantity field. If there is a value in the product quantity field, the event.preventDefault() for the minus button should not do anything. However, if there is a quantity in the field the minus button should decrease. If there is no value in the quantity field the event.preventDefault() for the plus button should increase the value and vice versa.
In this case, the minus button may not have worked because the event.preventDefault() ignored that there was a value in the quantity field, which could have been the result of an issue with (OnClick).
GET IN TOUCH
Learn More About Test IO
Our testing experts stand ready to address your most challenging QA initiatives. If you’re interested in becoming a freelance tester, click here.