I use grunt-contrib-uglify to uglify a project. The files have several console.logs (and I want them to stay in there).
In my E2E-Tests (with protractor) I check the browserLog after every test:
expect(browserLog.length).toEqual(0);
Those tests worked great before uglifying. Since I uglify the project and test afterwards, browserLog isn't empty anymore. It contains all the called console.logs (Log-Level: info), but surrounded with some kind of wrapper.
The object looks like that:
{
level: {value:900, name:'WARNING'},
message: '{"message"{
"column":14774, ....
"level":"info"...}}
}
What is wrapping my logs so all of them appear as warnings but really aren't?
Related
My reactjs app consists of a bunch of typescript files with a clean separation of GUI and model. The webworker needs most of model files, so maybe half of all files. I could imagine loading the webworker from exactly the same URL as the app as the model does reference neither the GUI nor React nor other unavailable stuff (At least, it shouldn't, and if so, it'd easy to clean it up).
There seem to be some problems:
finding the correct javascript files
injecting proper start up code into them
and probably others I haven't thought about yet.
The communication to the webworker is not a problem as all I need is a single async call passing and receiving some simple data.
There may be more issues like e.g., https://github.com/microsoft/TypeScript/issues/20595.
Before I learnt what I really need, I tried e.g., ttps://www.npmjs.com/package/#koale/useworker, which is nice, but seems to be able to deal with plain javascript dependencies only.
Finding the correct javascript files
What I can see in index.html is
<script src="/myapp/static/js/bundle.js"></script>
<script src="/myapp/static/js/0.chunk.js"></script>
<script src="/myapp/static/js/main.chunk.js"></script>
<script src="/myapp/main.4e45e2b4b645351b7733.hot-update.js"></script>
I guess, I could live without hot updates, however the names of the other three files change in production to something like "/myapp/static/js/2.28cf00cf.chunk.js".
Injecting proper start up code into them
When the worker loads, it executes some webpack code generated code which most probably crashes it. I'd need to avoid it somehow.
The questions
Is this doable at all?
Does it make sense or is there a better approach?
For a seamless integration of worker code with main-thread code, I recommend using comlink-loader. For example, if you have a main.ts file and a thingy.worker.ts file, you could seamlessly load it as a worker by using TS imports:
// main.ts
import { getThing } from "./thingy.worker.ts"; // make sure the file name ends with .worker.ts
async function test() {
console.log(`the thingy is: ${await getThing()}`);
}
// thingy.worker.ts
export async function getThing() {
return 3;
}
You'll need to add it to your webpack config like this:
// webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.worker\.(js|ts)$/i,
use: [{
loader: 'comlink-loader',
options: {
singleton: true
}
}]
}
]
}
}
The best part is that your editor's intellisense will work across modules and type safety will not be compromised. More documentation is available here.
You need to compile a separate js file for your WebWorker. There is a React lib called react-webworker that makes this easier for you. It in turn uses WebPack’s worker-plugin.
I'm new to the React stack, trying to build a library of simple shared components. The components work fine in their home project. I've configured them using this advice. Dropped them into a local git, npm installed them a new project with git+https. The components show up in the new project /node_modules/.../lib, as expected.
When the following runs, I end up with undefined exports:
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.NeonFooter = exports.default = undefined;
var _NeonFooter = require('./components/NeonFooter');
var _NeonMenu = require('./components/NeonMenu');
exports.default = _NeonMenu.NeonMenu;
exports.NeonFooter = _NeonFooter.NeonFooter;
Dropping into chrome's debugger and using some console statements, (for instance) _NeonFooter does show up as an _esModule, with a correctly pathed closure to the NeonFooter.js file in scope. No direct _NeonFooter.NeonFooter field, though. When _NeonFooter.NeonFooter is referenced it comes up undefined.
I can't seem to get the vscode debugger or chrome to bind to a breakpoint on the require, and there's no exception occurring to break on. How do I dig into this further to find the actual error that leads to the undefined value?
So, it looks like the issue is with a Babel transformation, or with how that transformation is being consumed by React. Changing the transformed code to
exports.NeonMenu = _NeonMenu.default;
exports.NeonFooter = _NeonFooter.default;
solves the issue.
Still trying to determine the correct Babel/React behavior, but it's a step forward.
Has anybody had any luck with using blueimp jquery-file-upload with browserify? I have the following requires in my javascript ...
require("jquery");
require("blueimp-file-upload/js/jquery.iframe-transport.js");
require("blueimp-file-upload");
require("blueimp-file-upload/js/jquery.fileupload-angular.js");
and I get the following error when I use the resulting browserified code...
TypeError: $element.fileupload is not a function
... at the line ...
$element.fileupload(angular.extend(
... inside of jquery.fileupload-angular.js. Without browserify this was working fine. I can't figure out where the fileupload() function is being added to the prototype of the $element.
By request I'm posting what I did here to get around the issue. So technically speaking not an answer but a "work around". As I indicated in my comment above I used gulp-concat along with gulp-uglify to do the minimizing "manually". I say manually because I have to list all of the source files here rather than relying on the requires.
gulp.src([src1, src2, ..., srcN])
.pipe(concat('bundle.js'))
.pipe(uglify())
.pipe(gulp.dest(outputdir));
I am trying to set up tests for my Angular.js project and I keep getting "$injector:nomod, Module 'result' is not available! You either misspelled..." error. I am sure that I am including "result" module in the "files" array inside "karma.config.js", basically it looks like this:
files: [
'../javascripts/jquery-2.1.4.min.js',
'../jquery-ui/jquery-ui.min.js',
'../D3/d3.js',
'libs/angular.min.js',
'libs/angular-route.min.js',
'libs/angular-animate.min.js',
'libs/selectize.js',
'libs/angular-selectize.js',
'libs/angular-mocks.js',
'simulator.js',
'*.js',
'services/**/*.js',
'qa/tests-*.js'
],
...
I thought initially that the ordering of the main module: 'simulator' (defined inside 'simulator.js' file) is wrong, so I specifically moved it upwards, before
the other modules, like the following stackoverflow thread recommends:
Angular module not available in Karma Jasmine test run
It did not help. Then I tried to make sure that the files are imported in the same order as in my angular apps' main entry file (except for angular-mocks.js and qa/tests-*.js), importing each single file, instead of using wildcards, but no success.
Jasmine definitely goes inside the test files but stumbles upon the line where I am trying to import the module "result":
describe('simulator.chartService', function() {
var chartService;
var graphConfig;
console.log("instantiating module result");
beforeEach(module('result'));
console.log("finished instantiating");
beforeEach(inject(function($injector) {
graphConfig = $injector.get('graphConfig');
chartService = $injector.get('chartService');
}));
it('should be created', function() {
expect(chartService.calcColors(10)).not.toBeNull();
});
});
So, I see that the error happens in-between two console.log() statements.
I suspect that still something can be wrong with the ordering of my files inside the array "files" in "karma.config.js". I have main module "simulator" which is dependent on other modules:
angular.module('simulator', ['ngRoute','ngAnimate','selectize','newexp2','newexp','login','edit','exps', 'result','templates','commons'])
Modules 'newexp2', 'newexp', 'login', 'edit', 'exps', 'result', 'templates' are all dependent on the module 'commons'.
How to correctly import interdependent modules inside the "files" array?
Is it just enough to place "simulator.js", main module, above all others,
or I also need to place all other modules before "commons.js"?
Another my suspicion is that angular.js library version that I downloaded from the official angular website, "angular-mocks.js", can be incompatible with other modules that I am using. I had such an issue with "angular-animate.js" file before.
As long as I surround my test code with $(function(){...}) (and all other my modules ARE surrounded with it) it does not generate the error while importing the result module, so I start seeing two console.log() statements without an error in-between, however, this generates some unknown error which prevents me from invoking the it part at all, whereas when I do not surround it with $(function(){...}), the it test is invoked, but the module result import fails.
So far I am pretty much stuck and do not know where to move and what to try. Any suggestion would be greatly appreciated.
OK, I figured it out. The issue was that ALL of my angular code was enclosed inside $(function(){...}). The solution is to remove all of the $function(){...}), then reorder javascript imports inside the main entry .html file, and then all of the testing starts working good.
The question might be better to mark as duplicate with:
Angular document.ready() issue
Before posting this question, I have researched a lot regarding the "unknown provider" error but I could not find anything like my scenario.
Basically in my app.js were I have defined my main app module, called - "bookingsApp", I am adding a value recipe to it, called - "connectionWithServerErrorMessage".
Then, I am accessing this value recipe, in a service, called - "httpPostingExampleService". Till now no issues. Note that the test for this service passes correctly.
The problem comes, when I call the method that there is in this service in another service. For example, in this case the service, called - "bookingElementExampleService". Please see plunkr for a better understanding: http://plnkr.co/edit/0Z3ZiQXPGdkD08r9Akci
The problem is that when I come to test this other service (bookingElementExampleService), it fails because of the following error:
Error: Unknown provider: connectionWithServerErrorMessageProvider <- connectionWithServerErrorMessage <- httpPostingService
Note: The application works just fine, no errors are outputted, the problem is just with that test failing.
Honestly I could not understand, I think I have all the module dependencies set correctly, so can't really pin point what is the issue. Any help please?
Update
Here is my karma config files:
// list of files / patterns to load in the browser
files: [
//First include all dependencies
'app/lib/jquery/jquery-1.8.3.min.js',
'bower_components/qtip2/jquery.qtip.js',
'app/lib/angular/angular.js',
'app/lib/angular/angular-mocks.js',
'bower_components/angular-debounce/dist/angular-debounce.min.js',
'app/lib/ui-bootstrap/ui-bootstrap-custom-tpls-0.12.0.min.js',
//Then include application and any module definitions which are required to be loaded first
'app/app.js',
'app/components/http-posting/http-posting.js',
'app/components/booking-element/booking-element.js',
'app/components/bookings/bookings-ui.js',
'app/components/date-and-stats/date-and-stats.js',
'app/components/timeline/timeline.js',
//Then include all other files required
'app/*.js',
'app/components/**/*.js',
//Then include all partial files
'app/components/**/*.html' //html files (partials)
],