Post JSON payload

An outline where every case carries its own JSON payload.

The test

Vitest

import { story } from 'executable-stories-vitest';
import { it } from 'vitest';

const postPayloadExamples = [
  { id: "123", status: "active", code: "200" },
  { id: "456", status: "invalid", code: "400" },
];
for (const row of postPayloadExamples) {
  it(`Post JSON payload: ${row.id} -> ${row.code}`, ({ task }) => {
    story.init(task);
    story.given("the payload is");
    story.json({ label: "Payload", value: { id: row.id, status: row.status } });
    story.when("the client posts the payload");
    story.then(`the response status should be ${row.code}`);
  });
}

Jest

import { story } from 'executable-stories-jest';

const postPayloadExamples = [
  { id: "123", status: "active", code: "200" },
  { id: "456", status: "invalid", code: "400" },
];
for (const row of postPayloadExamples) {
  it(`Post JSON payload: ${row.id} -> ${row.code}`, () => {
    story.init();
    story.given("the payload is");
    story.json({ label: "Payload", value: { id: row.id, status: row.status } });
    story.when("the client posts the payload");
    story.then(`the response status should be ${row.code}`);
  });
}

Playwright

import { test } from '@playwright/test';
import { story } from 'executable-stories-playwright';

const postPayloadExamples = [
  { id: "123", status: "active", code: "200" },
  { id: "456", status: "invalid", code: "400" },
];
for (const row of postPayloadExamples) {
  test(`Post JSON payload: ${row.id} -> ${row.code}`, async ({}, testInfo) => {
    story.init(testInfo);
    story.given("the payload is");
    story.json({ label: "Payload", value: { id: row.id, status: row.status } });
    story.when("the client posts the payload");
    story.then(`the response status should be ${row.code}`);
  });
}

Cypress

import { story } from 'executable-stories-cypress';

const postPayloadExamples = [
  { id: "123", status: "active", code: "200" },
  { id: "456", status: "invalid", code: "400" },
];
for (const row of postPayloadExamples) {
  it(`Post JSON payload: ${row.id} -> ${row.code}`, () => {
    story.init();
    story.given("the payload is");
    story.json({ label: "Payload", value: { id: row.id, status: row.status } });
    story.when("the client posts the payload");
    story.then(`the response status should be ${row.code}`);
  });
}

What the report renders

### ✅ Post JSON payload: 123 -> 200

- **Given** the payload is
    **Payload**
    ```json
    { "id": "123", "status": "active" }

• When the client posts the payload
• Then the response status should be 200