Unit test for javascript download function

Question

I need to write a unit test for below function. Currently just checking how many times appendChild/removeChild was called, but I'm thinking that's not the best way to test this. Apart from that - no idea how the unit test should look like, as I'm new to testing. Appreciate any help on this!

export default function download(blobUrl, fileName) { const link = document.createElement('a'); link.setAttribute('href', blobUrl); link.setAttribute('download', `${fileName}.pdf`); link.style.display = 'none'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }

It's a bit hard to write a blackbox test for this, though, as there might be different techniques to trigger a download. So, if you've mocked the document object, then you can check if a link is added pointing to the given file and even if the link was clicked. — VLAZ
– VLAZ, Commented Oct 18, 2019 at 6:43
@VLAZ how can I actually check that link if it gets removed (end of the download func)? — mcmxc
– mcmxc, Commented Oct 18, 2019 at 7:24
If you've mocked document you should be able to either disable removing (just check if it's called) or otherwise keep the node added even if it's removed. Remember that a mocked document will also be able to return a mocked <a> node. — VLAZ
– VLAZ, Commented Oct 18, 2019 at 7:42

Lin Du · Accepted Answer · 2019-10-21 05:32:34Z

Here is my solution:

index.ts:

export default function download(blobUrl, fileName) { const link = document.createElement('a'); link.setAttribute('href', blobUrl); link.setAttribute('download', `${fileName}.pdf`); link.style.display = 'none'; document.body.appendChild(link); link.click(); document.body.removeChild(link); }

index.spec.ts:

import download from './'; describe('download', () => { test('should download correctly', () => { const mLink = { href: '', click: jest.fn(), download: '', style: { display: '' }, setAttribute: jest.fn() } as any; const createElementSpy = jest.spyOn(document, 'createElement').mockReturnValueOnce(mLink); document.body.appendChild = jest.fn(); document.body.removeChild = jest.fn(); download('blobUrl', 'go'); expect(createElementSpy).toBeCalledWith('a'); expect(mLink.setAttribute.mock.calls.length).toBe(2); expect(mLink.setAttribute.mock.calls[0]).toEqual(['href', 'blobUrl']); expect(mLink.setAttribute.mock.calls[1]).toEqual(['download', 'go.pdf']); expect(mLink.style.display).toBe('none'); expect(document.body.appendChild).toBeCalledWith(mLink); expect(mLink.click).toBeCalled(); expect(document.body.removeChild).toBeCalledWith(mLink); }); });

Unit test result with 100% coverage:

 PASS src/stackoverflow/58445250/index.spec.ts download ✓ should download correctly (8ms) ----------|----------|----------|----------|----------|-------------------| File | % Stmts | % Branch | % Funcs | % Lines | Uncovered Line #s | ----------|----------|----------|----------|----------|-------------------| All files | 100 | 100 | 100 | 100 | | index.ts | 100 | 100 | 100 | 100 | | ----------|----------|----------|----------|----------|-------------------| Test Suites: 1 passed, 1 total Tests: 1 passed, 1 total Snapshots: 0 total Time: 4.571s, estimated 8s

Source code: https://github.com/mrdulin/jest-codelab/tree/master/src/stackoverflow/58445250

Collectives™ on Stack Overflow

Unit test for javascript download function

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related