Jasmine 单元测试文件大小与 TypeScript in Angular 中

Question

搜索最佳实践如何在输入类型="文件"更改事件上测试文件大小。

现在我的测试规范如下所示：

it('attach file with too large size', () => {
  const file: File = {
    name: 'filename',
    type: 'image/png',
    size: 8242880,
    lastModified: 1,
    lastModifiedDate: new Date(),
    webkitRelativePath: '',
    msClose: () => {},
    msDetachStream: () => {},
    slice: (): Blob => null,
  };
  const event = { target: { files: [file] } };
  component.onFileChange(event); // file validation happens into it too
  const error = control.getError('file_size');
  expect(error).toBeTruthy();
});

有没有更好的方法如何使用打字脚本设置文件大小属性？ 当我尝试将size属性直接设置为 File 对象时，这是不允许的size因为属性read-only。

const file = new File([''], 'filename', { type: 'image/png' });
file.size = 8242880; // TS error

我目前的方式如何模拟文件对象，我需要为我定义所有文件对象属性，看起来不是很漂亮，但找不到更好的方法。 有什么想法吗？

Answer 1

您可以使用 Object.defineProperty 覆盖 size 属性。

/** Creates a "1TB" file given the file name. */
function getHugeFile(name: string) : File {
  const file = new File([''], name);
  Object.defineProperty(
      file, 'size', {value: Math.pow(1024, 4), writable: false});
  return file;
}

Answer 2

如果你想解析TS error，这里是方法，

interface IFile extends File {
    size: number;
}
const file: IFile = new File([''], 'filename', { type: 'image/png' });
file.size = 8242880; // Works..

Answer 3

我是如何解决的：

export const createFile = (params?: any): File  => {
  const file = {
    name: 'filename',
    type: 'image/png',
    size: 123,
    lastModified: 1,
    lastModifiedDate: new Date(),
    webkitRelativePath: '',
    msClose: () => {},
    msDetachStream: () => {},
    slice: (): Blob => null,
  };
  return {
    ...file,
    ...params,
  };
};

并在需要模拟文件对象的地方使用createFile()。