I'm trying to run E2E tests via Protractor/Selenium on an ejected Angular 4 project.
My package.json:
...
"scripts": {
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet node",
"e2e": "protractor ./protractor.conf.js"
}
...
My protractor.conf:
exports.config = {
seleniumAddress: 'http://localhost:4444/wd/hub',
directConnect: true,
allScriptsTimeout: 60000,
getPageTimeout: 60000,
specs: [
'./src/e2e/**/*.e2e-test.ts'
],
capabilities: {
'browserName': 'chrome'
},
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 60000
},
onPrepare() {
require('ts-node').register({
project: 'tsconfig.e2e.json'
});
jasmine.getEnv().addReporter(new SpecReporter({
spec: {
displayStacktrace: true
}
}));
browser.driver.manage().timeouts().setScriptTimeout(60000);
}
};
When running npm run e2e Chrome boots up, but it's trying to open data:text/html,<html></html> for every test, and then shuts down quickly. What am I missing? I tried adding baseUrl to my protractor.conf, but it doesn't help, as it seems that Selenium is not even running.
I finally found a solution to my problem. I somehow needed to run ng serve, which can now, because the project was ejected, be run via npm run start. This is a Travis CI deployment (which I highly recommend), so see the before_script:
before_script:
- nohup npm run start &
script:
- npm run build -aot --target=production --environment=prod
- npm run test
- npm run e2e
Final package.json (remains default after ng eject):
...
"scripts": {
"ng": "ng",
"lint": "ng lint",
"build": "webpack",
"start": "webpack-dev-server --port=4200",
"test": "karma start ./karma.conf.js",
"pree2e": "webdriver-manager update --standalone false --gecko false --quiet",
"e2e": "protractor ./protractor.conf.js",
"postinstall": "npm run build -aot --target=production --environment=prod"
}
...
Final protractor.conf (remains default after ng eject):
exports.config = {
allScriptsTimeout: 11000,
specs: [
'./src/e2e/**/*.e2e-test.ts'
],
capabilities: {
'browserName': 'chrome'
},
directConnect: true,
baseUrl: 'http://localhost:4200/',
framework: 'jasmine',
jasmineNodeOpts: {
showColors: true,
defaultTimeoutInterval: 30000,
print: function() {}
},
beforeLaunch: function() {
require('ts-node').register({
project: 'tsconfig.e2e.json'
});
},
onPrepare() {
jasmine.getEnv().addReporter(new SpecReporter({
spec: {
displayStacktrace: true
}
}));
}
};
Here's what happens when you ng eject: https://github.com/angular/angular-cli/issues/6171.
Two and a half days waisted. Thank you Angular CLI team for this bug, truly, thank you.
Related
After updating expo it no longer supports building apk files using expo build:android -t apk and instead advices to using eas builds using the command eas build -p android --profile preview but it ended up building an aab instead of the apk. I took a look at the newly added eas.json file which contained:
{
"cli": {
"version": ">= 0.52.0"
},
"build": {
"development": {
"developmentClient": true,
"distribution": "internal"
},
"preview": {
"distribution": "internal"
},
"production": {}
},
"submit": {
"production": {}
}
}
I read the eas docs and it adviced on changing my eas.json to:
{
"cli": {
"version": ">= 0.52.0"
},
"build": {
"preview": {
"android": {
"buildType": "apk"
}
},
"preview2": {
"android": {
"gradleCommand": ":app:assembleRelease"
}
},
"preview3": {
"developmentClient": true
},
"production": {}
}
}
The after running the build command:eas build -p android --profile preview
It build the app correctly as an apk file and installs on android just fine, but on opening it closes itself instantly. After trying to reopen it again closes and now alerts the app crashed.
Is there an error in my eas.json file or am I miss something?
Change production key in eas.json
to this
"production": {
"android": {
"buildType": "apk"
}
}
So now your eas.json
like this
{
"cli": {
"version": ">= 0.52.0"
},
"build": {
"development": {
"developmentClient": true,
"distribution": "internal"
},
"preview": {
"distribution": "internal"
},
"production": {
"android": {
"buildType": "apk"
}
}
},
"submit": {
"production": {}
}
}
To build into .apk file, you can build using production profile. The command like this
eas build --profile production --platform android
Here is the detailed instruction:
https://docs.expo.dev/build/eas-json/
You need to create eas.json in the project directory as:
{
"build": {
"preview": {
"android": {
"buildType": "apk"
}
},
"preview2": {
"android": {
"gradleCommand": ":app:assembleRelease"
}
},
"preview3": {
"developmentClient": true
},
"production": {}
},
"cli": {
"version": ">= 0.52.0"
}
}
Then use the following command:
eas build -p android --profile preview
Regards,
Shameel
I also encounter some problem when upgrading my app to EAS build, the reason is because i m using a value from expo-constant and it return a null, so it crashes my app. The new SDK moved the value that i need to expo-device. My sentry also cause a problem, it will cause instant crash when the app opened. Try removing it temporarily and see if your app will open
The solutions offered in the comments work. My error was brought about by the new SDK version that only supports #react-navigation/native if you have react-native-screens and react-native-safe-area-context installed.
For anyone who finds themselves here use:
npm install #react-navigation/native
expo install react-native-screens react-native-safe-area-context
And then edit eas.json as the other answers recommend. I hope it works for you
I am using Webpack version 6.14.8 in an Asp.net Core Razor Pages application in Visual Studio 2019. I am trying to create a readable output file. Here is the structure:-
|-->wwwroot
----->src (created manually)
------->index.js (created manually)
|-->dist (generated by webpack)
------->main.js (webpack bundle)
|-->node_modules (npm init webpack --save-dev)
|-->package.json (npm init -y)
----->package-lock.json (npm init -y)
|-->webpack.config.js (manually configured)
The src/index.js file is blank index.js file.
The package.json: -
{
"name": "aspnet.core",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"wbp": "webpack --entry ./src/index.js --output ./dist/main.js --mode development",
"build": "webpack --config webpack.config.js"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"lodash": "^4.17.20",
"startbootstrap-simple-sidebar": "^5.1.2",
"webpack": "^5.1.3",
"webpack-cli": "^4.0.0"
}
webpack.config.js:
const path = require('path');
module.exports = {
entry: path.resolve(__dirname, 'src') + '/path/to/your/file.js',
output: {
filename: 'main.js',
path: path.resolve(__dirname, 'dist')
}
};
I am trying to create a readable output folder: -"dist/main.js" in wwwroot folder: dist/main.js. However, when I ran the command: npm run wbp, I received the following error message about the entry module could not be found: Error: Can't resolve './src/index.js' in C:\ directory folder: -
C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld >npm run wbp
>helloword#1.0.0 wbp C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld
>webpack ./src/index.js --output ./dist/main.js --mode development
asset main.js 1.47 KiB [emitted] (name: main)
.dist/main.js 644 bytes built] code generated
ERROR in main
Module not found: Error: Can't resolve './src/index.js' in C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld
webpack 5.1.3 compiled with 1 error in 858 ms
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! HelloWorld#1.0.0 build: `webpack --config webpack.config.js --mode development`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the HelloWorld#1.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\xxx\AppData\Roaming\npm-cache\_logs\2020-10-18T07_19_13_940Z-debug.log
C:\Users\xxx\Desktop\My Folder\Visual Studio\Projects\Final\HelloWorld >
The dist/main file was created in the project directory and its contents are: -
/*
* ATTENTION: The "eval" devtool has been used (maybe by default in mode: "development").
* This devtool is not neither made for production nor for readable output files.
* It uses "eval()" calls to create a separate source file in the browser devtools.
* If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)
* or disable the default devtool with "devtool: false".
* If you are looking for production-ready output files, see mode: "production" (https://webpack.js.org/configuration/mode/).
*/
/******/ (() => { // webpackBootstrap
/*!**********************!*\
!*** ./dist/main.js ***!
\**********************/
/*! unknown exports (runtime-defined) */
/*! runtime requirements: */
eval("/*\n * ATTENTION: The \"eval\" devtool has been used (maybe by default in mode: \"development\").\n * This devtool is not neither made for production nor for readable output files.\n * It uses \"eval()\" calls to create a separate source file in the browser devtools.\n * If you are trying to read the output file, select a different devtool (https://webpack.js.org/configuration/devtool/)\n * or disable the default devtool with \"devtool: false\".\n * If you are looking for production-ready output files, see mode: \"production\" (https://webpack.js.org/configuration/mode/).\n */\n/******/ (() => { // webpackBootstrap\n/******/ \t\"use strict\";\n/******/ })()\n;\n\n//# sourceURL=webpack://HelloWorld/./dist/main.js?");
/******/ })()
;
I looked at the url address:- https://webpack.js.org/configuration/devtool/, and I tried the "output.path" option: Output|webpack, but it did not work, when I ran the "npm run wbp" command.
How do I fix the issue of input: .src/index.js file is not found and how do I create a readable output: dist/main file?
Thank you in advance.
Current structure:-
|-->wwwroot
----->src (created manually)
------->index.js (created manually)
----->dist (generated by webpack-created by the command: npm run build)
------->main.js (webpack bundle-created by the command: npm run build)
------->index.html (created by the command: npm run build)
|-->node_modules (npm init webpack --save-dev)
|-->package.json (npm init -y)
----->package-lock.json (npm init -y)
|-->webpack.config.js (manually configured)
package.json
"name": "aspnet.core",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "SET NODE_ENV='production' && webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-loader": "^8.1.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",
"clean-webpack-plugin": "^3.0.0",
"css-loader": "^5.0.0",
"html-webpack-plugin": "^4.5.0",
"lodash": "^4.17.20",
"popper.js": "^1.16.1",
"startbootstrap-simple-sidebar": "^5.1.2",
"style-loader": "^2.0.0",
"webpack": "^5.1.3",
"webpack-cli": "^4.0.0",
"webpack-node-externals": "^2.5.2"
},
"dependencies": {
"#fullcalendar/core": "^5.3.1",
"#fullcalendar/daygrid": "^5.3.2",
"#fullcalendar/list": "^5.3.1",
"#fullcalendar/timegrid": "^5.3.1"
}
}
I updated the input and output files of the webpack.config.js file in development mode as follows: -
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const nodeExternals = require('webpack-node-externals');
module.exports = {
mode: 'development',
entry: [
'babel-polyfill',
'./wwwroot/src/index.js'
],
output: {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: 'main.js'
},
resolve: {
extensions: ['.js', '.json']
},
module: {
rules: [
{ test: /\.(js)$/, use: { loader: 'babel-loader', options: {presets: ['#babel/preset-react']} }},
{ test: /\.(sass|scsss|css)$/, use: ['style-loader', 'css-loader'] },
{ test: /\.(svg|eot|woff|woff2|ttf)$/, use: ['file-loader'] },
]
},
target: 'node', // in order to ignore built-in modules like path, fs, etc.
externals: [nodeExternals()], //in order to ignore all modules in node_modules folder
plugins: [
new CleanWebpackPlugin(),
new HtmlWebpackPlugin(),
],
mode: process.env.NODE_ENV === 'production' ? 'production' : 'development'
}
and afterwards run the command:- npm run build
I have a simple web-app, with an index.html, app.js and package.json files.
Now, I want to run it via a docker-container. On my local machine, I can run the app with npm install and then npm start.
When I try to run it via docker-compose up, I get the following error message:
Couldn't connect to Docker daemon at http+docker://localunixsocket - is it running?
If it's at a non-standard location, specify the URL with the DOCKER_HOST environment variable
My Dockerfile looks as follows:
FROM node:8.11
WORKDIR /usr/src/app
ARG NODE_ENV
ENV NODE_ENV $NODE_ENV
COPY package.json /usr/src/app/
RUN npm install
COPY . /usr/src/app
# replace this with your application's default port
EXPOSE 8000
CMD [ "npm", "run", "dev" ]
and docker-compose.yml looks as this:
version: "2"
services:
web:
build: .
command: nodemon -L --inspect=0.0.0.0:5858
volumes:
- .:/usr/src/app
ports:
- "8000:8000"
- "5858:5858"
Actually, the app should run under localhost:8000 or under localhost:5858 for debug-mode.
Any idea what is wrong with Dockerfile or the docker-compose.yml? I already tried the fixes described here, but both suggestions don't work for me, so there must be something else wrong.
Thanks in advance and kind regards.
PS: If you need more code, please feel free to tell me and I add it to the question.
Update: the package.json looks as follows:
{
"name": "custom-meta-model",
"version": "0.0.0",
"description": "An bpmn-js modeler extended with a custom meta-model",
"main": "app/index.js",
"scripts": {
"all": "grunt",
"dev": "grunt auto-build"
},
"keywords": [
"bpmnjs-example"
],
"author": {
"name": "Nico Rehwaldt",
"url": "https://github.com/nikku"
},
"contributors": [
{
"name": "bpmn.io contributors",
"url": "https://github.com/bpmn-io"
}
],
"license": "MIT",
"devDependencies": {
"babel-core": "^6.26.3",
"babel-preset-env": "^1.7.0",
"babelify": "^8.0.0",
"grunt": "^1.2.0",
"grunt-browserify": "^5.3.0",
"grunt-contrib-watch": "^1.1.0",
"grunt-contrib-connect": "^2.1.0",
"grunt-contrib-copy": "^1.0.0",
"load-grunt-tasks": "^5.1.0",
"stringify": "^5.2.0"
},
"dependencies": {
"bpmn-js": "^7.2.0",
"diagram-js": "^6.6.1",
"jquery": "^3.5.1"
}
}
Update 2: It looks a bit better now, I corrected the CMD-Command in Dockerfile. Now the output tells me that 'grunt' was not found. Concrete:
Step 9/9 : CMD [ "npm", "run", "dev" ]
---> Running in f51692a86908
Removing intermediate container f51692a86908
---> 53e88bbb46c4
Successfully built 53e88bbb46c4
Successfully tagged overlayexample2_web:latest
Recreating overlayexample2_web_1
Attaching to overlayexample2_web_1
web_1 |
web_1 | > custom-meta-model#0.0.0 dev /usr/src/app
web_1 | > grunt auto-build
web_1 |
web_1 | sh: 1: grunt: not found
web_1 | npm ERR! code ELIFECYCLE
web_1 | npm ERR! syscall spawn
web_1 | npm ERR! file sh
web_1 | npm ERR! errno ENOENT
web_1 | npm ERR! custom-meta-model#0.0.0 dev: `grunt auto-build`
web_1 | npm ERR! spawn ENOENT
web_1 | npm ERR!
web_1 | npm ERR! Failed at the custom-meta-model#0.0.0 dev script.
web_1 | npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
web_1 | npm WARN Local package.json exists, but node_modules missing, did you mean to install?
web_1 |
web_1 | npm ERR! A complete log of this run can be found in:
web_1 | npm ERR! /root/.npm/_logs/2020-08-21T17_03_50_937Z-debug.log
overlayexample2_web_1 exited with code 1
How can I fix it?
Maybe the Gruntfile.js has to be modified, currently it looks like this:
module.exports = function(grunt) {
require('load-grunt-tasks')(grunt);
grunt.loadNpmTasks('grunt-docker');
grunt.initConfig({
browserify: {
options: {
transform: [
[ 'stringify', {
extensions: [ '.bpmn' ]
} ],
[ 'babelify', {
global: true
} ]
]
},
watch: {
options: {
watch: true
},
files: {
'dist/index.js': [ 'app/**/*.js' ]
}
},
app: {
files: {
'dist/index.js': [ 'app/**/*.js' ]
}
}
},
copy: {
diagram_js: {
files: [ {
src: require.resolve('diagram-js/assets/diagram-js.css'),
dest: 'dist/css/diagram-js.css'
} ]
},
app: {
files: [
{
expand: true,
cwd: 'app',
src: ['**/*.*', '!**/*.js'],
dest: 'dist'
}
]
}
},
watch: {
options: {
livereload: false
},
samples: {
files: [ 'app/**/*.*' ],
tasks: [ 'copy:app' ]
},
},
connect: {
livereload: {
options: {
port: 8000,
livereload: true,
hostname: '*',
open: false,
base: [
'dist'
]
}
}
}
});
// tasks
grunt.registerTask('build', [ 'browserify:app', 'copy' ]);
grunt.registerTask('auto-build', [
'copy',
'browserify:watch',
'connect:livereload',
'watch'
]);
grunt.registerTask('default', [ 'build' ]);
};
You have to enable and start the Docker daemon in your system.
If you are on Linux, try it: sudo systemctl enable docker && sudo systemctl start docker
If systemctl is not recognized as a command, you should use: service docker start.
The systemctl start is required for the first run because enable will only auto-start the daemon after reboot. After enabling it, it will auto start on boot.
Your Docker service is not running, you need to start Docker Desktop manually.
Nothing wrong with Dockerfile and docker-compose.file.
Try to run with sudo:
sudo docker-compose up
Steps to integrate of Jest & Babel with Angular 7+:
Run the following commands to install:
# Remove Jesmin/Karma
npm remove karma karma-chrome-launcher karma-coverage-istanbul-reporter karma-jasmine karma-jasmine-html-reporter
npm uninstall jasmine #types/jasmine
rm ./karma.conf.js ./src/test.ts
# Install jest
npm install --save jest#24.9 #angular-builders/jest#7 #types/jest#24 jest-preset-angular#8
# Install babel
npm install --save-dev babel-jest babel-polyfill
npm install --save #babel/core #babel/preset-env #babel/preset-flow #babel/preset-typescript
On package.json, added the following code:
"scripts": {
...
...
"test": "ng test",
"test:watch": "jest --watch",
...
...
}
...
...
"jest": {
"preset": "jest-preset-angular",
"setupFilesAfterEnv": [
"<rootDir>/setupJest.ts"
]
}
Also, updated the following on the angular.json:
...
...
"test": {
"builder": "#angular-devkit/build-angular:karma",
...
...
Replace with:
...
...
"test": {
"builder": "#angular-builders/jest:run",
...
...
Create the <root>/setupJest.ts with below content:
import 'jest-preset-angular';
Create the <root>/babel.config.js with below content:
module.exports = function(api) {
const presets = [
'#babel/preset-typescript',
[
"#babel/preset-env", {
"targets": {
"node": "current"
}
}
],
'#babel/preset-flow'
];
return {
presets,
};
};
And, finally tried running the ng-test from a terminal, however, I was stuck with the following error (see picture below):
Eventually, managed to fix the issue by adding the file <root>/src/jest.config.js with below content:
module.exports = {
"transform": {
"^.+\\.(ts|js|html)$": "ts-jest",
"^.+\\.[t|j]sx?$": "babel-jest"
},
moduleFileExtensions: ['ts', 'html', 'js', 'json'],
moduleNameMapper: {
'^src/(.*)$': '<rootDir>/src/$1',
'^app/(.*)$': '<rootDir>/src/app/$1',
'^assets/(.*)$': '<rootDir>/src/assets/$1',
'^environments/(.*)$': '<rootDir>/src/environments/$1',
},
transformIgnorePatterns: ['node_modules/(?!#ngrx)'],
snapshotSerializers: [
'jest-preset-angular/build/AngularSnapshotSerializer.js',
'jest-preset-angular/build/HTMLCommentSerializer.js',
],
};
Thereafter, ran ng test again and can see the test running thru.
I hope it helps!
I am using Gulp to start a web application. I have the following basic code for my gulpfile.js:
var gulp = require('gulp'),
nodemon = require('gulp-nodemon');
gulp.task('default', function () {
nodemon({
script: 'server.js'
, ext: 'js html'
, env: { 'NODE_ENV': 'development' }
})
})
Using Gulp, I want to check for dependencies and if they are not available then install them and then run 'script.js'. How can this be done?
I have the following package.json:
{
"name": "sample-project",
"version": "1.0.0",
"description": "Displays users and user details",
"main": "server.js",
"dependencies": {
"jquery" : “>=1.5.1",
“bootstrap”: ">= 3.0.0”
}
"directories": {
"test": "test"
},
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node server.js"
},
"author": "Arihant Jain",
"license": "ISC"
}
You can run npm install independently from an executing task using node's child_process as such:
var gulp = require('gulp');
var nodemon = require('gulp-nodemon');
var child_process = require('child_process');
gulp.task('default', function () {
// Run npm install from the child process
child_process.exe('npm install', function(err, stdout, stderr){
// if everything goes well
if(!err){
// run nodemon
nodemon({
script: 'server.js'
, ext: 'js html'
, env: { 'NODE_ENV': 'development' }
})
}
});
})
Given your requirement:
Using Gulp, I want to check for dependencies and if they are not
available then install them...
That is exactly what npm install does. It checks the local package.json and proceeds to install missing packages.
So, I worked it around in a way by using gulp-run. I actually run the command npm install.
gulpfile looks like this:
var gulp = require('gulp'),
nodemon = require('gulp-nodemon')
run = require('gulp-run')
runSequence = require('run-sequence')
open = require('gulp-open');
gulp.task('default', function() {
runSequence('dependencies',
'start',
'uri');
});
gulp.task('dependencies', function() {
return run('npm install').exec();
})
gulp.task('uri', function(){
gulp.src(__filename)
.pipe(open({uri: 'http://localhost:3000/index.html'}));
});
gulp.task('start', function () {
nodemon({
script: 'server.js'
, ext: 'js html'
, env: { 'NODE_ENV': 'development' }
})
})