I use Cypress v10 with typescript. I'd like to add chai-subset plugin. I've added npm package already.
How should I configure Cypress to see the plugin? Will it be then also available for code completion in Visual Studio Code ?
The steps given on the npm page are as follows, BUT for Cypress you should omit the first line require('chai') because Cypress has added chai globally and modified it to allow the .should() command to use it.
Add it to the /support/e2e.js file.
// var chai = require('chai'); // NOT THIS LINE
var chaiSubset = require('chai-subset');
chai.use(chaiSubset);
Usage:
cy.get(...)
.should('containSubset', {
a: 'b',
e: {
baz: {
qux: 'quux'
}
}
})
Related
I'm trying to run gulp to build my app like Rob Dodson explains here.
Original error
At the command line, if I run:
npm run build
I get the following error:
[20:50:55] Using gulpfile ~/path/to/gulpfile.js
[20:50:55] Starting 'default'...
Deleting build/ directory...
[20:50:56] The following tasks did not complete: default
[20:50:56] Did you forget to signal async completion?
It appears there is some task described as "signal async completion?" What does this mean? And how do I do it?
Alternate error
However if I run the following at the command line:
gulp
I get a different error message as follows:
[23:40:57] Using gulpfile ~/path/to/gulpfile.js
/usr/local/lib/node_modules/gulp/bin/gulp.js:129
gulpInst.start.apply(gulpInst, toRun);
^
TypeError: Cannot read property 'apply' of undefined
at /usr/local/lib/node_modules/gulp/bin/gulp.js:129:19
at nextTickCallbackWith0Args (node.js:420:9)
at process._tickCallback (node.js:349:13)
at Function.Module.runMain (module.js:443:11)
at startup (node.js:139:18)
at node.js:968:3
Why would there be different error messages? Does that give a hint what's actually causing the errors? If so, what is it? And what can I do to fix it?
My code
I just copied the files package.json, polymer.json and gulpfile.js from the sample code Rob supplied here. Then I ran npm install as this answer describes.
gulpfile.js
'use strict';
// Documentation on what goes into PolymerProject.
const path = require('path');
const gulp = require('gulp');
const mergeStream = require('merge-stream');
const del = require('del');
const polymerJsonPath = path.join(process.cwd(), 'polymer.json');
const polymerJSON = require(polymerJsonPath);
const polymer = require('polymer-build');
const polymerProject = new polymer.PolymerProject(polymerJSON);
const buildDirectory = 'build/bundled';
/**
* Waits for the given ReadableStream
*/
function waitFor(stream) {
return new Promise((resolve, reject) => {
stream.on('end', resolve);
stream.on('error', reject);
});
}
function build() {
return new Promise((resolve, reject) => {
// Okay, so first thing we do is clear the build
console.log(`Deleting build/ directory...`);
del([buildDirectory])
.then(_ => {
// Okay, now lets get your source files
let sourcesStream = polymerProject.sources()
// Oh, well do you want to minify stuff? Go for it!
// Here's how splitHtml & gulpif work
.pipe(polymerProject.splitHtml())
.pipe(gulpif(/\.js$/, uglify()))
.pipe(gulpif(/\.css$/, cssSlam()))
.pipe(gulpif(/\.html$/, htmlMinifier()))
.pipe(polymerProject.rejoinHtml());
// Okay now lets do the same to your dependencies
let depsStream = polymerProject.dependencies()
.pipe(polymerProject.splitHtml())
.pipe(gulpif(/\.js$/, uglify()))
.pipe(gulpif(/\.css$/, cssSlam()))
.pipe(gulpif(/\.html$/, htmlMinifier()))
.pipe(polymerProject.rejoinHtml());
// Okay, now lets merge them into a single build stream.
let buildStream = mergeStream(sourcesStream, depsStream)
.once('data', () => {
console.log('Analyzing build dependencies...');
});
// If you want bundling, do some bundling! Explain why?
buildStream = buildStream.pipe(polymerProject.bundler);
// If you want to add prefetch links, do it! Explain why?
// buildStream = buildStream.pipe(new PrefetchTransform(polymerProject));
// Okay, time to pipe to the build directory
buildStream = buildStream.pipe(gulp.dest(buildDirectory));
// waitFor the buildStream to complete
return waitFor(buildStream);
})
.then(_ => {
// You did it!
console.log('Build complete!');
resolve();
});
});
}
gulp.task('default', build);
The original error is unrelated to the "alternate error".
While the build task runs gulp, npm run prioritizes the locally-installed gulp (at node_modules/.bin/gulp) before the system-installed gulp. Running gulp yourself (without npm run) would invoke the globally-installed gulp, which may result in an error if it's incompatible with your project (e.g., Gulp 3 binary with Gulp 4 API in your scripts, which appears to be the case). You could either install Gulp 4 so that you can run gulp yourself, or continue using npm run build.
To troubleshoot the original error, I recommend starting from the Polycast's original source (if you haven't already) to determine what the difference could be.
If you prefer to stick with your current track, I suggest a few things:
Verify the paths in your HTML imports, as a path to a non-existent file would cause a silent error (polymer-build issue 88). It might be helpful to run polymer build -v (verbose build).
Add buildStream.on('error', (err) => console.log(err)) after let buildStream = ... in case any unsuppressed error events crop up in that stream.
I recommend you use the new version of PSK Custom Build:
https://github.com/PolymerElements/generator-polymer-init-custom-build/
It has the gulpfile.js updated.
The problem was caused by an incorrect import path.
incorrect path
<link rel="import" href="../../../bower_components/polymer/polymer.html">
correct path
<link rel="import" href="../../bower_components/polymer/polymer.html">
As #tony19, correctly described, that errant import path caused a silent failure.
I found this by pursuing the path suggested by #abdonrd. I followed the instructions here as follows.
First, I copied my project. Then I loaded into the my-app directory per the below described procedure.
https://github.com/PolymerElements/generator-polymer-init-custom-build/
npm install -g polymer-cli
npm install -g generator-polymer-init-custom-build
mkdir my-app
cd my-app
polymer init custom-build
polymer build -v # the results of this command highlighted my error in red
The error showed the path of the missing file. Which I noticed was located one level higher than it should have been because the root directory my-app/ was missing from the path. Then I had to search manually through all the files using the search string polymer/polymer.html until I found a mismatch between the number of ../ in the import path (3 in this case) and the number of folders deep into the root directory the importing file was (2 in this case).
After I corrected the file path, I again ran:
polymer build -v # building the project again, correctly this time
polymer serve build/bundled # to test serve the build/bundled version
How to shorten class names in html and in css files
I have this class name
.profile-author-name-upper
And want to change this like this
.p-a-n-u
or
.panu
I'm usinig js task runner GruntJS
So what you need is uglification
This is just part from tutorial I copied online from grunt-contrib-uglify grunt plugin
Simple Configuration
npm install grunt grunt-contrib-uglify --save-dev
This will install grunt as well uglifyjs in your node_modules devDependencies as well as update package.json
Inside your Gruntfile.js:
module.exports = function(grunt) {
grunt.initConfig({
uglify: {
my_target: {
files: {
'dest/minified.js': ['src/jquery.js', 'src/angular.js']
}
}
}
});
grunt.loadNpmTasks('grunt-contrib-uglify'); // load the given tasks
grunt.registerTask('default', ['uglify']); // Default grunt tasks maps to grunt
};
From the command line:
*$ grunt
Running "uglify:my_target" (uglify) task
1 file created.
Done, without errors*
I have setup and configured by gulp process locally and now I am trying to get it working with Teamcity.
I have already installed node, and the gulp plug in.
One of the gulp packages I am using is gulp-bump so that I can use the %build-number% variable and use it to set the version of my package.json file. I am using yargs so that I can read arguments from the command line
This is the gulp task that I am using
gulp.task('setVersion', function () {
var msg = 'Setting version';
var version = args.version;
var options = {};
if (version) {
options.version = version;
msg += ' to ' + version;
}
log(msg);
return gulp
.src(config.packages)
.pipe($.print())
.pipe(version ? $.bump(options) : $.util.noop())
.pipe(gulp.dest(config.dest.root));
});
To get this to work, from the command line i call
gulp build --version=2.3.4
build is the gulp task that I want to run, and --version is the value i want to read from the command line.
The task setVersion is a dependency of the build task.
There are other gulp tasks that use the package.json file to be included at the op of all .css and js files that are outputted but these are called as part of the build task using the package 'run-sequence'
When I run this from the command line, everything works as expected.
Within my teamcity build I have two steps defined.
Step 1 is Node.js NPM runner, which i can see is correctly pulling down all the relevant packages .
Step 2 is using the Gulp runner.
Within this task, I have set the gulp task as "build", and the additional command line parameters as --version=%build.number%
But it does not appear that the version number is being set correctly as even though in the build log it is saying
"Setting version to 2.3.4"
It is not setting the version correctly as when I review the css and js files after the build, they are not using the correct version.
However I know that teamcity is using %build.number% correctly as the next task is to produce a nuget file using NuGet Pack, and the version is set to %build.number%, and the file name of the nuget file produced does correctly include the version number.
I just cannot get the version within package.json set correctly as part of the build process.
What else can I do to correctly pass in the build number and to correctly set the version of package.json
Update
After the comments received, I have discovered that the error was with the way in which I was reading package.json
My gulpfile.js had the following:
var pkg = require('./package.json');
var banner = ['/**',
' * <%= pkg.name %>',
' * #version v<%= pkg.version %>',
' */',
''].join('\n');
I was using package gulp-header to then insert the banner at the top of the page.
$.header(banner, { pkg: pkg })
Looking at the answer to this question : Javascript: get package.json data in gulpfile.js
it was mentioned that when you use require to load package.json the file is cached, and if any process modifies the package.json file, gulp will not update the version that it has already cached.
So I modified the routine to read the package.json file on demand:
var fs = require('fs');
function getPackageJson() {
return JSON.parse(fs.readFileSync('./package.json'));
}
So in my processes that where appending the header, I changed to call getPackageJson. Now when i run the process in teamcity, it is correctly setting the correct version
e.g.
var pkg = getPackageJson();
return gulp
.src(config.src.sass)
.pipe($.sass())
.pipe($.header(banner, { pkg: pkg }))
just check if below works
update package.json
gulp.task('bump-version', function () {
return gulp.src(['./bower.json', './package.json'])
.pipe(plugins.if(!bumpOpt.type, plugins.prompt.prompt(bumpPrompt, function(res){ bumpOpt.type = res.bump; })))
.pipe(plugins.bump(bumpOpt).on('error', plugins.util.log))
.pipe(gulp.dest('./'));
});
and then read the version using
function getPackageJsonVersion () {
//We parse the json file instead of using require because require caches multiple calls so the version number won't be updated
return JSON.parse(fs.readFileSync('./package.json', 'utf8')).version;
};
and use this function like
gulp.task('create-new-tag', function (cb) {
var version = getPackageJsonVersion();
plugins.git.tag(version, 'Created Tag for version: ' + version, function (error) {
if (error) { return cb(error); }
plugins.git.push('origin', 'master', {args: '--tags'}, cb);
});
});
I'm writing a node app with es6 using babel transpiler.
I have 2 files index.js & my-module.js on my root directory
- index.js
- my-module.js
my-module.js
export let myFunc = () => {
console.log('myFunc was called!!!');
}
index.js
import {myFunc} from './my-module';
myFunc();
if I run the following line from the command line everything works as expected.
$ babel-node index.js >> myFunc was called!!!
but if I remove the dot when importing my-module:
import {myFunc} from '/my-module';
myFunc();
I'm getting an error:
Error: Cannot find module '/my-module'
Any reason why I can't import modules using an absolute path? anyway to change .babelrc config to support it?
Thanks
Like (almost) any tool '/x' means 'x' in the root of your filesystem. Babel doesn't actually look at the paths, it just compiles
import {myFunc} from '/my-module';
into
var _myModule = require('/my-module');
And node actually looks up the module.
If you really want to import relative to the root of the project, you could use a plugin. I recommend using something that isn't very ambiguous, and make sure you document this for the next person reading your code!
Here's an example where we use a leading ~ to mean project relative. You could use anything you like e.g. ^ would also be good.
Example Input:
import {a} from '~my-module';
import {b} from '/my-module';
import {c} from './my-module';
scripts/babel-plugin-project-relative-require.js
module.exports = function (babel) {
// get the working directory
var cwd = process.cwd();
return new babel.Transformer("babel-plugin-project-relative-require", {
ImportDeclaration: function(node, parent) {
// probably always true, but let's be safe
if (!babel.types.isLiteral(node.source)) {
return node;
}
var ref = node.source.value;
// ensure a value, make sure it's not home relative e.g. ~/foo
if (!ref || ref[0] !== '~' || ref[1] === '/') {
return node;
}
node.source.value = cwd + '/' + node.source.value.slice(1);
return node;
}
});
};
.babelrc
{
"plugins": [
"./scripts/babel-plugin-project-relative-require.js"
]
}
Output (if run in /tmp):
'use strict';
var _tmpMyModule = require('/tmp/my-module');
var _myModule = require('/my-module');
var _myModule2 = require('./my-module');
The solution from FakeRainBrigand/Gavriguy is good and works well.
So i decided to develop a plugin which you can easily install with npm in and use a simple Babel-Plugin.
https://github.com/michaelzoidl/babel-root-import
Hope this helps...
First of all, Babel is just a transpiler from ES2015 to ES5 syntax. Its job is to transpile this:
import {myFunc} from '/my-module'
into this:
var _myModule = require('/my-module');
Actual module requiring performed by Node, and how Node does it you can read in details here: https://nodejs.org/api/modules.html#modules_file_modules
To summary, ./module means path to module relative to local directory, /module is an absolute path to module, module triggers Node to look for module in local node_modules directory and all ascending.
i am running into a problem. I have created my own seed: https://github.com/damirkusar/leptir-angular-seed with gulp, browserify and more.
Everything worked fine, since i had the good idea to update node from 10.32 to 12.5, i am getting the below error. I think that this is since then. I tried it also on a different machine, same setup, same error.
so, after npm install and bower install i am starting the app with:
gulp
or when trying to build the project with
gulp build
i am getting this error:
leptir-angular-seed/node_modules/gulp-browserify/node_modules/browserify/node_modules/module-deps/index.js:162
rs.on('error', function (err) { tr.emit('error', err) });
^
TypeError: Cannot read property 'emit' of undefined
at ReadStream.<anonymous> (/leptir-angular-seed/node_modules/gulp-browserify/node_modules/browserify/node_modules/module-deps/index.js:162:39)
at ReadStream.emit (events.js:107:17)
at fs.js:1618:12
at FSReqWrap.oncomplete (fs.js:95:15)
Here is also the link to the package.json: https://github.com/damirkusar/leptir-angular-seed/blob/450ffe99943036cd5a670e54ec3884c02bd7bb8a/package.json.
but luckily, karma start executes the tests and all tests are passing..
Maybe some versions are not really supported correctly?
Does anybody have an idea what causes this problem?
-- edit 2015-June-25 14:23
I am using the module which cause the problem in my gulp file like this:
// Browserify task
gulp.task('browserify', function () {
gulp.src(paths.browserify[0])
.pipe(browserify({
insertGlobals: true,
debug: true
}))
// Bundle to a single file
.pipe(concat('bower.js'))
// Output it to our dist folder
.pipe(gulp.dest(paths.destination_public))
.pipe(refresh(lrServer)); // Tell the lrServer to refresh;
gulp.src(paths.browserify[1])
.pipe(browserify({
insertGlobals: true,
debug: true
}))
// Bundle to a single file
.pipe(concat('app.js'))
// Output it to our dist folder
.pipe(gulp.dest(paths.destination_public))
.pipe(refresh(lrServer)); // Tell the lrServer to refresh;
});
which browserifyies these app.js file and its content:
require('./modules/core');
require('./modules/core');
and bower.js with its content:
'use strict';
require('jquery');
require('bootstrap');
require('moment');
require('underscore');
require('angular');
require('angular-animate');
require('angular-bootstrap');
require('angular-bootstrap-tpls');
require('angular-cookies');
require('angular-mocks');
require('angular-resource');
require('angular-ui-router');
require('angular-ui-utils');
require('angular-translate');
require('angular-translate-loader-static-files');
require('angular-translate-loader-url');
require('angular-translate-storage-cookie');
require('angular-translate-storage-local');
thank you so much
"...but in fact, otherwise i am not using this module which causes the error." - damir
modules has dependencies too. it seems to be a problem with one of these modules that are used by an other module.
It could be possible that a module you are using has a dependency on a node component of the old version. Try to get the old back until the bug is fixed.
On a windows machine (instead of mine mac) it showed me a better error message.
I referenced bower packages which where not installed.. but totally forgot to remove it from package.json and bower.js.
so i removed code in the above files which referenced the following packages:
angular-translate-storage-cookie
angular-translate-storage-local
-- UPDATE 27th June 2015 - 22:41 --
I saw that gulp-browserify is blacklisted by gulpjs, so i thought its better to get rid of it, because i faced also problems on windows machines. Instead of using gulp-browserify, i am using plain browserify with vinyl-transform.
First, update your package.json with this:
"browserify": "9.0.4",
"vinyl-transform": "1.0.0"
You see, that i am using exactly these two versions, this is because with newer browserify versions, things are not really working, so to be sure that it works also when i update my packages, i keep them in this versions.
Then lets update our gulp file. We will need to add these two lines:
var browserify = require('browserify'),
transform = require('vinyl-transform');
and my new task looks like this:
gulp.task('browserify', function () {
var browserified = transform(function(filename) {
var b = browserify(filename);
return b.bundle();
});
return gulp.src(paths.browserify)
.pipe(browserified)
.pipe(gulp.dest(paths.destination_public));
});
its now shorter and much cleaner. My paths are configured like this..
var paths = {
...
browserify: ['./public/bower.js', './public/app.js'],
...
destination_public: './dist/'
};
now my seed is working on mac and windows the same way.
https://github.com/damirkusar/leptir-angular-seed