Testing Triangles: a Classic Exercise Updated for the Web

I answered Matthew Heusser’s Testing Challenge in my last post.  I figured it was my turn to issue one.

The “Triangle Program” is a classic testing puzzle first published in Glenford Meyer’s The Art of Software Testing in 1979. In the 1979 book, Glendford Meyer envisioned the program using punchcards for input and output. I’ve rewritten the program for the modern age: here’s a JavaScript version.

This version of the program takes as input three numbers representing the size of the sides of a triangle. When the user clicks “Draw” the program draws a picture of the triangle with the size of the sides shown in proportion and also displays the type of triangle.

Given that description, and whatever wacky (or realistic) test cases you can imagine, I challenge you to go forth and test!  And if you feel so inclined, I invite you to report bugs you find here in the comments.  (Remember to document your bugs well enough that someone else can reproduce them.)

30 thoughts on “Testing Triangles: a Classic Exercise Updated for the Web

  1. 1) Enter “asdf” in all fields
    2) Click “Draw”
    3) Expect error message “Invalid Input”, but get triagle type of “Scalene” and a blue “line” drawn across the bottom of the drawing region.

  2. Hey Rob,

    Thanks for posting the first bug and for writing it so clearly!

    Got more?

    Oh, and I should also mention that I’m delighted to hear about surprises that aren’t bugs. For example, there’s a set of input strings that involves both alpha and numeric characters, and that yields an actual triangle, not just a blue line. It’s not a bug. But it is interesting.

  3. Hi Elizabeth,

    Thanks for the puzzle.

    But the description is too small for the program.

    – Unable to find on how many types of triangles are there

    For example, for the inputs of 3,4,5 it can be a Right Angle triangle or Scalene

    But your program displays it as just Right. Might be a typo error. It’s good to say that as a Right angle triangle, But i can’t find a 90 degrees angle in the image drawn for the triangle.

    So it’s better to list all your assumptions and types of triangles that you deal with.

    Second issue, the negative numbers are not validated properly.

    If my inputs are -2,2,2 then it says invalid.

    Each time, when it says invalid, it’s better if you let the user know the reason for the same.

    Inputs might be invalid in may ways

    – they doesn’t form a triangle
    – Invalid value for the data type

    For the inputs values of 3,7,10 it says is Triangle Type: Scalene but just draws only one line.

    Got to go out and will post more issues in the next comments.


  4. Fun!

    Try 6/6/8: nice.
    Try 6/6/11: excuse me?
    Try 6/6/13: wtf?

    Seems to be some boundary issues on several fronts 🙂


  5. Bug: 3 NaN object values resolve as Scalene
    3 string objects that cannot be converted to a number via JavaScript Number function result triangle type == scalene

    Bug: 1 NaN object value with any 2 values result in Isosceles
    Enter “99 00” in Side 1
    Enter 5 in Side 2
    Enter 5 In Side 3
    that will convert the object to a number using JavaScript Number function result triangle type == Isosceles

    Bug: Triangle draws outside of box
    Enter 100000 in Side 1
    Enter value = to 1001 in Side 2
    Enter value =49 in Side 2
    Enter 100000 in side 3
    Note: actually value less than 49 and greater than caused similar error as below but if user clicks No the triangle is drawn outside box.
    Note: No error if Side 2 value is 1, 10, or 100.

    Bug: IE Script Error:Warning Message – Stop Running this script?
    Enter integer >= 100000 in side 1
    Enter integer >= 100000 in side 2
    Enter integer >= 2 and = 2 and = 2 and = 6 and = 6 and

  6. Let’s try this again since the info in the post was corrupted.

    Bug: Triangle draws outside of box
    Enter 100000 in Side 1
    Enter value less than 91900 and greater than or equal to 1001 in Side 2
    Enter value less than equal to 999 and greater than 49 in Side 2
    Enter 100000 in side 3
    Note: actually value less than 49 and greater than caused similar error as below but if user clicks No the triangle is drawn outside box.
    Note: No error if Side 2 value is 1, 10, or 100.

    Bug: IE Script Error:Warning Message – Stop Running this script?
    Enter integer greater than equal to 100000 in side 1
    Enter integer greater than equal to 100000 in side 2
    (where side 1 and side 2 are equal values)
    Enter integer between 2 and 9 (inclusive) in side 3
    Note: Same error occurs on Firefox

    Bug: Invalid Inputs reult in Isosceles and horizontal line drawn outside box
    Enter 10 in side 1
    Enter 5 in side 2
    Enter 5 in side 3

    Bug: Invalid Triangle values result in erroneous triangle type
    Enter value between 2 and 4 (inclusive) for side 1 and Side 2 (where both side 1 and side 2 are same value)
    Enter value of 10 in Side 3
    Triangle type == Isosceles
    NOTE: Increase all values by power of 10 produces same result

    Bug: Isosceles triangle draws outside box
    Enter value between 6 and 8 (inclusive) in side 1 and side 2 (where both side 1 and side 2 are same value)
    Enter 10 in Side 3
    NOTE: Increase all values by power of 10 produces same result

    That should keep some developer busy for awhile. I am sure there are plenty more I just don’t want to do the math and I get easily bored after about 30 minutes or so after cherry picking. Personally, I sure hope there aren’t too many testers in the real world who have to deal with production code of this poor of quality. This was fun, but how about something a little more challenging Elizabeth?

    BTW Venkat, the program detects equilateral, right, scalene, and isosceles in that order. So, if the inputs equate to a right triangle that is what the output will indicate because it appears the developer wanted to specifically detect this type of scalene triangle. If we really wanted to get picky, we could argue the program doesn’t detect obtuse or acute triangles either. The same argument can be made that equilateral triangles are isosceles triangles.

    However, even the fact that the program detects right triangles is probably in error because the program accespts side lengths as inputs, and triangles are classified as equilateral, isosceles, and scalene based on valid lengths of their sides. Right triangles (and acute and obtuse) are usually classifed as such by their internal angles. So, either the program is doing too much (displaying right triangles) or too little, (not displaying acute, and obtuse).

    – Bj –

  7. Venkat, Chris, BJ – Great bugs. Very nice.

    BJ said, “This was fun, but how about something a little more challenging?”

    OK…for those who are bored with cherry picking the bugs in this program, here’s a related challenge:

    Why is it that 2/7/9 yields “invalid” but 3/7/10 yields a whacked “scalene”? Why is it that 6/6/10 draws outside the box but 6/6/9.999 is fine? You could figure this out by reading the code and finding the bug. That’s a useful thing to do. But often, as testers, we don’t have access to the code. So…if you couldn’t look at the code, how would you figure out what’s going on, and then generalize that theory of error to discover more messed up cases? FWIW, I found a new bug tonight by playing with values related to the underlying problem. And that surprised me. Since I wrote the triangle code and have tested it a bunch of times, I thought I knew where the bodies were buried.

  8. Also without looking at the code, 1/2/3 is invalid but .1/.2/.3 is scalene? Another class of failures there.

    And it’s not a bug, exactly, but using non-integer values doesn’t ever seem to report a right triangle. I agree with BJ’s comments above: I think the next action after these test results is to request some enhancements to the requirements documentation for “right triangle support” 🙂

  9. – Tab to the ‘draw’ button. Hold down the space bar. While holding the space bar, press shift+tab. Note that the ‘draw’ button is now stuck down.
    – Pressing ‘enter’ doesn’t submit the triangle.

    A bunch of precision-type bugs:
    – Triangle with sides of 1,1,1.000000000000001 is (correctly) isosceles, but a triangle with sides of 1,1, 1.0000000000000001 (add a zero) is equilateral.
    – Triangle with two equal sides, 99999999999999999999999, 99999999999999999999999 and 3 is invalid.
    – Triangle with sides of 42000000000, 42000000000 and 3 is claimed to be a right-angled triangle.

    Engineering notation appears to work (eg. 3e3, 2.5e3, 2.5e3). Is that the combination of letters and numbers which yields a valid triangle that you mentioned?

  10. Well I dumped in some very large inputs (buffer overflow attack) and got scalene triangle. You may not be very secure. I did not try other security attackes, but I was tempted.

  11. Wow, this is fun!

    Jared asked, “Engineering notation appears to work (eg. 3e3, 2.5e3, 2.5e3). Is that the combination of letters and numbers which yields a valid triangle that you mentioned?”

    Yup! You got it! (The style with a “+” also works, e.g. 3e+2.) There may be vulnerabilities I haven’t found yet related to that…

    And if folks haven’t already, I encourage everyone to visit both Mallik (http://codeinspections.blogspot.com/2007/03/testing-triangles-bugs.html) and Venkat’s ((http://venkatreddyc.wordpress.com/2007/03/24/taking-on-testing-triangles-a-classic-excercise/) blog posts analyzing this sample.

    Both blog posts analyze what’s going on under the covers and provide great detail. Both of them identified the sort bug that causes all sorts of wierd behavior in this app (like the bugs Chris found – “6/6/11: excuse me?” and “6/6/13: wtf?”). I’m impressed.

    In addition, Venkat’s post provides an excellent example of using a variety of information resources to figure out what an essentially undocumented program should do.

    Since folks have found the sort bug, let me suggest another related test case. Try 6/6/10. Then try 06/06/10. Note that these two cases have different results. It’s the sort bug at work. Until this week, I hadn’t realized that leading zeros resulted in different behavior. It makes sense, but it hadn’t occurred to me before.

    Finally, Jon worried about testing security on my site. As long as you’re testing on the Triangle page, and not trying to hack WordPress, you should be OK. There is no server side interaction from the Triangle page (it’s JavaScript only), so it’s safe to do whatever evil things you want to the poor little triangle code.

    Now, I will respectfully ask that this world class crew of testers *not* decide to test the heck out of WordPress on my site. I’m sure the WordPress folks would be delighted if you wanted to test WordPress…just please don’t use my site as the lab 🙂 🙂 🙂

  12. “What are the requirements” ?

    It seems that no one asked this. You never know, she might produce a nice shiny PDF with the bounds and everything …)

    It looks like I came late to the party, so most of the input/bounds examples I found were already listed here. My suggestion would be to limit the HTML text boxes to only decimal, maybe plus period.

    As a worker, I would expect submit/”Draw” to be hooked to the enter button, and it isn’t – that’s annoying.

    254/256/30 is really oddly off the page. I’ll stay away from other examples like that, as there are plenty more above.

    Someone else got the atoi conversion, right? 10 m / 15 i / 16 yields a “scalene” straight line.

    “One” / “One” / “One” is scalene? (I would expect Equilateral or error) – same for “Ten” / “Ten” / “Ten” – also, these aren’t drawing a triangle.

  13. I chose the Triangle problem as one of the sample in the demo for JUnit Factory. It’s a fun one.

    Myers said you need 14 tests cases to adequately test whether a (valid) triangle is scalene, isosceles or equilateral. Bob Binder (in the Testing Object Oriented Software) said you need 65. Kent Beck said he only 5 for his TDD’d solution. JUnit Factory generates 25.

    It’s apples-to-oranges though, because my example (and yours) validates the input (Myers didn’t), Binder wrote a whole class hierarchy with trapezia and hexagons, yours is JavaScript so you have coercion bugs.

    Would be nice to have a series of problems like this. They are fun.

  14. I just blogged about this too (http://www.developertesting.com/archives/month200704/20070406-000418.html). By a nice coincidence I have been including the triangle example in a presentation that I have given a few of times in the last couple of weeks.

    About the requirements – that’s the source of most of the disagreement about the ‘adequate’ number of tests, from Kent Beck’s 6 to Bob Binder’s 65. They start with different requirements.

  15. Whenever I test javascript I always take a snippet of the javascript and enter it into one of the input fields.

    In this case I get a fun result:

    Enter into the Side one input field:

    but leave the other two fields blank.

    Click “Draw”

    The program draws a blue line and reports “Isosceles”.

  16. Here are the results of about 20 minutes of testing. I didn’t look at the other reports before testing.

    – Non-digits are not filtered.
    (a) When three identical non-digits (m) are entered, the result is “scalene” and flat line–one might expect an equilateral triangle, if the product accepted formulae.

    (b) m, {empty}, m, is accepted with a result of scalene and a straight line.

    (c) m, 2, 2 is accepted with a result of scalene and a straight line.

    – There is no help available, thus..

    – There’s no way to tell, other than testing, if the program accepts formulae. It seems not to.

    – Leading spaces are not truncated from the input.

    – No matter what order the numbers are entered, the orientation of the triangle remains the same for any three numbers, except…

    – When you vary the number of leading spaces, the orientation /does/ change. This suggests to me that the sort function is sorting strings, rather than integers.

    – 5, 3333, 3333 produces something that overflows the top of the display box.

    – 5, 7, 20 produces a “scalene” triangle that is rendered as a flat line, yet 20, 20, 20 is rendered as a lovely equilateral triangle.

    – 4, 15, 20 — which should be invalid — gives me a result of “Scalene” and a straight line inside the canvas.

    – 5, 15, 20 — also invalid — produces a report of “Scalene” and a straight line that extends to the right beyond the canvas to the rightmost edge of the browser window.

    – In Firefox, there is roughly two blank lines of space between “Triangle Type” and the copyright notice. In IE7, there’s less than one.

    – When I modify the order of my values, I can’t see a way for me to determine whether they’ve been accepted other than by entering different values. That is, when I enter 5, 7, 7 I see the result “Isosceles”. OK. But when I enter 7, 7, 5 and then press Draw, I don’t get any feedback to suggest that the numbers were accepted, the triangle was redrawn, and the “Isosceles” was re-rendered. I find this one of the more serious problems on the page, because it slows down testing.

    – The page fails validation at http://validator.w3c.org. The header suggests that the page is intended to be XHTML 1.0 Transitional; W3C disagrees, identify 10 problems. (These may or may not be important to you.)

    If you have other sources of information for your intentions, I’d be happy to see them.

    The program apparently accepts decimals, but when I fed it 2, 1.4142135623730950488016887242097, 1.4142135623730950488016887242097 (square root of 2), the result was “Isoceles”. This should be a right triangle, more or less.

    Myers’ context and Beck’s contexts are dramatically different. One thing that’s common to them, though, is that they count test ideas, which is highly misleading. Myers includes variations in some of his test cases, and not in others.

  17. Elisabeth:>Since I wrote the triangle code and have tested it a bunch of times, I thought I knew where the bodies were buried.

    Spoken like a true developer! [grin]

    —Michael B.

  18. Hi! I live in Sweden and we use “,” for decimals and not “.”.

    1) Enter “1,23” in field “Side 1”, “Side 2” and “Side 3”.
    2) Click button “Draw!” => Error

    Triangle is just a line.


  19. Hi,

    I have not tested it so much but, still i found one bug related to integer values. When we enter values like 2\6\4 or 3\7\4 or 4\8\4 or 5\9\4, it shows invalid triangle. it should not be invalid.

    – Smita

  20. When I enter 3 special characters in the three different sides for instance :
    Side 1: @,
    Side 2: $
    Side 3: %,

    and on clicking Draw button displays Triangle Type: Scalene.

    This is wrong it Either it should not accept special characters or it should show Triangle Type: Invalid.

    Same problem if I enter any other special characters in any sides say #,* etc.

  21. Another bug found:
    If we enter values like
    Side 1: 2,
    Side 2: 3,
    Side 3: 5 & on clicking Draw button
    It displays invalid triangle.
    Rather it should say Scalene triangle.

  22. Enter special characters ($%&$&) in side1, side2, side3 and press draw. Triange type :Scalene is displayed and a blue line was drawn

  23. – First of all (with IE7) there is no “draw” button anywhere on my screen!

    – I got the same error that Ole got, it also shows when I enter: 50 and 99 and 100.00.01 (more then one .)

    – I can enter many digits in one field, if I enter more then 7 digits (in any of the fields) I get a message that the triangle is invalid. It would be much more user friendly if it’s not possible to enter more then 7 digits.
    The “test data history” only shows the first seven of all digits that I have entered (or is that a bug in the test-software? :-D).

  24. ehendrickson “Since I wrote the triangle code and have tested it a bunch of times, I thought I knew where the bodies were buried.”

    And the cycle of developer discovering the value of having competent software testers on the Team continues anew …

Comments are closed.