How can I copy JSON files in Ionic 5 - ionic-framework

I have JSON files (es.json, en.json, ch.json) in "src\app\submodules\submodule1_src\assets\i18n".
I need that when doing "ionic build", these JSON files are copied to "src\assets\i18n\submodule1_src" automatically. In Ionic 3 this was done with #ionic/app-scripts, but it is discontinued.

I solved the problem as follows:
Add in 'ionic.config.json':
"hooks": {
"build:before": "./scripts/build-before.js"
},
And the content of 'build-before.js':
var fs = require('fs');
module.exports = function() {
fs.copyFile(
'src/app/submodules/submodule1/assets/i18n/es.json',
'src/assets/i18n/submodule1/es.json',
(err) => {});
}

Related

How we can generate html report in cucumber latest version(3.2.0) with protractor-cucumber framework

Since cucumber 3 removed the registerHandler and registerListener , how we can generate html report in cucumber 3.2.0.I have used below code for generating json report in cucumber 2.
defineSupportCode(function({ registerListener }) {
var JsonFormatter = new Cucumber.JsonFormatter();
JsonFormatter.log = function(string) {
var outputDir = 'testreports/report';
var fileName = 'cucumber-report.json';
var targetJson = path.resolve(outputDir, fileName);
if (fse.existsSync(outputDir)) {
fse.moveSync(outputDir, outputDir + '_' + moment().format('YYYYMMDD_HHmmss'), {
overwrite: true
});
}
fse.outputFileSync(targetJson, string);
};
registerListener(JsonFormatter);
});
and used below code for html report
defineSupportCode(function({ registerHandler }) {
registerHandler('AfterFeatures', function(features, callback) {
var options = {
theme: 'bootstrap',
jsonFile: 'testreports/report/cucumber-report.json',
output: 'testreports/report/cucumber-report.html',
reportSuiteAsScenarios: true,
};
reporter.generate(options);
callback();
});
});
Thanks in advance.
You have to do following changes:
1) set cucumberOpts.format in protractor conf file
cucumberOpts: {
format: ["json:reports/report/cucumber/cucumber-report.json"],
here reports/report/cucumber/cucumber-report.json is the cucumber json file path, you must specify a path at here.
framework will generate it automatically with results' json data as file content when all scenarios execute complete.
2) create parent folder of cucumber json file path before test framework load if parent folder not exist
Option 1: put create parent folder code at head of protractor conf file.
Option 2: create a Protractor plugin implement interface: setup(), which will be executed before test framework load.
// plugin: create-report-folder.js
var moment = require("moment");
var fse = require("fs-extra");
module.exports = {
setup: function() {
var reportDir = this.config.options.reportDir;
if (fse.existsSync(reportDir)) {
fse.moveSync(
reportDir,
reportDir + "_" + moment().format("YYYYMMDD_HHmmss"),
{ overwrite: true}
);
}
fse.mkdirsSync(reportDir);
}
};
Note: both options need to use Sync api to create folder.
3) create Protractor plugin implement interface: postResults which will be executeed after all scenarios execute complete.
// plugin: cucumber-html-reporter.js
var reporter = require("cucumber-html-reporter");
module.exports = {
postResults: function() {
var options = {
theme: "bootstrap",
jsonFile: this.config.options.jsonFile,
output: this.config.options.htmlFile,
reportSuiteAsScenarios: true
};
reporter.generate(options);
}
};
Note: I tried generate cucumber html report in cucumber AfterAll hook, but failed, seems Cucumber JsonFormater generate cucumber json file is Async, when AfterAll hook start execute, cucumber json file have not create yet.
I'm keeping look into formatOption, should be a way to change JsonFormater generate cucumber json file to Sync, then we can use AfterAll hook.
4) set plugins in protractor conf file
// protractor conf file
exports.config = {
plugins: [
// plugin to create report parent folder
{
path: "supports/create-report-folder.js",
options: {
reportDir: "reports/report/cucumber"
}
}
// plugin to generate cucumber html report
{
path: "supports/cucumber-html-reporter.js",
options: {
jsonFile: "reports/report/cucumber/cucumber-report.json",
htmlFile: "reports/report/cucumber/cucumber-report.html"
}
}
]
A workable scaffold for Protractor + Cucumber4 + HTML Report at my github
The scaffold for Protractor + Cucumber3 + HTML Report on my local has some dependency campatible issue, I'm looking into that in case you must use Cucumber 3.
5) If you use multiCapabilities, you can use below package to generate report:
protractor-multiple-cucumber-html-reporter-plugin
If the location of protractor.conf.js is not at the same level as node_modules then the cucumberOpts.format path would be relative to its current file location and the protractor-multiple-cucumber-html-reporter-plugin looks for the json files relative to parent root folder and warns about json file is not found.
To solve this provide absolute path of the json file to cucumberOpts.format like below. This is applicable if you're using cucumber for e2e testing in Angular applications where the protractor.conf.js is normally present inside e2e folder.
cucumberOpts: {
require: [path.resolve(process.cwd(), 'e2e/steps/*.ts')],
format: 'json:'+ path.resolve(process.cwd() + '/reports/cucumber-ui-reports.json')
}

electron-builder cannot find git repository although specifying

package.json
{
//some other config
"repository": "git#gitintsrv.domain.com/UserName/RepoName",
"scripts": {
"build": "build --win",
"ship": "build --win -p always"
}
}
electron-builder.yml
appId: com.xorchat.app.windows
publish:
provider: github
token: some_token
electron.js
const { app, BrowserWindow, ipcMain } = require('electron');
const { autoUpdater } = require("electron-updater");
let win; // this will store the window object
// creates the default window
function createDefaultWindow() {
win = new BrowserWindow({ width: 900, height: 680 });
win.loadURL(`file://${__dirname}/src/index.html`);
win.on('closed', () => app.quit());
return win;
}
// when the app is loaded create a BrowserWindow and check for updates
app.on('ready', function() {
createDefaultWindow()
autoUpdater.checkForUpdates();
});
// when the update has been downloaded and is ready to be installed, notify the BrowserWindow
autoUpdater.on('update-downloaded', (info) => {
win.webContents.send('updateReady')
});
// when receiving a quitAndInstall signal, quit and install the new version ;)
ipcMain.on("quitAndInstall", (event, arg) => {
autoUpdater.quitAndInstall();
})
When i am running npm run build i am receiving this error.
Error: Cannot detect repository by .git/config. Please specify "repository" in the package.json (https://docs.npmjs.com/files/package.json#repository).
Please see https://electron.build/configuration/publish
Where is the error?
I know it's probably too late, but in case you end up here as I did, here's how I solved it:
Add this to your package.json
"build": {
"publish": [{
"provider": "github",
"host": "github.<<DOMAIN>>.com",
"owner": "<<USER>>",
"repo": "<<NAME OF YOUR REPO (ONLY THE NAME)>>",
"token": "<<ACCESS TOKEN>>"
}]
}
I think the issue is that electron cannot parse corporate github urls, or something.
*********** EDIT:
Make a electron-builder.yml in the root folder, with the following content
appId: com.corporate.AppName
publish:
provider: github
token: <<ACCESS TOKEN>>
host: github.corporate.com
owner: <<User/ Org>>
repo: <<repo name>>
Don't forget to include this file on your .gitignore
This use to be a specific issue with Electron Builder 19x, and it has since been fixed:
https://github.com/electron-userland/electron-builder/issues/2785

Karma test won't run

Please help. I am new to testing with karma. When I run "karma start karma.local.conf.js" the Chrome browser window comes up but the test doesn't run. I think my app.js and my test.js are ok and I suspect that the issue is incorrect versions of the packages I'm loading in my package.json. I know I also need to include mocha and chai:
{
"devDependencies": {
"browserify": "10.2.3",
"gulp": "3.8.11",
"gulp-browserify": "0.5.1",
"karma": "0.12.16",
"karma-chai": "0.1.0",
"karma-chrome-launcher": "0.1.4",
"karma-mocha": "0.1.4",
"http-status": "0.1.8",
"underscore": "1.5.2"
}
}
Here is my karma.local.conf.js file:
module.exports = function(config) {
config.set({
files: [
'http://code.jquery.com/jquery-1.11.3.js',
'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.js',
// For ngMockE2E
'https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular-mocks.js',
'./app.js',
'./test.js'
],
frameworks: ['mocha', 'chai'],
browsers: ['Chrome'],
proxies : {
'/': 'http://localhost:3000'
}
});
};
I can also post the app.js and the test.js if need be, but I think they are ok. I think the issue is in the package.json and getting the right versions of the npm packages I need.
Here is my app.js:
var app = angular.module('myApp', ['ng']);
app.directive('userMenu', function() {
return {
controller: 'MyHttpController',
template: '<div class="user" ng-show="user">' +
' Current User: {{user.profile.username}}' +
'</div>' +
'<div ng-show="!user">' +
' <a href="/auth/facebook">' +
' Log In' +
' </a>' +
'</div>'
}
});
app.controller('MyHttpController', function($scope, $http) {
$http.get('/api/v1/me').success(function(data) {
$scope.user = data.user;
});
});
Here is my test.js:
describe('Nav Bar', function() {
var injector;
var element;
var scope;
var compiler;
var httpBackend;
beforeEach(function() {
injector = angular.injector(['myApp', 'ngMockE2E']);
intercepts = {};
injector.invoke(function($rootScope, $compile, $httpBackend) {
scope = $rootScope.$new();
compiler = $compile;
httpBackend = $httpBackend;
});
});
it('shows logged in users name', function(done) {
httpBackend.expectGET('/api/v1/me').respond({
user: { profile: { username: 'John' } }
});
element = compiler('<user-menu></user-menu>')(scope);
scope.$apply();
httpBackend.flush();
assert.notEqual(element.find('.user').css('display'), 'none');
assert.equal(element.find('.user').text().trim(), 'Current User: John');
done();
});
});
Thanks in advance,
William
Here is what I did to get my tests to run:
1. Run "npm install <package name> without a version number for each package in my package.json file
2. Run "karma init" to create a new config file. By default this command creates karma.conf.js
3. Modify karma.conf.js with the information from karma.local.conf.js
4. Run "karma start". By default this command looks for a file named karma.conf.js (I had already run "npm install -g karma-cli" so I was able to run "karma start" without specifying a path
5. Next I will run "npm ls" to see what package versions were installed and create a new version of package.json for future projects.
Another solution might be to run "npm install" and then run "ncu -u" to update all the packages to the latest versions. That might work but I haven't tested it.

Ionic serve: how to rerun gulp task

I'm kinda new to ionic and gulp.
I was able to configure the ionic.project file in order to run the gulp tasks when I first run ionic serve.
But now when I change files I want that the gulp task will run again.. But this doesn't happen.. Is there a way to do that?
This is my ionic.project file:
{
"name": "test",
"app_id": "",
"gulpStartupTasks": [
"default"
],
"watchPatterns": [
"src/**/*",
"src/*",
"www/**/*",
"!www/lib/**/*"
]
}
I expected that when some file changes that match the wtachPatterns
it will invoke the gulp watch task, but this doesnt happen (I see that ionic see that the file has changed but nothing happen.)
this the the gulp watch task:
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.script, ['script']);
});
Basically the task is minifying all the JS files and all the sass/scss files
and the index.html is looking on the minified files. so if the gulp task isn't invoked there are no changes in the minified file and I need to run ionic serve all over again.. Is there a proper way to do that?
UPDATE:
This is the complete gulpfile
var gulp = require('gulp');
var gutil = require('gulp-util');
var bower = require('bower');
require('require-dir')('./gulp/tasks');
var paths = {
sass: ['./scss/**/*.scss'],
style: ['./src/**/*.scss'],
script: ['./src/app.js'],
html:['./src/*.html']
};
gulp.task('default', ['sass', 'script','watch', 'html', 'style']);
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']);
gulp.watch(paths.script, ['script']);
});
gulp.task('install', ['git-check'], function() {
return bower.commands.install()
.on('log', function(data) {
gutil.log('bower', gutil.colors.cyan(data.id), data.message);
});
});
gulp.task('git-check', function(done) {
if (!sh.which('git')) {
console.log(
' ' + gutil.colors.red('Git is not installed.'),
'\n Git, the version control system, is required to download Ionic.',
'\n Download git here:', gutil.colors.cyan('http://git- scm.com/downloads') + '.',
'\n Once git is installed, run \'' + gutil.colors.cyan('gulp install') + '\' again.'
);
process.exit(1);
}
done();
});
And this is an example of one of the files who have the actual task:
var browserify = require('browserify');
var gulp = require('gulp');
var source = require('vinyl-source-stream');
var stringify = require('stringify');
var paths = ['./src/app.js'];
gulp.task('script', function() {
return browserify(paths, {debug: true})
.transform(stringify(['.html']))
.bundle()
.pipe(source('app.js'))
.pipe(gulp.dest('./www/js'));
});
Well So the problem was with paths I watched.
I removed the ./ and now its working
First thing first, you misunderstand the watchPatterns is for livereload, which means, the web will refresh if there is any file changed on watch. It's definitely not having any relation to gulp.
Read more at: http://ionicframework.com/docs/cli/test.html
To watch for file changes with watch, update your watch task, which is
gulp.task('watch', function() {
gulp.watch(paths.sass, ['sass']); <-- any file in paths.sass changed will trigger `gulp sass`
gulp.watch(paths.script, ['script']); <-- any file in paths.script changed will trigger `gulp script`
});
So if you want to watch more files to be processed by Gulp, just add tasks and watch them in gulp watch.
Oh hey, you are watching only files in ./scss/**/*.scss and ./src/app.js. Add more if you wish.

File upload in ionic (image or any file)?

can any one please sort it out it gives error FileTransfer is not defined.
Below is my code
controller("ExampleController", function($scope, $cordovaFileTransfer) {
$scope.upload = function() {
var options = {
fileKey: "avatar",
fileName: "yedu.jpg",
chunkedMode: false,
mimeType: "image/jpg"
};
$cordovaFileTransfer.upload("http://192.168.1.109/uploads/upload", "/android_asset/www/img/yedu.jpg", options).then(function(result) {
console.log("SUCCESS: " + JSON.stringify(result.response));
}, function(err) {
console.log("ERROR: " + JSON.stringify(err));
}, function (progress) {
// constant progress updates
});
}
});
I think you getting error in browser . As per the official documentation of plugin this plugin is not supported to browser for more details go to here and here.
If you testing in browser then before installing app in device add the cordovaFileTransfer plugin to your project.
cordova plugin add org.apache.cordova.file-transfer
And for the full implementation of file upload and download with cordova you may go to here.