CODEWITHSUNDEEP
javascriptmocha.jsbddchai
BarryBones41
BarryBones41

Reputation: 1481

Testing web apps with Mocha and Chai

I understand how to test functions that output values with mocha and chai on the browser, but I don't understand how I can use this system to test full fledged web apps. To break it down to something more simple, how can I test that when clicking on a button, a <div> that already exists in the HTML is revealed?

I followed this tutorial but this just doesn't apply to applications that already exist. It wants me to create a new test.html but that makes no sense if my app relies on pre-existing HTML. It also expects that you should be able to create a new Foo and then run tests like does Foo have a default name parameter. But my application already creates a Foo on document ready.

Maybe I am missing the point.

Upvotes: 0

Views: 695

Answers (1)

nfactorial
nfactorial

Reputation: 187

When testing applications, you should not be testing the application as a whole but rather the individual components that your application is comprised of. You test these components individually and in isolation.

Thus you would generally have 'test.html' (to take your example) that incorporates only the elements necessary for you to test your component. Given your first description 'test.html' may consist of only a button and a hidden div. Your test would emulate a button click and then verify that the div is no longer hidden.

This allows you to ensure the behaviour of your code is correct before you integrate it into a larger web application, where it would become much more complicated.

Whilst your application may already create a Foo when the document is ready, that particular code would not (or, should not) be included in your unit-test for Foo itself.

It sounds like you are not using an application framework, which I would recommend. These provide well researched structure for web-applications and usually have a wealth of documentation on testing applications built with them. I would recommend AngularJS (https://angularjs.org/) or React (https://facebook.github.io/react/) but there are many alternatives.

Upvotes: 3

Related Questions