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 上的完整授權條款