I am using this code to update an image and get the URL, but I can´t get the URL back.
It seems that return some because it can enter in the return of the promise.
I get this code from here: https://gist.github.com/CristalT/2651023cfa2f36cddd119fd979581893
The code work for another user so I this the problems would be in the dependence or in the database rules.
I am authenticated.
<template>
<div>
<input type="file" multiple accept="image/*" #change="detectFiles($event.target.files)">
<div class="progress-bar" :style="{ width: progressUpload + '%'}">{{ progressUpload }}%</div>
</div>
</template>
<script>
import { storage } from '../firebase'
export default {
data () {
return {
progressUpload: 0,
file: File,
uploadTask: '',
downloadURL: ''
}
},
methods: {
detectFiles (fileList) {
Array.from(Array(fileList.length).keys()).map( x => {
this.upload(fileList[x])
})
},
upload (file) {
this.uploadTask = storage.ref('imagenes/articulos').put(file);
this.uploadTask.then(snapshot => {
this.downloadURL = this.uploadTask.snapshot.downloadURL;
this.$emit('url', this.downloadURL)
})
}
},
watch: {
uploadTask: function() {
this.uploadTask.on('state_changed', sp => {
this.progressUpload = Math.floor(sp.bytesTransferred / sp.totalBytes * 100)
})
}
}
}
</script>
<style>
.progress-bar {
margin: 10px 0;
}
</style>
this is my package.json:
{
"name": "vue-change-your-home",
"version": "1.0.0",
"description": "Single page make in vue",
"author": "enrikiko <enrikiko_91#hotmail.com>",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
"dependencies": {
"#fortawesome/fontawesome": "^1.1.8",
"#fortawesome/fontawesome-free-solid": "^5.0.13",
"#fortawesome/vue-fontawesome": "0.0.22",
"bootstrap-vue": "^2.0.0-rc.9",
"firebase": "^5.0.2",
"vue": "^2.5.2",
"vue-router": "^3.0.1",
"vuefire": "^1.4.5"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^4.0.1",
"css-loader": "^0.28.0",
"extract-text-webpack-plugin": "^3.0.0",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^0.5.8",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
this are the storage rules:
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}
this is my firebase.js:
import Firebase from 'firebase'
/**
* Pega aquí los datos de tu proyecto firebase
*/
const firebaseApp = Firebase.initializeApp({
apiKey: "++++******-sU0qfey9278aBIDP6zo",
authDomain: "*+****+.firebaseapp.com",
databaseURL: "https://*****.firebaseio.com",
projectId: "+++++",
storageBucket: "**.appspot.com",
messagingSenderId: "**"
});
export const db = firebaseApp.database()
export const storage = firebaseApp.storage()
export const auth = firebaseApp.auth()
// export const notif = firebase.messaging()
in the terminal this is what I get:
$route
downloadURL:"" --->here shoud get the URL
file:ƒ File()
progressUpload:100
uploadTask:Object
authWrapper_:Object
blob_:Object
chunkMultiplier_:1
errorHandler_:ƒ (error)
error_:null
location_:Object
mappings_:Array[15]
metadataErrorHandler_:ƒ (error)
metadata_:Object
Thank so much in advance
i had the same problem, i tried a lot of stuff, but the simply one solution i found was:
to change the Firebase versión in my package.json i switched to: "firebase": "^4.6.2".
I am not sure what's happening with the 5.0.2 version. Even when that solve the problem i am still looking for the docs of the change maybe we need to use the snapshot in a different way. will see.
Good luck! ;)
-- BlisS
Update:
The issue is that the snapshop no longer own the downloadURL at version 5, now you have tu use the method getDownloadURL that belongs to the ref, just like pushups said, something like this:
const fileRef = firebase.storage()
.ref("carpeta")
.child(file.name);
const uploadTask = fileRef.put(file);
uploadTask
.then(snap=>{
return fileRef.getDownloadURL()
})
this also works:
return snap.ref.getDownloadURL()
You can get this to work with Firebase 5.2.0 with the following code.
The UploadTaskPromise yields a snapshot. The snapshot has a ref property. The ref property has a getDownloadURL() function which returns a Promise. That Promise gives the downloadable url once it's available.
https://firebase.google.com/docs/reference/js/firebase.storage.Reference#getDownloadURL
uploadTask.then((snapshot) => {
snapshot.ref.getDownloadURL().then((url) => {
// do something with url here
});
});
Use this code:
import {launchImageLibrary} from 'react-native-image-picker';
import storage from '#react-native-firebase/storage';
launchImageLibrary({quality: 0.5}, response => {
let data = response.assets[0];
const uploadTask = storage()
.ref()
.child(`/uploadedphotos/${Cid}`)
.putFile(data.uri);
uploadTask.on(
'state_changed',
snapshot => {
const progress =
(snapshot.bytesTransferred / snapshot.totalBytes) * 100;
if (progress == 100) Alert.alert('File Upload Complete');
},
error => {
Alert.alert(error);
},
() => {
uploadTask.snapshot.ref
.getDownloadURL()
.then(downloadURL => {
console.log('File available at', downloadURL);
})
},
);
Related
I implemented the nativescript-firebase (https://github.com/EddyVerbruggen/nativescript-plugin-firebase) plugin in my mobile app. It used to work fine but since I updated to the 11.1.3 version I cannot get the push token. I tried to get back to the 10.6.3 version but it says it is not available anymore when I execute npm install.
Here is what I do in my main.js
import { messaging } from "#nativescript/firebase/messaging";
import { firebase } from "#nativescript/firebase"
firebase.init({
onMessageReceivedCallback: function(message) {
//do stuff
}
}).then(function () {
messaging.getCurrentPushToken().then(token => {
console.log(token)
}).catch(e => {
console.log(e);
})
},function (error) {
console.log("firebase.init error: " + error);
});
This does not log the token but goes into the catch and logs this
Uncomment firebase-messaging in the plugin's include.gradle first
Here is my package.json
{
"name": "*****",
"main": "./src/main.js",
"version": "4.4.0",
"description": "A native application built with NativeScript-Vue",
"author": "*****",
"license": "Propriétaire",
"dependencies": {
"#carployee/openapp": "^1.0.1",
"#nativescript-community/ui-material-bottomnavigationbar": "^6.2.4",
"#nativescript/appavailability": "^2.0.0",
"#nativescript/appversion": "^2.0.0",
"#nativescript/camera": "^5.0.10",
"#nativescript/core": "~8.1.5",
"#nativescript/datetimepicker": "^2.1.9",
"#nativescript/firebase": "^11.1.3",
"#nativescript/imagepicker": "^1.0.6",
"#nativescript/ios": "^8.1.0",
"#nativescript/iqkeyboardmanager": "^2.0.0",
"#nativescript/theme": "^3.0.2",
"#nstudio/nativescript-cardview": "^2.0.1",
"#nstudio/nativescript-loading-indicator": "^4.1.0",
"#nstudio/nativescript-pulltorefresh": "^3.0.1",
"#proplugins/nativescript-purchase": "git+https://gitlab.******",
"#vue/devtools": "^5.3.4",
"nativescript-dna-deviceinfo": "^3.7.3",
"nativescript-feedback": "^2.0.0",
"nativescript-google-maps-sdk": "^3.0.2",
"nativescript-inappbrowser": "^3.1.2",
"nativescript-open-app": "^0.3.0",
"nativescript-phone": "^3.0.2",
"nativescript-socketio": "^3.3.1",
"nativescript-toasty": "^3.0.0-alpha.2",
"nativescript-ui-dataform": "^8.0.1",
"nativescript-ui-listview": "^10.0.2",
"nativescript-ui-sidedrawer": "^10.0.2",
"nativescript-vue": "^2.9.0",
"nativescript-vue-devtools": "^1.5.1",
"nativescript-vue-fonticon": "^1.0.3",
"nativescript-websockets": "^2.0.0",
"npm-check": "^5.9.2",
"npm-check-updates": "^12.0.2"
},
"devDependencies": {
"#babel/core": "^7.16.0",
"#babel/preset-env": "^7.16.4",
"#nativescript/android": "~8.1.1",
"#nativescript/webpack": "~5.0.1",
"babel-loader": "^8.2.3",
"nativescript-vue-template-compiler": "^2.9.0",
"nativescript-worker-loader": "~0.12.1",
"sass": "^1.44.0",
"vue-loader": "^15.9.8"
}
}
The message points you to the plugin's include.gradle file, or more specifically,
<app name>/node_modules/#nativescript/firebase/platforms/android/include.gradle
where you want to uncomment the line as shown below:
// Cloud Messaging (FCM)
implementation "com.google.firebase:firebase-messaging:20.1.0"
// implementation "me.leolin:ShortcutBadger:1.1.22#aar"
I expect if you reinstall the plugin you can answer the prompts so that this will get set for you.
I am getting this error for the past hours and i have not been able to resolve it. I have tried all the solutions online including uninstalling aslant globally and in the project and installing it again. Unfortunately the most common answer does not really apply in my case since my package.json file does not really have that file structure.
Running command: npm --prefix "$RESOURCE_DIR" run lint
> lint
> eslint .
/Users/KingdomMac/Downloads/ermnl-dashboard-master/functions/index.js
22:71 error Parsing error: Unexpected token =>
✖ 1 problem (1 error, 0 warnings)
Error: functions predeploy error: Command terminated with non-zero exit code1
My package.json file
{
"name": "vue-white-dashboard",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.35",
"#fortawesome/free-brands-svg-icons": "^5.15.3",
"#fortawesome/free-regular-svg-icons": "^5.15.3",
"#fortawesome/free-solid-svg-icons": "^5.15.3",
"#fortawesome/vue-fontawesome": "^2.0.2",
"axios": "^0.21.1",
"chart.js": "^2.8.0",
"core-js": "^2.6.5",
"firebase": "^8.6.8",
"node-sass": "^4.9.0",
"vue": "^2.6.10",
"vue-chartjs": "^3.4.2",
"vue-click-outside": "^1.0.7",
"vue-clickaway": "^2.2.2",
"vue-github-buttons": "^3.1.0",
"vue-i18n": "^8.14.1",
"vue-router": "^3.0.3",
"vue-social-sharing": "^2.4.6",
"vue2-transitions": "^0.3.0",
"vuetify": "^2.4.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.11.0",
"#vue/cli-plugin-eslint": "^3.1.1",
"#vue/cli-service": "^3.5.3",
"#vue/eslint-config-prettier": "^5.0.0",
"babel-eslint": "^10.0.1",
"eslint": "^8.1.0",
"eslint-config-google": "^0.14.0",
"eslint-plugin-prettier": "^3.1.0",
"eslint-plugin-vue": "^7.20.0",
"prettier": "^1.18.2",
"sass": "~1.32",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.4.1",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.7.0"
}
}
Also my .eslintrc.js file
module.exports = {
"env": {
"browser": true,
"es2021": true
},
"extends": "plugin:vue/essential",
"parserOptions": {
"ecmaVersion": 13
},
"plugins": [
"vue"
],
"rules": {
}
};
And my index.js file
const functions = require("firebase-functions");
const admin = require("firebase-admin");
admin.initializeApp();
const db = admin.firestore();
// exports.addAdminRole = functions.https.onCall((data, context) => {
// // Get user and add custom claim (admin)
// const customClaims = {
// admin: true,
// };
// return admin.auth().getUserByEmail(data.email).then((user) => {
// return admin.auth().setCustomUserClaims(user.uid, customClaims);
// }).then((authUser) => {
// return {
// message: `Success! ${data.email} has been made an admin.`,
// };
// }).catch((error) => {
// return error;
// });
// });
exports.addUserRole = functions.auth.user().onCreate(async (authUser) => {
if (authUser.email) {
const customClaims = {
admin: true,
};
try {
let _ = await admin.auth().setCustomUserClaims(authUser.uid, customClaims);
return db.collection("roles").doc(authUser.uid).set({
email: authUser.email,
role: customClaims,
});
} catch (error) {
console.log(error);
}
}
});
exports.setUserRole = functions.https.onCall(async (data, context) => {
if (!context.auth.token.admin) return
try {
let _ = await admin.auth().setCustomUserClaims(data.uid, data.role)
return db.collection("roles").doc(data.uid).update({
role: data.role
})
} catch (error) {
console.log(error)
}
});
try changing "lint": "eslint ." to "lint": "eslint ", in your package.json
I am trying to automate an Android application using appium and webdriverIO inside a typescript framework. I am using async mode.
My issue is when I am trying to use a waitUntil or any of the wait functions, they don't wait more than 3000ms, regardless of whatever custom timeout value I pass to the function. My best guess is, this is may be because of dependency issues.
Let me know if you guys need any additional information. I am attaching snippets of package.json and tsconfig to give you guys a brief overview of the packages I am using
package.json
"devDependencies": {
"#types/node": "^14.14.28",
"#types/uuid": "^8.3.0",
"#wdio/cli": "^7.2.3",
"dotenv": "^8.2.0",
"husky": "^5.1.3",
"nodemon": "^2.0.7",
"ts-node": "^9.1.1",
"ts-node-dev": "^1.1.1",
"tslint": "^6.1.3",
"typescript": "^4.1.5"
},
"dependencies": {
"#wdio/local-runner": "^7.1.2",
"#wdio/mocha-framework": "^7.1.2",
"#wdio/spec-reporter": "^7.1.1",
"#wdio/sync": "^7.1.1",
"appium-chromedriver": "^4.27.0",
"assert": "^2.0.0",
"axios": "^0.21.1",
"chromedriver": "^89.0.0",
"tslog": "^3.1.1",
"uuid": "^8.3.2",
"wdio-chromedriver-service": "^7.0.0",
"webdriverio": "^5.10.4"
}
tscnofig.json
"types": [
"node", "webdriverio/async", "#wdio/mocha-framework"
],
My wait until Function is as follows :
async waitUntil(params: any) {
const waitOnElement = await this.client.$(element);
await waitOnElement.waitUntil( async () => {
return await waitOnElement.getText() === text
}, {
"timeout": timeout
})
}
This is really annoying me. if i use http://my-domain.com its work with out Network request failed, but https://my-domain.com its keep giving me Network request failed error.
i been looking online and still not fix this issue. Please help.
package.json
"dependencies": {
"#expo/vector-icons": "~10.0.6",
"#react-native-community/masked-view": "0.1.6",
"#react-navigation/bottom-tabs": "^5.0.0",
"#react-navigation/native": "^5.0.0",
"#react-navigation/stack": "^5.0.0",
"#react-navigation/web": "~1.0.0-alpha.9",
"expo": "~37.0.3",
"expo-asset": "~8.1.3",
"expo-constants": "~9.0.0",
"expo-font": "~8.1.0",
"expo-web-browser": "~8.1.0",
"react": "~16.9.0",
"react-dom": "~16.9.0",
"react-native": "https://github.com/expo/react-native/archive/sdk-37.0.1.tar.gz",
"react-native-gesture-handler": "~1.6.0",
"react-native-iphone-x-helper": "^1.2.1",
"react-native-modalize": "^1.3.7-rc.19",
"react-native-safe-area-context": "0.7.3",
"react-native-screens": "~2.2.0",
"react-native-web": "~0.11.7"
},
Fetch code
const [contents, setContents] = useState([]);
const fetchChannelContent = (slug) => {
fetch(Http.api+"/channel/"+slug)
.then((response) => response.json())
.then((json) => {
setContents(json.channel.content);
})
.catch((error) => {
console.error(error);
});
};
useEffect(() => {
fetchChannelContent(url)
}, []);[![enter image description here][1]][1]
[1]:
Http Class
export default {
api: "https://my-domain.com"
}
export default url {
api: "https://my-domain.com"
}
Then you import that file and user url.api
I am trying to develop a custom reporter for mocha output that will be used with protractor. I have developed a good deal of the reporter and if I use the "--reporter" command line argument it works fine. However if I try to specify it in mocharc, or more importantly reporterOptions within the protractor configuration file it can't seem to find the package. Is the command line reporter flag the only way to specify a local/custom reporter? If not, how are you supposed to specify it outside of the command line?
.babelrc:
require:
- '#babel/polyfill'
- '#babel/register'
reporter: './mocha-reporter'
spec: '_src/js/tests/unit/**/*.spec.js'
package.json:
{
"name": "box",
"version": "1.0.0",
"description": "boom!",
"main": "index.js",
"scripts": {
"mocha": "mocha",
"mocha-custom": "mocha -O outputDir=_src/js/tests/reports,testDir=_src/js/tests/unit --reporter mocha-reporter",
"mochawesonme": "mocha --reporter mochawesome --reporter-options reportDir=_src/js/tests/reports,reportFilename=PCMS_unit_test_results",
"check-types": "tsc",
"clean-selenium": "webdriver-manager clean",
"update-selenium": "webdriver-manager update --standalone --versions.standalone=3.8.0",
"start-selenium": "webdriver-manager start --versions.standalone=3.8.0",
"integration-tests": "protractor protractor.conf.js"
},
"devDependencies": {
"#babel/cli": "~7.4.3",
"#babel/core": "~7.4.3",
"#babel/plugin-proposal-class-properties": "7.4.0",
"#babel/plugin-proposal-object-rest-spread": "~7.4.3",
"#babel/plugin-transform-destructuring": "~7.4.3",
"#babel/polyfill": "~7.4.3",
"#babel/preset-env": "~7.4.3",
"#babel/preset-typescript": "~7.3.3",
"#babel/register": "~7.4.0",
"#fortawesome/fontawesome-free": "5.8.1",
"#types/bluebird": "3.5.26",
"#types/jquery": "3.3.29",
"#types/knockout": "~3.4.65",
"#typescript-eslint/eslint-plugin": "~1.7.0",
"#typescript-eslint/parser": "~1.7.0",
"appcache-webpack-plugin": "~1.4.0",
"autoprefixer": "~9.5.1",
"babel-loader": "~8.0.5",
"chai": "~4.2.0",
"chai-as-promised": "7.1.1",
"copy-webpack-plugin": "~5.0.3",
"css-loader": "~2.1.1",
"eslint": "~5.16.0",
"eslint-config-airbnb-base": "~13.1.0",
"eslint-config-airbnb-typescript": "~3.0.0",
"eslint-plugin-import": "~2.17.2",
"file-loader": "~3.0.1",
"html-loader": "~0.5.5",
"html-webpack-plugin": "3.2.0",
"js-yaml": "~3.13.1",
"json-loader": "~0.5.7",
"jszip": "~3.2.1",
"karma": "~4.1.0",
"karma-chai": "~0.1.0",
"karma-chrome-launcher": "~2.2.0",
"karma-firefox-launcher": "~1.1.0",
"karma-mocha": "~1.3.0",
"karma-sinon": "~1.0.5",
"karma-webpack": "~3.0.5",
"mini-css-extract-plugin": "~0.6.0",
"mocha": "~6.1.4",
"mocha-reporter": "file:mocha-reporter",
"mochawesome": "~3.1.2",
"mochawesome-report-generator": "3.1.5",
"mochawesome-screenshots": "1.6.0",
"node-sass": "^4.12.0",
"popper.js": "~1.15.0",
"postcss-loader": "~3.0.0",
"protractor": "5.4.2",
"protractor-image-comparison": "3.1.0",
"sass-loader": "~7.1.0",
"sinon": "~7.3.2",
"style-loader": "~0.23.1",
"typescript": "~3.4.5",
"url-loader": "~1.1.2",
"webpack": "~4.30.0",
"webpack-cli": "~3.3.1",
"webpack-dev-server": "~3.3.1"
},
"dependencies": {
"bluebird": "~3.5.4",
"bootstrap": "3.3.7",
"d3": "~5.9.2",
"isomorphic-fetch": "2.2.1",
"jquery": "^3.4.0",
"jquery-ui": "~1.12.1",
"knockout": "~3.5.0",
"knockout-mapping": "~2.6.0",
"lodash": "~4.17.11",
"numeral": "~2.0.6",
"page": "~1.11.4"
}
}
index.js:
import mochaBaseReporter from 'mocha/lib/reporters/base';
import { takeScreenShot } from './javascript/screenShots';
import { populateTestResults } from './javascript/testTree';
import {
getFileContents,
writeToOutputFile,
} from './javascript/fileSystemAccess';
import {
getTemplate,
parseTestsIntoOutput,
addValuesToTemplate,
} from './javascript/templating';
import {
SUCCESS,
FAILURE,
FINISHED,
} from './constants';
const addStyle = template => getFileContents('styles.css')
.then(styles => addValuesToTemplate(template, { styles }))
.catch(error => console.log('file read of styles.css failed', error));
const createReport = (outputDirectory, fileName, data) => getTemplate('report')
.then(template => addValuesToTemplate(template, { 'test-suites': data }))
.then(template => writeToOutputFile(outputDirectory, `${fileName}.html`, template))
.catch(error => console.log('file read of template.html failed', error));
function mochaReporter(runner, environment) {
const tests = {};
const fileName = 'testfile';
const { outputDir, testDir, takeScreenShotOnFailure } = environment.reporterOptions || {};
const outputDirectory = outputDir && `${process.cwd()}/${outputDir}`;
const accumulateTestResults = (test, image) => populateTestResults(test, testDir, tests, image);
mochaBaseReporter.call(this, runner);
runner.on(SUCCESS, accumulateTestResults);
runner.on(FAILURE, test => (
takeScreenShotOnFailure && window
? takeScreenShot()
: Promise.resolve()
).then(image => accumulateTestResults(test, image)));
runner.on(FINISHED, () => {
parseTestsIntoOutput(tests)
.then(addStyle)
.then(template => addValuesToTemplate(template, runner.stats))
.then(html => createReport(outputDirectory, fileName, html))
.then(() => writeToOutputFile(
`${outputDirectory}/history`,
`test-run-${Date.now()}.json`,
JSON.stringify(tests),
));
});
return runner;
}
module.exports = mochaReporter;
protractor.conf:
/* eslint-disable global-require */
/* eslint-disable #typescript-eslint/no-var-requires */
const protractor = require('protractor');
const { join } = require('path');
const testDirectory = '_src/js/tests';
const baseDirectory = `${testDirectory}/integration/`;
// specifies whether tests will be run in parralel or not
const shardTestFiles = true;
// specifies how many browsers/drivers may be run in parralel
const maxInstances = 4;
function onPrepare() {
// register typescript file extensions with the babel compiler
require('#babel/register')({ extensions: ['.js', '.ts'] });
require('#babel/polyfill');
// don't wait for angular (since our app is currently not angular)
protractor.browser.waitForAngularEnabled(false);
// hot fix for protractor strange map behavior
// found here: https://github.com/angular/protractor/issues/2227#issuecomment-337249891
protractor.ElementArrayFinder.prototype.map = function mapHotFix(mapFn) {
return this.reduce((arr, el) => arr.concat(mapFn(el, arr.length)), []);
};
}
exports.config = {
// mocha configuration
framework: 'mocha',
mochaOpts: {
reporter: './mocha-reporter',
reporterOptions: {
outputDir: `${testDirectory}/reports`,
testDir: `${baseDirectory}/endToEnd`,
takeScreenShotOnFailure: true,
},
timeout: 600000,
slow: 3000,
},
seleniumAddress: 'http://localhost:4444/wd/hub',
// turn off promise management in favor of async/await
SELENIUM_PROMISE_MANAGER: false,
// spec config
specs: [`${baseDirectory}/endToEnd/**/*.spec.js`],
// browser configuration
timeout: 100000,
multiCapabilities: [
{
browserName: 'chrome',
shardTestFiles,
maxInstances,
chromeOptions: {
args: [
// 'show-fps-counter=true',
'--headless',
// '--disable-gpu',
'--window-size=1300,1000',
],
},
},
{
browserName: 'firefox',
shardTestFiles,
maxInstances,
'moz:firefoxOptions': {
args: [
'--headless',
],
},
},
],
onPrepare,
plugins: [
{
package: 'protractor-image-comparison',
options: {
baselineFolder: join(process.cwd(), `${baseDirectory}/screenshots/baseline/`),
screenshotPath: join(process.cwd(), `${baseDirectory}/screenshots/tmp/`),
formatImageName: '{tag}-{logName}-{width}x{height}',
savePerInstance: true,
autoSaveBaseline: true,
},
},
],
};
I could not find a way to load the local file directly, however I gave it a package.json and installed it directly to node_modules with npm. To be specific I ran
npm install ./mocha-reporter --save-dev
on my project directory after creating a package.json within the project folder. After some debugging I was able to solve my issue since the package was now a part of node's named packages.