From 296668dfff52695446a93875d2f939ced3897d32 Mon Sep 17 00:00:00 2001
From: Jonas Amundsen <jonasba@gmail.com>
Date: Tue, 30 Jul 2024 09:18:31 +0200
Subject: [PATCH] Add an example of waiting for a request

This is related to #1217 [1].

[1] https://github.com/badeball/cypress-cucumber-preprocessor/issues/1217
---
 .../wait-for-request/cypress.config.ts        | 30 +++++++++++++++++++
 .../cypress/e2e/wait-for-request.feature      |  6 ++++
 .../cypress/e2e/wait-for-request.ts           | 23 ++++++++++++++
 .../wait-for-request/cypress/support/e2e.ts   |  0
 .../wait-for-request/index.html               | 22 ++++++++++++++
 .../wait-for-request/package.json             |  8 +++++
 .../wait-for-request/tsconfig.json            |  6 ++++
 7 files changed, 95 insertions(+)
 create mode 100644 cypress-cucumber-preprocessor/wait-for-request/cypress.config.ts
 create mode 100644 cypress-cucumber-preprocessor/wait-for-request/cypress/e2e/wait-for-request.feature
 create mode 100644 cypress-cucumber-preprocessor/wait-for-request/cypress/e2e/wait-for-request.ts
 create mode 100644 cypress-cucumber-preprocessor/wait-for-request/cypress/support/e2e.ts
 create mode 100644 cypress-cucumber-preprocessor/wait-for-request/index.html
 create mode 100644 cypress-cucumber-preprocessor/wait-for-request/package.json
 create mode 100644 cypress-cucumber-preprocessor/wait-for-request/tsconfig.json

diff --git a/cypress-cucumber-preprocessor/wait-for-request/cypress.config.ts b/cypress-cucumber-preprocessor/wait-for-request/cypress.config.ts
new file mode 100644
index 0000000..5256dca
--- /dev/null
+++ b/cypress-cucumber-preprocessor/wait-for-request/cypress.config.ts
@@ -0,0 +1,30 @@
+import { defineConfig } from "cypress";
+import createBundler from "@bahmutov/cypress-esbuild-preprocessor";
+import { addCucumberPreprocessorPlugin } from "@badeball/cypress-cucumber-preprocessor";
+import createEsbuildPlugin from "@badeball/cypress-cucumber-preprocessor/esbuild";
+
+async function setupNodeEvents(
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions
+): Promise<Cypress.PluginConfigOptions> {
+  // This is required for the preprocessor to be able to generate JSON reports after each run, and more,
+  await addCucumberPreprocessorPlugin(on, config);
+
+  on(
+    "file:preprocessor",
+    createBundler({
+      plugins: [createEsbuildPlugin(config)],
+    })
+  );
+
+  // Make sure to return the config object as it might have been modified by the plugin.
+  return config;
+}
+
+export default defineConfig({
+  e2e: {
+    specPattern: "**/*.feature",
+    reporter: require.resolve("@badeball/cypress-cucumber-preprocessor/pretty-reporter"),
+    setupNodeEvents,
+  },
+});
diff --git a/cypress-cucumber-preprocessor/wait-for-request/cypress/e2e/wait-for-request.feature b/cypress-cucumber-preprocessor/wait-for-request/cypress/e2e/wait-for-request.feature
new file mode 100644
index 0000000..4de10ef
--- /dev/null
+++ b/cypress-cucumber-preprocessor/wait-for-request/cypress/e2e/wait-for-request.feature
@@ -0,0 +1,6 @@
+Feature: wait for request
+  Scenario:
+    When I visit the site
+    And I intercept a POST request
+    And I press send
+    Then the request should be fulfilled
diff --git a/cypress-cucumber-preprocessor/wait-for-request/cypress/e2e/wait-for-request.ts b/cypress-cucumber-preprocessor/wait-for-request/cypress/e2e/wait-for-request.ts
new file mode 100644
index 0000000..66ea100
--- /dev/null
+++ b/cypress-cucumber-preprocessor/wait-for-request/cypress/e2e/wait-for-request.ts
@@ -0,0 +1,23 @@
+import { When, Then } from "@badeball/cypress-cucumber-preprocessor";
+
+When("I visit the site", () => {
+  cy.visit("./index.html");
+});
+
+When("I intercept a POST request", () => {
+  cy.intercept({
+    method: "POST", 
+    path: "/api/foo",
+    times: 1
+  }, (req) => {
+    expect(req.body).to.equal("bar");
+  }).as("request");
+});
+
+When("I press send", () => {
+  cy.get("button").click();
+});
+
+Then("the request should be fulfilled", () => {
+  cy.wait('@request');
+});
diff --git a/cypress-cucumber-preprocessor/wait-for-request/cypress/support/e2e.ts b/cypress-cucumber-preprocessor/wait-for-request/cypress/support/e2e.ts
new file mode 100644
index 0000000..e69de29
diff --git a/cypress-cucumber-preprocessor/wait-for-request/index.html b/cypress-cucumber-preprocessor/wait-for-request/index.html
new file mode 100644
index 0000000..19746c1
--- /dev/null
+++ b/cypress-cucumber-preprocessor/wait-for-request/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<script>
+  function sleep(ms) {
+    return new Promise(resolve => setTimeout(resolve, ms));
+  }
+  async function sendRequest() {
+    await sleep(500);
+
+    const response = await fetch("/api/foo", {
+      method: "POST",
+      body: "bar z0mg"
+    });
+
+    document.getElementById("response-container").innerText = response.status + " " + response.statusText;
+  }
+</script>
+<p>
+  <button onclick="sendRequest()">Send</button>
+</p>
+<p>
+  Response: <span id="response-container">waiting...</span>
+</p>
diff --git a/cypress-cucumber-preprocessor/wait-for-request/package.json b/cypress-cucumber-preprocessor/wait-for-request/package.json
new file mode 100644
index 0000000..9a254d8
--- /dev/null
+++ b/cypress-cucumber-preprocessor/wait-for-request/package.json
@@ -0,0 +1,8 @@
+{
+  "dependencies": {
+    "@badeball/cypress-cucumber-preprocessor": "latest",
+    "@bahmutov/cypress-esbuild-preprocessor": "latest",
+    "cypress": "latest",
+    "typescript": "latest"
+  }
+}
diff --git a/cypress-cucumber-preprocessor/wait-for-request/tsconfig.json b/cypress-cucumber-preprocessor/wait-for-request/tsconfig.json
new file mode 100644
index 0000000..13d0dcb
--- /dev/null
+++ b/cypress-cucumber-preprocessor/wait-for-request/tsconfig.json
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "module": "nodenext"
+  }
+}