Cypress-cucumber-preprocessor: Documentation about step_definition / vuejs

[EmmanuelDemey]

Do we have somewhere a documentation about the parameters we can set in the package.json file ?
I would like to contribute to this.

This afternoon, I had to setup a vue-cli generated app with this cypress preprocessor, and I needed to set the step_definition parameter . I think a lot of people will spend few minutes finding the right parameter to set.

"cypress-cucumber-preprocessor": {
    "step_definitions": "./tests/e2e/specs/"
  }

Maybe we can have a "How to setup cypress-cucumber-preprocessor with VueCLI generated application?".

What do you think ?

[lgandecki]

We don't use Vue here at @TheBrainFamily so I don't really understand what the problem is, and how it is unique to vue? Cypress configuration should not depend on whatever technology you use to build your frontend. We don't have a section for react or angular, could you please explain to me what makes Vue different?
Why do the step definitions have to go to subdirectory of tests/e2e?
We have a documentation that talks about where to put step definitions and also how to configure that. The documentation is currently rather small. By adding more to it, some people might find what they need easier, ( by looking for vue keywoard ) but it will make it harder for other people to find what they need.

[EmmanuelDemey]

The proposal is just to make the life of VueJS developers easier. When we setup a VueJS application with the Cypress support (thanks to VueCLI), all Cypress files are located to a tests/e2e/* folder.
As your preprocessor are looking for Cypress files in the default folder, we have to set this option.

If one day Angular CLI or create-react-app include Cypress support to their project, we'll need to add the same kind of informations.

If you do not want to add a specific doc about frameworks/libraries (I understand quiet well your point of view), could you send me the link of the documentation explaining the step_definition option.
I did not find it.

[lgandecki]

https://github.com/TheBrainFamily/cypress-cucumber-preprocessor#step-definition-location-configuration

:-)

But I understand your point, I didn't know that vuecli creates cypress configuration on it's own - so I'm happy to accept a PR that explains the steps for adding this processor to the default vue/cypress setup. There is one PR open already but I think it has unnecessary steps there, I asked some questions but they were left unanswered.

[EmmanuelDemey]

In your link, the documentation is in a "Oldschool/Legacy Cucumber style (please let us know if you decide to use it!)" paragraph. Is it the right place ?

Do you have another syntax to configure the preprocessor ?

(BTW, I am very happy to do the PR after our chat)

[cocoastorm]

Hey, just wanted to add something unexpected I ran into.

I'm using the new recommended style. But I couldn't get the preprocessor to pick up my common reusable step definitions. I finally figured out it was because of @vue/cli configuring cypress within plugins/index.js:

module.exports = (on, config) => {
  // on('file:preprocessor', webpack({
  //  webpackOptions: require('@vue/cli-service/webpack.config'),
  //  watchOptions: {}
  // }))

  // cucumber gherkin
  on('file:preprocessor', cucumber());

  return Object.assign({}, config, {
    fixturesFolder: 'tests/e2e/fixtures',
    integrationFolder: 'tests/e2e/specs',
    screenshotsFolder: 'tests/e2e/screenshots',
    videosFolder: 'tests/e2e/videos',
    supportFile: 'tests/e2e/support/index.js',
  });
};

Whereas the preprocessor parses cypress.json for the integrationFolder value: https://github.com/TheBrainFamily/cypress-cucumber-preprocessor/blob/master/lib/stepDefinitionPath.js#L24

Easy fix/workaround is to have the integrationFolder declared again in cypress.json

{
    "pluginsFile": "tests/e2e/plugins/index.js",
    "integrationFolder": "tests/e2e/specs"
}

Was wondering if this could be documented into the configuration example for @vue/cli 3?

Or if the preprocessor can somehow take in the config object directly? I don't mind attempting to tackle this in a PR if this is wanted.

Cheers!