Initial commit

.editorconfig

@@ -0,0 +1,15 @@
+; This file is for unifying the coding style for different editors and IDEs.
+; More information at http://editorconfig.org
+
+root = true
+
+[*]
+charset = utf-8
+indent_size = 4
+indent_style = space
+end_of_line = lf
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.md]
+trim_trailing_whitespace = false

.gitattributes

@@ -0,0 +1,11 @@
+# Path-based git attributes
+# https://www.kernel.org/pub/software/scm/git/docs/gitattributes.html
+
+# Ignore all test and documentation with "export-ignore".
+/.gitattributes     export-ignore
+/.gitignore         export-ignore
+/.travis.yml        export-ignore
+/phpunit.xml.dist   export-ignore
+/.scrutinizer.yml   export-ignore
+/tests              export-ignore
+/.editorconfig      export-ignore

.gitignore

@@ -0,0 +1,8 @@
+build
+composer.lock
+docs
+vendor
+coverage
+.idea
+node_modules
+tests/Browser

.scrutinizer.yml

@@ -0,0 +1,19 @@
+filter:
+    excluded_paths: [tests/*]
+
+checks:
+    php:
+        remove_extra_empty_lines: true
+        remove_php_closing_tag: true
+        remove_trailing_whitespace: true
+        fix_use_statements:
+            remove_unused: true
+            preserve_multiple: false
+            preserve_blanklines: true
+            order_alphabetically: true
+        fix_php_opening_tag: true
+        fix_linefeed: true
+        fix_line_ending: true
+        fix_identation_4spaces: true
+        fix_doc_comments: true
+

.styleci.yml

@@ -0,0 +1,4 @@
+preset: laravel
+
+disabled:
+  - single_class_element_per_statement

.travis.yml

@@ -0,0 +1,25 @@
+language: php
+
+php:
+  - 7.1
+  - 7.2
+
+env:
+  matrix:
+    - COMPOSER_FLAGS="--prefer-lowest"
+    - COMPOSER_FLAGS=""
+
+before_script:
+  - . $HOME/.nvm/nvm.sh
+  - nvm install stable
+  - nvm use stable
+  - npm install puppeteer
+  - npm install pixelmatch
+  - travis_retry composer self-update
+  - travis_retry composer update ${COMPOSER_FLAGS} --no-interaction --prefer-source
+
+script:
+  - vendor/bin/phpunit --coverage-text --coverage-clover=coverage.clover
+
+after_script:
+  - php vendor/bin/ocular code-coverage:upload --format=php-clover coverage.clover

CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+All notable changes to `laravel-visual-diff` will be documented in this file
+
+## 1.0.0 - 201X-XX-XX
+
+- initial release

CONTRIBUTING.md

@@ -0,0 +1,55 @@
+# Contributing
+
+Contributions are **welcome** and will be fully **credited**.
+
+Please read and understand the contribution guide before creating an issue or pull request.
+
+## Etiquette
+
+This project is open source, and as such, the maintainers give their free time to build and maintain the source code
+held within. They make the code freely available in the hope that it will be of use to other developers. It would be
+extremely unfair for them to suffer abuse or anger for their hard work.
+
+Please be considerate towards maintainers when raising issues or presenting pull requests. Let's show the
+world that developers are civilized and selfless people.
+
+It's the duty of the maintainer to ensure that all submissions to the project are of sufficient
+quality to benefit the project. Many developers have different skillsets, strengths, and weaknesses. Respect the maintainer's decision, and do not be upset or abusive if your submission is not used.
+
+## Viability
+
+When requesting or submitting new features, first consider whether it might be useful to others. Open
+source projects are used by many developers, who may have entirely different needs to your own. Think about
+whether or not your feature is likely to be used by other users of the project.
+
+## Procedure
+
+Before filing an issue:
+
+- Attempt to replicate the problem, to ensure that it wasn't a coincidental incident.
+- Check to make sure your feature suggestion isn't already present within the project.
+- Check the pull requests tab to ensure that the bug doesn't have a fix in progress.
+- Check the pull requests tab to ensure that the feature isn't already in progress.
+
+Before submitting a pull request:
+
+- Check the codebase to ensure that your feature doesn't already exist.
+- Check the pull requests to ensure that another person hasn't already submitted the feature or fix.
+
+## Requirements
+
+If the project maintainer has any additional requirements, you will find them listed here.
+
+- **[PSR-2 Coding Standard](https://github.com/php-fig/fig-standards/blob/master/accepted/PSR-2-coding-style-guide.md)** - The easiest way to apply the conventions is to install [PHP Code Sniffer](https://pear.php.net/package/PHP_CodeSniffer).
+
+- **Add tests!** - Your patch won't be accepted if it doesn't have tests.
+
+- **Document any change in behaviour** - Make sure the `README.md` and any other relevant documentation are kept up-to-date.
+
+- **Consider our release cycle** - We try to follow [SemVer v2.0.0](https://semver.org/). Randomly breaking public APIs is not an option.
+
+- **One pull request per feature** - If you want to do more than one thing, send multiple pull requests.
+
+- **Send coherent history** - Make sure each individual commit in your pull request is meaningful. If you had to make multiple intermediate commits while developing, please [squash them](https://www.git-scm.com/book/en/v2/Git-Tools-Rewriting-History#Changing-Multiple-Commit-Messages) before submitting.
+
+**Happy coding**!

LICENSE.md

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Beyond Code GmbH <hello@beyondco.de>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.

README.md

@@ -0,0 +1,178 @@
+# Laravel Visual Diff
+
+[![Latest Version on Packagist](https://img.shields.io/packagist/v/beyondcode/laravel-visual-diff.svg?style=flat-square)](https://packagist.org/packages/beyondcode/laravel-visual-diff)
+[![Build Status](https://img.shields.io/travis/beyondcode/laravel-visual-diff/master.svg?style=flat-square)](https://travis-ci.org/beyondcode/laravel-visual-diff)
+[![Quality Score](https://img.shields.io/scrutinizer/g/beyondcode/laravel-visual-diff.svg?style=flat-square)](https://scrutinizer-ci.com/g/beyondcode/laravel-visual-diff)
+[![Total Downloads](https://img.shields.io/packagist/dt/beyondcode/laravel-visual-diff.svg?style=flat-square)](https://packagist.org/packages/beyondcode/laravel-visual-diff)
+
+This package can create a visual diff of two screenshots of your Laravel application. It works for both - regular HTTP tests, as well as tests using Laravel Dusk.
+Behind the scenes, it uses [Pixelmatch](https://github.com/mapbox/pixelmatch) to diff the two images.
+
+Here are two basic examples of how the package works:
+
+Using Laravel Dusk:
+
+```php
+
+class ExampleTest extends DuskTestCase
+{
+    /**
+     * A basic browser test example.
+     *
+     * @return void
+     */
+    public function testBasicExample()
+    {
+        $this->browse(function (Browser $browser) {
+            $browser->visit('/')
+                    ->visualDiff();
+        });
+    }
+}
+
+```
+
+Using Laravel HTTP Testing:
+
+```php
+
+class ExampleTest extends TestCase
+{
+    /**
+     * A basic test example.
+     *
+     * @return void
+     */
+    public function testBasicExample()
+    {
+        $this->get('/')
+             ->visualDiff();
+    }
+}
+
+```
+
+## Requirements
+
+This package requires node 7.6.0 or higher and the Pixelmatch Node library.
+
+You can install the Pixelmatch on MacOS via NPM:
+
+```bash
+npm install pixelmatch
+```
+
+Or you could install it globally
+
+```bash
+npm install pixelmatch --global
+```
+
+### Custom node and npm binaries
+
+Depending on your setup, node or npm might be not directly available to VisualDiff.
+If you need to manually set these binary paths, you can do this by setting the `npm_binary` and `node_binary` config settings in the `visualdiff.php` configuration file.
+
+## Installation
+
+This package can be installed through Composer.
+
+```bash
+composer require beyondcode/laravel-visual-diff
+```
+
+## Usage
+
+The package will automatically register the `VisualDiffServiceProvider` with your Laravel application.
+
+The package adds a new method to either the `TestResponse` or the `Browser` class which is called `visualDiff`.
+Depending on how you want to create visual diffs, follow the usage guidelines for the Laravel Dusk integration or the HTTP testing integration.
+
+The `visualDiff` method accepts a name, that will be used for the screenshot generation. If you do not provide a name, the package will try and guess the test name. If this does not work for you, please provide a name manually instead.
+
+### Dusk Integration
+
+Just call the `visualDiff()` method on the Laravel Dusk `Browser` instance that you use for testing:
+
+```php
+$this->browse(function (Browser $browser) {
+    $browser->visit('/')
+            ->visualDiff();
+});
+``` 
+
+This will automatically create a screenshot in all provided resolutions and create a diff, if a previous screenshot is available.
+
+### HTTP Testing Integration
+
+Just call the `visualDiff()` method on the `TestResponse` instance that you use for testing:
+
+```php
+$this->get('/')
+     ->visualDiff();
+``` 
+
+This will automatically create a screenshot in all provided resolutions and create a diff, if a previous screenshot is available.
+
+### Specify multiple resolutions
+
+Creating diffs for multiple resolutions can be very useful - especially if you want to test responsive websites and applications.
+
+You can define all possible resolutions in your `visualdiff.php` configuration file:
+
+```php
+/**
+ * Define all different resolutions that you want to use when performing
+ * the regression tests.
+ */
+'resolutions' => [
+    [
+        'width' => 1920,
+        'height'=> 1080
+    ]
+]
+``` 
+
+Alternatively,  you may want to only create one specific diff in multiple resolutions.
+You can do this using the `visualDiffForResolutions` method and provide an array with the resolutions to test.
+
+```php
+$this->get('/')
+     ->visualDiffForResolutions([
+        [
+            'width' => 1920,
+            'height' => 1080
+        ],
+        [
+            'width' => 640,
+            'height' => 480
+        ],
+     ]);
+```
+
+### See diff results in your terminal window
+
+If you use [iTerm2](https://www.iterm2.com/) as your terminal of choice, you will see an image representation of the diff when you run your tests.
+
+--SCREENSHOT--
+
+### Changelog
+
+Please see [CHANGELOG](CHANGELOG.md) for more information what has changed recently.
+
+## Contributing
+
+Please see [CONTRIBUTING](CONTRIBUTING.md) for details.
+
+### Security
+
+If you discover any security related issues, please email marcel@beyondco.de instead of using the issue tracker.
+
+## Credits
+
+- [Marcel Pociot](https://github.com/mpociot)
+- [All Contributors](../../contributors)
+
+## License
+
+The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

bin/diff.js

@@ -0,0 +1,39 @@
+var PNG = require('pngjs').PNG,
+    fs = require('fs'),
+    match = require('pixelmatch');
+
+const request = JSON.parse(process.argv[2]);
+
+var threshold = request.threshold || undefined;
+var includeAA = request.antialias || false;
+
+var img1 = fs.createReadStream(request.image_1).pipe(new PNG()).on('parsed', doneReading);
+var img2 = fs.createReadStream(request.image_2).pipe(new PNG()).on('parsed', doneReading);
+
+function doneReading() {
+    if (!img1.data || !img2.data) return;
+
+    if (img1.width !== img2.width || img1.height !== img2.height) {
+        console.log('Image dimensions do not match: %dx%d vs %dx%d',
+            img1.width, img1.height, img2.width, img2.height);
+        return;
+    }
+
+    var diff = new PNG({width: img1.width, height: img1.height});
+
+    var diffs = match(img1.data, img2.data, diff.data, diff.width, diff.height, {
+        threshold: threshold,
+        includeAA: includeAA
+    });
+
+    if (request.output) {
+        diff.pack().pipe(fs.createWriteStream(request.output));
+    }
+
+    var output = {
+        'pixels': diffs,
+        'error_percentage': (Math.round(100 * 100 * diffs / (diff.width * diff.height)) / 100)
+    };
+
+    console.log(JSON.stringify(output));
+}