Why is my intern test failing with "document is not defined" - unit-testing

I am new to Intern and struggling with trying to get a simple test to run in my environment. I was able to get the tutorial test to run but I've tried to set up a test where the test file is located inside my app directory hierarchy. The module being tested is located here:
sandbox/web/libs/ev/grids/FilterGrid.js
The test file is located here:
sandbox/web/libs/ev/tests/FilterGrid.js
My intern config file is located here:
sandbox/tests/intern.js
My loader and suites objects looks like this:
loader: {
packages: [
{ name: 'dojo', location: 'web/libs/dojo' },
{ name: 'dijit', location: 'web/libs/dijit },
{ name: 'dgrid', location: 'web/libs/dgrid' },
{ name: 'put-selector', location: 'web/libs/put-selector' },
{ name: 'xstyle', location: 'web/libs/xstyle' },
{ name: 'ev', location: 'web/libs/ev' }
]
},
suites: ['ev/tests/FilterGrid'],
When the loader tries to load this, I get:
Defaulting to "console" reporter
ReferenceError: document is not defined
at /home/bholm/Projects/src/sandbox/web/libs/dojo/selector/_loader.js:5:15
at execModule (/home/bholm/Projects/src/sandbox/node_modules/intern/node_module
/dojo/dojo.js:512:54)
at /home/bholm/Projects/src/sandbox/node_modules/intern/node_modules/dojo/dojo.js:579:7
at guardCheckComplete (/home/bholm/Projects/src/sandbox/node_modules/intern/node_modules/dojo/dojo.js:563:4)
at checkComplete (/home/bholm/Projects/src/sandbox/node_modules/intern/node_modules/dojo/dojo.js:571:27)
at onLoadCallback (/home/bholm/Projects/src/sandbox/node_modules/intern/node_modules/dojo/dojo.js:653:7)
at /home/bholm/Projects/src/sandbox/node_modules/intern/node_modules/dojo/dojo.js:746:5
at fs.js:266:14
at Object.oncomplete (fs.js:107:15)
Does the unit tests using Intern need a DOM document defined??
I also notice that Intern lists dojo2_core as it's dependency. So it's using unreleased code?
Any help with this would be appreciated!

It looks like you’re trying to load some code using the Node.js client that requires a browser environment. This won’t work. You should only load the ev/tests/FilterGrid test suite in a browser. You can do this by modifying your Intern configuration file to look something like this:
define([ 'intern/node_modules/dojo/has' ], function (has) {
var suites = [];
if (has('host-browser')) {
suites.push('ev/tests/FilterGrid');
}
return {
// ...your existing configuration...
suites: suites,
// ...
};
});

Related

Unable to instrument expo app with istanbul or cypress/instrument

I have been trying this for a while now, without success.
I have an expo app and I am using cypress to test some use cases using the web version of the app (generated by expo).
However, I would like to generate some code coverage as well. I have read the official documentation for it, that recommends to babel-plugin-istanbul do to so, but it does not seem to work with expo.
I am not sure why this would not work.
Edit
I removed the files previously pointed here as they were not important.
Thanks for a wonderful documentation provided by a hero without a cape, I figured that my settings were wrong.
All I needed to do was:
install babel-plugin-istanbul
Update babel.config.js
module.exports = {
presets: ['babel-preset-expo'],
plugins: [
'istanbul',
[
'module-resolver',
{
root: ['.'],
extensions: [
'.js',
],
alias: {
'#': './',
},
},
],
],
};
update cypress/support/index.js
import '#cypress/code-coverage/support';
update cypress/plugins/index.js
module.exports = (on, config) => {
require('#cypress/code-coverage/task')(on, config);
// add other tasks to be registered here
// IMPORTANT to return the config object
// with the any changed environment variables
return config;
};
and voilà!

ModuleFederationPlugin's remote property syntax

What does this ui: "ui#http://some.external.host/remoteEntry.js" syntax mean in ModuleFederationPlugin's remotes property.
I understand that ui item is being loaded from an external host, but what does ui# before host definition mean ?
new ModuleFederationPlugin({
name: "myApp",
filename: "myAppEntry.js",
remotes: {
ui: "ui#http://some.external.host/remoteEntry.js",
},
shared: {
...,
},
}),
You can break this line of the config ui: "ui#http://some.external.host/remoteEntry.js" into three parts: LocalModuleName: "RemoteModuleName#Host". Let's assume myApp and ui have the following webpack configs for module federation:
// Config for myApp
new ModuleFederationPlugin({
name: "myApp",
filename: "myAppEntry.js",
remotes: {
ui: "ui#http://some.external.host/remoteEntry.js",
},
shared: {...},
}),
// Config for ui
new ModuleFederationPlugin({
name: "ui",
filename: "remoteEntry.js",
exposes: {
"./Button": "./src/Button",
},
shared: {...},
}),
LocalModuleName is the name under which you can import exposed features from the remote app in the local code, e.g.:
const RemoteButton = React.lazy(() => import("ui/Button"));
But you could also change the name to remoteUI: "ui#http://some.external.host/remoteEntry.js" and the import would have to look like this:
const RemoteButton = React.lazy(() => import("remoteUI/Button"));
This could be useful if two different remotes used the same name in their config.
RemoteModuleName refers to the name used in the remote configuration. This is necessary, so ModuleFederation can properly initialize the modules.
Host is the URL under which you find the remote container script.

How do I properly setup app-test.js when unit testing ExtJS using Jasmine?

I am fairly new to both Jasmine(2.2) as well as ExtJS(4.2.1). I am following the Unit Testing instructions in the Sencha docs to test the feed-viewer example ExtJS application. I cannot seem to get the app-test file quite right to load the application.
Here is my app-test.js
Ext.Loader.setConfig({ enabled : true });
var Application = null;
Ext.onReady( function() {
Application = Ext.create('app', {
name: 'FV',
controllers: [
'Articles'
],
launch: function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
jasmineEnv.execute();
}
});
});
Here is the app.js
Ext.application({
name: 'FV',
paths: {
'Ext.ux': '../../../examples/ux/'
},
controllers: [
'Articles',
'Feeds'
],
autocreateViewport: true
});
And, in case this may be a part of the issue, my folders are structured as such:
FV/
- app/
- app-test/
- resources/
- specs/
- app.js
- app-test.js
- run-test.html
My test to see that the application has been properly loaded is failing. Chrome's dev tools show me two errors. The first is an XMLHttpRequest cannot load, and the second is an Uncaught TypeError: Object is not a function being thrown at the third line of app-test.js
I feel like there's something remarkably simple I may have missed.
Any help would be immensely appreciated!
I finally got it working. Here is my revised app-test.js
Ext.Loader.setConfig({ enabled : true });
Ext.ns('FV');
Ext.application({
name: 'FV',
appFolder: 'app',
controllers: ['Articles'],
autoCreateViewport: false,
launch: function() {
var jasmineEnv = jasmine.getEnv();
jasmineEnv.updateInterval = 1000;
jasmineEnv.execute();
}
});
Considering how different this is from the tutorial in the Sencha docs, and how much Jasmine has changed since 1.1.0 (which is the version their tutorial uses), it's definitely time for them to do an update.

Access window object in ember-cli environment

Hi I am trying to use torii in a cordova application. My environment.js file looks as below. I an not able to access window document object to setup redirectUri. getting error undefined variable. how can I access window document object.
module.exports = function (environment) {
var ENV = {
environment: environment,
baseURL: '/',
locationType: 'hash',
EmberENV: {
FEATURES: {
// Here you can enable experimental features on an ember canary build
// e.g. 'with-controller': true
}
},
APP: {
// Here you can pass flags/options to your application instance
// when it is created
},
torii: {
providers: {
'facebook-oauth2': {
apiKey: '2xxxxxxxxxx',
redirectUri: document.location.href
},
}
},
cordova: {
rebuildOnChange: false,
rebuildAsync: false,
emulate: false
}
};
in my .jshintrc
"predef": {
"document": true,
"window": true,
"AuthENV": true
}
so I assume document should be globally available but it is not
You are able to access the window and document object through most of your Ember.js code as global variables.
In this particular file, you are trying to access it in use for the app config. The problem is that the config is generated during the Node.js build process - meaning that the context is not the same.
You will see in the page source of your app that the config is static and serialized into a meta property in the page:
<meta name="[your-app]/config/environment" content="your-config-here" />
As the redirect url will change dynamically depending on the user's location, it would be easier to pull in this data "just in time" for the OAuth flow.

Including dependencies in a Dojo build

Despite using the Dojo build system, my app is still including a large number of javascript files which I would have hoped to be covered by the build.
Here's my build profile:
var profile = (function(){
return {
basePath: "./",
releaseDir: "release",
action: "release",
selectorEngine: "acme",
cssOptimize: "comments.keepLines",
packages:[{
name: "dojo",
location: "dojo"
},{
name: "dijit",
location: "dijit"
},{
name: "dojox",
location: "dojox"
},{
name: "my",
location: "my"
}],
layers: {
"my/admin": {
include: ['dojo/ready', 'dojo/dom', 'dojo/query', 'dojo/request/xhr', 'my/Form', 'my/Tree/Radio']
}
}
};
})();
The app is still including the following JS files on each request: my/Form.js (even though this is listed in the profile), dojo/fx/Toggler.js, dijit/_base.js, dijit/WidgetSet.js, dijit/_base/focus.js, dijit/_base/place.js, dijit/place.js, dijit/_base/popup.js, dijit/popup.js, dijit/BackgroundIframe.js, dijit/_base/scroll.js, dijit/_base/sniff.js, dijit/_base/typematic.js, dijit/typematic.js, dijit/_base/wai.js, dijit/_base/window.js.
my/Tree/Radio extends dijit/Tree, so I'm assuming a lot of the files above are dijit base files that are being loaded automatically by dijit.Tree. But surely the build tool should resolve dependencies like this and include them in the 'built' file?
I am using Dojo 1.8.3.
In dojo/fx, it dynamically looks up the Toggler with the comment
use indirection so modules not rolled into a build
Not sure why, but if you add dojo/fx/Toggler to the include of your build script, it should not make the additional xhr requests.
EDIT: Apparently dijit/Widget does something similar with dijit/_base, so you will want to add that to the includes as well.
http://trac.dojotoolkit.org/ticket/14262