Code reorganization, Readme Update (#120)

* chore: first step in the code reorganization

* feat: new way of importing step functions, updated readme and code reorganization

* chore: tweaked readme and updated package-lock

* Apply suggestions from code review

Co-Authored-By: lgandecki <[email protected]>

Author: lgandecki

README.md

@@ -2,39 +2,72 @@
 [![CircleCI](https://circleci.com/gh/TheBrainFamily/cypress-cucumber-preprocessor.svg?style=shield)](https://circleci.com/gh/TheBrainFamily/cypress-cucumber-preprocessor)
 # Run cucumber/gherkin-syntaxed specs with cypress.io
 
-Please take a look at an example here:
+Follow the Setup steps, or if you prefer to hack on a working example, take a look at [https://github.com/TheBrainFamily/cypress-cucumber-example](https://github.com/TheBrainFamily/cypress-cucumber-example
+)
 
-https://github.com/TheBrainFamily/cypress-cucumber-example
+## Setup
 
-
-Important steps:
-
-## Installation
+### Installation
 Install this plugin:
 
 ```shell
 npm install --save-dev cypress-cucumber-preprocessor
 ```
 
-## Step definitions
+### Cypress Configuration
+Add it to your plugins:
+
+cypress/plugins/index.js
+```javascript
+const cucumber = require('cypress-cucumber-preprocessor').default
+module.exports = (on, config) => {
+  on('file:preprocessor', cucumber())
+}
+```
+
+Step definition files are by default in: cypress/support/step_definitions. If you want to put them somewhere please use [cosmiconfig](https://github.com/davidtheclark/cosmiconfig) format. For example, add to your package.json :
+
+```javascript
+  "cypress-cucumber-preprocessor": {
+    "step_definitions": "cypress/support/step_definitions/"
+  }
+```
+
+## Usage
+### Feature files
+
+Put your feature files in cypress/integration/
+
+Example: cypress/integration/Google.feature
+```gherkin
+Feature: The Facebook
+
+  I want to open a social network page
+
+  Scenario: Opening a social network page
+    Given I open Google page
+    Then I see "google" in the title
+```
+
+### Step definitions
 
 Put your step definitions in cypress/support/step_definitions
 
 Examples:
 cypress/support/step_definitions/google.js
 ```javascript
-/* global Given */
-// you can have external state, and also require things!
-const url = 'https://google.com'
+import { Given } from "cypress-cucumber-preprocessor/steps";
 
+const url = 'https://google.com'
 Given('I open Google page', () => {
   cy.visit(url)
 })
 ```
 
 cypress/support/step_definitions/shared.js
 ```javascript
-/* global Then */
+import { Then } from "cypress-cucumber-preprocessor/steps";
+
 Then(`I see {string} in the title`, (title) => {
   cy.title().should('include', title)
 })
@@ -46,7 +79,17 @@ Since Given/When/Then are on global scope please use
 ```
 to make IDE/linter happy
 
-We had a pattern to import those explicitly, but for some reason it was messing up the watch mode on Linux :-( (#10)
+or import them directly
+
+### Running
+
+Run your cypress the way you would usually do, for example:
+
+```bash
+./node_modules/.bin/cypress open
+```
+
+click on a .feature file on the list of specs, and see the magic happening!
 
 ### Background section
 
@@ -55,20 +98,20 @@ Adding a background section to your feature will enable you to run steps before
 ```javascript
 let counter = 0;
 
-given("counter has been reset", () => {
+Given("counter has been reset", () => {
   counter = 0;
 });
 
-when("counter is incremented", () => {
+When("counter is incremented", () => {
   counter += 1;
 });
 
-then("counter equals {int}", value => {
+Then("counter equals {int}", value => {
   expect(counter).to.equal(value);
 });
 ```
 
-```
+```gherkin
 Feature: Background Section
   
    Background:
@@ -90,73 +133,41 @@ You can share context between step definitions using `cy.as()` alias.
 
 Example:
 ```javascript
-given('I go to the add new item page', () => {
+Given('I go to the add new item page', () => {
   cy.visit('/addItem');
 });
 
-when('I add a new item', () => { 
+When('I add a new item', () => { 
   cy.get('input[name="addNewItem"]').as('addNewItemInput');
   cy.get('@addNewItemInput').type('My item');
   cy.get('button[name="submitItem"]').click();
 })
 
-then('I see new item added', () => {
+Then('I see new item added', () => {
   cy.get('td:contains("My item")');
 });
 
-then('I can add another item', () => {
+Then('I can add another item', () => {
   expect(cy.get('@addNewItemInput').should('be.empty');
 });
 
 ```
 
 For more information please visit: https://docs.cypress.io/api/commands/as.html
 
-## Spec/Feature files
-Your feature file in cypress/integration:
-
-Example: cypress/integration/Facebook.feature
-```gherkin
-Feature: The Facebook
-
-  I want to open a social network page
 
-  Scenario: Opening a social network page
-    Given I open Facebook page
-    Then I see "Facebook" in the title
-```
-
-## Tagging tests
+### Tagging tests
 You can use tags to select which test should run using [cucumber's tag expressions](https://github.com/cucumber/cucumber/tree/master/tag-expressions).
 Keep in mind we are using newer syntax, eg. `'not @foo and (@bar or @zap)'`.
 In order to initialize tests using tags you will have to run cypress and pass TAGS environment variable.
 
 Example:
   ```cypress run -e TAGS='not @foo and (@bar or @zap)'```
 
+## Custom Parameter Type Resolves
 
-## Configuration
-Add it to your plugins:
-
-cypress/plugins/index.js
-```javascript
-const cucumber = require('cypress-cucumber-preprocessor').default
-module.exports = (on, config) => {
-  on('file:preprocessor', cucumber())
-}
-```
-
-Step definition files are by default in: cypress/support/step_definitions. If you want to put them somewhere please use [cosmiconfig](https://github.com/davidtheclark/cosmiconfig) format. For example, add to your package.json :
-
-```javascript
-  "cypress-cucumber-preprocessor": {
-    "step_definitions": "cypress/support/step_definitions/"
-  }
-```
-
-## Running
-
-Run your cypress the way you would normally do :) click on a .feature file on the list of specs, and see the magic happening!
+Thanks to @Oltodo we can now use Custom Parameter Type Resolves. 
+Here is an [example](cypress/support/step_definitions/customParameterTypes.js) with related [.feature file](cypress/integration/CustomParameterTypes.feature)
 
 ## Cucumber Expressions
 
@@ -165,30 +176,25 @@ We use https://docs.cucumber.io/cucumber/cucumber-expressions/ to parse your .fe
 ## Development
 
 Install all dependencies:
-```javascript
+```bash
 npm install
 ```
 
 Link the package:
-```javascript
+```bash
 npm link 
 npm link cypress-cucumber-preprocessor
 ```
 
 Run tests:
-```javascript
+```bash
 npm test
 ```
 
 ## Disclaimer
 
 Please let me know if you find any issues or have suggestions for improvements.
 
-## Custom Parameter Type Resolves
-
-Thanks to @Oltodo we can know use Custom Parameter Type Resolves. 
-Here is an [example](cypress/support/step_definitions/customParameterTypes.js) with related [.feature file](cypress/integration/CustomParameterTypes.feature)
-
 ## WebStorm Support
 
 If you want WebStorm to resolve your steps, use the capitalized Given/When/Then function names (instead of the initial given/when/then). 
@@ -241,7 +247,7 @@ Then in your .ts files you need to make sure you either require/import the funct
 ```typescript
 declare const Given, When, Then;
 // OR
-const {given, when, then} = require('cypress-cucumber-preprocessor/resolveStepDefinition')
+import { Given, Then, When } from "cypress-cucumber-preprocessor/steps";
 ```
 
 ## Using Webpack

cypress/support/step_definitions/bail_on_step_failure.js

@@ -1,12 +1,14 @@
-/* global when then */
-when("I run one successful step", () => {
+// eslint-disable-next-line import/no-extraneous-dependencies
+import { Then, When } from "cypress-cucumber-preprocessor/steps";
+
+When("I run one successful step", () => {
   expect(true).to.equal(true);
 });
 
-when("I run another that's unsuccessful", () => {
+When("I run another that's unsuccessful", () => {
   expect(true).to.equal(false);
 });
 
-then("I don't run the last step", () => {
+Then("I don't run the last step", () => {
   throw new Error("this test should be skipped");
 });

cypress/support/step_definitions/tags_implementation.js

@@ -2,7 +2,7 @@
 
 const {
   shouldProceedCurrentStep
-} = require("cypress-cucumber-preprocessor/tagsHelper"); // eslint-disable-line
+} = require("cypress-cucumber-preprocessor/lib/tagsHelper"); // eslint-disable-line
 
 let parsedTags;
 

createTestFromScenario.js lib/createTestFromScenario.jscreateTestFromScenario.js renamed to lib/createTestFromScenario.js

@@ -7,12 +7,12 @@ const stepDefinitionPath = require("./stepDefinitionPath.js");
 // feature file
 const createCucumber = (spec, toRequire) =>
   `
-  const {resolveAndRunStepDefinition, defineParameterType, given, when, then} = require('cypress-cucumber-preprocessor/resolveStepDefinition');
+  const {resolveAndRunStepDefinition, defineParameterType, given, when, then} = require('cypress-cucumber-preprocessor/lib/resolveStepDefinition');
   const Given = window.Given = window.given = given;
   const When = window.When = window.when = when;
   const Then = window.Then = window.then = then;
   window.defineParameterType = defineParameterType;
-  const { createTestsFromFeature } = require('cypress-cucumber-preprocessor/createTestsFromFeature');
+  const { createTestsFromFeature } = require('cypress-cucumber-preprocessor/lib/createTestsFromFeature');
   ${eval(toRequire).join("\n")}
   const {Parser, Compiler} = require('gherkin');
   const spec = \`${spec}\`

createTestsFromFeature.js lib/createTestsFromFeature.jscreateTestsFromFeature.js renamed to lib/createTestsFromFeature.js

@@ -0,0 +1,82 @@
+const DataTable = require("cucumber/lib/models/data_table").default;
+const {
+  defineParameterType
+} = require("cucumber/lib/support_code_library_builder/define_helpers");
+const {
+  CucumberExpression,
+  RegularExpression,
+  ParameterTypeRegistry
+} = require("cucumber-expressions");
+
+class StepDefinitionRegistry {
+  constructor() {
+    this.definitions = {};
+    this.runtime = {};
+    this.options = {
+      parameterTypeRegistry: new ParameterTypeRegistry()
+    };
+
+    this.definitions = [];
+    this.runtime = (matcher, implementation) => {
+      let expression;
+      if (matcher instanceof RegExp) {
+        expression = new RegularExpression(
+          matcher,
+          this.options.parameterTypeRegistry
+        );
+      } else {
+        expression = new CucumberExpression(
+          matcher,
+          this.options.parameterTypeRegistry
+        );
+      }
+      this.definitions.push({ implementation, expression });
+    };
+
+    this.resolve = (type, text) =>
+      this.definitions.filter(({ expression }) => expression.match(text))[0];
+  }
+}
+
+const stepDefinitionRegistry = new StepDefinitionRegistry();
+
+function resolveStepDefinition(step) {
+  const stepDefinition = stepDefinitionRegistry.resolve(
+    step.keyword.toLowerCase().trim(),
+    step.text
+  );
+  return stepDefinition || {};
+}
+
+module.exports = {
+  // eslint-disable-next-line func-names
+  resolveAndRunStepDefinition(step) {
+    const { expression, implementation } = resolveStepDefinition(step);
+    if (expression && implementation) {
+      let argument;
+      if (step.argument) {
+        if (step.argument.type === "DataTable") {
+          argument = new DataTable(step.argument);
+        } else if (step.argument.type === "DocString") {
+          argument = step.argument.content;
+        }
+      }
+      return implementation.call(
+        this,
+        ...expression.match(step.text).map(match => match.getValue()),
+        argument
+      );
+    }
+    throw new Error(`Step implementation missing for: ${step.text}`);
+  },
+  given: (expression, implementation) => {
+    stepDefinitionRegistry.runtime(expression, implementation);
+  },
+  when: (expression, implementation) => {
+    stepDefinitionRegistry.runtime(expression, implementation);
+  },
+  then: (expression, implementation) => {
+    stepDefinitionRegistry.runtime(expression, implementation);
+  },
+  defineParameterType: defineParameterType(stepDefinitionRegistry)
+};