Fiona

Fork me on GitHub

const seeded = Fiona(1322672)

Examples

Mock API

Mocking with Service Worker

Assuming some kind of setup code loading Mock Service Worker

import { setupWorker, rest } from 'msw'

You can define a mock server like this...

const worker = setupWorker(
  rest.get('/fake/user/:id', (request, response, ctx) => {
    return response(
      ctx.status(202, 'Mocked status'),
      ctx.json(modelMock(request.params.id)),
    )
  }),
)
worker.start()

Specified routes will now be handled by the mock service worker with results generated by Fiona.

// input

fetch('/fake/user/1322672').then(r => r.json()).then(console.log)

// output

{"fullname":"Ms Eilidh Brown","color":"blue","age":98}

Mocking `fetch` with Fetch Pretender

Assuming some kind of setup code loading Fetch Pretender

<script src="https://cdn.rawgit.com/billymoon/fetch-pretender/master/dist/pretender.js"></script>

You can define a mock server like this...

const pretender = new Pretender()

const modelMock = seed => Fiona(seed).object({
  fullname: seeded => seeded.fullname(),
  color: seeded => seeded.oneOf(['red', 'yellow', 'blue']),
  age: seeded => seeded.number({ max: 100 })
})

pretender.get('/pretend/user/:id', request => [
  200,
  { 'Content-Type': 'application/json' },
  JSON.stringify(modelMock(request.params.id))
])

Calls to fetch on specified routes will now be patched to return mock results generated by Fiona.

// input

fetch('/pretend/user/1322672').then(r => r.json()).then(console.log)

// output

{"fullname":"Ms Eilidh Brown","color":"blue","age":98}

Mock GraphQL Server with Fetch Pretender

import JsonGraphqlServer from 'json-graphql-server'
const pretender = new Pretender()

const data = Fiona().object({
  users: Fiona.Array(10, seeded => {
    const index = seeded.info().path.slice(-1)[0]
    return modelMock(index)
  })
})

const server = JsonGraphqlServer({ data })

const handler = server.getHandler()

pretender.post('/graphql', async req => {
  const { status, headers, body } = await handler(req)
  return [status, headers, body]
})

// input

fetch('/graphql', {
    method: 'POST',
    body: `{"query": "query users { allUsers { fullname, age } }"}`
  }).then(r => r.json()).then(console.log)

// output

{"posts":[{"fullname":"Mr Carter Andrew Campbell","color":"blue","age":83},{"fullname":"Ms Arianna Amy Clark","color":"red","age":0},{"fullname":"Dr Luke Watson Brown","color":"yellow","age":93},{"fullname":"Ms Violet Esme Niamh Smith","color":"red","age":27},{"fullname":"Mr William Mitchell-Ross","color":"yellow","age":37}]}

Express Mock Server

This example assumes you have a project with dependencies added for Fiona, express and express-http-proxy and that you have a development server running on port 3000 serving your web app.

Define an express proxy server and run with nodejs - e.g. save the snippet as `server.js` and run `node server`

// require dependencies
const Fiona = require('fiona')
const proxy = require('express-http-proxy')
const express = require('express')

// define express server
const app = express()

// define Fiona generated data handler for user api
app.use('/api/user/:id', (req, res) => {
  res.end(Fiona(req.params.id).chain({
    fullname: Fiona.Fullname,
    age: Fiona.Number({ max: 100 })
  }).json())
})

// proxy other requests to main server
app.use('/', proxy('http://localhost:3000'))

// listen on an available port
app.listen(3001, () => console.log(`mocking '/api/user/:id' and proxying 3000 to 3001`))

The proxy server (running on http://localhost:3001) will forwarding traffic to your development server (running on http://localhost:3000) except api calls to /api/user/:id which will return generated data as json.

From the proxied web page, you can now make requests to the user api along the lines of...

// input

fetch('/api/user/1322672').then(r => r.json()).then(console.log)

// output

{"fullname":"Sir Harry Paterson-Anderson","age":5}

... or with curl ...

$ curl http://localhost:3001/api/user/1322672