dart content_shell does not run browser http-client request - testing

I have Linux Ubuntu 12.04LTS and I'm trying to make dart (sdk 1.17.1) test (0.12.13.+5) of such client-side code:
test.html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>test</title>
<script type="application/dart" src="test.dart"></script>
<script src="packages/browser/dart.js"></script>
<script src="packages/test/dart.js"></script>
<link rel="x-dart-test" href="test.dart">
</head>
<body></body>
</html>
test.dart:
#TestOn('browser')
import 'package:http/browser_client.dart';
import 'package:test/test.dart';
void main() {
test('client.get', () {
var client = new BrowserClient();
return client.get('https://hacker-news.firebaseio.com')
.then((result) {
expect(result.statusCode, 200);
});
});
}
With
pub run test -p dartium test/test.dart
test passed OK and there is data exchange between test runner and remote server (firebaseio.com).
But with
pub run test -p content-shell test/test.dart
test failed by timeout and there is no any data exchange with remote server. Why? How to solve this problem?

Related

REST api doesn't seem to work in grails with vue profile

I was following this guide about creating a grails+vue web and created the following "Person" class:
package kpm2
import grails.rest.*
#Resource(uri = '/person', formats = ["json", "xml"])
class Person {
String name
int age
static constraints = {
name blank: false
}
}
#Resource should make it possible to perform REST operations, such as (as shown in the guide):
$ curl -X "GET" "http://localhost:8080/vehicle"
HTTP/1.1 200
X-Application-Context: application:development
Content-Type: application/json;charset=UTF-8
Transfer-Encoding: chunked
Date: Fri, 06 Jan 2017 19:28:49 GMT
Connection: close
[{"id":1,"driver":{"id":1},"make":{"id":1},"model":{"id":1},"name":"Pickup"},
{"id":2,"driver":{"id":1},"make":{"id":1},"model":{"id":2},"name":"Economy"},
{"id":3,"driver":{"id":2},"make":{"id":2},"model":{"id":3},"name":"Minivan"}]
(in the guide they make a vehicle garage with other interconnected classes, but for simplicity and testing purposes I just created a simple Person class. I also followed the guide completely before, but it also didnt work)
But it doesnt work for me. I get this :
$ curl -X "GET" "http://localhost:8080/#/person"
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="/favicon.ico">
<title>Welcome to Grails & Vue</title>
<link href="/js/app.js" rel="preload" as="script"><link href="/js/chunk-vendors.js" rel="preload" as="script"></head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script type="text/javascript" src="/js/chunk-vendors.js"></script><script type="text/javascript" src="/js/app.js"></script></body>
</html>
http://localhost:8080/#/person doesnt seem to exist, even though i specified it in #Resource(uri = "/person")
I dont know what the problem is. I even did some integration tests to see if a Person can be added to the database and they check out.
Following further the guide, the "persons" I added to the database in BootStrap.groovy are not shown in the table that should contain them.
Also the official guide for REST in grails doesn't work in the same way.
I created a new grails app with grails create-app -profile=vue with grails version 5.18
I found that the problem was because of the ports in the docker container configuration.
It worked with this container build:
docker run -p 8080:8080 -p 8081:3000 -v $(pwd):/app <image>

How can I add my ExtWebComponent to a JSP?

I would like to add my web components to my JSP. How do I wire up my ExtWebComponents to do this?
My server side runs in a Servlet Container.
I have a project example showing how to do just that. The client side is the ExtWebComponents and a server side is Java.
Project Notes
Maven multi-module project
Java servlet container on the backend
The client is an ExtWebComponents project, using the pom.xml only to import it easily as a module into an IDE. And to fire off npm builds.
Example Project
JSP Example
<!DOCTYPE HTML>
<html manifest="">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=10, user-scalable=yes">
<title>Sandbox Project</title>
<link rel="icon" type="image/x-icon" href="resources/favicon.ico">
<script src="webcomponents-bundle.js"></script>
<link href="ext/ext.css" rel="stylesheet">
</head>
<body>
Testing
<my-sandbox-view></my-sandbox-view>
<%
out.write("<h2>Test jsp<h2>");
%>
<!-- The webpacked resource bundle is imported here -->
<script type="text/javascript" src="ext/ext.js"></script><script type="text/javascript" src="app.js"></script></body>
</html>
Example Source
Resources from Client to Server
You have to tell webpack to copy the resources to your web app directory so they can be used in your Java project. For example this is how it could be done using a custom plugin, and then using webpack --watch.
// This causes infinite loop, so I can't use this plugin.
// new CopyWebpackPlugin([{
// from: __dirname + '/build/',
// to: __dirname + '/../sandbox-server/target/test1'
// }]),
// Inline custom plugin - will copy to the target web app folder
// 1. Run npm install fs-extra
// 2. Fix the path, so that it copies to the server's build webapp folder
{
apply: (compiler) => {
compiler.hooks.afterEmit.tap('AfterEmitPlugin', (compilation) => {
// Debugging
console.log("########-------------->>>>> Finished Ext JS Compile <<<<<------------#######");
let source = __dirname + '/build/';
// TODO Set the path to your webapp build
let destination = __dirname + '/../sandbox-server/target/sandbox';
let options = {
overwrite: true
};
fs.copy(source, destination, options, err => {
if (err) return console.error(err)
console.log('Copy build success!');
})
});
}
}
Example Source

Polymer 3.0 a11ySuite testing error

I am trying to get a11ySuite in Polymer 3.0 tests to work.
When I am running the test with polymer test, the tests times out, and I can see in the console of the automated browser the following error:
Uncaught ReferenceError: Polymer is not defined
at Suite.a11ySuite.eachTest (a11ySuite.js:51)
at mocha.js:1550
at Object.exports.forEach (mocha.js:1595)
at Suite.eachTest (mocha.js:1550)
at Runner.grepTotal (mocha.js:1224)
at Runner.grep (mocha.js:1215)
at new Runner (mocha.js:1197)
at Mocha.run (mocha.js:592)
at _runMocha (extend.js:41)
at done (util.js:34)
If I am running in debug mode, from polymer serve url, I am getting this error:
a11ySuite.js:49 Uncaught TypeError: fixtureElement.create is not a function
at Suite.a11ySuite.eachTest (a11ySuite.js:49)
at mocha.js:1550
at Object.exports.forEach (mocha.js:1595)
at Suite.eachTest (mocha.js:1550)
at Runner.grepTotal (mocha.js:1224)
at Runner.grep (mocha.js:1215)
at new Runner (mocha.js:1197)
at Mocha.run (mocha.js:592)
at _runMocha (extend.js:41)
at done (util.js:34)
This is also preceded by a bunch of 404 coming from mocha, regarding lodash, sinonjs and test-fixture, assuming this is because it is ran in serve mode.
This is my test code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Verifier - a11y test</title>
<script src="../node_modules/#webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script src="../node_modules/web-component-tester/browser.js"></script>
<script type="module" src="../src/verifier.js"></script>
</head>
<body>
<test-fixture id="BUVA11y">
<template>
<verifier id="verifier"></verifier>
</template>
</test-fixture>
<script>
suite('A11y testing', function() {
a11ySuite('BUVA11y');
});
</script>
</body>
</html>
I can't find more information online, and the docs are very limited on this subject (actually not precise indeed).
a11ySuite was moved to wct-browser-legacy as of web-component-tester version 6.4.3. Given the "legacy" naming, I'm guessing it's deprecated. I assume it's used like this:
<script type="module">
import {a11ySuite} from 'wct-browser-legacy/a11ySuite.js';
a11ySuite('view1'); // "view1" == template name
</script>
But I could not get it to work in an otherwise clean polymer-3-starter-kit project (i.e., the a11ySuite property exists in the module but is always undefined). Setting up a breakpoint where that variable is defined, I can see that the variable is actually never set because the Mocha pre-require event handler is never invoked for whatever reason.
However, it appears that axe-core (via pwa-helpers) is the newest a11y testing tool to use in Polymer 3, based on the test code in pwa-starter-kit:
<script type="module">
import 'axe-core/axe.min.js';
import {axeReport} from 'pwa-helpers/axe-report.js';
suite('views a11y tests', function() {
test('my-view1', function() {
const el = fixture('view1');
return axeReport(el);
});
...
});
</script>

Elm-live opens wrong js file

I'm having problem starting up my elm app. I've entered the correct directory (~ > Projects > elm > KDVnet_elmNERD), and entered this command:
elm-live src/Main.elm --output=elm.js --open --push
but receive this output:
Success! Compiled 1 module.
Successfully generated elm.js
elm-live:
elm-make has succeeded. Starting the server! We’ll open your app
in the default browser as soon as it’s up and running.
[0001] info Server running at http://localhost:8000/ (connect)
[0001] info LiveReload running on 35729
[0002] 30ms 0B GET 304 /
[0002] 5ms 25B GET 404 /script.js
[0016] 3ms 0B GET 304 /
[0016] 1ms 25B GET 404 /script.js
Yesterday, I was working on a javascript project, in a file called 'script.js', which was running on a SimpleHTTPServer, on port 8000 (python -m SimpleHTTPServer 8000), but I've shut down that server.
Here is my Html file:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="/elm.js"></script>
<link rel="stylesheet" type"text/css" href="styles.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.green-orange.min.css">
</head>
<body class="mdl-color--grey-100 mdl-color-text--grey-700 mdl-base">
</body>
<script type="text/javascript">
var app = Elm.Main.fullscreen();
</script>
</html>
I solved the problem by adding 'index.html' to the url (http://localhost:8000/index.html), though I've never had to do that in the past. If anyone has any suggestions what might be going on, I'm happy to hear them.

Google transliterate API problem in Firefox

I am trying to use Google Transliterate API helloWorld in Firefox 4.0.1 and WindowsXP
I am using node.js 0.4.7 to serve the page
When I load the page through node.js, i get the following error: "attempt to run compile-and-go script on a cleared scope"
The page is rendered successfully if I double-click it and open in Firefox from disk, or if I open it in IE8, Opera or Chrome
Any idea why this happens and what is the way around it? Here is the code:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="https://www.google.com/jsapi?api-key-here">
</script>
<script type="text/javascript">
// Load the Google Transliterate API
google.load("elements", "1", {
packages: "transliteration"
});
function onLoad() {
var options = {
sourceLanguage:
google.elements.transliteration.LanguageCode.ENGLISH,
destinationLanguage:
[google.elements.transliteration.LanguageCode.URDU],
shortcutKey: 'ctrl+g',
transliterationEnabled: true
};
// Create an instance on TransliterationControl with the required
// options.
var control =
new google.elements.transliteration.TransliterationControl(options);
// Enable transliteration in the textbox with id
// 'transliterateTextarea'.
control.makeTransliteratable(['transliterateTextarea']);
}
google.setOnLoadCallback(onLoad);
</script>
</head>
<body>
Type in Urdu (Press Ctrl+g to toggle between English and Urdu)<br>
<textarea id="transliterateTextarea" style="width:600px;height:200px"></textarea>
</body>
</html>