Merge pull request #30336 from xcatliu/add-typings-for-looks-same

Add typings for looks-same

types/looks-same/index.d.ts

@@ -0,0 +1,138 @@
+// Type definitions for looks-same 4.0
+// Project: https://github.com/gemini-testing/looks-same/releases
+// Definitions by: xcatliu <https://github.com/xcatliu>
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+/// <reference types="node"/>
+
+type LooksSameCallback = (error: Error | null, equal: boolean) => any;
+
+/**
+ * The options passed to looksSame function
+ */
+interface LooksSameOptions {
+    /**
+     * By default, it will detect only noticeable differences. If you wish to detect any difference, use strict options.
+     */
+    strict?: boolean;
+    /**
+     * You can also adjust the ΔE value that will be treated as error in non-strict mode.
+     */
+    tolerance?: number;
+    /**
+     * Some devices can have different proportion between physical and logical screen resolutions also known as pixel ratio.
+     * Default value for this proportion is 1.
+     * This param also affects the comparison result, so it can be set manually with pixelRatio option.
+     */
+    pixelRatio?: number;
+    /**
+     * For visual regression tasks it may be useful to ignore text caret in text input elements. You can do it with ignoreCaret option.
+     */
+    ignoreCaret?: boolean;
+    /**
+     * Some images has difference while comparing because of antialiasing.
+     * These diffs will be ignored by default. You can use ignoreAntialiasing option with false value to disable ignoring such diffs.
+     * In that way antialiased pixels will be marked as diffs.
+     */
+    ignoreAntialiasing?: boolean;
+    /**
+     * Sometimes the antialiasing algorithm can work incorrectly due to some features of the browser rendering engine.
+     * Use the option antialiasingTolerance to make the algorithm less strict.
+     * With this option you can specify the minimum difference in brightness (zero by default)
+     * between the darkest/lightest pixel (which is adjacent to the antialiasing pixel) and theirs adjacent pixels.
+     *
+     * We recommend that you don't increase this value above 10. If you need to increase more than 10 then this is definitely not antialiasing.
+     */
+    antialiasingTolerance?: number;
+}
+
+/**
+ * The options passed to looksSame.createDiff function without diff
+ */
+interface CreateDiffAsBufferOptions {
+    /**
+     * The baseline image path
+     */
+    reference: string;
+    /**
+     * The current image path
+     */
+    current: string;
+    /**
+     * Color to highlight the differences
+     * e.g. '#ff00ff'
+     */
+    highlightColor: string;
+    /**
+     * strict comparsion
+     */
+    strict: boolean;
+    /**
+     * ΔE value that will be treated as error in non-strict mode
+     */
+    tolerance: number;
+}
+
+/**
+ * The options passed to looksSame.createDiff function
+ */
+interface CreateDiffOptions extends CreateDiffAsBufferOptions {
+    /**
+     * The diff image path to store
+     */
+    diff: string;
+}
+
+/**
+ * Pass to looksSame.colors function
+ */
+interface LooksSameColor {
+    /**
+     * Red
+     */
+    R: number;
+    /**
+     * Green
+     */
+    G: number;
+    /**
+     * Blue
+     */
+    B: number;
+}
+
+/**
+ * Compare two images with options
+ * @param image1 The first image path
+ * @param image2 The second image path
+ * @param options The options passed to looksSame function
+ * @param callback Call when finish compare
+ */
+declare function looksSame(image1: string, image2: string, options: LooksSameOptions, callback: LooksSameCallback): void;
+/**
+ * Compare two images
+ * @param image1 The first image path
+ * @param image2 The second image path
+ * @param callback Call when finish compare
+ */
+declare function looksSame(image1: string, image2: string, callback: LooksSameCallback): void;
+
+// https://stackoverflow.com/questions/44058101/typescript-declare-third-party-modules
+declare namespace looksSame {
+    function createDiff(options: CreateDiffOptions, callback: (error: Error | null) => any): void;
+    function createDiff(options: CreateDiffAsBufferOptions, callback: (error: Error | null, buffer: Buffer) => any): void;
+
+    /**
+     * Compare two colors
+     * @param color1 The first color
+     * @param color2 The second color
+     * @param options The options passed to looksSame.colors function
+     */
+    function colors(color1: LooksSameColor, color2: LooksSameColor, options: { tolerance: number }): void;
+}
+
+/**
+ * Node.js library for comparing PNG-images, taking into account human color perception.
+ * It is created specially for the needs of visual regression testing for gemini utility, but can be used for other purposes.
+ */
+export = looksSame;

types/looks-same/looks-same-tests.ts

@@ -0,0 +1,56 @@
+import looksSame = require('looks-same');
+
+looksSame('image1.png', 'image2.png', (error, equal) => {
+    // equal will be true, if images looks the same
+});
+
+looksSame('image1.png', 'image2.png', {strict: true}, (error, equal) => {
+    // ...
+});
+
+looksSame('image1.png', 'image2.png', {tolerance: 5}, (error, equal) => {
+    // ...
+});
+
+looksSame('image1.png', 'image2.png', {pixelRatio: 2}, (error, equal) => {
+    // ...
+});
+
+looksSame('image1.png', 'image2.png', {ignoreCaret: true}, (error, equal) => {
+    // ...
+});
+
+looksSame('image1.png', 'image2.png', {ignoreAntialiasing: true}, (error, equal) => {
+    // ...
+});
+
+looksSame('image1.png', 'image2.png', {ignoreAntialiasing: true, antialiasingTolerance: 3}, (error, equal) => {
+    // ...
+});
+
+looksSame.createDiff({
+    reference: '/path/to/reference/image.png',
+    current: '/path/to/current/image.png',
+    diff: '/path/to/save/diff/to.png',
+    highlightColor: '#ff00ff',  // color to highlight the differences
+    strict: false,              // strict comparsion
+    tolerance: 2.5
+}, (error) => {
+});
+
+looksSame.createDiff({
+    // exactly same options as above, but without diff
+    reference: '/path/to/reference/image.png',
+    current: '/path/to/current/image.png',
+    highlightColor: '#ff00ff',  // color to highlight the differences
+    strict: false,              // strict comparsion
+    tolerance: 2.5
+}, (error, buffer) => {
+    // ...
+});
+
+looksSame.colors(
+    {R: 255, G: 0, B: 0},
+    {R: 254, G: 1, B: 1},
+    {tolerance: 2.5}
+);

types/looks-same/tsconfig.json

@@ -0,0 +1,23 @@
+{
+    "compilerOptions": {
+        "module": "commonjs",
+        "lib": [
+            "es6"
+        ],
+        "noImplicitAny": true,
+        "noImplicitThis": true,
+        "strictNullChecks": true,
+        "strictFunctionTypes": true,
+        "baseUrl": "../",
+        "typeRoots": [
+            "../"
+        ],
+        "types": [],
+        "noEmit": true,
+        "forceConsistentCasingInFileNames": true
+    },
+    "files": [
+        "index.d.ts",
+        "looks-same-tests.ts"
+    ]
+}

types/looks-same/tslint.json

@@ -0,0 +1 @@
+{ "extends": "dtslint/dt.json" }