@htmlacademy/dom-check v1.3.77

@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 expression
• findAll() — finds every match in string to replace. Single argument may be string or regular expression. Regular expression must have a global flag set
• findLine() — 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 for replace('').

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.