Automated deployment: Thu Aug 12 23:08:49 UTC 2021 62d3fcb7500e623b8c4a1b79c2e271121c3ce794

2 files changed, 230 insertions, 0 deletions

diff --git a/2/plugins/screen-diff/index.js b/2/plugins/screen-diff/index.js
new file mode 100644
index 0000000..3774f88
--- /dev/null
+++ b/2/plugins/screen-diff/index.js
@@ -0,0 +1,200 @@
+(function () {
+    var settings = allure.getPluginSettings('screen-diff', { diffType: 'diff' });
+
+    function renderImage(src) {
+        return (
+            '<div class="screen-diff__container">' +
+            '<img class="screen-diff__image" src="' +
+            src +
+            '">' +
+            '</div>'
+        );
+    }
+
+    function findImage(data, name) {
+        if (data.testStage && data.testStage.attachments) {
+            var matchedImage = data.testStage.attachments.filter(function (attachment) {
+                return attachment.name === name;
+            })[0];
+            if (matchedImage) {
+                return 'data/attachments/' + matchedImage.source;
+            }
+        }
+        return null;
+    }
+
+    function renderDiffContent(type, diffImage, actualImage, expectedImage) {
+        if (type === 'diff') {
+            if (diffImage) {
+                return renderImage(diffImage);
+            }
+        }
+        if (type === 'overlay' && expectedImage) {
+            return (
+                '<div class="screen-diff__overlay screen-diff__container">' +
+                '<img class="screen-diff__image" src="' +
+                expectedImage +
+                '">' +
+                '<div class="screen-diff__image-over">' +
+                '<img class="screen-diff__image" src="' +
+                actualImage +
+                '">' +
+                '</div>' +
+                '</div>'
+            );
+        }
+        if (actualImage) {
+            return renderImage(actualImage);
+        }
+        return 'No diff data provided';
+    }
+
+    var TestResultView = Backbone.Marionette.View.extend({
+        regions: {
+            subView: '.screen-diff-view',
+        },
+        template: function () {
+            return '<div class="screen-diff-view"></div>';
+        },
+        onRender: function () {
+            var data = this.model.toJSON();
+            var testType = data.labels.filter(function (label) {
+                return label.name === 'testType';
+            })[0];
+            var diffImage = findImage(data, 'diff');
+            var actualImage = findImage(data, 'actual');
+            var expectedImage = findImage(data, 'expected');
+            if (!testType || testType.value !== 'screenshotDiff') {
+                return;
+            }
+            this.showChildView(
+                'subView',
+                new ScreenDiffView({
+                    diffImage: diffImage,
+                    actualImage: actualImage,
+                    expectedImage: expectedImage,
+                }),
+            );
+        },
+    });
+    var ErrorView = Backbone.Marionette.View.extend({
+        templateContext: function () {
+            return this.options;
+        },
+        template: function (data) {
+            return '<pre class="screen-diff-error">' + data.error + '</pre>';
+        },
+    });
+    var AttachmentView = Backbone.Marionette.View.extend({
+        regions: {
+            subView: '.screen-diff-view',
+        },
+        template: function () {
+            return '<div class="screen-diff-view"></div>';
+        },
+        onRender: function () {
+            jQuery
+                .getJSON(this.options.sourceUrl)
+                .then(this.renderScreenDiffView.bind(this), this.renderErrorView.bind(this));
+        },
+        renderErrorView: function (error) {
+            console.log(error);
+            this.showChildView(
+                'subView',
+                new ErrorView({
+                    error: error.statusText,
+                }),
+            );
+        },
+        renderScreenDiffView: function (data) {
+            this.showChildView(
+                'subView',
+                new ScreenDiffView({
+                    diffImage: data.diff,
+                    actualImage: data.actual,
+                    expectedImage: data.expected,
+                }),
+            );
+        },
+    });
+
+    var ScreenDiffView = Backbone.Marionette.View.extend({
+        className: 'pane__section',
+        events: function () {
+            return {
+                ['click [name="screen-diff-type-' + this.cid + '"]']: 'onDiffTypeChange',
+                'mousemove .screen-diff__overlay': 'onOverlayMove',
+            };
+        },
+        initialize: function (options) {
+            this.diffImage = options.diffImage;
+            this.actualImage = options.actualImage;
+            this.expectedImage = options.expectedImage;
+            this.radioName = 'screen-diff-type-' + this.cid;
+        },
+        templateContext: function () {
+            return {
+                diffType: settings.get('diffType'),
+                diffImage: this.diffImage,
+                actualImage: this.actualImage,
+                expectedImage: this.expectedImage,
+                radioName: this.radioName,
+            };
+        },
+        template: function (data) {
+            if (!data.diffImage && !data.actualImage && !data.expectedImage) {
+                return '';
+            }
+
+            return (
+                '<h3 class="pane__section-title">Screen Diff</h3>' +
+                '<div class="screen-diff__content">' +
+                '<div class="screen-diff__switchers">' +
+                '<label><input type="radio" name="' +
+                data.radioName +
+                '" value="diff"> Show diff</label>' +
+                '<label><input type="radio" name="' +
+                data.radioName +
+                '" value="overlay"> Show overlay</label>' +
+                '</div>' +
+                renderDiffContent(
+                    data.diffType,
+                    data.diffImage,
+                    data.actualImage,
+                    data.expectedImage,
+                ) +
+                '</div>'
+            );
+        },
+        adjustImageSize: function (event) {
+            var overImage = this.$(event.target);
+            overImage.width(overImage.width());
+        },
+        onRender: function () {
+            const diffType = settings.get('diffType');
+            this.$('[name="' + this.radioName + '"][value="' + diffType + '"]').prop(
+                'checked',
+                true,
+            );
+            if (diffType === 'overlay') {
+                this.$('.screen-diff__image-over img').on('load', this.adjustImageSize.bind(this));
+            }
+        },
+        onOverlayMove: function (event) {
+            var pageX = event.pageX;
+            var containerScroll = this.$('.screen-diff__container').scrollLeft();
+            var elementX = event.currentTarget.getBoundingClientRect().left;
+            var delta = pageX - elementX + containerScroll;
+            this.$('.screen-diff__image-over').width(delta);
+        },
+        onDiffTypeChange: function (event) {
+            settings.save('diffType', event.target.value);
+            this.render();
+        },
+    });
+    allure.api.addTestResultBlock(TestResultView, { position: 'before' });
+    allure.api.addAttachmentViewer('application/vnd.allure.image.diff', {
+        View: AttachmentView,
+        icon: 'fa fa-exchange',
+    });
+})();
diff --git a/2/plugins/screen-diff/styles.css b/2/plugins/screen-diff/styles.css
new file mode 100644
index 0000000..6cf2219
--- /dev/null
+++ b/2/plugins/screen-diff/styles.css
@@ -0,0 +1,30 @@
+.screen-diff__switchers {
+  margin-bottom: 1em;
+}
+
+.screen-diff__switchers label + label {
+  margin-left: 1em;
+}
+
+.screen-diff__overlay {
+  position: relative;
+  cursor: col-resize;
+}
+
+.screen-diff__container {
+  overflow-x: auto;
+}
+
+.screen-diff__image-over {
+  top: 0;
+  left: 0;
+  bottom: 0;
+  background: #fff;
+  position: absolute;
+  overflow: hidden;
+  box-shadow: 2px 0 1px -1px #aaa;
+}
+
+.screen-diff-error {
+  color: #fd5a3e;
+}