I have velocity installed and running on a meteor project.
I came across cucumber-mink, and I am struggling to get my scenarios to work with steps defined in cucumber-mink.
I added cucumber-mink to to cucumber dependencies
{
"name": "cucumber-tests",
"version": "1.0.0",
"description": "Dependencies for our Cucumber automation layer",
"private": true,
"dependencies": {
"underscore": "^1.8.3",
"cucumber-mink": "^1.0.2"
}
}
But I think I am missing something here. How do I get my scenarios to use steps defined in cucumber-mink?
I found this to work using the ChromeDriver.
Create 'features/support/mink.js'
// This support file is loaded via --require on the cucumber command line
var Mink = require('cucumber-mink');
// http://webdriver.io/guide/getstarted/configuration.html
// https://github.com/SeleniumHQ/selenium/wiki/DesiredCapabilities
var parameters = {
driver: {
desiredCapabilities: {
browserName: 'chrome'
},
logLevel: 'silent',
port: 9515
}
};
module.exports = function () {
Mink.init(this, parameters);
};
And require 'mink.js' and your custom steps on the command line.
./node_modules/.bin/cucumber-js --require ./features/support/mink.js --require ./features/step_definitions/
Related
I'm getting the following error when deploying to Vercel:
Module not found: Can't resolve 'fs' in '/vercel/2d531da8/node_modules/mysql/lib/protocol/sequences'
I don't use the dependency fs, my package.json file looks like:
{
"name": "single",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"mysql": "^2.18.1",
"next": "^9.4.4",
"react": "^16.13.1",
"react-dom": "^16.13.1",
"serverless-mysql": "^1.5.4",
"sql-template-strings": "^2.2.2"
}
}
I'm pretty new to NextJS, so I'm not really sure what's going on. Any ideas?
Edit:
For context, I'm getting data from mySQL in the app, not sure if that has anything to do with the error
export async function getStaticProps() {
const db = require('./lib/db')
const escape = require('sql-template-strings')
const articles = await db.query(escape`
SELECT *
FROM articles
ORDER BY pid
`)
const var1 = JSON.parse(JSON.stringify({ articles }))
return {
props: {
var1,
},
}
}
Solved it by creating a next.config.js file and adding the following to it:
module.exports = {
webpack: (config, { buildId, dev, isServer, defaultLoaders, webpack }) => {
// Note: we provide webpack above so you should not `require` it
// Perform customizations to webpack config
// Important: return the modified config
// Example using webpack option
//config.plugins.push(new webpack.IgnorePlugin(/\/__tests__\//))
config.node = {
fs: 'empty',
net: 'empty',
tls: 'empty'
}
return config
},
webpackDevMiddleware: config => {
// Perform customizations to webpack dev middleware config
// Important: return the modified config
return config
},
}
I had a similar problem whilst following the next.js tutorial. To resolve this I had to also create a next.config.js file as the above answer. However I have only added the following next configurations
module.exports = {
pageExtensions: ['page.tsx', 'page.ts', 'page.jsx', 'page.js']
}
Once I had added the above next.config.js file with the contents above I was able to successfully build the solution.
source: https://newspatrak.com/javascript/cant-build-react-next-project-found-page-without-a-react-component-as-default-export-context-api-file/
Next.js tutorial link: https://nextjs.org/learn/basics/deploying-nextjs-app/deploy
Is it possible to make firebase functions work with webpack and babel?
We need to reuse existing ES6 classes on server side which we can't edit so we need to transpile them to make it work in node.
Spent two days on the related tutorials but I'm hitting the problem where firebase can't seem to see functions declared in index.js after they were wrapped by webpack in a function.
here is a part of the resulting index.js:
(function(module, exports, __webpack_require__) {
var functions = __webpack_require__(/*! firebase-functions */ "firebase-functions");
var admin = __webpack_require__(/*! firebase-admin */ "firebase-admin");
admin.initializeApp();
exports.api = functions.https.onRequest(function (req, res) {
res.send({
msg: "ok"
});
});
})
exports.api = functions.https.onRequest is not deploying in this case.
Is it ever possible to make firebase work with webpack and babel?
I had a similar challenge. I am not completely satisfied with how things are automated on the dev side (I will give more time on that during the next few days), but it is working indeed.
I will try to tell how I did it by changing code and instructions to remove unrelated complexity.
My main goal is not to manually maintain a "functions" folder with its own package.json as a separate project from my main one. Everything that resides in the root source code and some webpack magic should suffice.
1 - My entry point source code in a app.js file inside a /src/main folder. It reads like this:
import * as functions from 'firebase-functions';
import { someProcessedOutputThatDependsOnExternalLibraries } from './my-code';
export const hello = functions.https.onRequest((req, res) => {
functions.logger.info('Hello logs!', { structuredData: true });
const output = someProcessedOutputThatDependsOnExternalLibraries(req)
res.send(output).end();
});
2 - I want to export it to a /dist folder, so I have to set up that folder in the firebase.json file in the project root:
{
"functions": {
"source": "dist"
},
"emulators": {
"functions": {
"port": 5001
},
}
}
3 - The package.json file in the root holds all the information needed for the project, especially the dependencies and useful scripts. Here some of the file content to illustrate.
{
"scripts": {
"env:firebase": "firebase emulators:start",
"build:firebase": "webpack --config webpack.firebase.js",
},
"dependencies": {
"axios": "^0.21.0",
"core-js": "^3.8.1",
"firebase-admin": "^9.4.2",
"firebase-functions": "^3.13.1",
"inquirer": "^7.3.3",
"regenerator-runtime": "^0.13.7",
"rxjs": "^6.6.3",
"uuid": "^8.3.2",
"xstate": "^4.15.3"
},
"devDependencies": {
"generate-json-webpack-plugin": "^2.0.0",
"webpack": "^5.15.0",
"webpack-cli": "^4.3.1",
"webpack-node-externals": "^2.5.2"
}
}
4 - Webpack is used to build a dist folder compatible with firebase specs. The webpack file below is almost entirely copied from this blessed github gist.
const path = require('path');
const nodeExternals = require('webpack-node-externals');
const GenerateJsonPlugin = require('generate-json-webpack-plugin');
const pkg = require('./package.json');
const genFirebaseFunctionsPackage = () => ({
name: 'functions',
private: true,
main: 'index.js',
license: 'MIT',
engines: {
node: '14'
},
dependencies: pkg.dependencies
});
module.exports = {
target: 'node',
mode: 'production',
entry: './src/main/functions.js',
externals: [nodeExternals()],
output: {
filename: 'index.js',
path: path.resolve(__dirname, 'dist'),
libraryTarget: 'commonjs'
},
node: {
__dirname: false,
__filename: false
},
optimization: {
minimize: false
},
plugins: [new GenerateJsonPlugin('package.json', genFirebaseFunctionsPackage())]
};
5 - So, if I run npm run build:firebase, the dist folder is created with index.js and package.json files. The dist dir is now compatible with firebase CLI and emulator expectations.
But to run it in the local emulator, I still have to go to that folder and type "npm install" (that's the pain point I'm still trying to solve).
It's a good idea to bundle your functions app using webpack for alot of reasons:
access to webpack loaders/plugins
much better developer experience with HMR (that works better than the functions runtime's implementation)
better performance for deployment and runtime (one or a few optimized chunks vs hundreds/thousands of unoptimised/unused files)
Many of the requirements are covered in this answer, but rather than making it all yourself, you might have an easier time using webpack-cloud-functions (of which I'm the author). It abstracts away much of the configuration you need to do that - e.g. libraryTarget, some of the externals, etc, and also provides reliable HMR for development out of the box.
Does anyone know what is the minimal pattern that I need to use a value that was set as variable with grunt.config.set from result of a plugin ran in grunt.initConfig?
Being new to both grunt and javascript, I am unclear as to how I can use this value to run another plugin,
for example, I can run a plugin within grunt.initConfig to get the value I want to set but how can I now run another set of plugin?
Here's an example of what I want to run:
module.exports = function(grunt) {
grunt.loadNpmTasks('grunt');
grunt.loadNpmTasks('grunt-shell');
grunt.loadNpmTasks('grunt-template');
grunt.initConfig({
shell: {
pwd: {
command: 'pwd'
}
}
});
grunt.registerTask('default', 'shell', function() {
grunt.config.set('pwd');
'template': {
'test': {
'options': {
'data': {
"name": "data",
"description": "",
"environment": <%=pwd%>
}
},
'files': {
'project.json': ['test.tpl']
}
}
}
});
};
But it doesn't work as I cannot simply run the plugin template in registerTask section like I do in initConfig.
My case is similar to case from other question
"I use protractor to test my angular app. When I manually launch protractor it works properly and tests everything but the trouble comes when I try to launch it through grunt.
When I launch my grunt task for testing, protractor finds the conf file (it displays the right number of specs to test) but just open the chrome driver for less than a seconds on a weird "data;" url, close it right away and marks all the tests as "passed"."
grunt-cli v1.2.0
grunt v0.4.5
node v6.4.0
protractor 4.0.4
module.exports = function () {
return {
protractor: {
options: {
// Location of your protractor config file
configFile: "test/protractor.conf.js",
noColor: false,
},
e2e: {
options: {
// Stops Grunt process if a test fails
keepAlive: false
}
},
continuous: {
options: {
keepAlive: true
}
}
}
}
};
This is my config for grunt
Not have a direct answer to your question, but here is what we have set up that works for us.
Here are the relevant dependencies (note that we had to "fork" grunt-protractor-runner to bump the protractor dependency):
"grunt-protractor-runner": "git+https://github.com/alecxe/grunt-protractor-runner.git",
"protractor": "^4.0.0",
Here is the relevant part of grunt config:
protractor: {
options: {
keepAlive: true,
noColor: false
},
remote: {
options: {
configFile: "test/e2e/config/remote.conf.js"
}
},
local: {
options: {
configFile: "test/e2e/config/local.conf.js"
}
}
},
And, we run our tests through grunt e2e:local and grunt e2e:remote.
Also, make sure to have the latest chromedriver downloaded via webdriver-manager update.
I had a problem when trying install client packages using Bower in ASP.NET 5 application. I defined some packages I want to install to my application in bower.json file, like this:
{
"name": "bower",
"license": "Apache-2.0",
"private": true,
"dependencies": {
"jquery": "1.11.2",
"modernizr": "2.8.3",
"bootstrap": "3.3.4",
"jquery.uniform": "2.1.2",
"fluidbox": "1.4.3",
"owl-carousel": "1.3.2",
"photo.swipe": "4.0.8",
"magnific-popup": "1.0.0",
"slippry": "1.2.9",
"fastclick": "1.0.6",
"imagesloaded": "3.1.8",
"jquery-validate": "1.13.1",
"fitvids": "1.1.0",
"jquery-gridrotator": "0.1.0" }
After saving, I saw in the hidden bower_components folder there were some other packages I didn't defined in the bower.json file, like this:
After running grunt task, I saw some strange packages installed to my application.
My simple gruntfile.js
module.exports = function (grunt) {
grunt.initConfig({
bower: {
install: {
options: {
targetDir: "wwwroot/lib",
layout: "byComponent",
cleanTargetDir: true
}
}
}
});
grunt.registerTask("default", ["bower:install"]);
grunt.loadNpmTasks("grunt-bower-task");
};
So, how can I only install packages I want to my ASP.NET 5 application? Thank you so much.
They are dependencies installed by bower by example Masonry use this dependencies
{
"name": "masonry",
"version": "3.3.0",
"description": "Cascading grid layout library",
"main": "masonry.js",
"dependencies": {
"get-size": "~1.2.2",
"outlayer": "~1.4.0",
"fizzy-ui-utils": "~1.0.1"
}
}
I recomend you to use the dest,js_dest, css_dest and font_dest to split the files by type and set the option keepExpandedHierarchy to false something like this
{
dest: "wwwroot/lib",
js_dest: "wwwroot/lib/js",
css_dest: "wwwroot/lib/css",
fonts_dest: "wwwroot/lib/font",
options: {
keepExpandedHierarchy: false
}
}
and use some module like includeSource to add all the files in your cshtml file
includeSource: {
layout: {
files: {
'Views/Shared/_Layout.cshtml': 'Views/Shared/_Layout.cshtml'
}
},
options: {
basePath: "wwwroot/lib/js",
baseUrl: '~/lib/',
}
}
and you must add the markup in your page
<!-- include: "type": "js", "files":"**/*.js", "ordering": "top-down" -->
<!-- /include -->
hope it helps