I've been trying to learn how to use expect.js assertion plugin for my project. My problem is i want to get the error message which only displayed on console section of my browser's inspect element to be alerted into my HTML page when i click my button. Here's what i've been doing so far
<body>
<script>mocha.setup('bdd')</script>
<div id="mocha"></div>
<ol>
<li>tes</li>
<li>tes</li>
<li>tes</li>
<li>tes</li>
<label></label>
<div class="post">
</div>
<button id="klik">Klik</button>
</ol>
<script type="text/javascript">
var salah="";
describe("Index", function () {
it("should have div",function(){
$expect('input').to.exist(function (willThrow) {
// Some cleanup code.
return 'Please add a input to the page.';
});
});
it("should have img",function()
{
$expect('img').to.exist('Please add a img to the page!');
});
it("should have li 4",function()
{
$expect('ol > li').to.have.items(4);
});
});
mocha.run();
var fn = function(){
var missingPorHMsg = "Your div should surround the h2 and two p's";
$expect('div.post').to.exist('Make sure your new div has a class name of "post"!')
.and.to.have.children('h2', missingPorHMsg)
.and.to.have.children('p', missingPorHMsg)
.that.has.elements(4, missingPorHMsg).end()
.and.to.have.css( 'border'
, '1px dashed #ccc'
, "Make sure you give your post div a border!");
};
$('#klik').click(function(e){
alert(fn());
});
</script>
</body>
When i click the button the error will show on console when i check inspect element from my browser. What I'm trying to do is get the error message and alert the message when i click the button.