chai-image

为 Chai 添加关于图像的断言

expect(bufImage).to.matchImage(bufExpectedImage);

Example

预期	实际

差异（左上角对齐）	差异（居中对齐）

在这种情况下，matchImage 断言将失败。

用法

安装 chai-image 开始使用。

$ npm install chai-image --save-dev

然后

import * as chai from "chai";
import { chaiImage } from "chai-image";

chai.use(chaiImage);

// Then either:
const expect = chai.expect;
// or:
const assert = chai.assert;
// or:
chai.should();
// according to your preference of assertion style

断言

`matchImage(expected: Buffer, options?: MatchImageOptions)`

注意：目前仅支持 PNG 图片格式。

示例

// Simple Example
import * as fs from "fs";

const bufActual = fs.readFileSync("actual.png");
const bufExpected = fs.readFileSync("expected.png");

expect(bufActual).to.matchImage(bufExpected);

// Real-world Example
import * as sharp from "sharp";

class ImageService {
  public async transform(buf: Buffer): Promise<Buffer> {
    return await sharp(buf).resize().max(320, 320).png().toBuffer();
  }
}

const service = new ImageService();

describe("ImageService", () => {
  describe("#transform", () => {
    it("should transform image", async () => {
      const input = fs.readFileSync("fixtures/input.png");
      const output = fs.readFileSync("fixtures/output.png");
      
      expect(await service.transform(input)).to.matchImage(output);
    });
  });
});

测试图像是否与给定图像匹配。

图像比较由 pixelmatch 库处理。如果提供了输出配置，chai-image 将创建一些文件以显示差异结果。

enum Align {
  LEFT_TOP = "leftTop",
  CENTER = "center",
}

interface MatchImageOptions {
  // Custom diff config passed to pixelmatch
  diff?: DiffOptions;
  
  // Image aligning config for aligning different size image (default: Align.LEFT_TOP)
  align?: Align;
  
  // Output config
  // if specified, chai-image will create output files to visualize diff 
  output?: OutputOptions;
}

interface DiffOptions {
  threshold?: number;
  includeAA?: boolean;
  alpha?: number;
  aaColor?: [number, number, number];
  /* The color of differing pixels in the diff output. [255, 0, 0] by default. */
  diffColor?: [number, number, number];
}

interface OutputOptions {
  // Currently name is used to generate filename
  name: string;
  // Path of output directory (default: WORKDING_DIR/outputs)
  dir?: string;
  
  // Output creation conditions
  // Controls when to create output files (default: failure)
  on?: "failure" | "always";
  
  // Controls output file types (default: false)
  diffOnly?: boolean;
}

变更日志

参见 CHANGELOG。

测试

$ npm run test

构建

$ npm run build

许可证

MIT

查看 mooyoul.mit-license.org 上的完整许可证。