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);
}

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);
}

• javascript
• unit-testing
• download
• jestjs

• 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 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 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 Commented Oct 18, 2019 at 7:42

1 Answer 1

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./mrdulin/jest-codelab/tree/master/src/stackoverflow/58445250