mirador/__tests__/src/components/IIIFDropTarget.test.jsx at 06da4012ae47e59bc7ea4548409e2783cde3e172 · ProjectMirador/mirador · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
import { handleDrop } from '../../../src/components/IIIFDropTarget';

const monitor = vi.fn();

// jsdom doesn't load images, so we mock an implementation
vi.mock('../../../src/lib/readImageMetadata', () => ({
  readImageMetadata: file => Promise.resolve({
    height: 105, name: file.name, type: file.type, url: 'data:blah', width: 100,
  }),
}));

describe('handleDrop', () => {
  let onDrop;

  beforeEach(() => {
    onDrop = vi.fn();
  });

  it('handles url lists', () => {
    const item = {
      urls: [
        'http://example.com/?manifest=http://example.com/iiif/1.json',
        'http://example.com/?manifest=http://example.com/iiif/2.json&canvas=url',
      ],
    };
    const props = { onDrop };

    handleDrop(item, monitor, props);
    expect(onDrop).toHaveBeenCalledWith({ canvasId: null, manifestId: 'http://example.com/iiif/1.json' }, props, monitor);
    expect(onDrop).toHaveBeenCalledWith({ canvasId: 'url', manifestId: 'http://example.com/iiif/2.json' }, props, monitor);
  });

  it('handles manifests', () => {
    const file = new File(['{ "data": 123 }'], 'manifest.json', { type: 'application/json' });
    const item = {
      files: [
        file,
      ],
    };

    const props = { onDrop };

    const promise = handleDrop(item, monitor, props);

    return promise.then(() => {
      expect(onDrop).toHaveBeenCalledWith(
        expect.objectContaining({ manifestJson: '{ "data": 123 }' }),
        props,
        monitor,
      );
    });
  });

  it('handles images by fabricating a temporary manifest', () => {
    const file = new File(['image data'], 'image.gif', { type: 'image/gif' });
    const item = {
      files: [
        file,
      ],
    };

    const props = { onDrop };

    const promise = handleDrop(item, monitor, props);

    return promise.then(() => {
      expect(onDrop).toHaveBeenCalledWith(
        expect.objectContaining({
          manifestJson: expect.objectContaining({
            items: [
              expect.objectContaining({
                items: [
                  expect.objectContaining({
                    items: [
                      expect.objectContaining({
                        body: {
                          format: 'image/gif', id: 'data:blah', type: 'Image',
                        },
                        height: 105,
                        width: 100,
                      }),
                    ],
                    type: 'AnnotationPage',
                  }),
                ],
                type: 'Canvas',
              }),
            ],
            type: 'Manifest',
          }),
        }),
        props,
        monitor,
      );
    });
  });

  it('handles HTML drops by extracting a manifest URL from a link', () => {
    // This is an example taken from the wild because it contains nested
    // links to various sources.
    const htmlString = `
      <html>
        <body>
          <a href="https://iiifviewer.universiteitleiden.nl/?manifest=https://digitalcollections.universiteitleiden.nl/iiif_manifest/item%253A1607191/manifest&canvas=https%3A//digitalcollections.universiteitleiden.nl/iiif_manifest/item%3A1607203/canvas/default" target="_blank" title="Drag and drop to a IIIF-compliant viewer."><div class="iiifbutton" data-manifest="https://digitalcollections.universiteitleiden.nl/iiif_manifest/item%3A1607191/manifest"><img src="https://digitalcollections.universiteitleiden.nl/sites/all/modules/custom/islandora_iiif_manifests/images/iiif-logo.svg" alt=""><div class="iiiftext">Advanced Viewer</div></div></a>
        </body>
      </html>
    `;

    const item = {
      html: htmlString,
    };

    const props = { onDrop };

    handleDrop(item, monitor, props);

    expect(onDrop).toHaveBeenCalledWith(
      { canvasId: 'https://digitalcollections.universiteitleiden.nl/iiif_manifest/item:1607203/canvas/default', manifestId: 'https://digitalcollections.universiteitleiden.nl/iiif_manifest/item%3A1607191/manifest' },
      props,
      monitor,
    );
  });

  it('warns when dropped URL is invalid', () => {
    const item = {
      urls: ['not a valid url'],
    };
    const props = { onDrop };

    const consoleSpy = vi.spyOn(console, 'warn').mockImplementation(() => {});

    handleDrop(item, monitor, props);

    expect(consoleSpy).toHaveBeenCalledWith('Invalid URL:', 'not a valid url');
    expect(onDrop).not.toHaveBeenCalled();

    consoleSpy.mockRestore();
  });
});