How to use cy-spok - 6 common examples

cy.get('#delayed-load').click()
    // the request has gone out - let's wait for it
    // and then assert some of its properties
    cy.wait('@post').then(spok({
      status: 201,
    }))
    // let's confirm the request object
    .its('request.body')
    // notice that we want to confirm that the "body" field is a string
    // and it starts with certain prefix. Since we cannot AND conditions
    // we can split checks across 2 spoks
    .then(spok({
      title: 'example post',
      userId: 1,
      body: spok.string,
    }))
    // cy.then(cb) yields its original subject
    // thus the second .then(cb) can work with the same request
    // https://on.cypress.io/then
    .then(spok({
      body: spok.startsWith('this is a post'),
    }))

    // cy.its(...) yields the property value
    // so if we want to validate the response object
    // we need to get the XHR object again
    // by now the object exists, thus we can use cy.get()
    cy.get('@post').its('response').should(spok({
      headers: {
        'content-type': 'application/json; charset=utf-8',
        'cache-control': 'no-cache',

cy.server()
    cy.route('POST', '/posts').as('post')

    cy.get('#load').click()
    cy.contains('#output', '"title": "example post"').should('be.visible')

    // Spok https://github.com/thlorenz/spok is a mix between schema and value assertions
    // Since it supports nested objects, in a single "should()" we can verify desired
    // properties of the XHR object, its request and response nested objects.
    cy.get('@post').should(spok({
      status: 201,
      url: spok.endsWith('posts'),
      // network request takes at least 10ms
      // but should finish in less than 1 second
      duration: spok.range(10, 1000),
      statusMessage: spok.string,
      // check the request inside XHR object
      request: {
      // using special keyword "$topic" to get
      // nicer indentation in the command log
        $topic: 'request',
        body: {
          title: 'example post',
          userId: 1,
        },
      },
      response: {
        $topic: 'response',
        headers: {
          'content-type': 'application/json; charset=utf-8',
          'cache-control': 'no-cache',
        },

cy.visit('index.html')

    // before the request goes out we need to set up spying
    // see https://on.cypress.io/network-requests
    cy.server()
    cy.route('POST', '/posts').as('post')

    cy.get('#load').click()
    cy.contains('#output', '"title": "example post"').should('be.visible')

    // Spok https://github.com/thlorenz/spok is a mix between schema and value assertions
    // Since it supports nested objects, in a single "should()" we can verify desired
    // properties of the XHR object, its request and response nested objects.
    cy.get('@post').should(spok({
      status: 201,
      url: spok.endsWith('posts'),
      // network request takes at least 10ms
      // but should finish in less than 1 second
      duration: spok.range(10, 1000),
      statusMessage: spok.string,
      // check the request inside XHR object
      request: {
      // using special keyword "$topic" to get
      // nicer indentation in the command log
        $topic: 'request',
        body: {
          title: 'example post',
          userId: 1,
        },
      },
      response: {
        $topic: 'response',

// cy.its(...) yields the property value
    // so if we want to validate the response object
    // we need to get the XHR object again
    // by now the object exists, thus we can use cy.get()
    cy.get('@post').its('response').should(spok({
      headers: {
        'content-type': 'application/json; charset=utf-8',
        'cache-control': 'no-cache',
      },
      body: {
        title: 'example post',
        body: spok.string,
        userId: 1,
        // we don't know the exact id the server assigns to the new post
        // but it should be > 100
        id: spok.gt(100),
      },
    }))
  })
})

// see https://on.cypress.io/network-requests
    cy.server()
    cy.route('POST', '/posts').as('post')

    cy.get('#load').click()
    cy.contains('#output', '"title": "example post"').should('be.visible')

    // Spok https://github.com/thlorenz/spok is a mix between schema and value assertions
    // Since it supports nested objects, in a single "should()" we can verify desired
    // properties of the XHR object, its request and response nested objects.
    cy.get('@post').should(spok({
      status: 201,
      url: spok.endsWith('posts'),
      // network request takes at least 10ms
      // but should finish in less than 1 second
      duration: spok.range(10, 1000),
      statusMessage: spok.string,
      // check the request inside XHR object
      request: {
      // using special keyword "$topic" to get
      // nicer indentation in the command log
        $topic: 'request',
        body: {
          title: 'example post',
          userId: 1,
        },
      },
      response: {
        $topic: 'response',
        headers: {
          'content-type': 'application/json; charset=utf-8',
          'cache-control': 'no-cache',

}))
    // let's confirm the request object
    .its('request.body')
    // notice that we want to confirm that the "body" field is a string
    // and it starts with certain prefix. Since we cannot AND conditions
    // we can split checks across 2 spoks
    .then(spok({
      title: 'example post',
      userId: 1,
      body: spok.string,
    }))
    // cy.then(cb) yields its original subject
    // thus the second .then(cb) can work with the same request
    // https://on.cypress.io/then
    .then(spok({
      body: spok.startsWith('this is a post'),
    }))

    // cy.its(...) yields the property value
    // so if we want to validate the response object
    // we need to get the XHR object again
    // by now the object exists, thus we can use cy.get()
    cy.get('@post').its('response').should(spok({
      headers: {
        'content-type': 'application/json; charset=utf-8',
        'cache-control': 'no-cache',
      },
      body: {
        title: 'example post',
        body: spok.string,
        userId: 1,
        // we don't know the exact id the server assigns to the new post