I've just tried using JPM for the first time, and I can't get anything to work.
My index.js file looks like this:
const actionButton = require('sdk/ui/button/action');
const TAG = "Addon Scratchpad / Index ";
console.log(TAG+'in index.js');
var button = actionButton.ActionButton({
id: "my-button",
label: "my button",
icon: {
"16": "./tool-scratchpad-16.png",
"32": "./tool-scratchpad-32.png"
},
onClick: function() {
debugger;
console.log(TAG+'button clicked');
}
});
The Folder structure is standard: index.js and package.json files and a data folder with the button png assets.
jpm run results in the browser opening. But no button is generated, there are no errors in the terminal or console, the addon debugger claims "This page has no sources."
jpm test results in no tests being run and no errors thrown.
jpm run --debugger doesn't launch the debugger.
There were no errors during JPM installation (I uninstalled and reinstalled globally to check).
index.js is in the root of the directory, which isn't what I'm used to, but this is apparently normal:
your main file is "index.js", and it is found directly in your add-on's root.
If I unpackage the xpi it looks normal. If I install it by dragging to Firefox the same issues persist.
I'm stumped. Any ideas why I can't get it to work?
jpm 0.0.25 has some important changes in it that will only work with Firefox 38 ( the current nightly version ).
The quick fix for now is to pin your jpm version at 0.0.23:
npm install -g jpm#0.0.23
I logged this jpm issue: https://github.com/mozilla/jpm/issues/261
Related
I'm planning to setup env for testing in Visual Studio Code IDE.
The problem that I have is that VS Code in any XXX.test.js file don't know what is browser or page variable. I'm receiving such errors:
'page' is not defined.eslint(no-undef)
Is this something related only to IDE that I'm using? Some plugin from this IDE? Or maybe it is normal for jest-puppeteer and I need to get used to it?
The whole test when it runs works ok but it seems that IDE only don't know what is page.
I'm working right now on this simple example and I'm just learning this but I'm trying to setup env for it in the same time. My Network.test.js file looks like this. No imports or require at all at the top of the file.
describe("Google", () => {
beforeAll(async () => {
await page.goto("https://google.com");
});
it('should display "google" text on page', async () => {
await expect(page).toMatch("google");
});
});
Later I need to switch it to Typescript which I think will be also a challenge. Now I just want to focus on pure javascript approach.
How to get rid of this IDE errors that are not errors in reality?
Add the Puppeteer globals, Page and Browser, to your ESLint config.
Then, add the following to your .eslintrc file:
env: {
jest: true,
},
// Puppeteer globals
globals: {
page: true,
browser: true,
},
See Here : Link
I've created a vue3 cli project with Mocha testing:
vue create vue_proj_with_mocha_testing
(accept defaults)
cd vue_proj_with_mocha_testing
vue add unit-mocha
Then in Visual Code I install the Mocha Test Explorer extension, restart, add the folder to the workspace, click the folder, ctrl-shift-p and Mocha Test Explorer : "Enable for a workspace folder". Out of the box Mocha Test Explorer doesn't seem to like vuecli's example.spec.js test:
import { expect } from 'chai'
import { shallowMount } from '#vue/test-utils'
import HelloWorld from '#/components/HelloWorld.vue'
describe('HelloWorld.vue', () => {
it('renders props.msg when passed', () => {
const msg = 'new message'
const wrapper = shallowMount(HelloWorld, {
propsData: { msg }
})
expect(wrapper.text()).to.include(msg)
})
})
I add this entry to settings.json so that Test Explorer finds the vue "tests" folder, which is different from the default of "test".
"mochaExplorer.files": ["tests/**/*.spec.js"],
And then receive this error in Test Explorer:
import { expect } from 'chai';
^^^^^^
SyntaxError: Cannot use import statement outside a module
This indicates I have some transpiling work to do, and Mocha Test Explorer indicates the way to do that is the "mochaTestExplorer" fields in settings.json, but I'm not sure what combination of babel packages would be required. What should be done to run this out-of-the-box vue-cli-3 test in Mocha Test Explorer in Visual Studio Code? Here is my current guess:
"mochaExplorer.require": [
"#babel/preset-env",
"#babel/register",
"#babel/polyfill",
"#babel/plugin-transform-runtime"
],
First, add #babel/register in yours devDependencies.
After, add in your Visual Studio Code settings.json:
"mochaExplorer.files": "tests/**/*.spec.js",
"mochaExplorer.env": {
"NODE_ENV": "test"
},
"mochaExplorer.require": [
"#babel/register"
]
Finally, changes your babel.config.js to like this:
const presets = [];
if (process.env.NODE_ENV === 'test') presets.push('#babel/preset-env');
else presets.push('#vue/cli-plugin-babel/preset');
module.exports = {
presets,
};
I'm afraid what you want is not possible - problem is it is not enough to setup Babel correctly. Vue single file components (.vue) need to be processed by Vue Loader which is Webpack loader plugin.
And there is no easy way how to setup Mocha Test Explorer to use webpack as indicated by the author himself in this thread - Support for vue cli projects
So I decided to split my tests into two groups, tests/ui (tests using Vue components) and tests/unit (non-ui tests) and use setup described by Fernando with these modifications:
Configure Mocha Test Explorer to only search for non-ui tests:
"mochaExplorer.files": "tests/unit/**/*.spec.js",
package.json:
"test:unit": "vue-cli-service test:unit tests/unit/**/*.spec.js tests/ui/**/*.spec.js",
...to include both folders when running tests from command-line
Note: Last step - modifying babel.config.js - is not needed, everything works fine without it....
On a slightly different config, i worked for me: in .vscode/settings.json
{
"mochaExplorer.require": "esm"
}
esm should also be in your dev dependencies
Using the gulp tasks from the yeoman generated Aurelia app I'm trying to bundle a custom application. When I run gulp bundle the following error is reported.
Where can I find a log to help track down this file or the reference to this file?
Double check your config.js
I've seen this from time to time, and it's usually an issue of the config.js. You'll want to make sure:
The github, npm, or wherever your text plugin is located is above your '*' line.
The text plugin is mapped.
The plugin files are located where (1) and (2) are pointing.
So, something like this:
config.js
paths: {
"github:*": "jspm_packages/github/*",
"npm:*": "jspm_packages/npm/*",
"*": "dist/*"
},
map: {
"text": "github:systemjs/plugin-text#0.0.4"
}
And jspm_packages/github/systemjs/plugin-text#0.0.4 exists.
If all else fails, try deleting your jspm_packages folder, and typing jspm install text.
What process do you use to develop Babel 6 plugins?
Here's what I came up with to develop a plugin (babel-plugin-test):
1) In an empty folder run:
npm install babel-cli babel-preset-es2015
2) Create the file src/test.js (to test the plugin) with just:
class Person {
}
3) Create the folder node_modules/babel-plugin-test with the following contents
node_modules/babel-plugin-test/package.json
{
"name": "babel-plugin-test",
"version": "0.1.0",
"main": "lib/index.js",
"dependencies": {
"babel-runtime": "^5.0.0"
},
"devDependencies": {
"babel-helper-plugin-test-runner": "^6.3.13"
}
}
node_modules/babel-plugin-test/src/index.js
export default function ({types: t }) {
return {
visitor: {
ClassDeclaration: function (node, parent) {
console.log("XXX");
}
}
};
}
4) Create a script that runs:
node_modules/babel-plugin-test/babel --presets es2015 --out-dir lib src
babel --plugins babel-plugin-test --presets es2015 --out-dir out src
So it compiles the plugin and then compiles test.js using the plugin and I see the console log and the output file (in this example I'm not changing anything).
There has to be a better way to do this. Maybe some way to use WebStorm or another Node debugger to put a breakpoint and play around (at least be able to inspect variables).
The way to go is to run babel in code so you can get the transpiled code and compare against what you expect.
First transpile your plugin as you did, then in the test folder
var transformFileSync = require('babel-core').transformFileSync
var path = require('path')
var fs = require('fs')
var plugin = require('../lib/index').default
describe('My test', function (){
it ('Transform', function(){
var transformed = transformFileSync(path.join(__dirname, 'testFilePath'), {
plugins: [[plugin]]
}).code
var expectedCode = fs.readFileSync(..)
assert.equal(transformed, expected)
})
})
You can find an example here. It is also possible to write the tests in ES6 importing modules, for that you need to provide mocha with a compiler, see here for an example.
For basic testing I use the wonderful astexplorer. Just set the parser to babylon 6 and turn on transform and set it to babelv6. Then you can put your code in one pane, see the AST results in another, put your babel plugin in a third pane and see the plugin result in the fourth.
For a more complicated test I create two projects, one for the plugin and another one i want to test the plugin on. I npm link the two and configure the test project to use my plugin in babelrc. Then, whenever my plugin changes i just run babel on my file/project and see the results.
Im not sure if this is the best way but it works for me.
I have this ionic.project file:
{
"name": "foobar",
"app_id": "com.foo.bar",
"gulpStartupTasks": [
"styles",
"source",
"watch"
],
"watchPatterns": [
"www/**/*",
"!www/lib/**/*"
],
"sourceModules": {
"ionic": "git://github.com/driftyco/ionic.git",
"ng-cordova": "git://github.com/driftyco/ng-cordova.git"
}
}
But the gulp tasks are not being executed, I even added some console.logs to debug but nothing happened.
Any ideas?
UPDATE:
I've detected that the gulpStartupTasks are being executed asynchronously with the Ionic initialization, so when Ionic tries to find the www folder and don't find it (because my startup tasks haven't run yet) it fails and kill the process
But if I create an empty www folder to trick Ionic it works but opens a browser with an error saying that the index.html haven't been found
However, some seconds after that I see the startup tasks being executed in my shell
And if I refresh the page it works
How can I make these startup tasks run before ionic tries to find the www folder?
According to the latest Ionic-Cli documentation, if you want any gulp tasks to run before the app is served, add a serve:before task to the gulpfile.js file in your project root. In your case this would be:
gulp.task("serve:before", [
"styles",
"source",
"watch"
]);
I figured that Ionic wasn't ignoring gulpStartupTasks as I've previously updated the question, but rather executing them asynchronously to the server initialization.
To fix that I've added a postinstall script in my package.json to do the job of creating the www folder, processing the source files and then copying them to the www folder.
That solved the problem, but I still don't understand why gulpStartupTasks execute async instead of sync, it seems to be wrong. Don't you?
So I figured this out. I'm guessing that you, like myself, are editing in a different .sass or .scss file than the one that comes with ionic skeleton apps. In this case you need to add this new path to the gulp file or livereload will pick up the changes, but not actually perform the 'sass' command on the path with your new SASS file(s).
Here's my edited paths line in gulpfile.js
var paths = {
sass: ['./scss/**/*.scss', './www/sass/**/*']
};
'./www/sass/**/*' is where I put my new SASS files that I #import in the main ionic.app.scss file.
// Include all of Ionic
#import "www/lib/ionic/scss/ionic";
#import "www/sass/test";