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>
Related
This is a rookie question. I'm trying to take some baby-steps into Electron, Vue, Webpack, and Node. To that end, I've used electron-forge to spool out a boilerplate project as a starting point, like this:
npx create-electron-app my-project --template=typescript-webpack
After the project has been created everything (seemingly) works as expected. If I make any edits I can see webpack is invoked and reloading the content reveals my edits. So far so good.
My next step was to introduce the simplest Vue.js 'hello world' content I could. First, I install Vue.js using NPM, like this:
npm install "vue"
I then edit the boilerplate index.html to look like this:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
<script src="../node_modules/vue/dist/vue.js"></script>
</head>
<body>
<h1>💖 Hello World!</h1>
<p>Welcome to your Electron application.</p>
<div id="vue-app">
{{ message }}
</div>
<script>
var app = new Vue({
el: '#vue-app',
data: {
message: 'This message is from Vue!'
}
})
</script>
</body>
</html>
Which does not work. If I change the script tag to use the CDN for the Vue.js script (instead of the node_modules folder), everything works as expected.
My conclusion is that although I can reference Vue.js in my node_modules folder at design time that location does not exist in my output at run time. I'm not certain if that is due to how webpack is configured, or due to how electron works - but it strongly implies there must be something I need to do, either programmatically or via the webpack configuration to properly reference the script.
So what is the right way to 'reference' the local Vue.js script?
Thanks!
You need to reference vue via some bundler like webpack (otherwise, like you said, it is not available at runtime). Your method won't work because the generated file structure isn't the same as the one you have during 'design time'
Here's an example with vue-cli which sets up a starter project:
npm i -g #vue/cli
vue create project-name
cd project-name
vue add electron-builder
npm install
Done. Your project is operational.
With one little caveat you would encounter later, if you are using vue-router. Add the following in router.js (it changes router mode to hash instead of history so it works with electron).
export default new Router({
mode: process.env.IS_ELECTRON ? 'hash' : 'history',
})
As a sidenote, vue-cli abstracts away a lot of config. If you ever get lost, just print it out with
vue inspect > ./app/inspect.js.md
(The part after > means save to the named file, otherwise it would print it out in your console.) Check it out, that's the correct set up you're looking for, just auto created with vue-cli.
Also, check out the generated /public/index.html, it has no mention of importing vue ;)
Best of luck
After some tinkering, I came up with this solution:
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<h1>💖 Hello World!</h1>
<p>Welcome to your Electron application.</p>
<div id="vue-app">{{ message }}</div>
</body>
</html>
I then added an import statement to the electron-forge boilerplate renderer.ts, like this:
import './vueapp.js';
and finally, I created a new script file called vueapp.js like this:
import Vue from 'vue/dist/vue.js';
var app = new Vue({
el: '#vue-app',
data: {
message: 'Hello Vue!'
}
});
I welcome feedback and comments; this may or may not be the correct approach and would love to hear how others have done this.
I'm trying to get my app rendering from the server and so was trying to implement the ServerRendering example from here: http://redux.js.org/docs/recipes/ServerRendering.html
I can successfully run server.js but I get an "Uncaught SyntaxError: Unexpected token <" error # bundle.js:2 once I load up localhost. I believe it has to do with the renderFullPage() function:
function renderFullPage(html, initialState) {
return `
<!doctype html>
<html>
<head>
<title>Redux Universal Example</title>
</head>
<body>
<div id="root">${html}</div>
<script>
window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
</script>
<script src="/dist/bundle.js"></script>
</body>
</html>
`
}
If I remove the line <script src="/dist/bundle.js"></script> the error goes away, but then the counter doesn't work.
Here is the bundle.js that the error references:
bundle.js
It should be referencing bundle.js in my dist folder but it's not for some reason? If I make an index.html file exactly the same as what renderFullPage is returning, except getting rid of ${html} and
<script>
window.__INITIAL_STATE__ = ${JSON.stringify(initialState)}
</script>
then the counter works fine. When I do the server side rendering it seems like the client can't find the bundle.js code so creates one that has the exact same code as what it received from the server, and so there is an error as it runs into html when it's expecting javascript.
It's because your bundle.js contains HTML rather than your client-side scripts. Are you using a catch-all route and not letting it load your static assets? Your express.static middleware use call should go before this bit of code (middleware order matters).
Before Famo.us completely changed their architecture I was developing some Apps using Famo.us, RequireJS, EJS Templates, Node and some other stuff.
But now when I come to replace the old Famo.us architecture with the new Famo.us 'Engine' I am getting errors - which tells me the architecture is wrong for the new approach - so wondered if you guys can help me.
Background
Server is Node.js, Express 4 and some other stuff
Client will be Famo.us, EJS Templates and some other stuff
The current approach is that the '/' Router calls an 'ejs' template.
index.ejs:
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
<meta name="mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="stylesheet" type="text/css" href="/css/famous.css" />
<link rel="stylesheet" type="text/css" href="/css/style.css" />
</head>
<body>
<script data-main="/js/webmain.js" src="/js/vendor/requirejs/require.js"></script>
</body>
</html>
This worked fine with old Famo.us architecture...and would call the webmain.js script using RequireJS.
webmain.js:
/* globals require */
require.config({
baseUrl: "js",
nodeRequire: require,
paths: {
"famous": "vendor/famous",
"famous-flex": "vendor/famous-flex/src",
json2: "vendor/json2",
"requirejs": "vendor/requirejs/require",
"socketcluster": "vendor/socketcluster",
"ua-parser" : "vendor/ua-parser.min",
"uuid": "vendor/uuid"
}
});
require(["platform"]);
The 'platform.js' script would contain the following:
define('platform', function(require, exports, module) {
'use strict';
var Engine = require("famous/core/Engine");
var contentContext = Engine.createContext();
var Widget = require('app/widgets/DefaultWidget');
var mainView = new Widget();
var contextSize = [undefined, undefined];
contentContext.setPerspective(1);
Engine.nextTick(function() {
contextSize = contentContext.getSize();
mainView.setOptions({size: [contextSize[0], contextSize[1]]});
contentContext.add(mainView);
});
contentContext.on('resize', function(e) {
contextSize = contentContext.getSize();
if (mainView) mainView.setOptions({size: [contextSize[0]*1, contextSize[1]*1]});
}.bind(this));
});
But the new version of Famo.us will not work using this approach and I wanted to ask your thoughts as to why, or if there was another way they have not mentioned?
I have updated the Famou.us source code in 'vendor/famous' to use the 'Famo.us Engine' code from github. If I replace the old Famo.us code in the 'platform.js' script with new Famo.us code - like this:
define('platform', function(require, exports, module) {
'use strict';
var FamousEngine = require('famous/core/FamousEngine');
var DOMElement = require('famous/dom-renderables/DOMElement');
FamousEngine.init();
var scene = FamousEngine.createScene();
var node = scene.addChild();
var domEl = new DOMElement(node, {
content: 'Hello World',
properties: {
fontFamily: 'Arial'
}
});
});
I get the following errors:
Uncaught Error: Module name "Clock" has not been loaded yet for context: _. Use require([]) require.js:8
Uncaught Error: Module name "../utilities/CallbackStore" has not been loaded yet for context: _. Use require([]) require.js:8
Uncaught TypeError: Cannot read property 'init' of undefined platform.js:28
I guess I am trying to understand, when the RequireJS skeleton is pretty much the same, why it doesn't work? Why Famo.us is undefined, and why the new Famo.us architecture can break so much - and what the 'new' way of integrating famo.us would be?
I have asked questions on their 'slack' IRC but it doesn't seem to be a way to get answers and a really poor 'help'.
Any help would be greatly appreciated as I am really stuck from moving forward at the moment.
Thanks again.
Famo.us version 0.3.5 and earlier used RequireJS using AMD.
The new version 0.5.0+ uses the node.js flavor of CommonJS and uses Browserify to build a bundle of your javascript application for the browser.
The following from an Answer in this question sums it up. More about their similarities and differences in the answers.
RequireJS implements the AMD API (source).
CommonJS is a way of defining modules with the help of an exports object, that defines the module contents.
I'm trying to add a simple progress bar to my application in rails using jquery-ui. I'm following this example: http://jqueryui.com/progressbar/
I create the div
<div id="progressbar"></div>
and in my JS I have
$(document).ready( function() {
$("#progressbar").progressbar({
value: 37
});
});
But nothing happens to the div in the html - it remains empty and unstyled(ie no additional CSS is applied to it).
I have checked that I have jquery-ui included in my application - in particular, I have made certain the jquery-ui css file is included.
However, I am willing to bet the problem has something to do with jquery-ui not working properly in my app, because I was having another issue with it and the tooltip function, which I asked about over here: positioning jQuery tooltip
This is driving me nuts, does anyone have any ideas?
I had the same problem right now.
It seems like the referenced libaries in the example do not work.
The error i get from the "Firefox - Developer Tools - Browser Console" is:
ReferenceError: $ is not defined
(I tested on Firefox 32.0.3 and IE 11)
If you just copy the example html/jquery source from "http://jqueryui.com/progressbar/" to a local file (lets call it: "testJqueryProgressBar.html") and double click it, you will see no progress bar!
Source of "testJqueryProgressBar.html":
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery UI Progressbar - Default functionality</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//jqueryui.com/resources/demos/style.css">
<script>
$(function()
{
$( "#progressbar" ).progressbar({ value: 37 });
});
</script>
</head>
<body>
<div id="progressbar"></div>
</body>
</html>
Therefore i checked the links in the header of the example and all reference something.
So the links are valid!
I even tried to reference the jquery libs from another provider, f.e. : https://developers.google.com/speed/libraries/devguide?hl=de#jquery-ui.
Same problem!
Then i went to http://jqueryui.com/download/
Selected Version : 1.11.1 (Stable, for jQuery1.6+)
Selected a different UI theme at the bottom
Downloaded the zip and referenced these unziped jquery sources in my local example testJqueryProgressBar.html and it worked.
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>