Check the amount of specific route:variant are called

[mbruggenwirth]

Is your feature request related to a problem? Please describe.
In Cypress you can do the following. cy.get('@request.alias.all').should('have.length', 1)
This gives me the amount the request is fired and captured. We use this quite often. for example

cy.get('@request.alias.all').should('have.length', 1)
cy.get('select').select('3.0.0')
cy.get('@request.alias.all').should('have.length', 2)

Is there a possibility to have this feature.

Describe the solution you'd like
I would like to have a function I can use that tells me how often a request is fired during a single cypress test.
This can be fetched by route.id:variant.id
example:

cy.mocksGetRequest('route:variant.all').should('have.length', 1)
cy.get('select').select('3.0.0')
cy.mocksGetRequest('route:variant.all').should('have.length', 2)

Describe alternatives you've considered
I have not found any alternative. Other then using cypress own intercepts.

Additional context
No further context yet.

[javierbrea]

Hi @mbruggenwirth ,
First of all, thanks for the feedback 😃 . I have planned to add support for spying routes, and, when that feature is implemented, it would be possible to add new cypress commands allowing to write assertions about them.

[mbruggenwirth]

@javierbrea awesome! Any idea when this will be on the schedule.
It will help me with my internal mock-server pitch.

[javierbrea]

@mbruggenwirth , I hope it will be available sometime in the next 3 months. I'm currently finishing the migration of the whole project to TypeScript, and improving the architecture to make easier to expose the next big feature to the API, which in fact is to support spying routes.

[mbruggenwirth]

@javierbrea any update about this enhancement?

[mbruggenwirth]

@javierbrea any update about this enhancement?

[javierbrea]

Hi @mbruggenwirth , no, unfortunately I had not as much time for the project as I'd like. I hope to release the TypeScript migration soon, and then I'll be able to work on this feature. But I can't say when it will be ready 😞 I will notify it on this issue as soon as I start working on it.

[mbruggenwirth]

Is there any progress on this issue?

[javierbrea]

Not for the moment @mbruggenwirth 😞 . Anyway, let me think about how to implement it by using a plugin, so you may implement it by yourself until it is added to the core features. I hope to answer soon with a proposal 😃

[SimeonC]

I thought I'd share my workaround as I couldn't manage to figure out how to get plugins to do this. Basically I changed to run an express proxy in front of mocks-server so I could catch the responses.

const path = require('path');

const express = require('express');
const { createServer } = require('@mocks-server/main');
// this just gets the root of my repository folder
const { workspaceRoot } = require('nx/src/utils/workspace-root.js');
const {
  createProxyMiddleware,
  fixRequestBody,
} = require('http-proxy-middleware');

const core = createServer({
  server: {
    port: 3101,
  },
  plugins: {
    inquirerCli: {
      enabled: typeof process.env.CI === 'undefined',
    },
  },
  files: {
    enabled: true,
    path: path.join(workspaceRoot, 'apps/mock-server/mocks'),
    babelRegister: {
      enabled: true,
      options: {
        presets: ['@babel/env', '@babel/preset-typescript'],
      },
    },
  },
});

core.start();

const app = express();

let requests = [];

app.use(express.json());
app.delete('/test-requests', (req, res) => {
  requests = [];
  res.status(200).end();
});

app.get('/test-requests', (req, res) => {
  res.json(requests);
});

const proxy = express();
proxy.use(express.json());
proxy.use(
  createProxyMiddleware({
    target: 'http://localhost:3101',
    changeOrigin: true,
    onProxyReq: (proxyReq, req, res, options) => {
      requests.push({
        url: req.url,
        method: req.method,
        headers: req.headers,
        body: req.body,
        params: req.params,
      });
      return fixRequestBody(proxyReq, req, res, options);
    },
  }),
);

app.listen(3102);
proxy.listen(3100);

Then in cypress I do;

beforeEach(() => {
  cy.request('DELETE', 'http://localhost:3102/test-requests');
});

Cypress.Commands.add('getApiSubmits', () =>
  cy
    .request<
      (Record<string, string> & { body: object })[]
    >('GET', 'http://localhost:3102/test-requests')
    .then((res) =>
      res.body
        .filter((r) => r.method === 'PUT' && r.url.startsWith('/responses/'))
        .map((r) => r.body),
    ),
);