How to run a copy command in Ionic2 build script - ionic2

I am trying to copy a single file from the src location to the "www" output folder. I then want to incorporate this into the build process so that after all the core build scripts are run, it runs my command.
I am following the examples in the App Build Scripts for Ionic. Basically I have:
Added a new config file with my command (as per this example): config\webpack_rj.config.js
module.exports = {
copyIndexContent: {
src: ['{{SRC}}/web.config'],
dest: '{{WWW}}'
}
}
In my package.json I have added:
"config": {
"pwa_copy_webconfig": "./config/webpack_rj.config.js"
},
This is the part I do not understand - how to actually run it when I run the normal build process.
I have tried added an additional "scripts" entry in the package.json:
"build": "ionic-app-scripts build ./config/webpack_rj.config.js",
However this did not work. So how can I invoke copyIndexContent or pwa_copy_webconfig from the build process?

You are trying to add a new step to the build process instead of extending copy. This is not possible unless you make custom changes to the app scripts module to take the pwa_copy_webconfig command from the config.
A common way is to extend the existing config file.
You can extend the copy.config.js in your webpack_rj.config.js file.
const copyConfig = require('path_to_default_copy_config');
copyConfig.copyIndexContent.src.push('{{SRC}}/web.config');
In package.json add:
"config": {
"ionic_copy": "./config/webpack_rj.config.js"
},
Credit to Raj's answer here for a different app script configuration.

Related

How to create simple readable regex that matches either of two possible file paths (for Jest test script)

Apologies if this question is already answered, but all of the answers I've found recommend regex that's extremely difficult to parse, and I'm hopeful that something more readable should be possible.
I am running tests using Jest on a Javascript project using typescript.
Using the default build runner in VS Code, and configured in tsconfig.json (code below), my transpiled javascript goes to an out folder.
I have a few sub-folders containing little test projects. I would like to run tests just for one of those sub-folders. I had this working via the "scripts" section in package.json (code below). But then I added the out folder and now the tests can't find the transpiled javascript.
I'd like to tell Jest that there are TWO folders it needs to look in when running tests - the folder where the test file and typescript lives, and the folder where the transpiled javascript lives.
The current line - "test:char": "jest --watchAll --testPathPattern=src/character-copier" just specifies one folder and is using regex but this isn't obvious, which suits me fine because it means it's easy to read. I'd like to be able to say "Look in either src/character-copier or out/character-copier" - but I can't work out how to do this.
package.json:
"scripts": {
"test": "jest",
"test:char": "jest --watchAll --testPathPattern=src/character-copier"
},
tsconfig.json:
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"sourceMap": true,
"outDir": "out"
}
}
To find files within a specific directory.
/(out|src)\/character-copier\/.*/gi
demo: https://regex101.com/r/F49pNG/1
Use this to execute your code:
"scripts": {
"test": "jest --watchAll --testPathPattern=\"/(out|src)\/character-copier\/.*\""
},

How can NPM scripts use my current working directory (when in nested subfolder)

It's good that I can run NPM scripts not only from the project root but also from the subfolders. However, with constraint that it can't tell my current working path ($PWD).
Let's say there's a command like this:
"scripts": {
...
"pwd": "echo $PWD"
}
If I run npm run pwd within a subfolder of the project root (e.g, $PROJECT_ROOT/src/nested/dir), instead of printing out my current path $PROJECT_ROOT/src/nested/dir, it always gives $PROJECT_ROOT back. Are there any way to tell NPM scripts to use my current working directory instead of resolving to where package.json resides?
Basically I want to pull a Yeoman generator into an existing project and use it through NPM scripts so that everyone can use the shared knowledge (e.g, npm run generator) instead of learning anything Yeoman specific (e.g npm i yo -g; yo generator). As the generator generates files based on current working path, while NPM scripts always resolves to the project root, I can't use the generator where it intend to be used.
If you want your script to use different behavior based on what subdirectory you’re in, you can use the INIT_CWD environment variable, which holds the full path you were in when you ran npm run.
Source: https://docs.npmjs.com/cli/run-script
Use it like so:
"scripts": {
"start": "live-server $INIT_CWD/somedir --port=8080 --no-browser"
}
Update 2019-11-19
$INIT_CWD only works on *nix-like platforms. Windows would need %INIT_CWD%. Kind of disappointing that Node.js doesn't abstract this for us. Solution: use cross-env-shell live-server $INIT_CWD/somedir.... -> https://www.npmjs.com/package/cross-env
One known solution is through ENV variable injection.
For example:
Define scripts in package.json:
"pwd": "cd $VAR && echo $PWD"
Call it from anywhere sub directories:
VAR=$(pwd) npm run pwd
However, this looks really ugly, are there any cleaner/better solutions?
With node 8+ you can automate the ENV variable injection.
1.- In $HOME/.node_modules/ (a default node search path) create a file mystart with
process.env.ORIGPWD = process.env.PWD
2.- Then in your $HOME/.bashrc tell node to load mystart every time
export NODE_OPTIONS="-r mystart"
3.- Use $ORIGPWD in your scripts. That works for npm, yarn and others.

How to turn on .sass extensions in Ionic 2?

I have set up a basic project and only .scss files are picked up. I would like to write my CSS with the .sass format. How can I turn that on?
You can override the app script config files:
https://github.com/driftyco/ionic-app-scripts#overriding-config-files
In my package.json, I added the following:
"config": {
"ionic_sass": "./config/sass.config.js"
}
I created the sass.config.js (copy from the github project) and added the sass extension:
includeFiles: [
/\.(scss|sass)$/i
],
It's unfortunately impossible to update the watch config file, so I directly edited it in the node module:
Under #ionic/app-scripts/config/watch.config.js
Add the following .sass line below .scss:
'{{SRC}}/**/*.scss',
'{{SRC}}/**/*.sass'

grunt-karma not running the spec file when using shared config

I created a basic project to try and get Gruntjs, Karma and Jasmine to play together. When I setup the karma.conf.js file with all of the neccesary files, everything works and the tests pass.
When I try to split them up in Grunt though, I get problems.
Gruntfile.js
grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
karma: {
options: {
configFile: 'karma.conf.js'
},
basicController: {
files: ['/basicController/scBasicControllerCtrl.js', '/basicController/test/ControllersSpec.js']
},
overworkedController: {
src: ['overworkedController/scOverworkedControllerCtrl.js', 'overworkedController/test/ControllersSpec.js']
}
}
});
The documentation at grunt-karma show to use "files:" when splitting up the modules. I did that under the basicController module and when I try to run $ grunt karma:basicController --verbose, I get an error saying
Warning: Cannot use 'in' operator to search for 'src' in /basicController/scBasicControllerCtrl.js Use --force to continue
Aborted due to warnings.
When I run $ grunt karma:overworkedControllers --verbose (using "src" instead of "files", it looks like everything is going to work and the Chrome browser launches but then is says it executed 0 of 0 ERROR.
There should be 3 tests.
Let me know if there's any more info I could post.
My understanding of grunt-karma was incorrect.
I thought I could have the base and source files in the karma.conf.js file. Then in each module, I'd just add the specific files needed for that module and test.
The way it actually works is that the files declared in each module completely overwrite the files property in the karma.conf.js file. Not append to them.
I ended up creating an array in Gruntfile.js that contains all of the source .js files and just concat the necessary files to it in each module.

How to specify test directory for mocha?

Mocha tries to find test files under test by default, how do I specify another dir, e.g. server-test?
Use this:
mocha server-test
Or if you have subdirectories use this:
mocha "server-test/**/*.js"
Note the use of double quotes. If you omit them you may not be able to run tests in subdirectories.
Edit : This option is deprecated : https://mochajs.org/#mochaopts
If you want to do it by still just running mocha on the command line, but wanted to run the tests in a folder ./server-tests instead of ./test, create a file at ./test/mocha.opts with just this in the file:
server-tests
If you wanted to run everything in that folder and subdirectories, put this into test/mocha.opts
server-tests
--recursive
mocha.opts are the arguments passed in via the command line, so making the first line just the directory you want to change the tests too will redirect from ./test/
Here's one way, if you have subfolders in your test folder e.g.
/test
/test/server-test
/test/other-test
Then in linux you can use the find command to list all *.js files recursively and pass it to mocha:
mocha $(find test -name '*.js')
The nice way to do this is to add a "test" npm script in package.json that calls mocha with the right arguments. This way your package.json also describes your test structure. It also avoids all these cross-platform issues in the other answers (double vs single quotes, "find", etc.)
To have mocha run all js files in the "test" directory:
"scripts": {
"start": "node ./bin/www", -- not required for tests, just here for context
"test": "mocha test/**/*.js"
},
Then to run only the smoke tests call:
npm test
You can standardize the running of all tests in all projects this way, so when a new developer starts on your project or another, they know "npm test" will run the tests. There is good historical precedence for this (Maven, for example, most old school "make" projects too). It sure helps CI when all projects have the same test command.
Similarly, you might have a subset of faster "smoke" tests that you might want mocha to run:
"scripts": {
"test": "mocha test/**/*.js"
"smoketest": "mocha smoketest/**/*.js"
},
Then to run only the smoke tests call:
npm smoketest
Another common pattern is to place your tests in the same directory as the source that they test, but call the test files *.spec.js. For example: src/foo/foo.js is tested by src/foo/foo.spec.js.
To run all the tests named *.spec.js by convention:
"scripts": {
"test": "mocha **/*.spec.js"
},
Then to run all the tests call:
npm test
See the pattern here? Good. :) Consistency defeats mura.
If in node.js, some new configurations as of Mocha v6:
Option 1: Create .mocharc.json in project's root directory:
{
"spec": "path/to/test/files"
}
Option 2: add mocha property in project's package.json:
{
...
"mocha": {
"spec": "path/to/test/files"
}
}
More options are here.
Don't use the -g or --grep option, that pattern operates on the name of the test inside of it(), not the filesystem. The current documentation is misleading and/or outright wrong concerning this. To limit the entire command to a portion of the filesystem, you can pass a pattern as the last argument (its not a flag).
For example, this command will set your reporter to spec but will only test js files immediately inside of the server-test directory:
mocha --reporter spec server-test/*.js
This command will do the same as above, plus it will only run the test cases where the it() string/definition of a test begins with "Fnord:":
mocha --reporter spec --grep "Fnord:" server-test/*.js
Now a days(year 2020) you can handle this using mocha configuration file:
Step 1: Create .mocharc.js file at the root location of your application
Step 2: Add below code in mocha config file:
'use strict';
module.exports = {
spec: 'src/app/**/*.test.js'
};
For More option in config file refer this link: https://github.com/mochajs/mocha/blob/master/example/config/.mocharc.js
Run all files in test_directory including sub directories that match test.js
find ./parent_test_directory -name '*test.js' | xargs mocha -R spec
or use the --recursive switch
mocha --recursive test_directory/
I had this problem just now and solved it by removing the --recursive option (which I had set) and using the same structure suggested above:
mochify "test/unit/**/*.js"
This ran all tests in all directories under /test/unit/ for me while ignoring the other directories within /test/
As mentioned by #superjos in comments use
mocha --recursive "some_dir"
I am on Windows 7 using node.js v0.10.0 and mocha v1.8.2 and npm v1.2.14.
I was just trying to get mocha to use the path test/unit to find my tests,
After spending to long and trying several things I landed,
Using the "test/unit/*.js" option does not work on windows.
For good reasons that windows shell doesn't expand wildcards like unixen.
However using "test/unit" does work, without the file pattern.
eg. "mocha test/unit" runs all files found in test/unit folder.
This only still runs one folder files as tests but you can pass multiple directory names as parameters.
Also to run a single test file you can specify the full path and filename.
eg. "mocha test/unit/mytest1.js"
I actually setup in package.json for npm
"scripts": {
"test": "mocha test/unit"
},
So that 'npm test' runs my unit tests.
If you are using nodejs, in your package.json under scripts
For global (-g) installations: "test": "mocha server-test" or "test": "mocha server-test/**/*.js" for subdocuments
For project installations: "test": "node_modules/mocha/bin/mocha server-test" or "test": "node_modules/mocha/bin/mocha server-test/**/*.js" for subdocuments
Then just run your tests normally as npm test
This doesn't seem to be any "easy" support for changing test directory.
However, maybe you should take a look at this issue, relative to your question.
As #jeff-dickey suggested, in the root of your project, make a folder called test. In that folder, make a file called mocha.opts. Now where I try to improve on Jeff's answer, what worked for me was instead of specifying the name of just one test folder, I specified a pattern to find all tests to run in my project by adding this line:
*/tests/*.js --recursive in mocha.opts
If you instead want to specify the exact folders to look for tests in, I did something like this:
shared/tests/*.js --recursive
server/tests/graph/*.js --recursive
I hope this helps anyone who needed more than what the other answers provide
Another option in windows could be using cross-env package and following npm script in package.json
"scripts": {
"test": "cross-env mocha '*.test.js'"
},
"devDependencies": {
"cross-env": "latest",
}
In this case all test files with pattern *.test.js in root folder will be run by mocha.