Add examples in cjs

Author: badeball

.github/workflows/examples.yml

@@ -10,6 +10,36 @@ defaults:
     shell: bash
 
 jobs:
+  browserify-cjs:
+    runs-on: ubuntu-20.04
+    container:
+      image: cypress/base:17.3.0
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Cache NPM modules
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: npm
+      - name: Cache Cypress binaries
+        uses: actions/cache@v2
+        with:
+          path: ~/.cache/Cypress
+          key: cypress
+      # In lack of native support, https://github.com/actions/checkout/issues/172.
+      - name: Make checkout sparse
+        run: |
+          shopt -s extglob
+          rm -rf examples/!(browserify-cjs)
+          rm -rf !(examples)
+      - name: Install NPM modules
+        working-directory: examples/browserify-cjs
+        run: npm install
+      - name: Run Cypress
+        working-directory: examples/browserify-cjs
+        run: npx cypress run
+
   browserify-esm:
     runs-on: ubuntu-20.04
     container:
@@ -70,6 +100,36 @@ jobs:
         working-directory: examples/browserify-ts
         run: npx cypress run
 
+  webpack-cjs:
+    runs-on: ubuntu-20.04
+    container:
+      image: cypress/base:17.3.0
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Cache NPM modules
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: npm
+      - name: Cache Cypress binaries
+        uses: actions/cache@v2
+        with:
+          path: ~/.cache/Cypress
+          key: cypress
+      # In lack of native support, https://github.com/actions/checkout/issues/172.
+      - name: Make checkout sparse
+        run: |
+          shopt -s extglob
+          rm -rf examples/!(webpack-cjs)
+          rm -rf !(examples)
+      - name: Install NPM modules
+        working-directory: examples/webpack-cjs
+        run: npm install
+      - name: Run Cypress
+        working-directory: examples/webpack-cjs
+        run: npx cypress run
+
   webpack-esm:
     runs-on: ubuntu-20.04
     container:
@@ -130,6 +190,36 @@ jobs:
         working-directory: examples/webpack-ts
         run: npx cypress run
 
+  esbuild-cjs:
+    runs-on: ubuntu-20.04
+    container:
+      image: cypress/base:17.3.0
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+      - name: Cache NPM modules
+        uses: actions/cache@v2
+        with:
+          path: ~/.npm
+          key: npm
+      - name: Cache Cypress binaries
+        uses: actions/cache@v2
+        with:
+          path: ~/.cache/Cypress
+          key: cypress
+      # In lack of native support, https://github.com/actions/checkout/issues/172.
+      - name: Make checkout sparse
+        run: |
+          shopt -s extglob
+          rm -rf examples/!(esbuild-cjs)
+          rm -rf !(examples)
+      - name: Install NPM modules
+        working-directory: examples/esbuild-cjs
+        run: npm install
+      - name: Run Cypress
+        working-directory: examples/esbuild-cjs
+        run: npx cypress run
+
   esbuild-esm:
     runs-on: ubuntu-20.04
     container:

.gitignore

@@ -1,5 +1,6 @@
 **/*.js
 **/*.d.ts
+!examples/**/*
 !features/**/*
 !cucumber.d.ts
 !cucumber.js

examples/browserify-cjs/.npmrc

@@ -0,0 +1 @@
+package-lock=false

examples/browserify-cjs/cypress.config.js

@@ -0,0 +1,20 @@
+const { defineConfig } = require("cypress");
+const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
+const browserify = require("@badeball/cypress-cucumber-preprocessor/browserify");
+
+async function setupNodeEvents(on, config) {
+  await preprocessor.addCucumberPreprocessorPlugin(on, config);
+
+  on("file:preprocessor", browserify.default(config));
+
+  // Make sure to return the config object as it might have been modified by the plugin.
+  return config;
+}
+
+module.exports = defineConfig({
+  e2e: {
+    specPattern: "**/*.feature",
+    supportFile: false,
+    setupNodeEvents,
+  },
+});

examples/browserify-cjs/cypress/e2e/duckduckgo.feature

@@ -0,0 +1,4 @@
+Feature: duckduckgo.com
+  Scenario: visting the frontpage
+    When I visit duckduckgo.com
+    Then I should see a search bar

examples/browserify-cjs/cypress/e2e/duckduckgo.js

@@ -0,0 +1,15 @@
+const { When, Then } = require("@badeball/cypress-cucumber-preprocessor");
+
+When("I visit duckduckgo.com", () => {
+  cy.visit("https://duckduckgo.com/");
+});
+
+Then("I should see a search bar", () => {
+  cy.get("input").should(
+    "have.attr",
+    "placeholder",
+    "Search the web without being tracked"
+  );
+
+  assert.deepEqual({}, {});
+});

examples/browserify-cjs/package.json

@@ -0,0 +1,7 @@
+{
+  "dependencies": {
+    "@badeball/cypress-cucumber-preprocessor": "latest",
+    "@cypress/browserify-preprocessor": "latest",
+    "cypress": "latest"
+  }
+}

examples/esbuild-cjs/.npmrc

@@ -0,0 +1 @@
+package-lock=false

examples/esbuild-cjs/cypress.config.js

@@ -0,0 +1,26 @@
+const { defineConfig } = require("cypress");
+const createBundler = require("@bahmutov/cypress-esbuild-preprocessor");
+const preprocessor = require("@badeball/cypress-cucumber-preprocessor");
+const createEsbuildPlugin = require("@badeball/cypress-cucumber-preprocessor/esbuild");
+
+async function setupNodeEvents(on, config) {
+  await preprocessor.addCucumberPreprocessorPlugin(on, config);
+
+  on(
+    "file:preprocessor",
+    createBundler({
+      plugins: [createEsbuildPlugin.default(config)],
+    })
+  );
+
+  // Make sure to return the config object as it might have been modified by the plugin.
+  return config;
+}
+
+module.exports = defineConfig({
+  e2e: {
+    specPattern: "**/*.feature",
+    supportFile: false,
+    setupNodeEvents,
+  },
+});

examples/esbuild-cjs/cypress/e2e/duckduckgo.feature

@@ -0,0 +1,4 @@
+Feature: duckduckgo.com
+  Scenario: visting the frontpage
+    When I visit duckduckgo.com
+    Then I should see a search bar