JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://cdn.jsdelivr.net/jasmine/2.5.2/jasmine.css">
<script src="https://cdn.jsdelivr.net/jasmine/2.5.2/jasmine.js"></script>
<script src="https://cdn.jsdelivr.net/jasmine/2.5.2/jasmine-html.js"></script>
<script src="https://cdn.jsdelivr.net/jasmine/2.5.2/boot.js"></script>
<div id="testListComponent"> </div>
CSS
@import url('https://fonts.googleapis.com/css?family=Lato');
#testListComponent li {
font-family: 'Lato', sans-serif;
padding: 2px;
}
#testListComponent li a {
background: inherit;
color: #f00;
display: inline-block;
}
#testListComponent li a:hover {
background-color: #000;
-webkit-transition: background-color .5s ease-out;
-moz-transition: background-color .5s ease-out;
-o-transition: background-color .5s ease-out;
transition: background-color .5s ease-out;
}
JavaScript
'use strict';
/*
elementId: id of DOM element
number: number of elements inside list
*/
function ListComponent( elementId, number ) {
this.elementId = elementId;
this.number = number;
this.init();
}
/*
Inheriting from empty Object
*/
ListComponent.prototype = Object.create({});
/*
Initializes creating of the list compontent.
*/
ListComponent.prototype.init = function() {
var componentElement = document.getElementById( this.elementId );
if ( componentElement ) {
componentElement.appendChild( this.createUlElement() );
}
};
/*
Creating 'lu' HTML element.
*/
ListComponent.prototype.createUlElement = function() {
var ulElement = document.createElement( 'ul' );
for ( this.counter = 1; this.counter <= this.number; this.counter++ ) {
var isActive = this.counter % 3 === 0 ? true : false;
ulElement.appendChild( this.createLiElement( isActive ) );
}
return ulElement;
};
/*
Creating 'li' HTML element.
*/
ListComponent.prototype.createLiElement = function( isActive ) {
var elementInLi;
var liElement = document.createElement( 'li' );
if ( isActive ) {
elementInLi = this.createAElement();
} else {
elementInLi = this.createText();
}
liElement.appendChild( elementInLi );
return liElement;
};
/*
Creating 'a' HTML element.
*/
ListComponent.prototype.createAElement = function() {
var aElement = document.createElement( 'a' );
aElement.setAttribute( 'href', 'javascript:void(0);' );
aElement.appendChild( this.createText() );
return aElement;
};
/*
Creating textNode.
*/
ListComponent.prototype.createText = function() {
var textNode = document.createTextNode( 'List item ' + this.counter );
return textNode;
};
/*
Instatiating the ListComponent class.
*/
var testComponent = new ListComponent( 'testListComponent', 100 );
/*
Unit tests.
*/
describe( 'ListComponent', function() {
var elementId;
var number;
var componentInstance;
var mockListComponent;
beforeAll(function() {
elementId = 'mockListComponent';
number = 333;
mockListComponent...