I am using Cypress with Cucumber preprocessor and currently we have all the feature files in one feature folder, e.g.:
features/testcase1.feature
As we have many files there, we want to have cleaner structure, so we are trying to group some feature files into subfolders:
features/HOME/testcase1.feature, features/HOME/testcase2.feature, features/LOGIN/testcase3.feature
etc.
This is ok, and it is working fine in test runner, as it recognizes the files also in subfolders.
But I have problems to set up the path to all feature files in package.json:
"scripts": {
"test": "node_modules\\.bin\\cypress run --spec \"cypress/integration/features/*.feature\"",
"head": "npm run test -- --headed",
"chrome": "npm run test -- --browser chrome",
},
because this path cypress/integration/features/*.feature will look in the main features folder and not into subfolders.
Is there a way to define a path to check all feature files in subfolders?
something like: cypress/integration/features/(*.)/*.feature
but this solution doesn't work.
ok, the solution was very simpe :)
Just to use 2 asterisks instead of (*.):
cypress/integration/features/**/*.feature
Related
I am trying to create a regex glob for an NPM script. This is what I have:
"format": "prettier-eslint --write \"{,!(node_modules|cypressTests)/**/}*.{js,json,vue}\""
And this currently formats all .js, .json, and .vue files that are NOT in the node_modules folder or in the cypressTests folder.
The below is my problem:
The cypressTests folder ALSO contains a node_modules folder that I do not want to format. How can I exclude ./cypressTests/node_modules just like I am currently doing for the folder ./node_modules?
I tried like this and this does not work. It then excludes pretty much everything in the entire project for some reason:
"format": "prettier-eslint --write \"{,!(node_modules|cypressTests/node_modules)/**/}*.{js,json,vue}\""
Prettier has an easier solution to ignore files. You can make a .prettierignore file (which uses .gitignore syntax) to ignore files when prettifying. The file should be placed in the root directory of your project. I believe the syntax inside the file in your case would be:
**/node_modules
Which is actually what prettier ignores by default (among some other source-control folder exclusions)-- so unless you already have a .prettierignore file, all node_modules folders should already be excluded from prettification.
The command would then simply be:
"format": "prettier-eslint --write \"**/*.{js,json,vue}\""
or if you want your .prettierignore file to be somewhere else:
"format": "prettier-eslint --ignore-path <path-to-ignore-file> --write \"**/*.{js,json,vue}\""
If this solution doesn't work for you and you need to use the glob method, I wasn't quite able to figure that out, but this website was handy for testing globs.
I'm playing around with Yarn 2, and I want to do something like this.
I have a monorepo of the structure:
/
packages/
shared-ts/
package.json
src/
lib*/
app-ts/
package.json
src/
lib*/
app-js/
package.json
src/
lib*/
where lib* denotes that the folder is gitignored, but is where the compiled code will live.
In this example, I have a dependency library shared-ts that is used by two apps, app-ts and app-js.
The conventional approach
The conventional approach to configuring a monorepo like this, is that in shared-ts I would have a package.json like:
"main": "lib/index.js"
"scripts" : {
"build": "tsc"
}
Where the build script will build index.js and index.d.ts into the lib folder.
When both app-ts and app-js then resolve the package, they look in the lib folder and find the index.js and in app-ts's case - the index.d.ts.
This works fine, except that the developers need to remember to run the build script if they have made changes to shared-ts in order for the changes to propagate across.
Where this could potentially become problematic is where there are many layers of dependencies.
Attempted work around 1 - point main to src/index.ts.
I can change shared-ts package.json to
"main": "src/index.ts"
"scripts" : {
"build": "tsc"
}
This generally won't work, a plain node process won't be able to parse the syntax in the .ts file (eg. the import keyword).
Potential workaround - publishConfig
So something I'm considering, but haven't tried yet is, using the publishConfig
fields in the package.json
This field contains various settings that are only taken into consideration when a package is generated from your local sources (either through yarn pack or one of the publish commands like yarn npm publish).
"main": "src/index.ts",
"publishConfig": {
"main": "lib/index.js"
}
The idea being that:
When you publish a package to npm, lib/index.js will be used as main. 👍 code is ready for consumption, no compilation required.
If being used directly in the monorepo src/index.ts will be used as main. 😕 This kind of works as if you were running app-ts with ts-node for example.
However, where this starts breaking down is:
Running app-js in a development environment (where you don't have any additional syntax parsing set up).
Practical current best solution
My current best solution is to 'just give up on this 'no compile' aspiration' - if a developer makes changes to some code, they need to re-run build for the changes to propagate across.
How about using this?:
import someValue from 'some-package/src/index';
I can do this in my monorepo like the image below
I believe using nx will be good choice here. While it won't help you run the uncompiled code, it has pretty good features. In particular, you can automatically run the affected:apps on certain changes. For example, if you have a start command, it will run the start command for all the affected apps.
I wanted the same thing but had to compromise on the "Automatic compilation on changes" option in my JetBrains IDE.
It allows me to debug with ts-node as well as run the code using the native node binary.
I created my app using create-react-app, and I use npm run build to build the production package.
I need to put the app on different clients' sites, each client put the app on a different sub-folder.
e.g.
client A: https://clientA.com/myApp
client B: https://clientB.com/UAT/myApp
client C: https://clientC.com/webApps/myApp
everytime when I build the package, for different sub-folders, I need to modify the homepage value in package.json, build the package and repeat this steps mulltiple times.
My manual steps like:
modify "homepage": "myApp" > npm run build > save the build folder for deployment
modify "homepage": "/UAT/myApp" > npm run build > save the build folder for deployment
modify "homepage": "/webApps/myApp" > npm run build > save the build folder for deployment
keep repeatly doing the above.....
how can I improve this situation? how can I do build once to fit all different paths?
such as, can I use a variable in homepage value and set it up in environment variable?
or, can I write a script to do some? I hope to simpify this compile steps, ideally to execute the build or a building script once.
Thanks for any help or suggestion.
You can use PUBLIC_URL environment variable when making build. The build command looks like:
PUBLIC_URL=https://clientA.com/myApp npm run build
You can create npm scripts to simplify it like:
{
...
"scripts": {
"build-clientA": "PUBLIC_URL=https://clientA.com/myApp react-scripts build",
"build-clientB": "PUBLIC_URL=https://clientB.com/UAT/myApp react-scripts build",
}
...
}
If you want to do one command to build for all of clients, simple bash script to build and move build folder should work fine, it looks like:
PUBLIC_URL=https://clientA.com/myApp react-scripts build && mv build clientA
PUBLIC_URL=https://clientB.com/UAT/myApp react-scripts build && mv build clientB
You can just set homepage to . if you're using CRA 9.0 or newer:
If you are not using the HTML5 pushState history API or not using client-side routing at all, it is unnecessary to specify the URL from which your app will be served. Instead, you can put this in your package.json:
"homepage": ".",
This will make sure that all the asset paths are relative to index.html. You will then be able to move your app from http://mywebsite.com to http://mywebsite.com/relativepath or even http://mywebsite.com/relative/path without having to rebuild it.
– the documentation
You can simply build it once, and then use vim or any text editor to do the following operation on index.html: Replace ="/ with ="/myApp/ and ="/UAT/myApp/ and =/webApps/myApp/ in the three folders respectively.
You can also use the sed utility to do that. Or maybe even automate it using a bash script.
It does work perfectly with Hash router
you can set homepage like this :
"homepage": "/"
and build project once and handle this server side and read all routes from index.html
I have multiple projects and I would like to implement cucumber-js E2E testing for all of them. I have a step definitions file which can be used for testing all of these projects, however I want to have multiple feature files with each project folder containing the feature files specific to the project. This is the layout:
step definitions:
projects/E2E/step_definitions/chat.js
feature files:
projects/project_1/features/feature_1.js
Right now, since the step definitions is outside of the features folder, I'm getting unimplemented steps error. Is there a way to specify the path to the step definitions when running cucumber-js?
I believe that the step definitions will be classed as a support file, which should mean you can include them like this:
npm run cucumberjs -- --require "../E2E/step_definitions/*.js"
Note
This assumes that your package.json is inside your project_1 directory and includes:
"scripts": {
"cucumberjs": "./node_modules/.bin/cucumber-js"
},
Reference
CucumberJS Official Documents for Requiring Support Files
I am using the npm scripts property / object to validate / lint my TypeScript files in my Angular2 project, you can see my npm run tslint task below:
"scripts": {
"tslint" : "tslint -c tslint.json app/src/**/*.ts -e app/src/**/*.spec.ts",
},
This all seems good as it is linting my actual app files, but not my tests (I will remove this later). However my real problem is that my main.ts file which is in the app/src/ folder and not one of the many subfolders app/src/*sub-folder* is not being included in the linting. How can I improve the wildcard above or tslint command to include typescript files in my app/src folder as well as those in any other subfolder?
If I haven't made myself clear please say so and I'll re-phrase the question.
Many thanks