DragEvent polyfill tests

drag-event-polyfill-tests.spec.ts

/* data-transfer-item-list.spec.ts */

import invariant from 'tiny-invariant';

test('add(data, format) should add a string item', done => {
  const list = new DataTransferItemList();

  list.add('Hello world', 'text/plain');

  const item: DataTransferItem = list[0];
  expect(item.kind).toBe('string');
  expect(item.type).toBe('text/plain');
  item.getAsString(value => {
    expect(value).toBe('Hello world');
    done();
  });
});

test('add(data, format) should throw a DOMException if there is already an added type', done => {
  const list = new DataTransferItemList();

  list.add('First', 'text/plain');

  const item: DataTransferItem = list[0];
  expect(item.kind).toBe('string');
  expect(item.type).toBe('text/plain');

  expect(() => list.add('Second', 'text/plain')).toThrow(DOMException);

  item.getAsString(value => {
    expect(value).toBe('First');
    done();
  });
});

test('add(data, format) format is converted to lower case', done => {
  const list = new DataTransferItemList();

  list.add('First', 'My-Type');

  const item: DataTransferItem = list[0];
  expect(item.kind).toBe('string');
  expect(item.type).toBe('my-type');

  item.getAsString(value => {
    expect(value).toBe('First');
    done();
  });
});

test('add(data, format) should return the item', done => {
  const list = new DataTransferItemList();

  const item: DataTransferItem | null = list.add('First', 'My-Type');
  invariant(item);

  expect(item.kind).toBe('string');
  expect(item.type).toBe('my-type');

  item.getAsString(value => {
    expect(value).toBe('First');
    done();
  });
});

test('add(File) should add a file item', () => {
  const list = new DataTransferItemList();
  const file = new File(['🕺💃'], 'dance.png', {
    type: 'image/png',
  });

  list.add(file);
  const item: DataTransferItem = list[0];
  const result = item.getAsFile();

  expect(item.kind).toBe('file');
  expect(item.type).toBe('image/png');
  expect(result).toBe(file);
});

test('add(File) can add multiple files', () => {
  const list = new DataTransferItemList();
  const file1 = new File(['🕺💃'], '1.png', {
    type: 'image/png',
  });
  const file2 = new File(['🕺💃'], '2.png', {
    type: 'image/png',
  });
  list.add(file1);
  list.add(file2);

  expect(list.length).toBe(2);

  expect(list[0].getAsFile()).toBe(file1);
  expect(list[1].getAsFile()).toBe(file2);
});

test('add(File) should return the item', () => {
  const list = new DataTransferItemList();
  const file = new File(['🕺💃'], 'dance.png', {
    type: 'image/png',
  });

  const item: DataTransferItem | null = list.add(file);
  invariant(item);

  expect(item.kind).toBe('file');
  expect(item.type).toBe('image/png');
  expect(item.getAsFile()).toBe(file);
});
test('adding multiple string items of the same type should throw', () => {
  const list = new DataTransferItemList();

  list.add('Hello world', 'text/plain');

  expect(() => list.add('Hi', 'text/plain')).toThrow();
});

test('A DataTransferItemList should operate like an array', () => {
  const list = new DataTransferItemList();

  list.add('Hello world', 'text/plain');
  list.add('<h1>hi</h1>', 'text/html');

  expect(list.length).toBe(2);
  expect(list[0]?.type).toBe('text/plain');
  expect(list[1]?.type).toBe('text/html');
});

test('clear() should remove all items (including files)', () => {
  const list = new DataTransferItemList();

  list.add('Hello world', 'text/plain');
  list.add(
    new File(['🕺💃'], 'dance.png', {
      type: 'image/png',
    }),
  );

  expect(list.length).toBe(2);

  list.clear();
  expect(list.length).toBe(0);
});

test('remove(index) should remove an item at an index', done => {
  const list = new DataTransferItemList();

  list.add('Hello world', 'text/plain');
  list.add(
    new File(['🕺💃'], 'dance.png', {
      type: 'image/png',
    }),
  );

  expect(list.length).toBe(2);

  list.remove(1);

  expect(list.length).toBe(1);
  const item: DataTransferItem = list[0];
  expect(item.kind).toBe('string');
  expect(item.type).toBe('text/plain');
  item.getAsString(value => {
    expect(value).toBe('Hello world');
    done();
  });
});

/* data-transfer.spec.ts */

test('types() should return a list of item types', () => {
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add('Hello world', 'text/plain');
  dataTransfer.items.add('<h1>hello</h1>', 'text/html');

  expect(dataTransfer.items.length).toBe(2);

  expect(Array.from(dataTransfer.types).sort()).toEqual(
    ['text/plain', 'text/html'].sort(),
  );
});

test('types() should return a unique type list', () => {
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add('Hello world', 'text/plain');
  dataTransfer.items.add(
    new File(['🕺💃'], '1.png', {
      type: 'image/png',
    }),
  );
  dataTransfer.items.add(
    new File(['🕺💃'], '2.png', {
      type: 'image/jpg',
    }),
  );

  // 2 files, 1 plain text
  expect(dataTransfer.items.length).toBe(3);
  expect(dataTransfer.types.length).toBe(2);

  expect(Array.from(dataTransfer.types).sort()).toEqual(
    ['text/plain', 'Files'].sort(),
  );
});

test('clearData(format) should remove any matching items (single item match)', done => {
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add('Hello world', 'text/plain');
  dataTransfer.items.add('<h1>hello</h1>', 'text/html');

  expect(dataTransfer.items.length).toBe(2);

  dataTransfer.clearData('text/plain');

  expect(dataTransfer.items.length).toBe(1);
  expect(Array.from(dataTransfer.types).sort()).toEqual(['text/html']);
  const item: DataTransferItem = dataTransfer.items[0];
  expect(item.kind).toBe('string');
  expect(item.type).toBe('text/html');
  item.getAsString(value => {
    expect(value).toBe('<h1>hello</h1>');
    done();
  });
});

test('clearData(format) should remove nothing if there is no matching item', () => {
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add('<h1>hello</h1>', 'text/html');

  expect(dataTransfer.items.length).toBe(1);

  dataTransfer.clearData('text/plain');

  expect(dataTransfer.items.length).toBe(1);
  expect(Array.from(dataTransfer.types).sort()).toEqual(['text/html']);
});

test('clearData("Files") should not remove files', () => {
  const dataTransfer = new DataTransfer();
  const file = new File(['🕺💃'], '1.png', {
    type: 'image/png',
  });
  dataTransfer.items.add(file);

  expect(dataTransfer.items.length).toBe(1);

  dataTransfer.clearData();

  expect(dataTransfer.items.length).toBe(1);
  expect(Array.from(dataTransfer.types).sort()).toEqual(['Files']);
});

test('clearData() should remove all non-file items', () => {
  const dataTransfer = new DataTransfer();
  const file = new File(['🕺💃'], '1.png', {
    type: 'image/png',
  });
  dataTransfer.items.add('Hello world', 'text/plain');
  dataTransfer.items.add(file);
  dataTransfer.items.add('<h1>hello</h1>', 'text/html');

  expect(dataTransfer.items.length).toBe(3);

  dataTransfer.clearData();

  expect(dataTransfer.items.length).toBe(1);
  expect(Array.from(dataTransfer.types).sort()).toEqual(['Files']);

  const item: DataTransferItem = dataTransfer.items[0];
  const result = item.getAsFile();
  expect(item.kind).toBe('file');
  expect(item.type).toBe('image/png');
  expect(result).toBe(file);
});

test('clearData("text") should clear a "text/plain" item', () => {
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add('Hello world', 'text/plain');
  dataTransfer.items.add('<h1>hello</h1>', 'text/html');

  dataTransfer.clearData('text');

  expect(dataTransfer.items.length).toBe(1);
  expect(Array.from(dataTransfer.types).sort()).toEqual(['text/html']);
});

test('clearData("url") should clear a "text/uri-list" item', () => {
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add('https://hello-world', 'text/uri-list');
  dataTransfer.items.add('<h1>hello</h1>', 'text/html');

  dataTransfer.clearData('url');

  expect(dataTransfer.items.length).toBe(1);
  expect(Array.from(dataTransfer.types).sort()).toEqual(['text/html']);
});

test('clearData(format) should convert the format to lowercase', () => {
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add('Hello world', 'My-Type');

  expect(dataTransfer.items[0]?.type).toBe('my-type');

  dataTransfer.clearData('My-Type');

  expect(dataTransfer.items.length).toBe(0);
});

test('getData(format) should return an item of matching format', () => {
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add('Hello world', 'text/plain');
  dataTransfer.items.add('<h1>hello</h1>', 'text/html');

  expect(dataTransfer.getData('text/plain')).toEqual('Hello world');
  expect(dataTransfer.getData('text/html')).toEqual('<h1>hello</h1>');
});

test('getData(format) should return "" when there is no match', () => {
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add('<h1>hello</h1>', 'text/html');

  expect(dataTransfer.getData('text/plain')).toEqual('');
});

test('getData("Files") should return "" even if there are file items', () => {
  const dataTransfer = new DataTransfer();
  const file = new File(['🕺💃'], '1.png', {
    type: 'image/png',
  });
  dataTransfer.items.add(file);

  expect(dataTransfer.items.length).toBe(1);
  expect(Array.from(dataTransfer.types).sort()).toEqual(['Files']);

  expect(dataTransfer.getData('Files')).toEqual('');
});

test('getData("text") should return a "text/plain" entry', () => {
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add('Hi', 'text/plain');

  expect(dataTransfer.getData('text')).toEqual('Hi');
});

test('getData("url") should return a "text/uri-list" entry', () => {
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add('https://atlassian.design/', 'text/uri-list');

  expect(dataTransfer.getData('url')).toEqual('https://atlassian.design/');
});

test('getData("url") should only return the first url', () => {
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add(
    '#first\r\nhttps://atlassian.design/\r\n#second\r\nhttps://www.atlassian.com/\r\n#third',
    'text/uri-list',
  );

  expect(dataTransfer.getData('url')).toEqual('https://atlassian.design/');
});

test('getData(format) should convert the format to lowercase for lookup', () => {
  const dataTransfer = new DataTransfer();
  dataTransfer.items.add('Hello world', 'My-Type');

  // stored as a lowercase type
  expect(dataTransfer.items[0]?.type).toBe('my-type');

  expect(dataTransfer.getData('My-Type')).toEqual('Hello world');
});

test('setData(format, data) should add a relevant item', done => {
  const dataTransfer = new DataTransfer();
  dataTransfer.setData('text/plain', 'Hello world');

  expect(dataTransfer.items.length).toBe(1);
  const item = dataTransfer.items[0];
  expect(item.kind).toBe('string');
  expect(item.type).toBe('text/plain');
  item.getAsString(value => {
    expect(value).toBe('Hello world');
    done();
  });
});

test('setData(format, data) should convert the format to lower case', done => {
  const dataTransfer = new DataTransfer();
  dataTransfer.setData('My-Type', 'Hello world');

  expect(dataTransfer.items.length).toBe(1);
  const item = dataTransfer.items[0];
  expect(item.kind).toBe('string');
  expect(item.type).toBe('my-type');
  item.getAsString(value => {
    expect(value).toBe('Hello world');
    done();
  });
});

test('setData("text", data) should convert the format to lower "text/plain"', done => {
  const dataTransfer = new DataTransfer();
  dataTransfer.setData('text', 'Hello world');

  expect(dataTransfer.items.length).toBe(1);
  const item = dataTransfer.items[0];
  expect(item.kind).toBe('string');
  expect(item.type).toBe('text/plain');
  item.getAsString(value => {
    expect(value).toBe('Hello world');
    done();
  });
});

test('setData("url", data) should convert the format to lower "text/uri-list"', done => {
  const dataTransfer = new DataTransfer();
  dataTransfer.setData('text/uri-list', 'https://atlassian.design/');

  expect(dataTransfer.items.length).toBe(1);
  const item = dataTransfer.items[0];
  expect(item.kind).toBe('string');
  expect(item.type).toBe('text/uri-list');
  item.getAsString(value => {
    expect(value).toBe('https://atlassian.design/');
    done();
  });
});

test('.files should return all attached files', () => {
  const dataTransfer = new DataTransfer();
  const file1 = new File(['🕺💃'], '1.png', {
    type: 'image/png',
  });
  const file2 = new File(['🕺💃'], '2.png', {
    type: 'image/png',
  });
  dataTransfer.items.add(file1);
  dataTransfer.items.add(file2);
  dataTransfer.setData('text/plain', 'Hello world');

  expect(dataTransfer.items.length).toBe(3);

  // Close enough to a `FileList`
  expect(dataTransfer.files).toEqual({
    0: file1,
    1: file2,
  });
});

// Needed for file to be treated as a module
export {};