Testing In Angular

Author: Ben B. 9/9/16

When talking with potential clients, I’m often asked about my experience building tests. Test driven development is a buzzword right now and there is a lot of differing opinions. Some developers want to test 100% of their code and others as little as 20%. The common thread is that everyone agrees that testing is important. The trick is doing it right.

Most of the following tips are going to be related to testing Angular applications with Karma and Protractor

How To Do It Wrong

Unfortunately, doing it right isn’t as common as you might think.

I don’t think some developers realize how costly it is to build tests. I’ve seen tasks where writing the test takes 3X longer than writing the actual code. That is definitely an investment and every investment should have a payback. But do they? Sometimes.

If you’re writing a function to calculate total dollar amounts for an eCommerce site, then the investment is well spent. If, on the other hand, you’re writing a test to make sure a button appears on a page, don’t waste your time (unless it is the panic button at a nuclear facility :).

I think the best way to know if you’re doing it wrong is if you find yourself just duplicating code from test to view/controller/service/etc.

Don’t:

  • Write simple tests just to see if functions or objects exist that were explicitly written. Of course they do!
  • Write tests to see if simple page elements exist. You just wrote them didn’t you?

This isn’t an exhaustive list, but I hope to add onto it over time. I’d love to hear your thoughts!

How To Do It Right

I recently went through a bunch of test written by other developers. This was a very helpful exercise and helped me formulate the following things that I think should have tests.

The main question I use to determine what to test is whether someone else could change something outside a file and break my code. If the answer is yes, there should be a test.

Do:

  • Check that the route loaded (Protractor)
    • If there is a problem with a URL, you want to know about it.
  • Make sure that templates are loaded correctly (Protractor)
    • You can check for the main class of the page just to make sure the template doesn’t have an issue. Notice I didn’t say “main ID.” IDs are less versatile then classes, so I don’t use them anymore. If I’m concerned about attaching JS to a class, I’ll but a “.js” in front of it (e.g. .jsSomeClass). When testing, I’ll but a “.test” in front of it.
  • Check to make sure that directives load (Protractor)
    • If someone removes or changes a directive that you used, you definitely want them to know about the dependency.
  • Check to see that any DOM changes were successful. (Protractor)
    • For instance, if you click a button and something should appear, check that it did.
  • Check to see that route changes happen correctly (Protractor)
    • You definitely don’t want broken links in the future.
  • Check if a controller is defined (Karma)

I have a lot more to learn about testing, but these are some of my thoughts recently. Please comment if I missed something or didn’t think through something correctly. I’m always trying to improve.

 

About The Author

Ben currently works as a senior developer and technical business consultant outside of Boulder, Colorado.

More about this author

About Buink

Buink Web Development is a development shop founded in 2009 by Ben Buie. For years, Ben built and modified web assets for clients in Utah. In 2011, he moved the company to Colorado and in 2015 he started taking on new clients full-time.

Buink’s Core Values:

  • Cost effective technology (with business strategy in mind)
  • Eloquent, maintainable code
  • Responsive and transparent communication

Read more about Buink

Dru M.
Dru M.
15:41 25 Mar 21
Ben’s a super responsive, thoughtful, sharp and all around great guy to work with. Excellent with his trade. I’d recommend him to anyone. Thanks Ben!
Seth L.
Seth L.
21:36 29 Jun 19
Ben and team are incredible to work with. They are reliable and proficient. I'd highly recommend hiring them for web development work. SethVOLTAGE
Craig A.
Craig A.
20:50 18 Jun 19
It was a pleasure to work with Ben and his team. It is rare to find such attention to high standards of coding and devops.
Lexi S.
Lexi S.
15:36 18 Jun 19
Grateful to have Ben and his team as such a capable, reliable partner for completing client work!
Tom S.
Tom S.
13:18 14 Jun 19
I reached out to Buink after finding Ben’s name in a local developer/consultant listing in 2017, and I have to say, it has been an absolute pleasure to work with Buink. Ben consistently understands not just the development task laid in front of him but the business application behind the task. I’ve... never felt more comfortable with a development team than I do with Buink. I truly feel Ben and his team are integral partners in the success of my business.read more
Marilyn F.
Marilyn F.
22:47 13 May 19
I could not recommend Buink Web Development more highly. Ben and his team have recently developed a budgeting app for me (both web and IOS). I have had the opportunity of working with them for over a year and I am extremely happy with the results.I would say that the biggest plus for me is that I... trust Ben completely. From the very first, Ben has helped me make decisions that were in the best interest of my company. I have never felt like he is taking advantage of me. Ben does his best to keep the whole process very open and upfront. I have really appreciated that.I tell people all the time that I love my developers. And I do. I'm very happy that I chose to use Buink to develop my apps. It was the best business decision I could have made.If you are looking for someone to develop a website or app, I strongly suggest choosing Buink Web Development. They are fantastic!Marilyn Ference, President, Defend Your Money, LLCread more
James Landon B.
James Landon B.
01:33 28 Aug 18
Great company to help with all your web design needs!
Next Reviews
js_loader

Connect with Buink

Connect with Buink via email, send us a message, or subscribe to our blog.