From 4e16d42d8f6184f284f8acae4137f7cddc350b2a Mon Sep 17 00:00:00 2001 From: Amaury Bzc Date: Sat, 30 Jan 2016 10:17:31 +0100 Subject: [PATCH 1/3] Added phantomCSS definitions --- phantomcss/phantomcss-tests.ts | 77 ++++++++++++++++++ phantomcss/phantomcss.d.ts | 143 +++++++++++++++++++++++++++++++++ 2 files changed, 220 insertions(+) create mode 100644 phantomcss/phantomcss-tests.ts create mode 100644 phantomcss/phantomcss.d.ts diff --git a/phantomcss/phantomcss-tests.ts b/phantomcss/phantomcss-tests.ts new file mode 100644 index 000000000..9b23ae911 --- /dev/null +++ b/phantomcss/phantomcss-tests.ts @@ -0,0 +1,77 @@ +/// +/// +/// + +// phantomCSS 0.11.1 is based on resemblejs 1.2.1, phantomJS 1.9.2 , casperJS 1.1.0-DEV + +var options: PhantomCSSOptions = { + libraryRoot: './modules/PhantomCSS', + + screenshotRoot: './screenshots', + + failedComparisonsRoot: './failures', + + cleanupComparisonImages: true, + + casper: null, + + comparisonResultRoot: './results', + + addIteratorToImage: false, + + addLabelToFailedImage: false, + + mismatchTolerance: 0.05, + + onFail: function(test){ console.log(test.filename, test.mismatch); }, + + onPass: function(test){ console.log(test.filename); }, + + onNewImage: function(test){ console.log(test.filename); }, + + onTimeout: function(test){ console.log(test.filename); }, + + onComplete: function(allTests, noOfFails, noOfErrors){ + allTests.forEach(function(test){ + if(test.fail){ + console.log(test.filename, test.mismatch); + } + }); + }, + + fileNameGetter: function(root,filename){ + + }, + + prefixCount: true, + + outputSettings: { + errorColor: { + red: 255, + green: 0, + blue: 255 + }, + errorType: 'movement', + transparency: 0.3, + largeImageThreshold: 1200 + }, + + rebase: null//casper.cli.get("rebase") +} + + +phantomcss.turnOffAnimations(); +phantomcss.init(options); + +phantomcss.compareAll('exclude.test'); +phantomcss.compareMatched('include.test', 'exclude.test'); +phantomcss.compareMatched( new RegExp('include.test'), new RegExp('exclude.test')); +phantomcss.compareSession(); +phantomcss.compareExplicit(['/dialog.diff.png', '/header.diff.png']); +phantomcss.getCreatedDiffFiles(); +phantomcss.compareFiles("baseFile", "diffFile"); +phantomcss.waitForTests([{error:false, fail:false, failFile: "failFile", filename: "filename", mismatch: null/* mismatch */ }]); + +phantomcss.screenshot("#feedback-form"); + +phantomcss.screenshot("#feedback-form", undefined, 'input[type=file]'); \ No newline at end of file diff --git a/phantomcss/phantomcss.d.ts b/phantomcss/phantomcss.d.ts new file mode 100644 index 000000000..d52f50426 --- /dev/null +++ b/phantomcss/phantomcss.d.ts @@ -0,0 +1,143 @@ +// Type definitions for PhantomCSS 0.11.1 +// Project: https://github.com/Huddle/PhantomCSS +// Definitions by: Amaury Bauzac +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// +/// + +interface PhantomCSS{ + + init(options:PhantomCSSOptions):void; + update( options:PhantomCSSOptions):void; + + /** + * Take a screenshot of the targeted HTML element + * FileName is required if addIteratorToImage option is set to false + */ + screenshot(target:string, fileName?:string ):void; + + /** + * Take a screenshot of the targeted HTML element + * FileName is required if addIteratorToImage option is set to false + */ + screenshot(target:ClipRect, fileName?:string):void; + /** + * Take a screenshot of the targeted HTML element + * FileName is required if addIteratorToImage option is set to false + */ + screenshot( target:string, timeToWait:number, hideSelector:string, fileName?:string ):void; + + compareAll( exclude ):void; + compareAll( exclude, diffList, include ):void; + compareMatched( match, exclude ):void; + /** + * Explicitly define what files you want to compare + */ + compareExplicit( list:string[] ):void; + /** + * Compare image diffs generated in this test run only + */ + compareSession( list? ):void; + compareFiles( fileName, file ):PhantomCSSTest; + waitForTests( tests:PhantomCSSTest[] ); + done():void; + /** + * Turn off CSS transitions and jQuery animations + */ + turnOffAnimations():void; + getExitStatus():number; + /** + * Get a list of image diffs generated in this test run + */ + getCreatedDiffFiles():Array; +} + +interface PhantomCSSTest{ + filename : string; + error: boolean; + fail:boolean; + failFile:string; + mismatch:any; +} + +interface PhantomCSSOptions{ + /** + Rebase is useful when you want to create new baseline + images without manually deleting the files + casperjs demo/test.js --rebase + */ + rebase?: any; + /** + A reference to a particular Casper instance. Required for SlimerJS. + */ + casper?: Casper; + /** + libraryRoot is relative to this file and must point to your phantomcss folder (not lib or node_modules). If you are using NPM, this will be './node_modules/phantomcss'. + */ + libraryRoot?: string; + + screenshotRoot?:string; + /** + By default, failure images are put in the './failures' folder. + If failedComparisonsRoot is set to false a separate folder will + not be created but failure images can still be found alongside + the original and new images. + */ + failedComparisonsRoot?:string; + + /** + You might want to keep master/baseline images in a completely + different folder to the diffs/failures. Useful when working + with version control systems. By default this resolves to the + screenshotRoot folder. + */ + comparisonResultRoot?: string; + + /** + Don't add count number to images. If set to false (default), a filename is + required when capturing screenshots. + */ + addIteratorToImage: boolean; + + /** + Remove results directory tree after run. Use in conjunction + with failedComparisonsRoot to see failed comparisons. + */ + cleanupComparisonImages?: boolean; + + /** + * Don't add label to generated failure image + */ + addLabelToFailedImage?:boolean; + /** + * Change the output screenshot filenames for your specific + * integration + */ + fileNameGetter?: Function; + + /** + Mismatch tolerance defaults to 0.05%. Increasing this value + will decrease test coverage + */ + mismatchTolerance?: number; + + onPass?: (test) => void; + onFail?: (test) => void; + onTimeout?: (test) => void; + onComplete?:( tests:PhantomCSSTest[], noOfFails:number, noOfErrors:number ) => void; + /** + Called when creating new baseline images + */ + onNewImage?: (test:PhantomCSSTest) => void; + + /** + Prefix the screenshot number to the filename, instead of suffixing it + */ + prefixCount?: boolean; + + hideElements?: string; + outputSettings?: Resemble.OutputSettings; +} + +declare var phantomcss:PhantomCSS; \ No newline at end of file From f44827f22e4a792063b86b263da9f96722ae532d Mon Sep 17 00:00:00 2001 From: Amaury Bzc Date: Sat, 30 Jan 2016 10:42:25 +0100 Subject: [PATCH 2/3] Added phantomCSS - fix travis errors --- phantomcss/phantomcss-tests.ts | 3 ++- phantomcss/phantomcss.d.ts | 32 +++++++++++++++++--------------- 2 files changed, 19 insertions(+), 16 deletions(-) diff --git a/phantomcss/phantomcss-tests.ts b/phantomcss/phantomcss-tests.ts index 9b23ae911..e3c066c6a 100644 --- a/phantomcss/phantomcss-tests.ts +++ b/phantomcss/phantomcss-tests.ts @@ -39,8 +39,9 @@ var options: PhantomCSSOptions = { }); }, - fileNameGetter: function(root,filename){ + fileNameGetter: function(root:string,filename:string){ + return root+filename; }, prefixCount: true, diff --git a/phantomcss/phantomcss.d.ts b/phantomcss/phantomcss.d.ts index d52f50426..3afd4b7fd 100644 --- a/phantomcss/phantomcss.d.ts +++ b/phantomcss/phantomcss.d.ts @@ -28,9 +28,10 @@ interface PhantomCSS{ */ screenshot( target:string, timeToWait:number, hideSelector:string, fileName?:string ):void; - compareAll( exclude ):void; - compareAll( exclude, diffList, include ):void; - compareMatched( match, exclude ):void; + compareAll( exclude:string ):void; + compareAll( exclude:string, diffList:string[], include:string ):void; + compareMatched( match:string, exclude:string ):void; + compareMatched( match:RegExp, exclude:RegExp ):void; /** * Explicitly define what files you want to compare */ @@ -38,9 +39,9 @@ interface PhantomCSS{ /** * Compare image diffs generated in this test run only */ - compareSession( list? ):void; - compareFiles( fileName, file ):PhantomCSSTest; - waitForTests( tests:PhantomCSSTest[] ); + compareSession( list?:any[] ):void; + compareFiles( baseFile:string, diffFiles:string ):PhantomCSSTest; + waitForTests( tests:PhantomCSSTest[] ):void; done():void; /** * Turn off CSS transitions and jQuery animations @@ -54,11 +55,12 @@ interface PhantomCSS{ } interface PhantomCSSTest{ - filename : string; - error: boolean; - fail:boolean; - failFile:string; - mismatch:any; + filename? : string; + error?: boolean; + fail?:boolean; + success?:boolean; + failFile?:string; + mismatch?:any; } interface PhantomCSSOptions{ @@ -114,7 +116,7 @@ interface PhantomCSSOptions{ * Change the output screenshot filenames for your specific * integration */ - fileNameGetter?: Function; + fileNameGetter?: (rootPath:string, fileName?:string) => string; /** Mismatch tolerance defaults to 0.05%. Increasing this value @@ -122,9 +124,9 @@ interface PhantomCSSOptions{ */ mismatchTolerance?: number; - onPass?: (test) => void; - onFail?: (test) => void; - onTimeout?: (test) => void; + onPass?: (test:PhantomCSSTest) => void; + onFail?: (test:PhantomCSSTest) => void; + onTimeout?: (test:PhantomCSSTest) => void; onComplete?:( tests:PhantomCSSTest[], noOfFails:number, noOfErrors:number ) => void; /** Called when creating new baseline images From b5dda320c03c6505c9884bb4b335c13427e12504 Mon Sep 17 00:00:00 2001 From: Amaury Bauzac Date: Wed, 3 Feb 2016 12:52:14 +0100 Subject: [PATCH 3/3] Wrapped interface into a module Changes due to a refused PR --- phantomcss/phantomcss-tests.ts | 3 +- phantomcss/phantomcss.d.ts | 163 ++++++++++++++++----------------- 2 files changed, 83 insertions(+), 83 deletions(-) diff --git a/phantomcss/phantomcss-tests.ts b/phantomcss/phantomcss-tests.ts index e3c066c6a..d555017ed 100644 --- a/phantomcss/phantomcss-tests.ts +++ b/phantomcss/phantomcss-tests.ts @@ -4,7 +4,7 @@ // phantomCSS 0.11.1 is based on resemblejs 1.2.1, phantomJS 1.9.2 , casperJS 1.1.0-DEV -var options: PhantomCSSOptions = { +var options: PhantomCSS.PhantomCSSOptions = { libraryRoot: './modules/PhantomCSS', screenshotRoot: './screenshots', @@ -60,6 +60,7 @@ var options: PhantomCSSOptions = { rebase: null//casper.cli.get("rebase") } +declare var phantomcss:PhantomCSS.PhantomCSS; phantomcss.turnOffAnimations(); phantomcss.init(options); diff --git a/phantomcss/phantomcss.d.ts b/phantomcss/phantomcss.d.ts index 3afd4b7fd..98c5c3732 100644 --- a/phantomcss/phantomcss.d.ts +++ b/phantomcss/phantomcss.d.ts @@ -5,88 +5,87 @@ /// /// - -interface PhantomCSS{ +declare module PhantomCSS { + interface PhantomCSS { + init(options: PhantomCSSOptions): void; + update(options: PhantomCSSOptions): void; - init(options:PhantomCSSOptions):void; - update( options:PhantomCSSOptions):void; - - /** - * Take a screenshot of the targeted HTML element - * FileName is required if addIteratorToImage option is set to false - */ - screenshot(target:string, fileName?:string ):void; + /** + * Take a screenshot of the targeted HTML element + * FileName is required if addIteratorToImage option is set to false + */ + screenshot(target: string, fileName?: string): void; - /** - * Take a screenshot of the targeted HTML element - * FileName is required if addIteratorToImage option is set to false - */ - screenshot(target:ClipRect, fileName?:string):void; - /** - * Take a screenshot of the targeted HTML element - * FileName is required if addIteratorToImage option is set to false - */ - screenshot( target:string, timeToWait:number, hideSelector:string, fileName?:string ):void; - - compareAll( exclude:string ):void; - compareAll( exclude:string, diffList:string[], include:string ):void; - compareMatched( match:string, exclude:string ):void; - compareMatched( match:RegExp, exclude:RegExp ):void; - /** - * Explicitly define what files you want to compare - */ - compareExplicit( list:string[] ):void; - /** - * Compare image diffs generated in this test run only - */ - compareSession( list?:any[] ):void; - compareFiles( baseFile:string, diffFiles:string ):PhantomCSSTest; - waitForTests( tests:PhantomCSSTest[] ):void; - done():void; - /** - * Turn off CSS transitions and jQuery animations - */ - turnOffAnimations():void; - getExitStatus():number; - /** - * Get a list of image diffs generated in this test run - */ - getCreatedDiffFiles():Array; -} + /** + * Take a screenshot of the targeted HTML element + * FileName is required if addIteratorToImage option is set to false + */ + screenshot(target: ClipRect, fileName?: string): void; + /** + * Take a screenshot of the targeted HTML element + * FileName is required if addIteratorToImage option is set to false + */ + screenshot(target: string, timeToWait: number, hideSelector: string, fileName?: string): void; -interface PhantomCSSTest{ - filename? : string; - error?: boolean; - fail?:boolean; - success?:boolean; - failFile?:string; - mismatch?:any; -} + compareAll(exclude: string): void; + compareAll(exclude: string, diffList: string[], include: string): void; + compareMatched(match: string, exclude: string): void; + compareMatched(match: RegExp, exclude: RegExp): void; + /** + * Explicitly define what files you want to compare + */ + compareExplicit(list: string[]): void; + /** + * Compare image diffs generated in this test run only + */ + compareSession(list?: any[]): void; + compareFiles(baseFile: string, diffFiles: string): PhantomCSSTest; + waitForTests(tests: PhantomCSSTest[]): void; + done(): void; + /** + * Turn off CSS transitions and jQuery animations + */ + turnOffAnimations(): void; + getExitStatus(): number; + /** + * Get a list of image diffs generated in this test run + */ + getCreatedDiffFiles(): Array; + } -interface PhantomCSSOptions{ + interface PhantomCSSTest { + filename?: string; + error?: boolean; + fail?: boolean; + success?: boolean; + failFile?: string; + mismatch?: any; + } + + interface PhantomCSSOptions { /** Rebase is useful when you want to create new baseline images without manually deleting the files casperjs demo/test.js --rebase */ - rebase?: any; + rebase?: any; /** A reference to a particular Casper instance. Required for SlimerJS. - */ - casper?: Casper; + */ + casper?: Casper; /** libraryRoot is relative to this file and must point to your phantomcss folder (not lib or node_modules). If you are using NPM, this will be './node_modules/phantomcss'. */ - libraryRoot?: string; - - screenshotRoot?:string; + libraryRoot?: string; + + screenshotRoot?: string; /** By default, failure images are put in the './failures' folder. If failedComparisonsRoot is set to false a separate folder will not be created but failure images can still be found alongside the original and new images. */ - failedComparisonsRoot?:string; + failedComparisonsRoot?: string; /** You might want to keep master/baseline images in a completely @@ -94,7 +93,7 @@ interface PhantomCSSOptions{ with version control systems. By default this resolves to the screenshotRoot folder. */ - comparisonResultRoot?: string; + comparisonResultRoot?: string; /** Don't add count number to images. If set to false (default), a filename is @@ -106,40 +105,40 @@ interface PhantomCSSOptions{ Remove results directory tree after run. Use in conjunction with failedComparisonsRoot to see failed comparisons. */ - cleanupComparisonImages?: boolean; + cleanupComparisonImages?: boolean; /** * Don't add label to generated failure image */ - addLabelToFailedImage?:boolean; + addLabelToFailedImage?: boolean; /** * Change the output screenshot filenames for your specific * integration */ - fileNameGetter?: (rootPath:string, fileName?:string) => string; + fileNameGetter?: (rootPath: string, fileName?: string) => string; /** Mismatch tolerance defaults to 0.05%. Increasing this value will decrease test coverage */ - mismatchTolerance?: number; - - onPass?: (test:PhantomCSSTest) => void; - onFail?: (test:PhantomCSSTest) => void; - onTimeout?: (test:PhantomCSSTest) => void; - onComplete?:( tests:PhantomCSSTest[], noOfFails:number, noOfErrors:number ) => void; + mismatchTolerance?: number; + + onPass?: (test: PhantomCSSTest) => void; + onFail?: (test: PhantomCSSTest) => void; + onTimeout?: (test: PhantomCSSTest) => void; + onComplete?: (tests: PhantomCSSTest[], noOfFails: number, noOfErrors: number) => void; /** Called when creating new baseline images */ - onNewImage?: (test:PhantomCSSTest) => void; + onNewImage?: (test: PhantomCSSTest) => void; - /** - Prefix the screenshot number to the filename, instead of suffixing it - */ - prefixCount?: boolean; - - hideElements?: string; - outputSettings?: Resemble.OutputSettings; -} + /** + Prefix the screenshot number to the filename, instead of suffixing it + */ + prefixCount?: boolean; -declare var phantomcss:PhantomCSS; \ No newline at end of file + hideElements?: string; + outputSettings?: Resemble.OutputSettings; + } + +} \ No newline at end of file