Returning images as mock

[muratcorlu]

For some use cases, we need to able to return image responses as mocks. Like GET.json or GET.xml, GET.jpeg should be returned for an image request. There are some tricky parts for this:

• For response type, we have auto type that is checking request content-type header and falls-back to json. But for images we should check mock files for this path in any case for image mock files.
• Respect to wildcard support(Fixing wildcard matcher #25), checking all possible mock files will be a bit more complex.
• We should able to extend this approach for other type of responses. (Video, yaml etc.)

So idea is:

• If request is GET /path with accept type application/json we should only check path/GET.json

Request method	Request path	Accept type	Mock file to be checked
GET	/path	application/json	path/GET.json
GET	/path	application/xml	path/GET.xml
GET	/path	image/*	path/GET.(jpeg|gif|png...)
GET	/path	*/*	path/GET.(json|xml|jpeg|gif|png...)

* Custom middlewares should have priority in any case
** If there is no prefered accept type and if there is a json mock file, it should be prioritised

[stephanoapiolaza]

Nice idea

[WoyKambas]

I still can't mock images. Can anyone give me a better idea to fix?

Here is my configuration of mocking :
before(app){ app.use('/3', apiMocker({ target: 'mocked-api/3', nextOnNotFound: true })); app.use('/t', apiMocker({ target: 'mocked-api/t', nextOnNotFound: true })); }, proxy: { '/3' : { changeOrigin: true, cookieDomainRewrite: "localhost", target: 'https://api.themoviedb.org' }, '/t': { changeOrigin: true, cookieDomainRewrite: "localhost", target: 'https://image.tmdb.org' } }
Usages :
<img id="displayed-img" class="rounded" src="/t/p/images/w342/2CAL2433ZeIihfX1Hb2139CX0pW.jpg">

And i have tried for http://localhost:8080/t/p/images/w342/2CAL2433ZeIihfX1Hb2139CX0pW.jpg but it return 404 not found page

[muratcorlu]

Image responses are not implemented yet. But you can send an image as a response in a custom response. So, if you put a custom middleware in your mocked-api/t/p/images/__filename__/GET.js path with a content like below, it can respond all of the requests to http://localhost:8080/t/p/images/w342/* address with a static(or can be dynamic easily) image:

const fs = require('fs');
const path = require('path');

module.exports = (req, res) => {
  // Assume that we have a GET.jpg file next to this file
  // You can also use `req.params.filename` as file name, if you want to send a dynamic image
  const filePath = path.join(__dirname, 'GET.jpg');
  const stat = fs.statSync(filePath);

  // Set response type as image and content-length
  res.writeHead(200, {
      'Content-Type': 'image/jpeg',
      'Content-Length': stat.size
  });

  // Read file and pipe it to response
  const readStream = fs.createReadStream(filePath);
  readStream.pipe(res);
}

I didn't try it but I hope that will give the idea.

[WoyKambas]

Yes. I have find a solution (nearly your response). I have using GET.js rather than GET.jpg and sends a image through GET.js

Here is screenshot of my files (a little)

And its my GET.js file
module.exports = function(req, res){ res.sendFile('img.jpg', {root: __dirname}); };

When i starts a dev-server and then implement the endpoint. Its going works... Thanks 👍 👍 👍

[muratcorlu]

I just added 2 new helper functions(type and file) and published with v1.8.0. So Your custom response can be that much simple for this use case:

const { type, file } = require('connect-api-mocker/helpers');
 
// Assuming a file named GET.png exists next to this file
const filePath = path.join(__dirname, './img.jpg');
 
module.exports = [type('image/jpeg'), file(filePath)];

But still, I want to implement the idea that I mentioned in first comment. I think it would be more elegant solution.

[WoyKambas]

Yes sure. But the issue is coming again when the endpoint (to get images) is not found. And redirected to webpack-dev-server proxy. I think this is problem of proxy or my bad webpack configuration (Iam new to webpack :( )