Add an example of waiting for a request

This is related to #1217 [1]. [1] badeball/cypress-cucumber-preprocessor#1217
badeball · Jul 30, 2024 · 296668d · 296668d
1 parent 6b81441
commit 296668d
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 0 deletions.
diff --git a/cypress-cucumber-preprocessor/wait-for-request/cypress.config.ts 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
@@ -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
@@ -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
diff --git a/cypress-cucumber-preprocessor/wait-for-request/index.html 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
@@ -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
@@ -0,0 +1,6 @@
+{
+  "compilerOptions": {
+    "esModuleInterop": true,
+    "module": "nodenext"
+  }
+}