|
@@ -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',
|
|
|
+ });
|
|
|
+})();
|