I'm working on a Flutter web project. The web/index.html file is injecting a JavaScript script which could be simplified as:
<script>
window['dataLayer'] = [];
</script>
So in my flutter code, I can do:
#JS()
import 'package:js/js.dart';
#JS('dataLayer.push')
external void push(data);
push(myData);
to push myData in the window.dataLayer array.
However, in the tests, when I'm running
flutter test --platform chrome
I'm getting the error
TypeError: Cannot read properties of undefined (reading 'push')
when I call
push(myData);
because window['dataLayer'] has never been created.
How can I inject some javascript scripts the same way I can do in the index.html?
It is possible to load a custom HTML file while running the tests, see the instructions of the package test.
If your test file name is folder/my_test.dart, then you can create a html file named (folder/my_test.html):
<!doctype html>
<html>
<head>
<title>Custom HTML file title</title>
<link rel="x-dart-test" href="my_test.dart">
<script src="packages/test/dart.js"></script>
<script>
window['dataLayer'] = [];
</script>
</head>
</html>
See this StackOverflow question.
and then you can run
dart test --platform chrome
However, this is only supported with dart test and not flutter test, see this issue. In it, they recommend writing an integration test instead.
Related
I have installed the "lodash" using "npm install --save lodash" and imported in my JS file.My intention is to Deep clone of an Object and found that Lodash is the library which solve this problem. My HTML and JS files are as follows.
My HTML file is as follows.
<!DOCTYPE html>
<html lang="en">
<body>
<script type="module" src="scripts.js" ></script>
</body>
</html>
My JS file (scripts.js) is as follows:
import _ from 'lodash';
let userOne = {
name: "Siju",
userFunction:function(){
return this.name;
}
};
// Deep Copy: Start
let userTwo=_.cloneDeep(userOne);
// Deep Copy: End
userTwo.name="Johnson";
userTwo.userFunction=function(){ return this.name.length }
console.log(userOne.name);
console.log(userTwo.name);
console.log(userOne.userFunction());
console.log(userTwo.userFunction());
But i am getting following errors.
Error1: (When use: import _ from 'lodash';)
Uncaught TypeError: Failed to resolve module specifier "lodash". Relative references must start with either "/", "./", or "../".
Error2: (When use: import _ from './node_modules/lodash';)
Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.
I have spend lot of time on this and did'nt get any suitable solution. I am really frustrated on this issue because it is a silly issue but did'nt get any proper fix in the internet. Most of the explanation is seems to be with so many dependency fixes and all. But no any fixes are worked for me. So anyone can be come up with simple and proper fix for this. Thank You Very Much in Advance!
You can go to http://lodash.com/ and download the entire .js file into your current project folder and then include the following line in your HTML body paragraph.
<script src="lodash.js"> </script>
And then import it at the top of your JavaScript file in which you would like to use it.
import _ from 'lodash'
I want to use modules in my javascript and html. When i use systemjs with version 5, i am getting error, in github i cant see the steps to configuration. If i removed System.config from below code, at that time i getting CORS issue.
What are the package i have to use to run modules in javascript and html
How to set the configurations for latest version
<!-- <script src="node_modules/traceur/bin/traceur.js"></script>
<script src="node_modules/systemjs/dist//system.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/5.0.0/system.js"></script>
</head>
<body>
<script>
//Configuration
System.config({
'meta': {
'./js/*.js': {
format: 'esm'
}
}
});
System.import('./js/app.js');
</script>
I am getting Error : index.html:18 Uncaught TypeError: System.config is not a function. if I removed system.config i am getting Error : Unable to resolve bare specifier "js/app.js" from file:///C:/Train/ES6/systemjss/ at throwBare (system.js:184) at resolveImportMap (system.js:180) at system.js:734
On the Firebug Lite website there is information on how to write an extension for Firebug Lite, but it doesn't say how to deploy that extension.
I read that deploying an extension for Firebug is like installing a plugin in Firefox. Is it gonna be the same for an extension of Firebug Lite?
You should be able to extend Firebug Lite by simply including your script on the page as shown on the Firebug Lite website:
Firebug.extend(function(FBL) { with (FBL) {
// ***********************************************************************
function PluginPanel(){};
PluginPanel.prototype = extend(Firebug.Panel,
{
name: "Plugin",
title: "Plugin",
initialize: function(){
Firebug.Panel.initialize.apply(this, arguments);
this.panelNode.innerHTML = "Hello World!";
}
});
Firebug.registerPanel(PluginPanel);
// ***********************************************************************
}});
To include your extension the code needs to be executed after Firebug Lite is loaded. E.g. this can be done by saving the code above into a file and include it via a <script> tag after including Firebug Lite:
<script type="text/javascript" src="https://getfirebug.com/firebug-lite.js"></script>
<script type="text/javascript" src="my-firebug-lite-extension.js"></script>
I use "babel" command to transpile ES6 script to ES5.
Ex: babel testES6.js --out-file testES5.js
It works fine. My question is how to transpile inline javascript.
For Ex: test.html
<html>
<head>
<script type="text/javascript">
//ES6 scripts
</script>
</head>
</html>
According the babel docs, it supports scripts typed text/ecmascript-6 or text/babel. Add the browser build into your page and set proper type for your scripts.
You can use this code and enjoy :)
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script>
<script type="text/babel">
</script>
During the development process, I've been using elm-reactor to test my one-page Elm application. But for production deployment, I would like to just store the compiler's output as static files on a webserver.
How do I compile an Elm page into a standalone pair of HTML + Javascript files?
Use elm-make to compile your Elm application to elm.js (target the module that defines main).
Create your own HTML file that includes that script and a script in the body that executes Elm.<Module-that-defines-main>.fullscreen()
Example
App.elm
module App where
import Text
import Signal
import Graphics.Element (Element)
main : Signal Element
main = "Hello World!" |> Text.asText |> Signal.constant
elm-make App.elm (creates elm.js)
App.html
<!DOCTYPE html>
<html>
<head>
<script src="elm.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">Elm.App.fullscreen()</script>
</body>
</html>
The answer to this ticket on the github project page is also quite helpful:
Finally, use this command to compile the file into a single, stand-alone HTML file.
$ elm make start-test.elm --output index.html