How to load html file in jsdom with relative path? - unit-testing

This is not working eventhough relative path given here is correct
before(function(done) {
JSDOM.fromFile('../../../src/main/resources/templates/components/xyz.html')
.then((dom) => {
global.document = dom.window.document;
})
.then(done, done);
});
instead loading directly with absolute path is working fine
before(function(done) {
JSDOM.fromFile('v:/folder_main/src/main/resources/templates/components/xyz.html')
.then((dom) => {
global.document = dom.window.document;
})
.then(done, done);
});
what to do for loading jsdom.fromfile with relative path

Providing the path as below solved the issue for me
JSDOM.fromFile('src/main/resources/templates/components/xyz.html')

Related

Path configuration for testing Ember-electron with Spectron

I am trying to integrate Spectron with Ember-electron for testing.
I found an example for Spectron but I am not sure what to assign in the electronPath part in case of Ember-electron.
I do not have an .exe or .cmd how to point to the location of the application in the test folder.
beforeEach(function () {
return helpers.startApplication({
args:[path.join(__dirname, '..')] //**
}).then(function (startedApp) { app = startedApp })
})

Serve static json file for translations

I'm using ember-i18n for translations and I'm trying to fetch translations live as described in ember-i18n wiki
Instead of loading translations from backend, I would load them from a static file. I've placed files lang.json in /public/i18n/ folder and I retrieve them using a service:
export default Ember.Service.extend({
ajax: inject.service(), // ember-ajax service
i18n: inject.service(),
fetch(lang) {
if (isEmpty(lang) || !ENV.APP.languages.contains(lang)) {
lang = "en";
}
let url = "http://" + window.location.host + "/i18n/" + lang + ".json";
return new Ember.RSVP.Promise((resolve, reject) => {
this.get("ajax").request(url, {
type: "GET"
}).then((json) => {
this.get('i18n').addTranslations(lang, json);
resolve(lang);
}, (params) => {
Ember.Logger.debug(params);
reject();
});
});
}
});
lang.json file contains just the json:
{
"key.foo": "Foo",
"key.bar": "Bar"
}
In dev it works like a charm, but I've some problems running tests. The json retrieved contains the content of the lang.json file but it's not loaded into the i18n service (for example if I run test with -s I see missing translation xxx everywhere.
Furthermore, test execution get slower and slower and after 10-15 tests it throws timeout errors.
Am I doing something that shouldn't be done or there something I'm missing?
Thanks
I'm using:
ember-cli: 2.6.2
ember: ~2.6.0
ember-i18n: ~4.2.1
Just for concept ( for your repo )
1) I open tests/index.html and modify it next way
<script src="assets/vendor.js"></script>
<!-- Next was added -->
<script>
var translations;
$.getJSON('/i18n/en.json').then(function(data){ translations = data; });
</script>
2) inside app/mirage/config.js
export default function() {
this.get("/i18n/:lang", function() {
return window.translations;
});
}
Git diff for my changes here http://pastebin.com/eGwAXM77

Ember addon to add files to root directory

I have an addon which needs to copy a set of JS files from their bower directory to the Ember app's root of /dist (this is for scoping rules associated with service workers). I thought maybe I could use the treeForApp hook but while I'm getting no errors I'm also not getting the desired result.
The index.js is:
const Funnel = require('broccoli-funnel');
module.exports = {
name: 'ember-upup',
treeForApp: function(tree) {
tree = new Funnel(tree, { include:
[
'bower_components/upup/dist/upup.min.js',
'bower_components/upup/dist/upup.sw.min.js'
]});
return this._super.treeForApp.call(this, tree);
},
Note: I thought I might be able to solve this problem by simply copying the javascript files as part of index.js postBuild hook but while this DOES put the JS files into the dist folder's root it is not served by ember-cli's ember serve apparently if not pushed through one of it's build pipelines.
Stefan Penner has now pointed out the the dist directory is for developers to look at but serving is actually done within the tmp directory structure ... this explains why my "hack" didn't work.
It looks like my initial attempt wasn't entirely far off. To make it work you need to hook into the treeForPublic hook like so:
const path = require('path');
const Funnel = require('broccoli-funnel');
const mergeTrees = require('broccoli-merge-trees');
const JS_FILES = ['upup.min.js', 'upup.sw.min.js'];
module.exports = {
treeForPublic: function() {
const upupPath = path.join(this.app.bowerDirectory, 'upup/dist');
const publicTree = this._super.treeForPublic.apply(this, arguments);
const trees = [];
if (publicTree) {
trees.push(publicTree);
}
trees.push(new Funnel(upupPath, {
include: JS_FILES,
destDir: '/'
}));
return mergeTrees(trees);
}
}
Hope that helps.

Cannot find module in jasmine spcs with gulp and browserify

I am setting up gulp/jasmine with a project running with browserify. I am using absolute paths to load modules. E.g. modules/deposit/card
When I want to load this module in my spec file to test it with jasmine, I am getting an error: Cannot find module 'card'. If i change the path to relative, then I get an error from require within the card.js file where another module is required using an absolute path. Looks like if I had everywhere relative path used, I would not have problems with loading modules in spec files. How can I teach my spec file to load modules via absolute path?
GulpFile.js
...
var jasmine = require('gulp-jasmine');
...
gulp.task('jasmine', function () {
return gulp.src('app/js/**/*.spec.js')
.pipe(jasmine());
});
card.spec.js
/* jslint node: true */
/* global describe, it, expect, beforeEach */
'use strict';
var CardView = require('modules/deposit/card');//throws and error : 'Cannot find module 'card''
describe('Card.js', function() {
var view, template, collection;
beforeEach(function() {
view = new CardView();
});
describe('When view is initialized', function() {
it('template should be defined', function() {
expect(template).toBeDefined();
});
});
describe('without collection', function() {
it('should throw exception', function() {
expect(function() {
new CardView();
}).toThrow(new Error('collection is required'));
});
});
});
And I want to see test results in the console where I run gulp serve.

How can I make my ember cli addon supply a vendor tree

I am trying to make my addon supply vendor'd data to the app using it. The library is CKEditor (a customized version generated from the CKEditor builder).
I know I can use the addon blueprint to add a bower dependency but since CKEditor is customized I can't use bower to download that same version in the consuming app.
I've used the treeForPublic and broccoli funnel to copy from my addon vendor folder the whole ckeditor folder to the app public folder (this is required by ckeditor).
My only issue is that the consuming app also needs to have the ckeditor folder in its vendor folder or it won't build because the watcher can't find it.
I was with the impression that if the addon was moving the folder to the public destination and was also importing js/css files in the included hook the original vendor'd folder was not needed by the final app.
Have I understood it wrong or can I do this without duplicating my ckeditor folder between the addon and the app ?
here is what I have so far :
included: function(app) {
this._super.included(app);
app.import('vendor/ckeditor_custom/ckeditor.js');
app.import('vendor/ckeditor_custom/styles.js');
app.import('vendor/ckeditor_custom/lang/fr.js');
app.import('vendor/ckeditor_custom/skins/minimalist/editor.css');
},
contentFor: function(type, config) {
if (type === 'vendor-prefix') {
return "window.CKEDITOR_BASEPATH = 'assets/ckeditor/';";
}
},
treeForPublic: function (tree) {
var ckeditorTree = new Funnel('vendor/ckeditor_custom/', {
srcDir: '/',
exclude: ['**/.DS_Store','**/*.md'],
destDir: 'assets/ckeditor'
});
return BroccoliMergeTrees([tree, ckeditorTree]);
},
treeForVendor: function (tree) {
var ckeditorTree = new Funnel('vendor/ckeditor_custom/', {
srcDir: '/',
exclude: ['**/.DS_Store','**/*.md'],
destDir: 'ckeditor_custom'
});
return ckeditorTree;
},
Thanks for the help!
Give this a whirl:
var path = require('path');
var mergeTrees = require('broccoli-merge-trees');
var concat = require('broccoli-concat');
module.exports = {
name: 'myaddon',
treeForVendor: function(tree) {
var trees = [tree];
var ckeditorTree = path.join('bower_components', 'ckeditor_custom');
trees.push(concat(ckeditorTree, {
inputFiles: [
'ckeditor.js',
'styles.js',
'lang/fr.js'
],
outputFile: '/ckeditor.js'
}));
trees.push(concat(ckeditorTree, {
inputFiles: [
'skins/minimalist/editor.css'
],
outputFile: '/ckeditor.css'
}));
return mergeTrees(trees);
},
included: function included(app) {
this.app = app;
app.import('vendor/ckeditor.js');
app.import('vendor/ckeditor.css');
}
};