ember test to no run jshint - ember.js

I would like to run "ember test" without JShint. My ultimate goal is to set run jshint in development environment and not run it in production build.
I first started to turn off the option in Brocfile.js
http://discuss.emberjs.com/t/disable-ember-cli-hinting/6731/2
var app = new EmberApp({
hinting: false
});
It worked, so I decided to try
var EmberApp = require('ember-cli/lib/broccoli/ember-app'),
isProduction = ( process.env.EMBER_ENV || 'development' ) === 'production';
if( isProduction ){
app.hinting = false;
}
Then I realize the process.env.EMBER_ENV, doesn't seem to work. But little did I know I was probably running the wrong command.
ember test
The command didn't specify any environment, so I tried
ember test --environment=production
ember test --environment production
which result in an exception:
Build failed.
Path or pattern "test-loader.js" did not match any files
Error: Path or pattern "test-loader.js" did not match any files
at Object.multiGlob (.../node_modules/ember-cli/node_modules/broccoli-kitchen-sink-helpers/index.js:202:13)
Next, I try to read node_modules/ember-cli/lib/broccoli/ember-app.js, I see:
var isProduction = this.env === 'production';
this.tests = options.hasOwnProperty('tests') ? options.tests : !isProduction;
this.hinting = options.hasOwnProperty('hinting') ? options.hinting : !isProduction;
But I don't really know how this.env get pass in the ember test and I can't get the environment within the Brocfil.js. I am assuming by default, hinting would respect the isProduction value if it isn't defined.
And searching further more, got me to https://github.com/rwjblue/ember-cli-test-loader, which seems to be related.
My questions are:
1. Is there a way to run ember test without jshint via CLI?
2. Can this be set using config/environment.js?
3. Can I set a breakpoint to debug the Brocfile.js file? I tried with chrome:localhost:4200, I don't any node_modules file being loaded.
Thanks in advance. I am an extreme newbie to javascript and ember..

try
ember test --query=nolint
the latest ember-cli-qunit uses this query param to disable lint checks in tests
here is the commit where it was added if you are interested

Related

Ember development server appears to be running in test mode

When I run ember serve while logging out the environment variable in config/environment.js, I see three values logged:
undefined
development
test
(This is in an inherited project.)
In a fresh app created using ember new my-app, I see three values also:
development
test
development
Which leads me to believe my inherited project is running in test mode and a fresh project is running in development mode as I would expect.
Running ember serve --environment=development does not change the observed behavior in the inherited project.
My questions are why do I see three values logged when running ember serve and how can I figure out why my development environment is running in test?
Whatever calls project.config(environment) is what dictates the environment argument in the config function. If anything calls this function without an argument then you'll see undefined.
As for determining why it's running in test mode, I'd try throwing a debugger statement in your editor (if possible) then see what's calling it with "test". If that's not possible then try printing a call stack somewhere in the function:
module.exports = function(environment) {
...
console.log('current environment: ', environment);
console.log(new Error().stack);
}
You'll see something like:
CURRENT ENVIRONMENT: development
Error
at module.exports (.../config/environment.js:73:15)
at Project.configWithoutCache (.../node_modules/ember-cli/lib/models/project.js:273:47)
at Project.config (.../node_modules/ember-cli/lib/models/project.js:257:21)
at Watcher.module.exports [as serveURL] (.../node_modules/ember-cli/lib/utilities/get-serve-url.js:6:24)
at Watcher.didChange (.../node_modules/ember-cli/lib/models/watcher.js:51:40)
at Watcher.emit (events.js:187:15)
at Watcher.triggerChange (.../node_modules/ember-cli-broccoli-sane-watcher/index.js:174:8)
at tryCatcher (.../node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:323:19)
at invokeCallback (.../node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:495:31)
at publish (.../node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:481:7)
at flush (.../node_modules/ember-cli/node_modules/rsvp/dist/rsvp.js:2402:5)
at process._tickCallback (internal/process/next_tick.js:61:11)
where you can work your way back to see what's setting the environment (in this case it's ember-cli).

Gulp + Sourcemaps + PostCSS(Autoprefixer + Minification via CSSnano)

Basically, I want sourcemaps available to my unminified and minifies flavors of my site.css file. I'd like my end result to be:
site.css
site.min.css
site.css.map
site.css.min.map
Currently, I only get:
site.css
site.min.css
site.css.min.map
I know my gulp script is wrong, but I don't know how to fix it. I need sourcemaps to write a sourcemap to site.css before site.min.css gets created. HALP!
and Thank you
gulp.task('scss', gulp.series('bootstrap:scss', function compileScss() {
return gulp.src(['./site/assets/scss/*.scss'])
.pipe(sourcemaps.init())
.pipe(sass.sync({
outputStyle: 'expanded'
}).on('error', sass.logError))
.pipe(gulp.dest('./site/dist/css')) // outputs site.css
.pipe(postcss([autoprefixer(), cssnano()
]))
.pipe(sourcemaps.write('.'))
.pipe(rename({
suffix: '.min'
}))
.pipe(gulp.dest('./site/dist/css')) //outputs site.min.css
}));
You only need sourcemaps for your unminified version, i would introduce a NODE_ENV for doing minification and sourcemaps, then use gulp-if to see if you're in development or production environment
Alternatively you could have separate build and dev tasks.
Using process.env.NODE_ENV means you can use them in postcss.config.js files etc. too
I found this really good because it shows you how you can use a gulp.babel.js file with Gulp 4. I was using 3.9.1 being reluctant to upgrade until this week but this helped immensely with understanding the changes from v3>4.

Conditionally load ngMock into app only if running karma jasmine tests

I am having issues loading my app when including ngMock, so I would like to only load it when I am running my tests as this works fine. Is there a flag or some kind of isTesting() function that gets set when karma runs tests? Something I can then reference when creating the array of dependencies for my app.
I ended up just checking for the existence of a global variable which would only be set if the test classes had loaded, I suppose it's kind of obvious but I was kind of hoping for a karma.isRunning property or something...
Anyway my solution looks kind of like:
var dependencies = [
'ui.router',
'ngAnimate',
'ngSanitize',
];
if (typeof APP_TEST !== "undefined")
dependencies.push("ngMock");
angular.module('MyApp', dependencies)...
Keep in mind that the test classes need to be loaded before the main app files

Testing Emberjs app using QUnit and Karma fails due to `ReferenceError: Faye is not defined`

I Was testing EmberJs application with Qunit and karma runner and it was working all good.
Then I had to integrate faye into the application which went well but then on running my test suite, it shows following error and crashes:
ReferenceError: Faye is not defined
The error is thrown where, I am defining the client in emberjs
client = new Faye.Client(uri);
Though this works in development, staging but not in testing.
Overhere, uri = "http://localhost:9292/faye"
faye.js is included in vendor.js(single js file which have all the js plugins including ember.js and ember-data.js itself) which is loaded before app.js(file where above line exists)
The reason of that weird behavior is related to the following lines in Faye:
if (typeof module !== 'undefined')
module.exports = Faye;
else if (typeof window !== 'undefined')
window.Faye = Faye;
Source: https://github.com/faye/faye/blob/master/javascript/faye.js#L143
So if module is not undefined(meaning it is defined) then module.exports will be set object, if not, window.Faye will be set.
If you use a debugger and set a breakpoint on that line you will that module is actually defined, why? it is a QUnit global helper method!
Why Faye does this? I guess because it can be run in a NodeJS environment (you can read more about module.exports here).
As I see it you have 2 possible solutions:
Require Faye before QUnit.
Patch Faye to ignore the existence of module in window.
I've encountered the same behavior while using Teaspoon with QUnit.
Making Teaspoon require Faye before QUnit seems like a bad idea and will be probably in ugly hack.
I've ended up with patching Faye to make it skip the module check, not so beautiful either, but I believe this is reasonable.

ember-cli fails on --environment=production (Uncaught Error: Could not find module)

I am using ember-cli and have a problem with selecting the production environment. Specifically, everything works when I run ember serve --environment=development and I get a blank page when I run ember serve --environment=production. In the console, I see:
Uncaught TypeError: undefined is not a function
Uncaught Error: Could not find module simple-auth/authenticators/base
All other things are equal, and all dependencies are up to date. I'm a total noob so I don't even know where to begin on how to debug: is it ember? ember-cli? broccoli? Any help would be appreciated.
I had exact the same problem, and James_1x0 is correct, it is an broccoli issue.
After debugging it occurs, that the "undefined" error apears on "Ember.handlebars.compile" which lead to other research.
It seems, that in production envrironment "handlebars.js" is replaced by "handlebars.runtime.js" in the ember-cli build process, which seem to be a problem for broccoli at this time.
Other devs had the same problem but with other libraries as well:
https://github.com/stefanpenner/ember-cli/pull/675#issuecomment-47431195
Here the solution was to add:
var index = app.legacyFilesToAppend.indexOf('bower_components/handlebars/handlebars.runtime.js');
if(index) {
app.legacyFilesToAppend[index] = 'bower_components/handlebars/handlebars.js';
}
into your Brocfile.js to replace the "handlebars.runtime.js" with the "handlebars.js".
This also fixed the problem for me.
It sure has the drawback that the whole handlebars file is deployed but its a workarround for now, until the problem is fixed.
Solution is mentioned on Ember CLI website:
This is somewhat non-standard and discouraged, but suppose that due to a requirement in your application that you need to use the full version of Handlebars even in the production environment.
Basically, you can pass vendorFiles option to your EmberApp instance which will force CLI to include full version of Handlebars.
Example of explicitly requiring handlebars.js , in Brocfile.js:
var app = new EmberApp({
vendorFiles: {
'handlebars.js': {
production: 'bower_components/handlebars/handlebars.js'
}
}
});
This is recommended way of solving this issue(discussion on GitHub).