We have been working on mocha and chai to write the unit test cases for the typescript project. But when we use the import module statement in the test spec file and launch html to run test cases on the browser, the mocha interface loads but no test cases run on the browser. It keeps on showing passes: 0
failures: 0
duration: 0s and the browser doesn't even throw some error to point out the exact issues.Browser snapshot
If we go to the sources folder in the browser then the test spec file, chai.js, and mocha.js load successfully.
Official steps have been followed to integrate the mocha and chai test cases.
Here is the sample code structure:
index.ts:
export class SampleClass {
sayHello() {
return "Hello, world!";
}
}
SampleSpec.ts
import { SampleClass } from "../src/index.js";
var expect = chai.expect;
var assert = chai.assert;
describe("Sample", () => {
it("says hello", () => {
console.log("Inside it block");
const sample = new SampleClass();
const result = "Hello";
expect(result).to.equal(sample.sayHello);
});
});
index.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<!-- <script src="../node_modules/chai/chai.js"></script>
<script src="../node_modules/mocha/mocha.js"></script> -->
<script src="https://cdn.jsdelivr.net/npm/chai#4.2.0/chai.js"></script>
<script src="https://cdn.jsdelivr.net/npm/mocha#10.2.0/mocha.js"></script>
</head>
<body>
<div id="mocha"></div>
<script type="module" src="../test/Castor.spec.js"></script>
<script>
mocha.setup("bdd");
mocha.run();
</script>
</body>
</html>
tsconfig:
{
"compilerOptions": {
"target": "ES2020",
"module": "ES2020",
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"strict": true,
"skipLibCheck": true
}
}
Note: It is working on safari and giving the right results of unit testing but not running on chrome browser.
Can someone help what's the issue here when running on chrome?
Related
I use MathJax with my Jekyll blog on GitHub Pages. In fact, I wrote a blog post on exactly what steps I took to set up MathJax 2.7.5: "MathJax in Jekyll" (August 2018)
For a couple of posts, I wanted to use a psmallmatrix environment, like the one from the mathtools package: $$\begin{psmallmatrix} 1 \\ 0 \end{psmallmatrix}$$. I know how I would create such an environment in actual TeX, using the \newenvironment command: "How do I make a small pmatrix?"
But to get the command "pre-loaded" in MathJax 2.7.5, I was doing this, cargo-culting some code from MathJax's version of the AMSmath package:
<script type="text/x-mathjax-config">
MathJax.Hub.Config({
extensions: [
"MathMenu.js",
"MathZoom.js",
"AssistiveMML.js",
"a11y/accessibility-menu.js"
],
jax: ["input/TeX", "output/CommonHTML"],
TeX: {
extensions: [
"AMSmath.js",
"AMSsymbols.js",
"noErrors.js",
"noUndefined.js",
]
}
});
MathJax.Hub.Register.StartupHook("TeX Jax Ready",function () {
var TEX = MathJax.InputJax.TeX;
var COLS = function (W) {
var WW = [];
for (var i = 0, m = W.length; i < m; i++)
{WW[i] = TEX.Parse.prototype.Em(W[i])}
return WW.join(" ");
};
TEX.Definitions.Add({
environment: {
psmallmatrix: ['Array',null,'(',')','c',COLS([1/3]),".2em",'S',1],
}
});
});
</script>
<script type="text/javascript" async
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.5/latest.js">
</script>
Sometime in the past year or so, MathJax 2.7.5 completely stopped working on GitHub, so I'm trying to upgrade to MathJax 3.0.
I have managed to translate the non-tricky parts of this config by using MathJax's own config converter, but I don't know what to do about my hand-crafted psmallmatrix.
Here's what I have now:
<script type="text/javascript">
window.MathJax = {
tex: {
packages: ['base', 'ams'],
},
loader: {
load: ['ui/menu', '[tex]/ams'],
},
};
</script>
<script type="text/javascript" id="MathJax-script" async
src="https://cdn.jsdelivr.net/npm/mathjax#3/es5/tex-chtml.js">
</script>
How can I recover my hand-crafted psmallmatrix environment, in MathJax 3.0? The formatting need only be roughly equivalent, as long as I can keep invoking it with \begin{psmallmatrix}.
I should mention that the MathJax docs on "Defining TeX Macros" give an example of how to "preload" the TeX parser with a macro, roughly equivalent to what \newcommand would do. The docs say:
window.MathJax = {
tex: {
macros: {
RR: "{\\bf R}",
bold: ["{\\bf #1}", 1]
}
}
};
But the docs are missing any examples of how to do the same kind of thing for \newenvironment.
Below is a configuration that adds the psmallmatrix environment to the AMS environment list. There should be a method to pre-configure environments that is similar to what is done for macros. I've made a feature request for it in the MathJax GitHub repository.
For now, add
<script>
MathJax = {
startup: {
ready() {
MathJax.startup.defaultReady();
const Macro = MathJax._.input.tex.Symbol.Macro;
const MapHandler = MathJax._.input.tex.MapHandler.MapHandler;
const Array = MathJax._.input.tex.ams.AmsMethods.AmsMethods.Array;
const env = new Macro('psmallmatrix', Array, [null,'(',')','c','.333em','.2em','S',1]);
MapHandler.getMap('AMSmath-environment').add('psmallmatrix', env);
}
}
};
</script>
as your configuration to enable the psmallmatrix environment.
I trained a custom object detection model using Google Cloud AutoML and exported the model as a TensorflowJS package.
However, when I try running the model using the HTML deployment example they have here https://cloud.google.com/vision/automl/object-detection/docs/tensorflow-js-tutorial?hl=en_US, it does not seem to work.
My tensorflowjs package from the export (model.json, dict.txt, group1-shard1of3,group1-shard2of3, group1-shard3of3)
are in the same directory as the index.html. I also have an index2.html. In index.html I use the same
imports for tfjs and tfjs-automl as the example here. In the index2.html I use CDN sources for tfjs and tfjs-automl.
The create web app example I followed is : https://github.com/tensorflow/tfjs/blob/master/tfjs-automl/code_snippets/object_detection.html
My repo with my custom object detection model is: https://github.com/mmmwembe/automl-tensorflowjs.git including the tensorflowjs model package and the test-images.
My Index.html file is:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cards AutoML Model - TensorflowJS</title>
</head>
<body>
<script src="https://unpkg.com/#tensorflow/tfjs"></script>
<script src="https://unpkg.com/#tensorflow/tfjs-automl"></script>
<img id="test-image" src="test-images/test-image-01.jpg">
<script>
async function run() {
const model = await tf.automl.loadObjectDetection('model.json');
const img = document.getElementById('test-image');
const options = {score: 0.5, iou: 0.5, topk: 20};
const predictions = await model.detect(img, options);
// [END load_and_run_model]
console.log(predictions);
// Show the resulting object on the page.
const pre = document.createElement('pre');
pre.textContent = JSON.stringify(predictions, null, 2);
document.body.append(pre);
}
run();
</script>
</body>
</html>
What am I missing here?...I've run this with Chrome browser using Live Server in vscode editor as well as with nodejs using http-server -p 8000
I'm using webpack for bundling my js-files so normally I only see one big bundled file under sources in Chrome. However if I add a debugger; to my .tsx file I can see a single file just fine. My question is if I can get webpack to output all my files in Chrome Source so that I can browse them there and just click a row if I wan't the debugger to stop?
In the screenshot below I would like a folder for Scripts/src and then all my files.
Sample code:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<title>App</title>
</head>
<body>
<div id="app"></div>
<script src="/Scripts/dist/bundle.js"></script>
</body>
</html>
index.tsx:
import * as React from "react";
import * as ReactDOM from "react-dom";
import * as ReactRouter from "react-router";
import * as ReactBootstrap from "react-bootstrap";
import { Test } from "./components/test";
ReactDOM.render(
<div>
<Test text="Well!" />
<Container />
</div>,
document.getElementById("app")
);
test.tsx:
import * as React from "react";
export interface ITestProps {
text: string
}
export class Test extends React.Component<ITestProps, {}> {
render() {
debugger;
return <div className="well">{this.props.text}</div>;
}
}
webpack.config.json:
var webpack = require('webpack');
var path = require("path");
var proxy = 'localhost:61299';
module.exports = {
entry: [
// activate HMR for React
'react-hot-loader/patch',
// the entry point of our app
'./Scripts/src/index.tsx',
],
output: {
filename: "./Scripts/dist/bundle.js",
},
// Enable sourcemaps for debugging webpack's output.
devtool: "source-map",
resolve: {
// Add '.ts' and '.tsx' as resolvable extensions.
extensions: [".webpack.js", ".web.js", ".ts", ".tsx", ".js"]
},
module: {
loaders: [
{ test: /\.tsx?$/, loader: ['react-hot-loader/webpack', 'ts-loader'] }
]
},
plugins: [
// enable HMR globally
new webpack.HotModuleReplacementPlugin(),
// prints more readable module names in the browser console on HMR updates
new webpack.NamedModulesPlugin(),
],
devServer: {
proxy: {
'*': {
target: 'http://' + proxy,
}
},
port: 8080,
host: '0.0.0.0',
hot: true,
},
}
Since you already generate source maps with webpack (devtool: "source-map") this should already work ;)
Instead of viewing sources in "localhost", use the webpack:// item in the chrome debugger. This is the last item in your screenshot.
If the generation of the source maps works correctly you should have your source folder structure there. It may be contained in an folder called ..
For example:
I have to warn you though. Sometimes source maps don't work correctly and you break points end ups somewhere else :-x
I am contemplating moving from Dart to ES6 but Chrome doesn't seem to support the new import statement which is critical to me.
I used the (named export) code from this site: http://www.2ality.com/2014/09/es6-modules-final.html
I tried it even with
<module import="main"><module>
I get the error: "Unexpected token import"
Any information if they will support it before the final release ?
code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ES6</title>
</head>
<body bgcolor="blue">
<script type="module" src="main.js"></script>
</body>
</html>
main.js
import { square, diag } from 'lib';
console.log(square(11)); // 121
console.log(diag(4, 3)); // 5
lib.js:
export const sqrt = Math.sqrt;
export function square(x) {
return x * x;
}
export function diag(x, y) {
return sqrt(square(x) + square(y));
}
It works now, finally in Chrome 60 with the Experimental Web Platform features enabled.
Here is a test:
https://github.com/paulirish/es-modules-todomvc
See here for status news:
https://www.chromestatus.com/features/5365692190687232
Safari Tech Review 19, via WebKit, now supports modules.
https://twitter.com/Constellation/status/806660783312543744
https://webkit.org/status/
I am trying to make an app the generates 'live' graphs of Twitter word counts, basically trying to extend and exercise in Chapter 14 of NodeJS in 24 Hours. I decided to use 'Rickshaw' and I thought I'd start with simply getting a simple example working. However, while I can get a simple html page to load, I can't get a graph to display. Firefox debug indicates: "ReferenceError: Rickshaw is not defined [Break On This Error] graph = new Rickshaw.Graph( { " . That means that there is a referencing error but after a couple of hours of googling and reading, I'm not seeing it. The directory structure is correct; npm installed all modules correctly, no errors. Can anyone see what I'm missing?
Note: I am new to JS/Node and while the book is working in Express 2.x, I have been working in Express 3.x, so not sure if I've got the translation correct in all cases. The code is as follows:
package.json
{
"name":"socket.io-twitter-example",
"version": "0.0.1",
"private": "true",
"dependencies": {
"express": ">=2.5.4",
"rickshaw": ">=1.1.0"
}
}
app.js
var express = require('express'),
rickshaw = require('rickshaw'),
app = express(),
http = require('http'),
server = http.createServer(app)
server.listen(3000);
app.get('/', function (req,res) {
res.sendfile(__dirname + '/index.html');
});
index.html
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8" />
<title>Socket.IO Twitter Example</title>
</head>
<body>
<h1>Rickshaw Example</h1>
<div id="chart"></div>
<ul class="tweets"></ul>
<script type="text/javascript" src="node_modules/rickshaw/vendor/d3.v2.js"></script> //don't think "node_modules/" is required, but doesn't work without either
<script type="text/javascript" src="node_modules/rickshaw/rickshaw.min.js"></script>
<script>
graph = new Rickshaw.Graph( {
element: document.querySelector("#chart"),
width: 285,
height: 180,
series: [{
color: 'steelblue',
data: [
{ x: 0, y: 40 },
{ x: 1, y: 49 },
{ x: 2, y: 38 },
{ x: 3, y: 30 },
{ x: 4, y: 32 } ]
}]
});
graph.render();
</script>
</body>
</html>
You need to configure express.static middleware so that express knows where to look for static resources like js and css files:
app.use(express.static( __dirname + '/public'));
Its common to put such resources into a public folder (as shown in the example above) or static folder.
If you create a public folder and organize it like
app.js
public
rickshaw
vendor
d3.v2.js
rickshaw.min.js
then you'll be able to have the files correctly loaded in your html using
<script type="text/javascript" src="/rickshaw/vendor/d3.v2.js"></script>
<script type="text/javascript" src="/rickshaw/rickshaw.min.js"></script>
See this section of the express docs for more info on and examples of middleware.