EBI Software Architecture

Michael Andish

Software Development with Fox Mockery

Michael Andish

Web Accessibility For All!

Michael Andish
Fox Mockery Servers
Web Development

Software Development with Fox Mockery

By Michael Andish

My goal in this article is to discuss the following important topics, and also share my experience with Fox Mockery in developing our software structure.

  • Contract Testing
  • Open API Specification
  • Mocking Data
  • Using the Fox Mockery during the E2E testing

What is Fox Mockery

During project development, I’ve tried to find a good way to have a Mock Server for our projects, but each of the options which I found has dependencies and complexity, and some of them have some bugs so fixing those bugs needs more time, etc.

The Mock Server I have created is named Fox Mockery and I will use it in our projects. I have created it based on the requirements we have for API documentation, schema, contract tests, and E2E testing.

Open API Specification & API Documentation

In the services, once you have created the schema files and project endpoints, all you have to do is execute one command to obtain the Open API Specification. Here is an example of the output

Fox Mockery Example - Documentation and Open API Specification

Installing Fox Mockery

If you want to install and create your Mock Server follow the below steps:

  1. Install Docker on your local

2. Clone this repository:  git clone git@github.com:weprodev/Fox.Mockery.Server.git

3. Run this command on the Fox Mockery directory:  make docker

Notice: if the make command is not working for you, execute the below command:

cd Fox-Servers && docker-compose up -d --force-recreate && docker-compose build --force-rm

Now you can open it on your browser – localhost:8030 and then use Insomnia or Postman

How I can use Fox Mockery

After installing and running the container of the mock server, now you can define your service in the project same as the samples which are exist in the mocks directory.

Step 1: open the config/fox_services.php file, and then add your service:

    'sample' => [
        'port' => '9192',
        'active' => true,
        'version' => '1.0.0',
    ],

Step 2: open this directory: mocks/services and then copy one of the directory and rename to the service name which you add in first step (sample).

I’ve copied it from the petstore directory and If you see the paths directory you can see all of the endpoints which are exist for customer service, and now you can change all of them based on your endpoints.

Step 3: after creating each endpoint path or schema component file you should run the below command to generate or update Open Api Specification file:

make openapi 

Notice: if the make command is not working for you, execute the below command:

docker exec -it fox-server php artisan fox:openapi

Step 4: open Insomnia and create a new design documents

and then copy the content of the mocks/services/sample/index.oas.yml file and past in the Design tab:

But if you copy from the customer directory, you will see the below output:

Insomnia’s Debug tab should display all endpoints separated by the tags we mentioned in the path JSON files.

If you open the Header tab you can set the Response Type to have a specific response based on your requirement

  • X-RESPONSE-TYPE: EXAMPLE, EXAMPLE_AND_OVERWRITE, SCHEMA, BODY, ALL (default)
    • EXAMPLE: You receive the example if you set an example in the path JSON file
    • EXAMPLE_AND_OVERWRITE: you can get the example in the response and also you can overwrite the response data based on the parameters which you have submitted.
    • SCHEMA: You receive the Schema if you set a Schema in the path JSON file
    • BODY: You receive the content of the body
    • ALL: it’s the default response type and you receive all the data
  • X-ENVELOPE-RESPONSE: NULL (default), any string like data
  • X-STATUS-CODE: Valid status code like: 200, 201, 404,… to get a response based on your request

For example

HEADER:
X-RESPONSE-TYPE: Example
X-ENVELOPE-RESPONSE: data

RESPONSE:
{
	"data": [
		{
			"id": 1,
			"name": "Fay",
			"tag": "lovely"
		},
		{
			"id": 1,
			"name": "Lucy",
			"tag": "Persian"
		}
	]
}

Using it during software development

You are working on a front-end project using React, Angular, Vue Js, etc. There are two options if you need to work with the web services:

  1. When the back-end team developed the web service, you can use the API endpoint.
  2. You can create a JSON schema file with an example in response, and then make a contract between the front-end and back-end. so you don’t need to wait for the back-end web service, when it’s ready you just need to change the base URL from Fox Mockery Server to the project base URL.

Your E2E test can be run on the Mock Server environment to ensure all the sections on your front end work properly. You only need to set your environment for E2E testing, regardless of which framework you use.

As I mentioned, the default Response Type is ALL, but if you want to change the default option to example to receive just Examples as a response of endpoints, just open the config/fox_settings.php and edit the below line to Example or EXAMPLE_AND_OVERWRITE:

'default_response_type' => 'ALL', // EXAMPLE, EXAMPLE_AND_OVERWRITE, SCHEMA, BODY, ALL

Comments