diff --git a/phantomcss/phantomcss-tests.ts b/phantomcss/phantomcss-tests.ts new file mode 100644 index 000000000..d555017ed --- /dev/null +++ b/phantomcss/phantomcss-tests.ts @@ -0,0 +1,79 @@ +/// +/// +/// + +// phantomCSS 0.11.1 is based on resemblejs 1.2.1, phantomJS 1.9.2 , casperJS 1.1.0-DEV + +var options: PhantomCSS.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:string,filename:string){ + + return 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") +} + +declare var phantomcss:PhantomCSS.PhantomCSS; + +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..98c5c3732 --- /dev/null +++ b/phantomcss/phantomcss.d.ts @@ -0,0 +1,144 @@ +// Type definitions for PhantomCSS 0.11.1 +// Project: https://github.com/Huddle/PhantomCSS +// Definitions by: Amaury Bauzac +// Definitions: https://github.com/borisyankov/DefinitelyTyped + +/// +/// +declare module PhantomCSS { + 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: 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 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; + /** + 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?: (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; + /** + 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; + } + +} \ No newline at end of file