A small utility library for testing client-side code in Node.js environment. Simulate the browser in your terminal.
We all know about Selenium and PhantomJS. They work well for testing client-side code. We may visit a page, fill forms, click buttons etc. However, it gets complex if we want to test only part of our application. We have to create a page that contains only the needed pieces. This definitely does not scale.
Atomus is helpful during unit or functional testing. That's where the name came from. It works good with the atoms of your application. You simply include your framework and the module that needs testing. Then create an instance and start playing with the DOM and the module's API.
npm install atomus
All you have to do is to require the module, call the ready method:
var htmlStr = '<body><h1>Atomus</h1></body>';
var atomus = require('atomus');
var browser = atomus().html(htmlStr).ready(function(errors, window) {
...
});
The window that is passed to our callback is the good old Window object that we have in every browser. Thankfully to jsdom we have a JavaScript implementation of the WHATWG DOM and HTML standards. So we may call window.document.querySelector or element.dispatchEvent. In practice we may interact with the page as we are in a real browser.
browser.ready([callback]) - call this method when you are ready with configuring your browser. The callback receives errors and window object.browser.external([filepath]) - add an absolute path to JavaScript file that you want to be injected into the page. This may be a framework or custom bundled JavaScript for example.browser.html([string]) - the initial HTML markup of the pagebrowser.injectJS([string]) - injects JavaScript just before the closing of <head> tagOnce the ready method is called we have a few other methods and objects available.
browser.$ - jQuerybrowser.window - the usual Window objectbrowser.clicked([jQuery object or DOM element]) - fires click event.browser.changed([jQuery object or DOM element]) - fires change eventbrowser.focused([jQuery object or DOM element]) - fires focus eventbrowser.blurred([jQuery object or DOM element]) - fires blur eventbrowser.keypressed([jQuery object or DOM element], [keyCode]) - fires keypress event with particular keyCode.browser.selected([jQuery object or DOM element]) - fires click event. Use this while you operate with radio or checkboxes.browser.waitUntil([element's selector], [function]) - it calls the function once the element matching the elector exists in the DOMbrowser.changeValueOf([jQuery object or DOM element], [value]) - use this method to change the value of text input, textarea or dropdown/select element. It changes the value and dispatches a change event.browser.addXHRMock([object or array]) - by default Atomus performs real HTTP requests. That's a way to mock these requests and provide your own response. Checkout the example section below.browser.clearXHRMocks() - clearing the already added XHR mocksbrowser.triggerEvent([element], [eventType], [keyCode]) - triggers a DOM event on particular element with particular keyCode`JSDom has some problems with radio and checkboxes selecting. That's why we introduced API methods for triggering events. For sure you may use $('#link').trigger('click') but that's not working properly in some cases. So, we recommend using browser API for dispatching DOM events.
var atomus = require('atomus');
atomus()
.html('<section><a href="#" id="link">click me</a></section>')
.external(__dirname + '/libs/myframework.min.js')
.ready(function(errors, window) {
var $ = this.$; // jQuery
$('#link').on('click', function() {
console.log('link clicked');
});
this.clicked($('#link'));
});
An alternative syntax for setting the initial HTML on the page and the external resources is:
var atomus = require('atomus');
var b = atomus({
html: '<h1>Blah blah</h1>',
scripts: [
'vendor/angularjs.min.js',
'src/my-module.js'
]
});
var mockups = [
{
url: '/api/method/action',
response: {
status: 200,
responseText: JSON.stringify({"id": "AAA"})
}
},
{
url: '/api/method/action',
method: 'POST',
response: {
status: 200,
responseText: JSON.stringify({"success": "OK"})
}
}
];
var atomus = require('../lib');
var b = atomus()
.external(__dirname + '/data/ajaxwrapper.js')
.ready(function(errors, window) {
b.addXHRMock(mockups);
window.AjaxWrapper().request({
url: '/api/method/action',
json: true
}).done(function(result) {
console.log(result.id); // AAA
window.AjaxWrapper().request({
url: '/api/method/action',
json: true,
method: 'POST'
}).done(function(result) {
console.log(result.success); // OK
});
});
});
var b = atomus()
.html('<html><head></head><body></body></html>')
.injectJS('var getTheAnswer = function() { return 42; }')
.ready(function(errors, window) {
console.log(window.getTheAnswer()); // 42
});
npm installnpm testCheckout the test folder. There are tests that run Atomus against AngularJS and Ractive.js frameworks.
.value property you need to dispatch a change event. Otherwise you will not get the listeners called.window.Angular and not just Angular.console.log calls so you receive all the logs into the terminallocalStorage. However, it is not part of jsdom. It's a polyfill.FAQs
A small utility for running client-side tests in Node.js environment
We found that atomus demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
At its inaugural meeting, the JSR Working Group outlined plans for an open governance model and a roadmap to enhance JavaScript package management.
Security News
Research
An advanced npm supply chain attack is leveraging Ethereum smart contracts for decentralized, persistent malware control, evading traditional defenses.
Security News
Research
Attackers are impersonating Sindre Sorhus on npm with a fake 'chalk-node' package containing a malicious backdoor to compromise developers' projects.