@allurereport/web-allure2 3.0.0-beta.9

package/src/plugins/screen-diff/index.js

@@ -0,0 +1,186 @@
+(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",
+  });
+})();

package/src/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;
+}

package/src/plugins/tab-behaviors/index.js

@@ -0,0 +1,239 @@
+"use strict";
+
+allure.api.addTranslation("en", {
+  tab: {
+    behaviors: {
+      name: "Behaviors",
+    },
+  },
+  widget: {
+    behaviors: {
+      name: "Features by stories",
+      showAll: "show all",
+    },
+  },
+});
+
+allure.api.addTranslation("ru", {
+  tab: {
+    behaviors: {
+      name: "Функциональность",
+    },
+  },
+  widget: {
+    behaviors: {
+      name: "Функциональность",
+      showAll: "показать все",
+    },
+  },
+});
+
+allure.api.addTranslation("zh", {
+  tab: {
+    behaviors: {
+      name: "功能",
+    },
+  },
+  widget: {
+    behaviors: {
+      name: "特性场景",
+      showAll: "显示所有",
+    },
+  },
+});
+
+allure.api.addTranslation("de", {
+  tab: {
+    behaviors: {
+      name: "Verhalten",
+    },
+  },
+  widget: {
+    behaviors: {
+      name: "Features nach Stories",
+      showAll: "Zeige alle",
+    },
+  },
+});
+
+allure.api.addTranslation("nl", {
+  tab: {
+    behaviors: {
+      name: "Functionaliteit",
+    },
+  },
+  widget: {
+    behaviors: {
+      name: "Features en story’s",
+      showAll: "Toon alle",
+    },
+  },
+});
+
+allure.api.addTranslation("he", {
+  tab: {
+    behaviors: {
+      name: "התנהגויות",
+    },
+  },
+  widget: {
+    behaviors: {
+      name: "תכונות לפי סיפורי משתמש",
+      showAll: "הצג הכול",
+    },
+  },
+});
+
+allure.api.addTranslation("br", {
+  tab: {
+    behaviors: {
+      name: "Comportamentos",
+    },
+  },
+  widget: {
+    behaviors: {
+      name: "Funcionalidades por história",
+      showAll: "Mostrar tudo",
+    },
+  },
+});
+
+allure.api.addTranslation("ja", {
+  tab: {
+    behaviors: {
+      name: "振る舞い",
+    },
+  },
+  widget: {
+    behaviors: {
+      name: "ストーリー別の機能",
+      showAll: "全て表示",
+    },
+  },
+});
+
+allure.api.addTranslation("es", {
+  tab: {
+    behaviors: {
+      name: "Funcionalidades",
+    },
+  },
+  widget: {
+    behaviors: {
+      name: "Funcionalidades por Historias de Usuario",
+      showAll: "mostrar todo",
+    },
+  },
+});
+
+allure.api.addTranslation("kr", {
+  tab: {
+    behaviors: {
+      name: "동작",
+    },
+  },
+  widget: {
+    behaviors: {
+      name: "스토리별 기능",
+      showAll: "전체 보기",
+    },
+  },
+});
+
+allure.api.addTranslation("fr", {
+  tab: {
+    behaviors: {
+      name: "Comportements",
+    },
+  },
+  widget: {
+    behaviors: {
+      name: "Thèmes par histoires",
+      showAll: "Montrer tout",
+    },
+  },
+});
+
+allure.api.addTranslation("pl", {
+  tab: {
+    behaviors: {
+      name: "Zachowania",
+    },
+  },
+  widget: {
+    behaviors: {
+      name: "Funkcje według historii",
+      showAll: "pokaż wszystko",
+    },
+  },
+});
+
+allure.api.addTranslation("az", {
+  tab: {
+    behaviors: {
+      name: "Davranışlar",
+    },
+  },
+  widget: {
+    behaviors: {
+      name: "Hekayələr üzrə xüsusiyyətlər",
+      showAll: "hamısını göstər",
+    },
+  },
+});
+
+allure.api.addTranslation("sv", {
+  tab: {
+    behaviors: {
+      name: "Beteenden",
+    },
+  },
+  widget: {
+    behaviors: {
+      name: "Funktioner efter user stories",
+      showAll: "visa allt",
+    },
+  },
+});
+
+allure.api.addTranslation("isv", {
+  tab: {
+    behaviors: {
+      name: "Funkcionalnost",
+    },
+  },
+  widget: {
+    behaviors: {
+      name: "Funkcionalnost",
+      showAll: "pokaži vsěčto",
+    },
+  },
+});
+
+allure.api.addTab("behaviors", {
+  title: "tab.behaviors.name",
+  icon: "task",
+  route: "behaviors(/)(:testGroup)(/)(:testResult)(/)(:testResultTab)(/)",
+  onEnter: function (testGroup, testResult, testResultTab) {
+    return new allure.components.TreeLayout({
+      testGroup: testGroup,
+      testResult: testResult,
+      testResultTab: testResultTab,
+      tabName: "tab.behaviors.name",
+      baseUrl: "behaviors",
+      url: "data/behaviors.json",
+      csvUrl: "data/behaviors.csv",
+    });
+  },
+});
+
+allure.api.addWidget(
+  "widgets",
+  "behaviors",
+  allure.components.WidgetStatusView.extend({
+    rowTag: "a",
+    title: "widget.behaviors.name",
+    baseUrl: "behaviors",
+    showLinks: true,
+  }),
+);

package/src/plugins/tab-category/index.js

@@ -0,0 +1,15 @@
+allure.api.addTab("categories", {
+  title: "tab.categories.name",
+  icon: "list",
+  route: "categories(/)(:testGroup)(/)(:testResult)(/)(:testResultTab)(/)",
+  onEnter: (testGroup, testResult, testResultTab) =>
+    new allure.components.TreeLayout({
+      testGroup,
+      testResult,
+      testResultTab,
+      tabName: "tab.categories.name",
+      baseUrl: "categories",
+      url: "data/categories.json",
+      csvUrl: "data/categories.csv",
+    }),
+});

package/src/plugins/tab-graph/GraphCollection.js

@@ -0,0 +1,12 @@
+import { reportDataUrl } from "@allurereport/web-commons";
+import { Collection } from "backbone";
+
+export default class GraphCollection extends Collection {
+  url = function () {
+    return "widgets/status-chart.json";
+  };
+
+  fetch(options) {
+    return reportDataUrl(this.url(), "application/json").then((value) => super.fetch({ ...options, url: value }));
+  }
+}

package/src/plugins/tab-graph/GraphLayout.js

@@ -0,0 +1,17 @@
+import WidgetsGridView from "@/components/widgets-grid/WidgetsGridView.js";
+import AppLayout from "@/layouts/application/AppLayout.js";
+import GraphCollection from "./GraphCollection.js";
+
+export default class GraphLayout extends AppLayout {
+  initialize() {
+    this.collection = new GraphCollection();
+  }
+
+  loadData() {
+    return this.collection.fetch();
+  }
+
+  getContentView() {
+    return new WidgetsGridView({ model: this.collection, tabName: "graph" });
+  }
+}

package/src/plugins/tab-graph/index.js

@@ -0,0 +1,8 @@
+import GraphLayout from "./GraphLayout.js";
+
+allure.api.addTab("graph", {
+  title: "tab.graph.name",
+  icon: "graphs",
+  route: "graph",
+  onEnter: () => new GraphLayout(),
+});

package/src/plugins/tab-packages/index.js

@@ -0,0 +1,137 @@
+"use strict";
+
+allure.api.addTranslation("en", {
+  tab: {
+    packages: {
+      name: "Packages",
+    },
+  },
+});
+
+allure.api.addTranslation("ru", {
+  tab: {
+    packages: {
+      name: "Пакеты",
+    },
+  },
+});
+
+allure.api.addTranslation("zh", {
+  tab: {
+    packages: {
+      name: "包",
+    },
+  },
+});
+
+allure.api.addTranslation("de", {
+  tab: {
+    packages: {
+      name: "Pakete",
+    },
+  },
+});
+
+allure.api.addTranslation("nl", {
+  tab: {
+    packages: {
+      name: "Packages",
+    },
+  },
+});
+
+allure.api.addTranslation("he", {
+  tab: {
+    packages: {
+      name: "חבילות",
+    },
+  },
+});
+
+allure.api.addTranslation("br", {
+  tab: {
+    packages: {
+      name: "Pacotes",
+    },
+  },
+});
+
+allure.api.addTranslation("ja", {
+  tab: {
+    packages: {
+      name: "パッケージ",
+    },
+  },
+});
+
+allure.api.addTranslation("es", {
+  tab: {
+    packages: {
+      name: "Paquetes",
+    },
+  },
+});
+
+allure.api.addTranslation("kr", {
+  tab: {
+    packages: {
+      name: "패키지",
+    },
+  },
+});
+
+allure.api.addTranslation("fr", {
+  tab: {
+    packages: {
+      name: "Paquets",
+    },
+  },
+});
+
+allure.api.addTranslation("pl", {
+  tab: {
+    packages: {
+      name: "Pakiety",
+    },
+  },
+});
+
+allure.api.addTranslation("az", {
+  tab: {
+    packages: {
+      name: "Paketlər",
+    },
+  },
+});
+
+allure.api.addTranslation("sv", {
+  tab: {
+    packages: {
+      name: "Paket",
+    },
+  },
+});
+
+allure.api.addTranslation("isv", {
+  tab: {
+    packages: {
+      name: "Pakety",
+    },
+  },
+});
+
+allure.api.addTab("packages", {
+  title: "tab.packages.name",
+  icon: "tree",
+  route: "packages(/)(:testGroup)(/)(:testResult)(/)(:testResultTab)(/)",
+  onEnter: function (testGroup, testResult, testResultTab) {
+    return new allure.components.TreeLayout({
+      testGroup: testGroup,
+      testResult: testResult,
+      testResultTab: testResultTab,
+      tabName: "tab.packages.name",
+      baseUrl: "packages",
+      url: "data/packages.json",
+    });
+  },
+});

package/src/plugins/tab-suites/index.js

@@ -0,0 +1,15 @@
+allure.api.addTab("suites", {
+  title: "tab.suites.name",
+  icon: "folder",
+  route: "suites(/)(:testGroup)(/)(:testResult)(/)(:testResultTab)(/)",
+  onEnter: (testGroup, testResult, testResultTab) =>
+    new allure.components.TreeLayout({
+      testGroup,
+      testResult,
+      testResultTab,
+      tabName: "tab.suites.name",
+      baseUrl: "suites",
+      url: "data/suites.json",
+      csvUrl: "data/suites.csv",
+    }),
+});

package/src/plugins/tab-timeline/TimelineLayout.js

@@ -0,0 +1,18 @@
+import TreeCollection from "@/data/tree/TreeCollection.js";
+import AppLayout from "@/layouts/application/AppLayout.js";
+import TimelineView from "./TimelineView.js";
+
+export default class TimelineLayout extends AppLayout {
+  initialize({ url }) {
+    super.initialize();
+    this.items = new TreeCollection([], { url, parse: true });
+  }
+
+  loadData() {
+    return this.items.fetch();
+  }
+
+  getContentView() {
+    return new TimelineView({ collection: this.items });
+  }
+}

package/src/plugins/tab-timeline/TimelineView.hbs

@@ -0,0 +1,17 @@
+<div class="timeline__body">
+    <div class='timeline__chart'>
+        <svg class="timeline__chart_svg">
+            <g transform="translate({{PADDING}}, 15)">
+                <g class="timeline__slider"/>
+                <g class="timeline__plot" transform="translate(0, {{PADDING}})">
+                    <g class="timeline__chart__axis timeline__chart__axis_x"/>
+                </g>
+            </g>
+        </svg>
+    </div>
+    <div class='timeline__brush'>
+        <svg class="timeline__brush_svg">
+            <g class="timeline__brush__axis timeline__brush__axis_x"/>
+        </svg>
+    </div>
+</div>