@allurereport/web-allure2/src/plugins/screen-diff/index.js

The static files for Allure Classic Report

(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: "compare",
  });
})();