html-fixture v0.9.15
html-fixture
A small JS library to create html test fixtures in an easy way
A quick example:
const HtmlFixture=require('html-fixture'); //or import
const htmlFixture=new HtmlFixture();
htmlFixture.create();
htmlFixture.append("<p>1</p>");
htmlFixture.append("<a>2</a><p>3</p>");
const allDomElementsP=htmlFixture.elementsByTag("p");
const onlyfirstP=htmlFixture.elementBySelector("p:first-child");
htmlFixture.destroy();
This package exposes a class to manipulate and query an htmlFixture, the intended use is in testing
All methods:
create()
Creates a div in DOM to hold all the rest of the html fixture (you append html with the append
method)
All the content in the fixture is always inside this DOM.
You can get this DOMElement with the rootElement`
method.
If you execute create() twice without calling destroy()`` on the the same instance if automatically calls
destroy`
The div element created is invisible ("display:none") and contains an attribute id="html-fixture-"+GUID
destroy()
Removes the div in DOM inserted by create()
append(string|DOMElement|function)
appends the html in the param to the fixture.
append accepts either an string with the html:
htmlFixture.append("<a href='http://example.com'>Example</a>");
a DOMElement:
const domElement=document.createElement("span");
htmlFixture.append(domElement);
a function with a comment and the html inside the comment:
var INITIAL_HTML=function(){/*
<img src="images/test1.jpg">
<p>Sample Text</p>
*/};
htmlFixture.append(INITIAL_HTML);
This feature exists to simplify insertion of complex Html if you use Ecmascript 5
isEmpty()
returns true if the content of the fixture is empty
asString()
returns the content of the fixture as a string (without the containing div, only the content that was added on ```append```)
isEqual(string|DOMElement|function)
this method accepts the same types of param as ```append```.
Compares the content of the fixture and the param and return true if it considers that are equal
* ignores multiples spaces & case
* respects the comments in html
* transform entities to unicode when possible
Some examples:
const domElement=document.createElement("span");
htmlFixture.append("<span></span>");
htmlFixture.isEqual(domElement); //true
const htmlLowerCase="<div><p></p></div><img/>";
const htmlUpperCase="<DIV><P></P></DIV><IMG/>";
htmlFixture.append(htmlLowerCase);
htmlFixture.isEqual(htmlUpperCase); //true
const html="<div><p></p></div><img/>";
const htmlWithSpaces=" <div> <p> </p> </div> <img/> ";
htmlFixture.append(html);
htmlFixture.isEqual(htmlWithSpaces); //true
const htmlWithAttribInLowercase="<div id='id'><p></p></div><img/>";
const htmlWithAttribInUppercase="<div ID='id'><p></p></div><img/>";
htmlFixture.append(htmlWithAttribInUppercase);
htmlFixture.isEqual(htmlWithAttribInLowercase); //true
const html="<div><p> A text </p> Another text</div><img>";
htmlFixture.append(html);
htmlFixture.isEqual(html); //true
const html="<div><!-- a comment --></div>";
htmlFixture.append(html);
htmlFixture.isEqual(html); //true
const html="<p>Acción</p>";
htmlFixture.append(html);
htmlFixture.isEqual("<p>Acción</p>"); //true
```
elementByTag(tagName)
returns the first element in the fixture that has the specified tag name
const html="<p>1</p><a>2</a><p>3</p>";
htmlFixture.append(html);
htmlFixture.elementByTag("p");// returns the DOMElement that refers to "<p>1</p>"
elementBySelector(selector)
returns the first element in the fixture that has matches the specified selector
```selector``` as per [w3c](https://www.w3.org/TR/selectors-3)
const html="<p>1</p><a>2</a><p>3</p>";
htmlFixture.append(html);
htmlFixture.elementBySelector("p:first-child"); // returns the DOMElement that refers to "<p>1</p>"
elementsByTag(tagName) && elementsBySelector(selector)
Same as elementByTag(tagName)
&& elementBySelector(selector)`
but returns an array with all the elements in the fixture instead of only the first element.
Some examples:
const html="<p>1</p><a>2</a><p>3</p>";
fixture.append(html);
const elements = fixture.elementsByTag("p");
elements[0].outerHTML; // "<p>1</p>"
elements[1].outerHTML; // "<p>3</p>"
const html="<p class="title">1</p><a class="title">2</a><p>3</p>";
fixture.append(html);
const elements = fixture.elementsBySelector(".title");
elements[0].outerHTML; // "<p class="title">1</p>"
elements[1].outerHTML; // "<a class="title">2</a>"