Kotlin versions 1.0.x-1.1.0 support out of the box unit testing with QUnit but when I load tests it throws this exception:
ReferenceError: ok is not defined
at QUnitAsserter.assertTrue_4mavae$ (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:50:5)
at assertTrue (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:93:27)
at QUnitAsserter.assertTrue_o10pc4$ (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:47:5)
at QUnitAsserter.Asserter.assertEquals_lzc6tz$ (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:182:10)
at assertEquals (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/lib/kotlin-test-js.js:108:20)
at AppTest.myFirstTest (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/app_test.js:17:5)
at Object.<anonymous> (file:///D:/neoranga/Mis%20documentos/GitHub/FibonacciCounter/app/build/classes/test/app_test.js:29:21)
This is my test class:
import org.junit.Test
import kotlin.test.assertEquals
class AppTest {
#Test fun myFirstTest() {
assertEquals(1, 1, "Test in test folder works")
}
}
This is the html code that loads the test:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fibonacci Counter</title>
<link rel="stylesheet" href="css/app.css">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-2.1.1.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<footer id="info">
<p>Placeholder</p>
</footer>
<span id="text"></span>
<script src="external_libs/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/qunit/qunit-2.1.1.js"></script>
<script src="lib/kotlin.js"></script>
<script src="lib/kotlin-test-js.js"></script>
<script src="app_main.js"></script>
<script src="app_test.js"></script>
</body>
</html>
The problem is in the version of QUnit 2.1.1, by using version 1.23.1 the problem is solved.
This is the html code that loads the test with the fix:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Fibonacci Counter</title>
<link rel="stylesheet" href="css/app.css">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="https://code.jquery.com/qunit/qunit-1.23.1.css">
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
<footer id="info">
<p>Placeholder</p>
</footer>
<span id="text"></span>
<script src="external_libs/jquery-3.1.1.min.js"></script>
<script src="https://code.jquery.com/qunit/qunit-1.23.1.js"></script>
<script src="lib/kotlin.js"></script>
<script src="lib/kotlin-test-js.js"></script>
<script src="app_main.js"></script>
<script src="app_test.js"></script>
</body>
</html>
Related
I start to learn vuejs and I can't explain this bug. The vuejs mustache syntax doesn't work in this exemple :
the html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vue Basics</title>
<link
href="https://fonts.googleapis.com/css2?family=Jost:wght#400;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="styles.css" />
<script src="https://unpkg.com/vue#next" defer></script>
<script src="app.js" defer></script>
</head>
<body>
<header>
<h1>test mustache syntax</h1>
</header>
<section id="user-goal">
<h2>titre</h2>
<p>{{ test }}</p>
</section>
</body>
</html>
the js file
const app = Vue.createApp({
data() {
return {
test: 'bonjour'
};
}
});
app.mount('#user-goal');
Can someone tell me why i get this result?
I am trying to make a basic rectangle inside of my webpage using svg.js. I have the library installed via npm and i have refrenced the source file in a script tag, but my SVG drawing will not show up.
The console provides the error, "Uncaught ReferenceError: SVG is not defined",
Here is a snippet of my project
var draw = SVG('drawing').size(300, 300);
var rect = draw.rect(100, 100).attr({
fill: '#f06'
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" type="text/css" href="main.css">
<title>Breathe</title>
</head>
<body>
<div class="container">
<div class="header-container">
<div class="title-container">
<div>Title</div>
<div></div>
<div></div>
</div>
</div>
<div class="main-container">
<div id="drawing"></div>
</div>
<div class="footer-container">
</div>
</div>
<script src="main.js" type="text/javascript"></script>
<script src="node_modules\svg.js\dist\svg.js"></script>
</body>
</html>
You loaded the main.js file first and then svg.js. Try reversing the order.
<script src="node_modules\svg.js\dist\svg.js"></script>
<script src="main.js" type="text/javascript"></script>
I'm connected to my server via npm install -g http-server on Terminal, that's working fine. I just want to see if my h1 tag works so I can proceed to making a practice website. I feel like my mainPage.html may be a little off.
Here's my mainPage.html file:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
</body>
<div id="website"></div>
<script type="text/babel" src="mainPage.js"></script>
</script>
</html>
Here's my mainPage.js file:
var Website = React.createClass({
render: function() {
return(
<h1>Why won't my h1 tag appear!</h1>
);
}
});
ReactDOM.render(<Website/>, document.getElementById('website'));
You need to import babel.js, react and reactDOM
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
Include the reference of react, react-dom and babel, Check this working code:
<!DOCTYPE html>
<html>
<head>
<title>Testing</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.23.1/babel.min.js"></script>
</head>
<body>
</body>
<div id="website"></div>
<script type="text/babel" >
var Website = React.createClass({
render: function() {
return(
<h1>Why won't my h1 tag appear!</h1>
);
}
});
ReactDOM.render(<Website/>, document.getElementById('website'));
</script>
</html>
I am new to qunit.I am running simple testcase in qunit.but nothing is getting displayed on screen.
This is HTML Runner:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Demo</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.14.0.css">
<script src="//code.jquery.com/qunit/qunit-1.14.0.js"></script>
<script src="MyJsUnitTests.js"></script>
<script src="MyJsSourceCode.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
This is MyJsSourceCode.js
var ArthimeticOperations = {
addTwoNumbers : function (number1, number2) {
return number1 + number2;
}
}
This is MyJsUnitTests.js
test('Addition Test', function () {
strictEqual(ArthimeticOperations.addTwoNumbers(3, 5), 8, "Tested the addition functionality");
});
Try swapping the source code and test code includes... my guess is that your tests start running before the source code is included in the page:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>QUnit Demo</title>
<link rel="stylesheet" href="//code.jquery.com/qunit/qunit-1.14.0.css">
<script src="//code.jquery.com/qunit/qunit-1.14.0.js"></script>
<!-- SWAP THESE TWO...
<script src="MyJsUnitTests.js"></script>
<script src="MyJsSourceCode.js"></script>
Like so:
-->
<script src="MyJsSourceCode.js"></script>
<script src="MyJsUnitTests.js"></script>
</head>
<body>
<div id="qunit"></div>
<div id="qunit-fixture"></div>
</body>
</html>
Hello friends i am making a coming soon
HTML template and using countdown timer ,
i want to make time
refresh automatically after 1 sec
i want to make the javascript execute atumatically
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="nineforo,9foro">
<title>9foro | Coming soon</title>
<link rel="stylesheet" href="" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Philosopher:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.pack.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
$(function () {
$('#countdown').countdown({until: new Date(2014, 5 - 1, 1)});
});
</script>
</head>
<body>
<div id="wrapper">
<header>
<h2>9fORO</h2>
<section id="timer">
<p>Estimated time remaining before official launch:</p>
<div id="countdown"></div>
</section>
</div>
</body>
</html>
Can not find your script jquery.countdown.pack.js. But you can try https://github.com/hilios/jQuery.countdown
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<meta name="keywords" content="nineforo,9foro">
<title>9foro | Coming soon</title>
<link rel="stylesheet" href="" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Philosopher:700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.countdown.pack.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/hilios/jQuery.countdown/master/dist/jquery.countdown.min.js"></script>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript">
$(function () {
$('#countdown').countdown("2014/14/04",function(event){
$(this).html(event.strftime('%D days %H:%M:%S'));
});
});
</script>
</head>
<body>
<div id="wrapper">
<header>
<h2>9fORO</h2>
<section id="timer">
<p>Estimated time remaining before official launch:</p>
<div id="countdown"></div>
</section>
</div>
</body>
</html>