unit testing modular javascript - javascript

I am currently deriving a javascript framework pattern as an architecture for the client side development for an upcoming large scale application that I will developing.
I am looking to go with a module observer pattern in which each control I develop will have its own javascript file, holding no knoweldge of the other controls.
From designing this framework for my application, I am looking to integrate in a testing mechanism for my modules - a unit testing mechanism for javascript. I am not aware of any such frameworks or how I may set up such. Any suggestions?
As part of such testing, I will also need to mock up http requests.
The library I will be using in development is jquery.

The JQuery team has QUnit.
As for abstracting out AJAX, you should wrap it appropriately or just test the data manipulation methods.

Jasmine may be what you are looking for. It has built-in mock up support, and does not rely on any other frameworks.
They also have a separate module for faking AJAX responses.
The setup is simple. Just download the standalone version, write some testing suites, and view the SpecRunner.html in a browser.

Consider using JsTestDriver to run your JS tests. The main benefit it provides - it can run your tests on continuous integration environment, which is essential for unit testing practice.
Some additional features:
It can be used along with QUnit and other testing frameworks.
It can execute your tests in parallel across multiple browser.
It supports calculation code coverage.
List of mocking libraries you can find in another thread.

BoilerplateJS
is a reference architecture for large scale JavaScript product development. You can find the tests which are written using qunit, sinon and testr included under the tests folder.

Related

What is a proper way of end-to-end (e2e) testing in Vue.js

Of cause I can use selenium-standalone with xpath to test an app. But testing SPA could be challenging sometime.
But, for example angularjs's team provides protractor for this purpose.
The reason behind protractor as I can see is that protractor waits till angularjs will be loaded and few more features:
Protractor provides some new locator strategies and functions which
are very helpful to automate the AngularJS application. Examples
include things like: waitForAngular, By.binding, By.repeater,
By.textarea, By.model, WebElement.all, WebElement.evaluate, etc.
So, the question is: Is it any tool or best practice for e2e testing in Vuejs?
UPD: feel free to post links to tutorials, example and everything cool about e2e-testing in vue.js. Thanks.
The tool you are thinking about is Nightwatch.
With this, you can do E2E testing with Vue.js.
Even better, this is bundled by default when you are using vue-cli, ready to run.
The command line to create a project with Nightwatch activated by default is vue init webpack myProjectName.
Here are small tutorials about it.
EDIT: Lately I used Webdriver.io a lot, and I must say I prefer it to Nightwatch (better documentation, reactive community with a live gitter, issues that are treated in a timely fashion, etc.)
I recommend to use https://devexpress.github.io/testcafe.
Pros:
easy install
complete test harness
javascript ES2016 with (async/await)
flexible selector system
smart assertions with retry policy
reports
See the simple tutorial here
I recommend Cypress.
single NPM dependency
video recording right out of the box
GUI that shows every step of the test.
Our docs are great: https://on.cypress.io/intro
For Vue specifically see this tutorial: https://vuejsdevelopers.com/2018/01/29/vue-js-e2e-test-hacker-news/ and if you want to do unit testing of Vue components https://github.com/bahmutov/cypress-vue-unit-test
Happy testing.
Seems to be an old question, but at the end of 2019 the best way is webdriverio:
Pros:
Large ecosystem of plugins and integrations.
Mocha, cucumber, jasmine runners.
Sync mode of test runner.
Allure reporter and others out of the box.
Chromedriver service from the box.
Easy integrate with selenoid and get cluster of browsers in docker for parallel test execution.
Integration with devtools protocol and puppeteer, can use huge amount of functions.
Integration with cloud service providers.
Appium integration out of the box.
Cons:
Have to manually write waits.
Some functions require to use promises.

Develop Selenium webdriver scripts using javascript

Can we develop selenium webdriver scripts using javascript only. If yes what are the advantages of using javascript instead of using java or C# or any language.? In what scenario we should consider Javascript over other languages?
Thank you.
There are numerous Javascript frameworks written on top of the JS selenium bindings (webdriver.io, nightwatch, protractor).
Benefits of JS over C# or Java
Less boilerplate
Grunt or gulp for build automaton > maven, msbuild or even gradle
Better integration with front-end frameworks (protractor)
JS is generally used in all web projects so it works as a universal language that all devs can understand.
NPM for dependency management and the massive number of libraries in it that may drastically reduce your workload.
Drawbacks
The Java bindings have more documentation / resources available to debug issues.
Speed (I find using the AjaxPageFactory in Java to be a lot faster than protractor and I have not found an equivalent in Javascript)
Promises can be complicated coming from Java or C#.
No support for Microsoft Edge currently.
As far as specific use cases if you use Angular heavily on the front-end Protractor is a tool designed specifically for functional testing of angular and should be used over C# or Java. Protractor can be used with frameworks such as React.js but it wasn't designed for it and you may need to include a lot of waitForElement type code.
A few things I have found really nice about protractor specifically is the configuration for more comprehensive multi-browser testing. To set this up in Java or C# involves a lot of configuration and in Protractor it could be as simple as make two changes to your conf.js file. I also find myself using a lot of grunt plugins to set up and tear down my tests which are very simple to configure.
I would recommend using Babel.js so you can utilize the es2015 JS syntax which makes the transition from Java or C# simpler due to the inclusion of classes and I personally find it much more cleaner for writing page objects.
One thing to be aware of is a lot of simple actions in Selenium for Java and C# are more complicated in Javascript because most actions return promises.
Java Version
int previousNumberOfItems = driver.findElements(By.className(".item")).size();
driver.findElements(By.cssSelector(".addItemButton")).click();
int currentNumberOfItems = driver.findElements(By.className(".item")).size();
assert.AssertTrue(currentNumberOfItems .contentEquals(previousNumberOfItems +1));
Protractor (JS) Version
element.all(by.className(".item")).count().then(function(number){
element(by.css(".addItemButton")).click();
expect(element.all(by.className(".item")).count()).toBe(number+1);
});
I can't really speak for nightwatch or webdriver.io they may be much better for testing non-angular apps using Javascript.
Yes you can use Nodejs protractor Jasime framework with WebDriver.
Here is some link:
Webdriver java script binding
Angularjs Jasmine

Test Driven JavaScript Development with Django vs Node.js

I have a web project coded 80% in JavaScript and 20% in Django without a single unit testing as I rushed for Minimum Marketing Features. Now that the project is getting funded, I decided to invest some time to introduce TDD. I had a great deal of inspiration from this KickStarter-funded tutorial.
http://www.letscodejavascript.com/
The author uses Node.js, Jake, Lint, Nodeunit, and Karma to simplify the whole integration process. The server/client tests in all major browsers is done in a single command and I was really hooked to this idea, but it requires switching to Node.js.
I've searched for TDD in Django and ran into this tutorial that makes use of Selenium.
http://www.tdd-django-tutorial.com/
However this TDD was primarily based on unit testing in server. Here are the questions.
Can multiple client JavaScript testing be done in Django/Python?
I assume the answer is no since js files are nothing more than static library in Django. Correct me if I'm wrong.
Is it worth using Node.js just for the sake of TDD Javascript?
My logic was either you use Python or Node.js for the server, but since tools like Karma and Buster.js requires Node.js, I was wondering whether setting up the Node.js alongside Django just for multiple client testing is plausible choice when considering lower cost of maintenance.
Thank you :D
You can take a look at using selenium in your django test suite. Django's official docs cover this in moderate detail
To answer your question about Node.js - I would say that it's probably not worth the complexity to add node.js SOLELY for the purpose of running unit tests. Also, since your javascript is likely built to run in a browser, it's less likely that things will break down if you use a tool like selenium (which runs the code in an actual browser, providing a python scripting interface).

Is it possible to use Testacular for non-AngularJS app for end-to-end testing

I'm building a simple app and want to use Testacular as the test runner. Testacular is simple to setup for unit testing but the possibility of using it for e2e also seems great, however my app will not be in AngularJS. Is this possible (or simple) to do or should I be looking more towards Selenium?
Yep! From Testacular's GH Page:
Testing Framework Agnostic
Describe your tests with Jasmine, Mocha, QUnit. Or write a simple adapter for any framework
you like.
Since the aforementioned testing frameworks aren't library-dependent, it would make sense that as long as you can test your library code using one of those frameworks you can use testacular to provide a test-runner for it.
That being said testacular is not selenium. It allows you to test your code in a browser environment but as far as I know doesn't provide navigation, DOM Querying, user-emulation etc. like selenium does. If you're looking for selenium functionality for your JS code you should check out Soda which is an awesome library written by TJ and the rest of the gods on Mt. Olympus ::cough:: I mean developers at LearnBoost that provides a JS adapter for selenium's wire protocol, among other things.
But if you still think testacular is the way to go then take a look at their sample configuration file which should get you started in the right direction. Hope this helps!

Javascript unittesting frameworks

I am loooking for a javascript unittesing framework and trying to decide if I should go with JSunit or not. My goal is to have the unittests run with my CI, possibly using a JSunit server that is running headless.
From people's experience, is this a good idea? Are there better frameworks that you would recommend for my goals, over JSunit?
QUnit is worth reviewing
It depends on your requirements. If you are going to have to test DOM intensive code and need your tests put in separate pages and organized in suites I would recommend using JSUnit. It has a nice test runner, supports suites and fixtures as separate pages. The experience is much like any other xUnit framework.
I have used JS Unit Test, not JS Unit, in an automated test environment, but it was run through Selenium. Using env.js or HTMLUnit you can create headless tests with most any JS unit testing library.
Personally I don't go headless. A headless browser is often an "ideal" browser and might not catch all those browser quirks. So I ultimately run my browser tests through a browser using Selenium. I use the Sauce Labs jar.
For other testing frameworks is a list on Wikipedia, Screw Unit looks nice if you like BDD.

Categories

Resources