diff --git a/phantomcss/phantomcss-tests.ts b/phantomcss/phantomcss-tests.ts new file mode 100644 index 0000000000..9b23ae9113 --- /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 0000000000..d52f504265 --- /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