From 6623749f9deec10f7fd5f8bc64b1ba8840bec235 Mon Sep 17 00:00:00 2001 From: xcatliu Date: Wed, 7 Nov 2018 15:35:59 +0800 Subject: [PATCH 1/2] Add typings for looks-same --- types/looks-same/index.d.ts | 135 +++++++++++++++++++++++++++ types/looks-same/looks-same-tests.ts | 56 +++++++++++ types/looks-same/tsconfig.json | 23 +++++ types/looks-same/tslint.json | 1 + 4 files changed, 215 insertions(+) create mode 100644 types/looks-same/index.d.ts create mode 100644 types/looks-same/looks-same-tests.ts create mode 100644 types/looks-same/tsconfig.json create mode 100644 types/looks-same/tslint.json diff --git a/types/looks-same/index.d.ts b/types/looks-same/index.d.ts new file mode 100644 index 0000000000..53c2afe504 --- /dev/null +++ b/types/looks-same/index.d.ts @@ -0,0 +1,135 @@ +// Type definitions for looks-same 4.0 +// Project: https://github.com/gemini-testing/looks-same/releases +// Definitions by: xcatliu +// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped + +/// + +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; diff --git a/types/looks-same/looks-same-tests.ts b/types/looks-same/looks-same-tests.ts new file mode 100644 index 0000000000..cf7d8815d6 --- /dev/null +++ b/types/looks-same/looks-same-tests.ts @@ -0,0 +1,56 @@ +import * as looksSame from '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} +); diff --git a/types/looks-same/tsconfig.json b/types/looks-same/tsconfig.json new file mode 100644 index 0000000000..a6aa3dbfd2 --- /dev/null +++ b/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" + ] +} diff --git a/types/looks-same/tslint.json b/types/looks-same/tslint.json new file mode 100644 index 0000000000..3db14f85ea --- /dev/null +++ b/types/looks-same/tslint.json @@ -0,0 +1 @@ +{ "extends": "dtslint/dt.json" } From b9311a23e30b2ad730b52e9b40c1b7aeb0d30b4e Mon Sep 17 00:00:00 2001 From: xcatliu Date: Thu, 8 Nov 2018 10:54:03 +0800 Subject: [PATCH 2/2] Update looks-same import syntax --- types/looks-same/index.d.ts | 3 +++ types/looks-same/looks-same-tests.ts | 2 +- 2 files changed, 4 insertions(+), 1 deletion(-) diff --git a/types/looks-same/index.d.ts b/types/looks-same/index.d.ts index 53c2afe504..6423e5fe4c 100644 --- a/types/looks-same/index.d.ts +++ b/types/looks-same/index.d.ts @@ -116,10 +116,12 @@ declare function looksSame(image1: string, image2: string, options: LooksSameOpt * @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 @@ -128,6 +130,7 @@ declare namespace looksSame { */ 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. diff --git a/types/looks-same/looks-same-tests.ts b/types/looks-same/looks-same-tests.ts index cf7d8815d6..f788d2119e 100644 --- a/types/looks-same/looks-same-tests.ts +++ b/types/looks-same/looks-same-tests.ts @@ -1,4 +1,4 @@ -import * as looksSame from 'looks-same'; +import looksSame = require('looks-same'); looksSame('image1.png', 'image2.png', (error, equal) => { // equal will be true, if images looks the same