react-spatial/components/CanvasSaveButton/CanvasSaveButton.test.js

Components to build React map apps.

import 'jest-canvas-mock';
import React from 'react';
import renderer from 'react-test-renderer';
import { configure, shallow } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';
import Map from 'ol/Map';
import View from 'ol/View';
import { TiImage } from 'react-icons/ti';
import RenderEvent from 'ol/render/Event';
import CanvasSaveButton from './CanvasSaveButton';

configure({ adapter: new Adapter() });

describe('CanvasSaveButton', function () {
  var olMap;
  var conf = {
    title: 'Karte als Bild speichern.',
    icon: React.createElement( TiImage, { focusable: false }),
    className: 'ta-example',
    saveFormat: 'image/jpeg',
  };

  beforeEach(function () {
    var target = document.createElement('div');
    document.body.appendChild(target);
    target.style.width = '100px';
    target.style.height = '100px';
    olMap = new Map({
      target: target,
      controls: [],
      view: new View({
        center: [0, 0],
        zoom: 0,
      }),
    });
    olMap.getView().setCenter([1, 1]);
  });

  afterEach(function () {
    if (olMap.getTargetElement()) {
      document.body.removeChild(olMap.getTargetElement());
    }
    olMap.setTarget(null);
  });

  test('should match snapshot.', function () {
    var component = renderer.create(
      React.createElement( CanvasSaveButton, {
        title: conf.title, saveFormat: conf.saveFormat, map: olMap },
        conf.icon
      )
    );
    var tree = component.toJSON();
    expect(tree).toMatchSnapshot();
  });

  test('should call onSaveBefore then download then onSaveEnd function on click.', async function (done) {
    var saveStart = jest.fn(function (m) {
      return Promise.resolve(m);
    });
    var saveEnd = jest.fn();
    var wrapper = shallow(
      React.createElement( CanvasSaveButton, {
        className: "ta-example", title: conf.title, map: olMap, saveFormat: conf.saveFormat, onSaveStart: saveStart, onSaveEnd: saveEnd, extraData: {
          copyright: {
            text: function () {
              return (
                'contributors, SRTM | map style: © OpenTopoMap (CC-BY-SA)' +
                'contributors, SRTM | map style: © OpenTopoMap (CC-BY-SA)' +
                'contributors, SRTM | map style: © OpenTopoMap (CC-BY-SA)' +
                'contributors, SRTM | map style: © OpenTopoMap (CC-BY-SA)' +
                'contributors, SRTM | map style: © OpenTopoMap (CC-BY-SA)' +
                'contributors, SRTM | map style: © OpenTopoMap (CC-BY-SA)' +
                'contributors, SRTM | map style: © OpenTopoMap (CC-BY-SA)'
              );
            },
          },
        } },
        conf.icon
      )
    );
    var link = document.createElement('a');
    link.click = jest.fn();
    var div = document.createElement('div');
    var canvas = document.createElement('canvas');
    canvas.toBlob = jest.fn(function (callback) { return callback(); });
    global.URL.createObjectURL = jest.fn(function () { return 'fooblob'; });
    // We use a spy here to be able to correctly restore the initial function
    var spy3 = jest
      .spyOn(global.document, 'createElement')
      .mockImplementation(function (elt) {
        if (elt === 'canvas') {
          return canvas;
        }
        if (elt === 'div') {
          return div;
        }
        if (elt === 'a') {
          return link;
        }
        return {};
      });
    var spy = jest.spyOn(CanvasSaveButton.prototype, 'createCanvasImage');
    var spy2 = jest.spyOn(CanvasSaveButton.prototype, 'downloadCanvasImage');
    var spy4 = jest.spyOn(CanvasSaveButton.prototype, 'splitCopyrightLine');
    jest
      .spyOn(olMap.getTargetElement(), 'getElementsByTagName')
      .mockReturnValue([canvas]);
    await wrapper.find('.ta-example').simulate('click');
    await olMap.dispatchEvent(
      new RenderEvent('rendercomplete', undefined, undefined, {
        canvas: canvas,
      })
    );
    await window.setTimeout(function () {
      expect(spy).toHaveBeenCalledTimes(1);
      expect(saveStart).toHaveBeenCalledTimes(1);
      expect(saveEnd).toHaveBeenCalledTimes(1);
      expect(spy2.mock.calls[0][0]).toBe(canvas);
      expect(spy2.mock.calls[0][0].toBlob).toHaveBeenCalledTimes(1);
      expect(link.href).toBe('http://localhost/fooblob');
      expect(link.download).toBe('.jpg');
      expect(link.click).toHaveBeenCalledTimes(1);
      expect(spy4).toHaveBeenCalledTimes(1);
      spy.mockRestore();
      spy2.mockRestore();
      spy3.mockRestore();
      spy4.mockRestore();
      done();
    });
  });

  test('stops click event propagation on ie.', function () {
    var wrapper = shallow(
      React.createElement( CanvasSaveButton, { className: "ta-example", title: conf.title, map: olMap },
        conf.icon
      )
    );

    var evt = {
      stopPropagation: jest.fn(),
      preventDefault: jest.fn(),
    };
    window.navigator.msSaveBlob = true;

    var canvas = document.createElement('canvas');
    var p = new Promise(function (resolve) {
      resolve(canvas);
    });
    jest
      .spyOn(CanvasSaveButton.prototype, 'createCanvasImage')
      .mockReturnValue(p);

    wrapper.find('.ta-example').simulate('click', evt);
    expect(evt.stopPropagation).toHaveBeenCalledTimes(1);
    expect(evt.preventDefault).toHaveBeenCalledTimes(1);

    window.navigator.msSaveBlob = false;
  });
});

//# sourceMappingURL=CanvasSaveButton.test.js.map