npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@heetch/cypress-mock-openapi

v1.0.2

Published

Cypress command to stub network requests using OpenAPI examples

Downloads

861

Readme

@heetch/cypress-mock-openapi

Push

This package contains a Cypress plugin and command to mock and validate responses in tests using an OpenAPI (Swagger) contract.

Installation

npm install --dev @heetch/cypress-mock-openapi

OR

yarn add --dev @heetch/cypress-mock-openapi

Configuration

After installing the package, configure Cypress with the following environment variables:

{
  "openapiPath": "test/openapi.yaml",
  "apiPrefix": "http://api-prefix" // Optional
}

The apiPrefix can be set globally but also overridden in both commands (or omitted completely).

In your Cypress plugin file:

import getOpenAPIResponse from '@heetch/cypress-mock-openapi/dist/plugin';

module.exports = (on) => {
  on('task', {
    getOpenAPIResponse,
  });
};

Either in your support/index.js file or commands.js (for a standard configuration):

import '@heetch/cypress-mock-openapi';

Basic usage

cy.mockWithOpenAPI(options)

This command will:

  • Intercept a network request based on the passed options
  • Search for the matching operation in the configured OpenAPI file
  • Return the response of the operation and method based on the exampleKey

Note: The first example defined in the OpenAPI contract will be used if none are specified

# OpenAPI operation for GET http://my-api.com/users
examples:
  ACTIVE:
    value:
      users:
        - name: Paco
          active: true
it('Displays a list of users', () => {
  // Set up the mock for GET http://my-api.com/users
  cy.mockWithOpenAPI({
    apiPrefix: 'http://my-api.com',
    url: '/users',
  }).as('getActiveUsers');

  // When the page loads, fetch /users
  cy.get('html').then(() => fetch('http://my-api.com/users'));

  // Await the results of the interception and make assertions on the mocked response
  cy.wait('@getActiveUsers').then((interception) => {
    expect(interception.response.statusCode).to.eql(200);
    expect(interception.response.body).to.eql({
      users: [{ name: 'Paco', active: true }],
    });
  });
});

cy.validateWithOpenAPI(options)

This command can be used to validate that your API returns a response that conforms to the OpenAPI contract (both the request and the response). It will perform the request with the provided options and return the actual response if the validation passes.

If the validation fails, an error will be thrown that contains a list of contract violations. For example:

it('Throws an error if the validation fails', () => {
  cy.validateWithOpenAPI({
    url: '/users',
    headers: {
      Authorization: 'Password',
    }
  });

  // Throws an error with the following information returned:
  {
    message: "The response doesn't match the OpenAPI contract",
    violations: {
      "body.users[0]": "required: should have required property 'age'",
    }
  }
});

Note: This command doesn't intercept requests

Options reference

mockWithOpenAPI(options)

| Name | Type | Optional | Default | Example | Description | | ---------- | -------- | -------- | ----------- | --------------------------------------------------------- | --------------------------------------------------------------------------------- | | apiPrefix | String | false | undefined | http://my-api.com | A prefix for API calls. Can also be configured global using Cypress env variables | | url | String | false | undefined | /users /dogs?cute=true | The pathname and query parameters of the request | | exampleKey | String | true | undefined | 'OK' | By default the first example will be used if none are specified | | method | String | true | 'GET' | https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods | Any supported HTTP method |

validateWithOpenAPI(options)

| Name | Type | Optional | Default | Example | Description | | --------- | -------- | -------- | ----------- | --------------------------------------------------------- | --------------------------------------------------------------------------------- | | apiPrefix | String | false | undefined | http://my-api.com | A prefix for API calls. Can also be configured global using Cypress env variables | | url | String | false | undefined | /users /dogs?cute=true | The pathname and query parameters of the request | | method | String | true | 'GET' | https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods | Any supported HTTP method | | headers | Object | true | {} | { Authorization: 'Basic 1234' } | The headers required to perform the actual HTTP request |

Developing and testing locally

First, install the package dependencies for this workspace at the root of the repo, then run yarn install or npm install in this folder.

Files:

  • Command: packages/cypress-mock-openapi/src/index.js
  • Plugin: packages/cypress-mock-openapi/src/plugin.js
  • Mock server data: packages/cypress-mock-openapi/test/json/db.json
  • Spec: packages/cypress-mock-openapi/test/specs/mock.spec.js

Commands:

yarn test:open # Opens the Cypress UI
yarn test # Runs the tests in a headless browser