Disappearing VAT ID bug and undefined prices

This post is the part of the 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.

JavaScript has 6 primitive data types in the new ECMAScript 2015: boolean, number, null, string, symbol, and undefined. An undefined (value) is a primitive and is the sole value of the undefined type. Meaning a function without a return statement, or a function with an empty return statement returns undefined. In the case of our bug the form is trying to calculate an empty field.

For our bug of the week, we’re taking a look at a signup bug that shows an undefined message where a price should appear.

While testing the paid account creation on a file sharing site, one of our testers found a critical bug while performing website testing on a user sign-up form. The tester was attempting to sign-up for an annual subscription. They filled out all of their billing information: name, email, password, company name, address, ZIP code, city, country, and VAT ID number. Both company name and VAT fields were optional. The tester was able to accept the terms and conditions and click continue without any errors on the page.

The tester clicked the “complete your order” button and was redirected to the payment method page. The payment method page showed the cost for the subscription in the top right corner, as well as acceptable payment types. The tester clicked the “previous” button and returned to the complete your order page. At that time the “price” and the “total price” section displayed “undefined.” The tester was unable to complete the order. When the tester clicked the “update” link, they were redirected to the sign-up form, where the data entered into the VAT field had disappeared.

The bug was initially discovered on Windows 10, IE 11. However, it ended up being reproducible across browsers and platforms.

What we can learn from this bug is understanding the importance of properly validating fields when using Javascript primitive data types, like the VAT ID field. The VAT ID field refers to the  identification number of a business purchasing the upgrade / service. It is an alphanumeric string, a tax identifier. Certain businesses enters this to verify a certain tax status for invoices. It's optional during the signup process, because if a private person or a business without a VAT ID was purchasing it, they would not fill the field out.

Both the company name and VAT fields were optional in the signup form. However, only the value within the company name field was stored. The value in the VAT field disappeared after advancing to the next screen. It showed “undefined” where the VAT field calculation should appear on the “complete your order” screen. There also was no error message indicating anything wrong with the tester’s entry in VAT field, even though the tester entered an incomplete VAT ID. It is likely that the VAT value entered was ignored because it was an invalid format and also because the field was optional so it was not properly validated.

Here are some best practices if you have a Javascript signup form that uses optional fields. When setting up optional and required fields, ensure that both types of fields are properly validated.

As a company selling a service online, you don’t want to run the risk of accounting problems with improperly calculated prices and tax amounts, not to mention any potential tax penalties for you. Ensure that all fields are properly validated and calculated.