I'm trying to make test for AngularJS web page in WebStorm (using Jasmine and Protractor frameworks), I'm using JHint for code inspection...
All code is OK except one command: "browser", example of code:
describe('Test',function(){
it('Open page',function(){
browser.get('https://www.angularjs.org');
browser.sleep(2000);
});
});
JSHint is still highlighting errors with browser:
Problem synopsis JSHint: 'browser' is not defined. (W117)
Unresolved function or method sleep() at line 20
In JHint Environment I have enabled:
Jasmine
Node.js
In JavaScript Libraries I have enabled:
Node.js Core
angular-protractor-DefinitelyTyped
jasmine-DefinitelyTyped
selenium-webdriver-DefinitelyTyped
Does anybody know what do I have to enable or which Library do I have to download to make JSHint understand the "browser" command please?
Do you have a .jshintrc file ?
{
"globals": {
"browser": false,
},
"jasmine": true
}
You can add browser as a global.
JSHint works on per-file basis and doesn't 'see' global variables defined in other files unless they are added to 'global' list. This can be done by either adding the corresponding comments (/* global browser*/) to your files - see http://www.jshint.com/docs/, or by adding variables/functions you'd like to use globally to the 'Predefined' list in WebStorm Preferences -> Languages & Frameworks -> Javascript -> Code Quality Tool -> JSHint -> Predefined (,separated).
Related
I have a plugin (FirstPlugin).
The plugin loads a second plugin (SecondPlugin) from its bootstrap and they work both fine.
Now I'm writing tests for FirstPlugin and I need to load SecondPlugin into tests.
So in the bootstrap for test (FirstPlugin/tests/bootstrap.php) I just require the main bootstrap (FirstPlugin/config/bootstrap.php):
require ROOT . 'config' . DS . 'bootstrap.php';
I do this because I also need other bootstrap code (constant, cache settings, etc.).
This doesn't work and I can't understand which is the matter.
Note I have already modified the composer.json for FirstPlugin:
"autoload": {
"psr-4": {
"FirstPlugin\\": "src"
}
},
"autoload-dev": {
"psr-4": {
"FirstPlugin\\Test\\": "tests",
"SecondPlugin\\": "vendor/second-plugin-path/src"
}
},
and the SecondPlugin is installed via composer and located into vendor/.
EDIT
The exception is thrown here:
http://api.cakephp.org/3.2/source-class-Cake.Core.Plugin.html#149
This means $config['path'] is empty.
The problem I think is this:
http://api.cakephp.org/3.2/source-class-Cake.Core.Plugin.html#134
Maybe in the bootstrap of test I must set manually the configuration value?
Solved.
Missing file vendor/cakephp-plugins.php.
I noticed that this file is not created for the plugin, but only for the app. Strange.
When compiling a React and Redux application with Webpack and Babel I get:
Uncaught TypeError: Cannot assign to read only property '__esModule' of #<Object>
In some older browsers (<= Chrome 1, Android 4, Safari 5).
This issue seems to stem from redux and react-redux outputting the line exports.__esModule = true; in the lib build but my application using Object.defineProperty instead (because they build loosely and I do not).
Two solutions are:
Building my application in loose mode also.
Importing react-redux/src and redux/src and building it with the same .babelrc as the application (everything is not loose).
As long as they are consistent and both:
Object.defineProperty(exports, "__esModule", {
value: true
});
and exports.__esModule = true; do not co-exist in my output, everything works.
My question is, what is the right solution? Why does this only affect older browsers? And why do they conflict?
Here is a similar question.
Object.defineProperty is broken on some Android 4 stock browser versions and probably other browsers that made use of a buggy implementation in Webkit.
Check this bug report
and and this other one reported to the chromium project.
The good news is you can apply this polyfill to fix the problem.
To make thing easy, you can simply copy and paste that polyfill on a <script> tag before your bundle.
This will fix your issues.
My guess is, you need to install babel-plugin-add-module-exports and in your .babelrc register this plugin:
"plugins": [
"babel-plugin-add-module-exports"
]
For more information visit this website.
In my case, I solved to add babel-register library in entry points.
In webpack.config.js (Webpack 1.x version of configuration)
// As is
entry: {
main: 'index.js'
},
// To be
entry: {
main: ['babel-register', 'index.js']
},
We met this problem on Android 4.0 and currently we cannot cut the support for Android 4.0.
For webpack 1.0, just set loose: true when you are using babel-preset-env.
However for Webpack 2, loose mode can't resolve this problem.
Finally, we found this trick, a little ugly.
// client_patch.js, For Android 4.0
var defineProperty = Object.defineProperty;
Object.defineProperty = function (exports, name) {
if (name === '__esModule') {
exports[name] = true;
return;
}
return defineProperty.apply(this, arguments);
};
And in your webpack config file.
// webpack.config.js
entry: {
main: [
path.resolve(__dirname, 'client_patch.js'),
'index.js'
]
}
I am getting error regarding 'angular' was used before it declared.
I have tried to declare it in .jshintrc as per below
"globals": {
"angular": true
}
but still I am getting an error.
Also I am getting error of 'alert' is undefined even I have keept below setting in .jshintrc
"browser": true,
Could you please help me setting in .jshintrc is not working. What I am doing wrong.
I have also tried to add /global angular/ at top of file but after adding to the file I am getting error of
Unsupported rule: validateJSDoc:
Thanks in advance.
Try to use https://github.com/cfjedimaster/brackets-jshint/.
Or maybe the answer of this question Adobe Brackets disable jslint but allow jshint will solve your issue.
According to JSHint Documentation globals can be defined inline at the beginning of your JavaScript files like this:
/* globals Angular */
Or in a the .jshintrc JSON object like this:
{
....,
"predef": [ "angular" ]
}
prefed means predefiend. You should include all the globals you are using in this array.
I am trying to get the Calendar Pro from Extensible to work.
if I do everything as the example says here, I get an undefined for the log function on Extensible.js :
However everything looks alright in my code :
Ext.Loader.setConfig({
enabled: true,
disableCaching: false,
paths: {
"Extensible": "js/lib/extensible-1.5.2/src",
"Extensible.example": "js/lib/extensible-1.5.2/examples"
}
});
Ext.require([
'Extensible.calendar.CalendarPanel',
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.CalendarPanel',
'Extensible.example.calendar.data.Events'
]);
Both the src and the examples paths are correct.
My Extinsible folder structure sits next to the extjs src like this :
It seems like I am missing something or Extensible is not yet being initialised properly.
Looks like you just forgot to include the Extensible.js by adding it to your requires statement:
Ext.require([
'Extensible.Extensible', //here
'Extensible.calendar.CalendarPanel',
'Extensible.calendar.data.MemoryEventStore',
'Extensible.calendar.CalendarPanel',
'Extensible.example.calendar.data.Events'
]);
This will include the main Extinsible.js file as well as the calendar and example files.
As mentioned on the support forums:
The Extensible.log error typically means that you are using the source
code from Github without compiling it first. Either run the build
script per the README file, or stick to the download zip containing
the pre-built files.
If you are using a properly-built version of the framework and still getting this error then you might provide more details about how you set things up.
I originally asked for help as why grunt complains js indentation for the below code. I would like to turn off grunt's indentation rather than fixing the indentation. Is there way in grunt which will turn off indentation for js files?
I use emacs to write angular js code. I have the project setup with Yeoman and grunt. I am not sure why grunt complains about indentation for the following code -
app.directive('helloWorld', function() {
return {
restrict: 'AE',
replace: true,
template: '<p style="background-color:{{ color }}">Hello World</p>',
link: function (scope, elem) {
elem.bind('click', function () {
// grunt warning for the following: line Expected 'elem'
// to have an indentation at 9 instead at 3.
elem.css('background-color', 'white');
});
}
};
});
I am new to angular and have no idea why the indentation giving warning which looks ok to me. Any help on this.
I think it's likely this is JSHint, not Grunt that's complaining - Grunt is a task runner, and JShint is a common task run to enforce coding style.
At the top of your JS file, you can put the following:
/* indent: 0 */
This will disable it per file.
You can also override this in your JSHint settings in your grunt configuration file.
If you setup the project from yeoman you can find this file .jshintrc in project root directory. If the file doesn't exists then you can create one.
Add the following line to the file
{
"indent": false
}