Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

working with external js libraries #96

Open
csomakk opened this issue Dec 12, 2014 · 6 comments
Open

working with external js libraries #96

csomakk opened this issue Dec 12, 2014 · 6 comments
Labels

Comments

@csomakk
Copy link

csomakk commented Dec 12, 2014

Hi!
I'm working on a js only project, and I'm trying to make my unit tests work with pixi externs, (https://github.com/adireddy/haxe-pixi), but I don't know how to include pixi.js to the complied test.
In the app itself, I just add it to the html in a script tag.

so the following code will throw the error below.
import pixi.display.DisplayObjectContainer;
[...]
var doc:DisplayObjectContainer = new DisplayObjectContainer();
ReferenceError: PIXI is not defined at ...#testExample

any ideas how to test a class, what has a pixi object inside?

@RudolfVonKrugstein
Copy link

+1, I have the same problem

@csomakk
Copy link
Author

csomakk commented Jul 20, 2015

haha.. :) I've managed to make it work, with the mtt you can add js to the html environment. it's pretty neat, use example 2, custom templates

@RudolfVonKrugstein
Copy link

OK, I get the idea. But I can not get it to work (its all not documented). How does your template look?

@csomakk
Copy link
Author

csomakk commented Jul 20, 2015

Okay, what I've done, is to put the folder https://github.com/massiveinteractive/MassiveUnit/tree/master/examples/02_customTemplates/munit/template to my project as testTemplates and https://github.com/massiveinteractive/MassiveUnit/tree/master/src/resource as testResources.

for js_runner-html.mtt I added

<script type="text/JavaScript" language="JavaScript" src="js/pixi.dev.js"></script>

in testResources folder, I have added js/pixi.dev.js as well.

and the .munit file looks like this:
version=2.1.0
src=test
bin=output/test
report=output/report
hxml=test.hxml
classPaths=src
resources=testResources
templates=testTemplates

@RudolfVonKrugstein
Copy link

Hey, thanks,
Unfortantly with this setup I get:

Uncaught ReferenceError: addToQueue is not defined

@csomakk
Copy link
Author

csomakk commented Jul 20, 2015

I have <script type="text/JavaScript" language="JavaScript" src="js/printclient.js"></script> in the mtt as well, and
I have testResources/js/printclient.js :

if(typeof massive=='undefined') massive = {}
if(!massive.munit) massive.munit = {}
if(!massive.munit.js) massive.munit.js = {}

var queue = [];
var timer = null;

var COLOR_PASSED = "#A9D1AC";
var COLOR_FAILED = "#c82020";
var COLOR_ERROR = "#c82020";
var COLOR_WARNING = "#FFDE7A";
var COLOR_DEFAULT = "white";

/**

  • Pushes a javascript call into a deferred queue in order

  • to prevent additional unit testing from blocking
    */
    function addToQueue(scope, arg1, arg2, arg3, arg4)
    {
    var args = [];
    if(arg4) args.unshift(arg4);
    if(arg3) args.unshift(arg3);
    if(arg2) args.unshift(arg2);
    if(arg1) args.unshift(arg1);

    if(args.length > 0)
    {
    var item = scope + "("" + args.join("","") + "")";
    }
    else
    {
    var item = scope + "()";
    }
    queue.push(item);
    if(timer == null) timer = setTimeout("emptyQueue()", 10);
    return true;
    }

function emptyQueue()
{
if(!initialized) initialize();

var i = 0;
for(i=0; i<queue.length; i++)
{
    var item = queue[i];
    eval(item);
}

queue = [];
timer = null;

}

//////////

var initialized = false;
var munitDiv = null;

var currentLine = null;

var currentClassDiv = null;
var currentClassId = null;
var currentCoverageId = null;
var currentCoverageDiv = null;

var missingCoverageDiv = null;

var MUNIT_HEADER = "munit-header";
var MUNIT_TESTS = "munit-tests";
var MUNIT_COVERAGE = "munit-coverage";
var MUNIT_IGNORED = "munit-ignored";
var MUNIT_SUMMARY = "munit-summary";
var MUNIT_COVERAGE_BREAKDOWN = "munit-coverage-breakdown";

function setResult(result)
{
var summary = document.getElementById(MUNIT_SUMMARY);

if(summary != null)
{
    if(result.toString() == "true")
    {
        summary.style.backgroundColor = "#89de8c";
    }
    else
    {
        summary.style.backgroundColor = "#ff776d";
    }
}

window.scrollTo(0,document.body.scrollHeight);

currentClassId = null;

if(parent != null && parent != this) parent.testComplete();

}

function setResultBackground(result)
{
if(result.toString() == "true")
{
document.body.style.backgroundColor = "#89de8c";
}
else
{
document.body.style.backgroundColor = "#ff776d";
}
}

function debug(value)
{
var div = createDiv("debug", "debug");
munitDiv.appendChild(div);
div.innerHTML = value;
}

function initialize()
{
initialized = true;

munitDiv = createDiv("munit", "munit");
document.body.appendChild(munitDiv);

var swf = document.getElementById("swfContainer");
if(swf != null && swf != undefined)
{
    swf.setAttribute("width",0);
    swf.setAttribute("height",0);
}

}

function munitPrintLine(value, clazz)
{
if(!initialized) initialize();

if(clazz == null) clazz = "line";
currentLine = createDiv(null, clazz);
currentLine.innerHTML = value;
munitDiv.appendChild(currentLine);

}

function munitPrint(value)
{
if(currentLine == null)
{
munitPrintLine(value);
}
else
{
currentLine.innerHTML += value;
}
}

function munitTrace(value)
{
if(!initialized) initialize();

if(currentClassId != null)
{
    addTestTrace(value);
}
else
{
    munitPrintLine(value, "trace");
    munitPrintLine("");
}

}

///// TEST APIS ///////

//prints to the current test div
function createTestClass(testClass)
{
if(!initialized) initialize();

if(currentClassId == null)
{
    var tests = createDiv(MUNIT_TESTS, MUNIT_TESTS);
    munitDiv.appendChild(tests);
}

currentClassId = convertStringToId(testClass);
currentClassDiv = createTestDiv(currentClassId);

document.getElementById(MUNIT_TESTS).appendChild(currentClassDiv);

var headerParent = document.getElementById(currentClassId + "_header_parent");

icon = document.getElementById(currentClassId + "_icon");
icon.setAttribute("class", "icon-busy" );

createToggle(currentClassId);

}

function updateTestSummary(value)
{
var line = document.getElementById(currentClassId + "_header");
line.innerHTML += value;
}

function addTestTrace(value)
{
var contents = document.getElementById(currentClassId + "_contents");

var line = createDiv(null, "trace");
line.innerHTML = value;
contents.appendChild(line); 

}

function addTestPass(value)
{
var contents = document.getElementById(currentClassId + "_contents");
var line = createDiv(null, "pass");
line.innerHTML = value;
contents.appendChild(line);
}

function addTestFail(value)
{
var contents = document.getElementById(currentClassId + "_contents");
var line = createDiv(null, "fail");
line.innerHTML = value;
contents.appendChild(line);
}

function addTestError(value)
{
var contents = document.getElementById(currentClassId + "_contents");
var line = createDiv(null, "error");
line.innerHTML = value;
contents.appendChild(line);
}

function addTestIgnore(value)
{
var contents = document.getElementById(currentClassId + "_contents");
var line = createDiv(null, "ignore");
line.innerHTML = value;
contents.appendChild(line);
}

function addTestCoverageClass(coverageClass, percentage)
{
var contents = document.getElementById(currentClassId + "_contents");

currentCoverageId = convertStringToId("coverage_" + coverageClass);
currentCoverageDiv = createSectionDiv(currentCoverageId, "test-coverage");

contents.appendChild(currentCoverageDiv);

var line = document.getElementById(currentCoverageId + "_header");
line.innerHTML += "Coverage:" + coverageClass + "<b> [" + percentage + "%]</b>";

createToggle(currentCoverageId);

}

function addTestCoverageItem(value)
{
var contents = document.getElementById(currentCoverageId + "_contents");
var line = createDiv(null, "coverage");
line.innerHTML = value;
contents.appendChild(line);
}

function setTestClassResult(level)
{
var color = null;
var icon = null;

switch(level)
{
    case "0":
        //color =COLOR_PASSED;// green pas
        icon = "passed";
        break;
    case "1":
        color = COLOR_FAILED// red fail
        icon = "failed";
        break;
    case "2":
        color = COLOR_ERROR;// red error
        icon = "error";
        break;
    case "3":
        //color = COLOR_WARNING;// yellow passed but not covered
        icon = "passed";
        break;
    default: 
        break;
}

if(color != null)
{
    var line = document.getElementById(currentClassId + "_header");
    line.style.color = color;
}

if(icon != null)
{
    var iconDiv = document.getElementById(currentClassId + "_icon");
    iconDiv.setAttribute("class", "icon-" + icon);
}

var contents = document.getElementById(currentClassId + "_contents");
if(contents.childNodes.length == 0)
{
    removeToggle(currentClassId);
}

}

/////////// FINAL REPORTS ///////////

function createCoverageReport(value)
{
var lineBreak = createLineBreak();
munitDiv.appendChild(lineBreak);

var coverage = createSectionDiv(MUNIT_COVERAGE, "munit-coverage");
munitDiv.appendChild(coverage);

var header = document.getElementById(MUNIT_COVERAGE + "_header");
header.innerHTML = "<b>Code Coverage Result: " + value + "%</b>";


var content = document.getElementById(MUNIT_COVERAGE + "_contents");


createToggle(MUNIT_COVERAGE);

}

var currentCoverageReportID = null;

function addMissingCoverageClass(coverageClass, percentage)
{
if(missingCoverageDiv == null)
{
addCoverageReportSection("Missing Code Coverage");
missingCoverageDiv = document.getElementById(currentCoverageReportID + "_contents");
}

currentCoverageId = convertStringToId("coverage_for_" + coverageClass);
currentCoverageDiv = createSectionDiv(currentCoverageId, "missing-coverage-item");

missingCoverageDiv.appendChild(currentCoverageDiv);

createToggle(currentCoverageId);

var line = document.getElementById(currentCoverageId + "_header");
line.innerHTML += "Coverage: " + coverageClass + "<b> [" + percentage + "%]</b>";

}

function addCoverageReportSection(title, contents)
{
var coverage = document.getElementById(MUNIT_COVERAGE + "_contents");

var lineBreak = createLineBreak();
coverage.appendChild(lineBreak);


var sectionID = convertStringToId(MUNIT_COVERAGE + "_contents" + "_" +title);
var section = createSectionDiv(sectionID, MUNIT_COVERAGE_BREAKDOWN);

coverage.appendChild(section);

var header = document.getElementById(sectionID + "_header");
header.innerHTML = title;

if(contents != null)
{
    var content = document.getElementById(sectionID + "_contents");
    content.innerHTML = contents;
}

createToggle(sectionID);
currentCoverageReportID = sectionID;

}

function addCoverageSummary(value)
{
var coverage = document.getElementById(MUNIT_COVERAGE + "_contents");

var lineBreak = createLineBreak();
coverage.appendChild(lineBreak);

var line = createDiv(null, "coverage-summary");
line.innerHTML += value;

coverage.appendChild(line);

}

//////////
function printSummary(value)
{
var lineBreak = createLineBreak();
munitDiv.appendChild(lineBreak);

var coverage = createDiv(MUNIT_SUMMARY, "munit-summary");

coverage.innerHTML = value;
munitDiv.appendChild(coverage);

}

////////////////////// INTERNAL //////////////////

function createTestDiv(id)
{
var test = createSectionDiv(id, "munit-test");
return test;
}

/*

*/
function createSectionDiv(id, clazz)
{
if(document.getElementById(id) != null)
{
return document.getElementById(id);
}

var item = createDiv(id, clazz);

var headerParent = createDiv(id + "_header_parent", clazz + "-header-parent");

var icon = createDiv(id + "_icon", "icon");
headerParent.appendChild(icon);

var header = createDiv(id + "_header", clazz + "-header");
headerParent.appendChild(header);

var contents = createDiv(id + "_contents", clazz + "-contents");
item.appendChild(headerParent);
item.appendChild(contents);

return item;

}

/*


*/
function createDiv(id, clazz)
{
if(id != null && document.getElementById(id) != null)
{
return document.getElementById(id);
}

var div = document.createElement("div");
if(id != null) div.setAttribute("id", id);
if(clazz != null) div.setAttribute("class", clazz);

return div;

}

function createLineBreak()
{
var lb = document.createElement("hr");
//var lb = createDiv(null, "lineBreak");
//lb.innerHTML = "-----------------------------";
return lb;
}

function createToggle(id)
{
var arrow = document.getElementById(id + "_header_arrow");
if(arrow != null) return;

var headerParent = document.getElementById(id + "_header_parent");
headerParent.setAttribute("onclick", "toggleVisibility('" + id + "')");
arrow = createDiv(id + "_header_arrow",  "arrow-closed");
headerParent.insertBefore(arrow, headerParent.firstChild.nextSibling);

var testContents = document.getElementById(id + "_contents");
testContents.style.display = "none";    

}

function removeToggle(id)
{
var arrow = document.getElementById(id + "_header_arrow");

if(arrow == null) return;

var headerParent = document.getElementById(id + "_header_parent");
headerParent.setAttribute("onclick", "");

var arrow = document.getElementById(id + "_header_arrow");
arrow.setAttribute("class", "arrow-none");

var testContents = document.getElementById(id + "_contents");
testContents.style.display = "none";    

}

function toggleVisibility(id, forceOpen)
{
var testContents = document.getElementById(id + "_contents");
if(forceOpen != true) forceOpen = testContents.style.display == "none";

testContents.style.display = forceOpen ? "block" : "none";  

var arrow = document.getElementById(id + "_header_arrow");
arrow.setAttribute("class", forceOpen ? "arrow-open" : "arrow-closed");

}

function convertStringToId(value)
{
value = value.split(" ").join("");
value = value.split(".").join("
");
value = value.split(" ").join("_");
return value;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

3 participants