@htmlacademy/dom-check
v1.3.77
Published
Keep all dom-related checks inside single package
Downloads
25
Readme
@htmlacademy/dom-check
DomCheck is a node.js module to check some properties of selected DOM node.
Simple tests usage
var DomChecker = require('@htmlacademy/dom-check');
var checker = new DomChecker(aDocument);
// returns true if document has `.some-node`
checker.node('.some-node').hasNode();
// returns true if `.div-node` is a div
checker.node('.div-node').isTag('div');
// returns true, if trimmed textContent equals `hello`
checker.node('.div-with-text').textIsEqual('hello');
Compare with etalon
Please, note that
.reset()
method is called each time before running your changes starting from version 1.3.39-2.
var DomChecker = require('@htmlacademy/dom-check');
var checker = new DomChecker(aDocument, {
initialCode: {
html: '...', // some html code
css: '...' // some css code
}
});
// returns true if document has `.some-node`
checker.changeEtalon(function() {
// After running this callback
// `changeEtalon()` function puts all changes
// into etalon document, kept in iframe
this.html(function() { // select html mode and
this. // change it somehow
find('Hello'). // Find first `Hello` string
replace('Good-bye'); // and replace it with `Good-bye`
});
});
// Then you may check, for example:
// Attribute value
checker.node('.hello').hasSame('@width');
// Text content
checker.node('.hello').hasSame('text()');
// Several css-properties
checker.node('.hello').hasSame('padding-{top,left}');
// You may use 'color' or 'padding-*' format.
// It works, powered by minimatch
// Also, you may check a subtree!
checker.node('.hello').hasSameSubtree();
Find & replace methods
find()
— finds single match to replace. Single argument may be string or regular expressionfindAll()
— finds every match in string to replace. Single argument may be string or regular expression. Regular expression must have aglobal
flag setfindLine()
— find line to replace. Argument is 1-based number.findLines()
— find lines range to replace. Both arguments are 1-based numbers.replace()
— replace selection with provided value.remove()
— alias forreplace('')
.
Methods may be chained to select some fragment(s) in specified lines:
etalon.changeEtalon(function() {
this.html(function() {
this.
findLines(1, 5). // Select lines from 1 to 5
findAll(/(foo|bar)/g). // in those lines select all `foo` and `bar`
replace('baz'); // and replace them with `baz`
});
});
When find()
or findAll()
are used with regexp, replace()
argument
may be a function. Function will get a match data, and its result
will be used as a value to replace selection.