I have a code which is downloading the zip as arraybuffer and subsequently uses admZip to get the files inside. I am trying to unit test a method which calls this method and got stuck around mocking the zip download call.
The code is -
export const downloadZip = async (zipUrl: string): Promise<Buffer> => {
const axiosInstance = axios.create({ headers: getHeaders() });
const body = await axiosInstance.get(zipUrl, {
responseType: 'arraybuffer'
});
return body.data
}
Does anyone have any prior experience on this and can help?
This may help.
const mock = new MockAdapter(axiosInstance);
mock.onGet("https://zip_url").reply(200, {data: "zipData"});
await expect(AxiosClient().get("https://zip_url")).tobe({data: "zipData"})
Related
export const getCharactersAsync = createAsyncThunk('getCharactersAsync', async (data) => {
const response = await axios.get('users', { params: { limit: data.limit } });
return response.data;
});
this code block allows me to control limit attribute.
export const getCharactersAsync = createAsyncThunk('getCharactersAsync', async (data) => {
const params = new FormData();
// const params = new URLSearchParams();
params.append('limit', data.limit);
const response = await axios.get('users', params);
console.log(response);
return response.data;
});
However I cannot control limit with using params.append. I tried URLSearchParams instead of FormData but still cannot manipulate limit attribute of the response. Why they differ from each other?
EDIT: This question has missleading information. I should have mention that i am using react-native. I found that react native doesn't fully support everything the web supports. So i need to install package called react-native-url-polyfill.Here is a github issues link
https://github.com/facebook/react-native/issues/23922#issuecomment-648096619
docs
params are the URL parameters to be sent with the request. Must be a plain object or a URLSearchParams object
It can't be FormData
Solution
You wanted to use { params }, not params
export const getCharactersAsync = createAsyncThunk('getCharactersAsync', async (data) => {
const params = new URLSearchParams();
params.append('limit', data.limit);
const response = await axios.get('users', { params });
console.log(response);
return response.data;
});
I have multiple url's, pointing to different files. I want to be able to download them just by using the url string automatically with Javascript code, instead of manually going to the link and downloading them.
I have searched a lot of other answers on stackoverflow, few suggest creating an anchor tag in document body, but I am doing everything on backend not creating an index.html
edit: I am using next where for an api end point I am getting post requests, each which contains URL for a file which I have to download.
This is how I expect my POST request to come:
I want to be able to do something like this (in nextjs):
export default async function handler (req, res) {
if(req.method === "POST") {
let path = "./downloads/file"
await download(req.body.url, path)
}
}
Is the download function possible, if so please help me with the implementation or provide any helpful packages to do the same.
You can use HTTP clients like Axios. It makes it easy to send async HTTP requests to REST endpoints and perform CRUD operations.
You can refer to the snippet below that I have used in my previous projects for file downloads. I guess this is what you are looking for:
const fs = require('fs')
const Path = require('path')
const axios = require('axios')
const crypto = require('crypto')
async function downloadFile(url) {
const uuid = crypto.randomUUID()
const path = Path.resolve("./utils", "uploads", uuid)
const writer = fs.createWriteStream(path)
const response = await axios({
url,
method: 'GET',
responseType: 'stream'
})
response.data.pipe(writer)
return new Promise((resolve, reject) => {
writer.on('error', reject)
response.data.on('end', () => {
resolve(uuid)
})
})
}
Hope this helps, and don't forget to check out their documentation. Here is the
link.
Download by get request
const downloadFabricFormat = async () => {
try{
await axios({
url: '/api/fabric/fabric_excel_format/',
method: 'GET',
responseType: 'blob',
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'Fabric Excel Format.xlsx');
document.body.appendChild(link);
link.click();
});
} catch(error){
console.log(error)
}
};
Download by post request
const postFabricQRCode = async (values) => {
try{
await axios({
url: `/api/qr/code/download/`,
method: 'POST',
responseType: 'blob',
data: values,
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'fabric-qr-code.pdf');
document.body.appendChild(link);
link.click();
});
} catch(error){
console.log(error)
}
};
Change file type here. link.setAttribute('download', 'Fabric Excel Format.xlsx');
Also manage your back-end yourself.
So the API's response contains data property which should contain the .zip file that i need. Its written in a format i do not understand.
The format:
I tried using .blob() as referenced in similar questions here on Stackoverflow, but it doesn't seem to work.
The ideal solution is this: when client presses the button, he should be prompted to download said .zip file (the one from the HTTP response) locally. I'm using axios and the request type is PUT.
My code example so far:
const exportCards = () => {
axios
.put(url, {
ids: ids,
})
.then((res) => {
return res.data.blob();
})
.then((blob) => {
var file = window.URL.createObjectURL(blob);
window.location.assign(file);
})
.catch((e) => console.log(e));
};
What I wanted:
send files of any formats from the back-end to the front-end
My tools:
axios, express, saveAs
The problem I faced with:
Unable to download zip file using axios
https://github.com/eligrey/FileSaver.js/issues/156
https://github.com/axios/axios/issues/448
Nothing helped me, probably because I did something wrong. But here is a simple and quick solution that I came up with:
//BE
const filename = "my-file-name.json";
const zip = new AdmZip();
zip.addFile(filename, body);
const content = zip.toBuffer();
res.set({
"Content-Length": Buffer.byteLength(content), //I'm not sure if this is necessary, but it's better to let it be :-)
"Content-Type": "text/plain",
"Content-Disposition": `attachment; filename=${filename}.${format}`,
});
res.status(200).send(content.toString("hex")); //my solution to the problem
//FE
const { headers, data } = await axios.post(myEndpoint);
const headerLine = headers["content-disposition"];
const filename = headerLine.replace(/[\w; ]+filename=/g, "");
const content = Buffer.from(data, "hex");
const blob = new Blob([content], { type: "application/zip" });
saveAs(blob, filename); //file-saver npm package
a tag has download attribute, in .then you can try something like that
const url = new Blob([response.data],{type:'application/zip'});
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.zip'); //set download attribute to link
document.body.appendChild(link);
link.click(); // this will download file.zip
I would suggest fetch over axios in concern of zip file because sometimes the response in axios request is not accurate and you might fall into currupted zip file while downloading, the best might be using a package called file-saver and fetch. I am posting this answer to help the developers to grab the concept only, the code is tested in React.
package file-saver:https://www.npmjs.com/package/file-saver
Now make any function according to your choice in react, I am assuming functional component so will write method according to functional component syntax.
note before using saveAs function you need to import from the installed package file-saver.
import { saveAs } from 'file-saver';
const downloadZipFileFromLaravel=()=>{
fetch(`your url`)
.then(res => res.blob())
.then(blob => saveAs(blob, 'Auto Photos.zip')) // saveAs is a function from the file-saver package.
.catch((err) => {
console.log(err.message);
});
}
at the end you need to connect the function with a button with onClick.
example
<button onClick={()=>downloadZipFileFromLaravel()}> </button>
Note: usage of file saver in pure javascript, you can check this:
How to use filesaver.js
For more information you can see the below discussion:
Reference: https://github.com/eligrey/FileSaver.js/issues/156
Your problem is that you didn't explicitly specify the response type in your PUT request. This should work:
const exportCards = () => {
axios
.put(url, {
ids: ids,
}, {
responseType: 'blob'
})
.then((res) => { // Now 'res.data' is Blob, not a string
var file = window.URL.createObjectURL(res.data);
window.location.assign(file);
})
.catch((e) => console.log(e));
};
Firstly, I'm a frontend developer so I'm sorry if I use wrong terms in my explanations.
In my company, we are actually building 1 web app and 2 API apps. So the users use the web app which talks to the first API which talks to the second API.
Here, we are in the first API, in the server.js file:
server.js
---------
var app = express();
const cats = require("./api/cats");
app.get("/animals/cats", cats.listTheCats); // listTheCats() returns an array of cats
In cats.js, we can see with listTheCats() we are sending another request to the second API:
cats.js
-------
const listTheCats = (req, res) => {
axios({
method: "get",
url: "http://second-api-url.com/animals/cats",
params: req.query,
})
.then((ans) => {
res.status(ans.data.status).json(ans.data.data);
})
.catch((err) => {
console.log(err);
res.sendStatus(503);
});
};
module.exports = listTheCats;
The code above works fine on the web app. But now, in the first api, in another file called "cuteAnimals.js" I need to call listTheCats(). So I tried to do this but it doesn't work:
cuteAnimals.js
--------------
const { listTheCats } = require("./cats");
const fetchCats = async () => {
const params = {
type: "cute",
};
const cuteCats = await axios.get(`animals/cats`, {
params,
});
// or const cuteCats = await listTheCats(params);
console.log("cuteCats", cuteCats);
};
fetchCats();
This is the error: "Request failed with status code 400"
In cuteAnimals.js, is it right to use axios from a file to another file of the same server project?
You need to export the function in order to use it in another file, you can do it simply by writing this line at the end of cats.js
module.exports = listTheCats
I am currently realized I shouldn't be calling api straight through network request while using jestjs to check for api.
I have been looking at some posts + youtube tutorials such as https://www.leighhalliday.com/mocking-axios-in-jest-testing-async-functions Mock inner axios.create() but still a bit confused and now sure how to get this to work.
I created a registration api and wanted to do test on it, and after reading the mockup documentation and so on. I have something like...this as my folder structure
this is how my base_axios/index.js looks like, BASE_URL is just something like http://localhost:3000
const axios = require('axios');
const { BASE_URL } = require('../base');
const baseOption = {
// without adding this, will not be able to get axios response status
validateStatus: function (status) {
return status >= 200 && status <= 503;
},
baseURL: BASE_URL,
headers: { 'Content-Type': 'application/json' },
};
module.exports = axios.create(baseOption);
apis/auth.js
const request = require('./base_axios');
module.exports = {
register: data => request.post('/auth/register', data),
};
mocks/axios.js
const mockAxios = jest.genMockFromModule('axios');
mockAxios.create = jest.fn(() => mockAxios);
module.exports = mockAxios;
routes/auth/register.js
const Auth = require('../../apis/auth');
const mockAxios = require('axios');
test('calls axios for registration', async () => {
// this should give me an error and show which api has been called
expect(mockAxios.post).toHaveBeenCalledWith('what is the api');
const response = await Auth.register();
console.log(response, 'response'); // response here gives me undefined
});
I am not getting which api call is being called and te response gives me undefined
also getting this error from jest expect(jest.fn()).toHaveBeenCalledWith(...expected)
Thanks in advance for anyone with advice and suggestions.
PS
jest.config.js
module.exports = {
clearMocks: true,
coverageDirectory: "coverage",
// The test environment that will be used for testing
testEnvironment: "node",
};
You can mock axios and an implemtation for it as below:
jest.spyOn(axios, 'post').mockImplementation();
For an example:
test('calls axios for registration', async () => {
const mockDataRequest = {};
const mockPostSpy = jest
.spyOn(axios, 'post')
.mockImplementation(() => {
return new Promise((resolve) => {
return resolve({
data: {},
});
});
});
expect(mockPostSpy).toHaveBeenCalledTimes(1);
expect(mockPostSpy).toBeCalledWith(
`/auth/register`,
expect.objectContaining(mockDataRequest)
);
});