@allurereport/web-allure2 3.0.0-beta.9

package/src/components/testresult-execution/styles.scss

@@ -0,0 +1,70 @@
+@import "../../variables.scss";
+
+.test-result-execution {
+  &__title {
+    margin: $gap-size $gap-size 10px;
+  }
+  &__stage-title {
+    margin: $gap-size $gap-size 5px;
+  }
+}
+
+.step {
+  line-height: 1.2em;
+
+  &__name {
+    display: inline;
+  }
+  &__arrow {
+    display: none;
+  }
+  &__status {
+    display: flex;
+  }
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 0 4px;
+    position: relative;
+    padding: 6px $gap-size 6px 17px;
+    &_hasContent {
+      cursor: pointer;
+    }
+    &_hasContent > .step__arrow {
+      display: block;
+    }
+    &:hover {
+      background-color: $hover-color;
+      &::before {
+        background-color: $hover-color;
+      }
+    }
+    &_stage {
+      font-weight: bold;
+    }
+  }
+  &__title {
+    flex: 1 1 auto;
+  }
+  &__content {
+    margin-left: 20px;
+    display: none;
+  }
+  &_expanded > &__header > &__arrow {
+    transform: rotate(90deg);
+  }
+  &_expanded > &__content {
+    display: block;
+  }
+}
+
+.parameters {
+  display: inline;
+  white-space: nowrap;
+  &_name {
+    font-style: italic;
+  }
+  &_separator:last-child {
+    display: none;
+  }
+}

package/src/components/testresult-overview/TestResultOverviewView.hbs

@@ -0,0 +1,8 @@
+<div class="{{b "alert" "wide" status=status}}">
+    {{~> ../../blocks/status-details/status-details .}}
+</div>
+
+<div class="{{b cls 'tags'}}"></div>
+<div class="{{b cls 'before'}}"></div>
+<div class="{{b cls 'execution'}}"></div>
+<div class="{{b cls 'after'}}"></div>

package/src/components/testresult-overview/TestResultOverviewView.js

@@ -0,0 +1,46 @@
+import { View } from "backbone.marionette";
+import TestResultExecutionView from "@/components/testresult-execution/TestResultExecutionView.js";
+import { className, regions } from "@/decorators/index.js";
+import pluginsRegistry from "@/utils/pluginsRegistry.js";
+import template from "./TestResultOverviewView.hbs";
+import "./styles.scss";
+
+@className("test-result-overview")
+@regions({
+  execution: ".test-result-overview__execution",
+})
+class TestResultOverviewView extends View {
+  template = template;
+
+  initialize() {
+    this.blocks = [];
+  }
+
+  onRender() {
+    this.showBlock(this.$(".test-result-overview__tags"), pluginsRegistry.testResultBlocks.tag);
+    this.showBlock(this.$(".test-result-overview__before"), pluginsRegistry.testResultBlocks.before);
+    this.showChildView("execution", new TestResultExecutionView(this.options));
+    this.showBlock(this.$(".test-result-overview__after"), pluginsRegistry.testResultBlocks.after);
+  }
+
+  onDestroy() {
+    this.blocks.forEach((block) => block.destroy());
+  }
+
+  showBlock(container, blocks) {
+    blocks.forEach((Block) => {
+      const block = new Block({ model: this.model });
+      block.$el.appendTo(container);
+      this.blocks.push(block);
+      block.render();
+    });
+  }
+
+  templateContext() {
+    return {
+      cls: this.className,
+    };
+  }
+}
+
+export default TestResultOverviewView;

package/src/components/testresult-overview/styles.scss

@@ -0,0 +1,22 @@
+@import "../../variables.scss";
+
+.test-result-overview {
+  &__trace {
+    border-top: 1px solid $border-color;
+    padding-top: 10px;
+    margin-top: 10px;
+    display: none;
+    &_expanded {
+      display: block;
+    }
+  }
+  &__trace-toggle {
+    margin-top: 5px;
+    text-align: center;
+    padding-top: 5px;
+    color: $text-muted-color;
+    &:hover {
+      background-color: $hover-color;
+    }
+  }
+}

package/src/components/testresult-tree/TestResultTreeView.js

@@ -0,0 +1,60 @@
+import EmptyView from "@/components/empty/EmptyView.js";
+import ErrorSplashView from "@/components/error-splash/ErrorSplashView.js";
+import SideBySideView from "@/components/side-by-side/SideBySideView.js";
+import TestResultView from "@/components/testresult/TestResultView.js";
+import TreeViewContainer from "@/components/tree-view-container/TreeViewContainer.js";
+import TestResultModel from "@/data/testresult/TestResultModel";
+import { className } from "@/decorators/index.js";
+
+@className("side-by-side")
+class TestResultTreeView extends SideBySideView {
+  initialize({ tree, routeState, csvUrl }) {
+    super.initialize();
+    this.csvUrl = csvUrl;
+    this.tree = tree;
+    this.routeState = routeState;
+    this.listenTo(this.routeState, "change:treeNode", (_, treeNode) => this.showLeaf(treeNode));
+  }
+
+  showLeaf(treeNode) {
+    if (treeNode && treeNode.testResult) {
+      const baseUrl = `#${this.options.baseUrl}/${treeNode.testGroup}/${treeNode.testResult}`;
+      const model = new TestResultModel({ uid: treeNode.testResult });
+      model.fetch({
+        url: model.url(),
+        success: () => this.showChildView("right", new TestResultView({ baseUrl, model, routeState: this.routeState })),
+        error: () =>
+          this.showChildView(
+            "right",
+            new ErrorSplashView({
+              code: 404,
+              message: `Test result with uid "${treeNode.testResult}" not found`,
+            }),
+          ),
+      });
+    } else {
+      this.showChildView("right", new EmptyView({ message: "No item selected" }));
+    }
+  }
+
+  onRender() {
+    const { tabName, baseUrl } = this.options;
+    const left = new TreeViewContainer({
+      collection: this.tree,
+      routeState: this.routeState,
+      treeSorters: [],
+      tabName: tabName,
+      baseUrl: baseUrl,
+      csvUrl: this.csvUrl,
+    });
+    this.showChildView("left", left);
+  }
+
+  templateContext() {
+    return {
+      cls: "testresult-tree",
+    };
+  }
+}
+
+export default TestResultTreeView;

package/src/components/tooltip/TooltipView.js

@@ -0,0 +1,111 @@
+import bem from "b_";
+import { View } from "backbone";
+import $ from "jquery";
+import { defaults } from "underscore";
+import { className } from "@/decorators/index.js";
+import "./styles.scss";
+
+export const POSITION = {
+  "top": function ({ top, left, width }, { offset }, tipSize) {
+    return {
+      top: top - tipSize.height - offset,
+      left: left + width / 2 - tipSize.width / 2,
+    };
+  },
+  "top-right": function ({ top, left, width }, { offset }, tipSize) {
+    return {
+      top: top - tipSize.height - offset,
+      left: left + width + offset,
+    };
+  },
+  "center": function ({ top, left, height, width }, offsets, tipSize) {
+    return {
+      top: top + height / 2,
+      left: left + width / 2 - tipSize.width / 2,
+    };
+  },
+  "right": function ({ top, left, height, width }, { offset }, tipSize) {
+    return {
+      top: top + height / 2 - tipSize.height / 2,
+      left: left + width + offset,
+    };
+  },
+  "left": function ({ top, left, height }, { offset }, tipSize) {
+    return {
+      top: top + height / 2 - tipSize.height / 2,
+      left: left - offset - tipSize.width,
+    };
+  },
+  "bottom": function ({ top, left, height, width }, { offset }, tipSize) {
+    return {
+      top: top + height + offset,
+      left: left + width / 2 - tipSize.width / 2,
+    };
+  },
+  "bottom-left": function ({ top, left, height, width }, { offset }, tipSize) {
+    return {
+      top: top + height + offset,
+      left: left + width - tipSize.width,
+    };
+  },
+};
+
+@className("tooltip")
+class TooltipView extends View {
+  static container = $(document.body);
+
+  initialize(options) {
+    this.options = options;
+    defaults(this.options, { offset: 10 });
+  }
+
+  render() {
+    this.constructor.container.append(this.$el);
+  }
+
+  isVisible() {
+    return this.$el.is(":visible");
+  }
+
+  setContent(text) {
+    this.$el.html(text);
+  }
+
+  show(text, anchor) {
+    const { position } = this.options;
+    this.setContent(text);
+    this.$el.addClass(bem(this.className, { position }));
+    this.render();
+    if (document.dir === "rtl" && position === "right") {
+      this.$el.css(
+        POSITION["left"](
+          anchor[0].getBoundingClientRect(),
+          { offset: this.options.offset },
+          this.$el[0].getBoundingClientRect(),
+        ),
+      );
+    } else if (document.dir === "rtl" && position === "left") {
+      this.$el.css(
+        POSITION["right"](
+          anchor[0].getBoundingClientRect(),
+          { offset: this.options.offset },
+          this.$el[0].getBoundingClientRect(),
+        ),
+      );
+    } else {
+      this.$el.css(
+        POSITION[position](
+          anchor[0].getBoundingClientRect(),
+          { offset: this.options.offset },
+          this.$el[0].getBoundingClientRect(),
+        ),
+      );
+    }
+  }
+
+  hide() {
+    this.$el.remove();
+  }
+}
+
+export default TooltipView;

package/src/components/tooltip/styles.scss

@@ -0,0 +1,43 @@
+@import "../../variables.scss";
+
+.tooltip {
+  position: absolute;
+  background: $tooltip-bg;
+  color: $tooltip-color;
+  text-align: center;
+  padding: 0 8px;
+  line-height: 24px;
+  font-size: 12px;
+  pointer-events: none;
+  z-index: 5;
+  &:before {
+    content: "";
+    position: absolute;
+    border: 8px solid transparent;
+  }
+  &_position_top:before {
+    border-top-color: $tooltip-bg;
+    top: 100%;
+    left: 50%;
+    margin-left: -8px;
+  }
+  &_position_right:before {
+    border-right-color: $tooltip-bg;
+    top: 4px;
+    left: -16px;
+  }
+  &_position_left:before {
+    border-left-color: $tooltip-bg;
+    top: 4px;
+    left: 100%;
+  }
+  &_position_bottom:before {
+    border-bottom-color: $tooltip-bg;
+    top: -16px;
+    left: 50%;
+    margin-left: -8px;
+  }
+  &_position_center {
+    pointer-events: none;
+  }
+}

package/src/components/tree/TreeView.hbs

@@ -0,0 +1,9 @@
+<div class="{{b cls 'content'}}" data-uid="{{uid}}">
+    {{#if items}}
+        {{#each items}}
+            {{~> tree-group baseUrl=../baseUrl showGroupInfo=../showGroupInfo tabName=../tabName testResultTab=../testResultTab}}
+        {{/each}}
+    {{else}}
+           <div class="{{b cls 'empty'}}">{{t 'component.tree.empty'}}</div>
+    {{/if}}
+</div>

package/src/components/tree/TreeView.js

@@ -0,0 +1,200 @@
+import { View } from "backbone.marionette";
+import { SEARCH_QUERY_KEY } from "@/components/node-search/NodeSearchView.js";
+import getComparator from "@/data/tree/comparator.js";
+import { byCriteria, byMark, byStatuses, mix } from "@/data/tree/filter.js";
+import { behavior, className, on } from "@/decorators/index.js";
+import router from "@/router.js";
+import hotkeys from "@/utils/hotkeys.js";
+import template from "./TreeView.hbs";
+import "./styles.scss";
+
+@className("tree")
+@behavior("TooltipBehavior", { position: "bottom" })
+class TreeView extends View {
+  template = template;
+
+  cachedQuery = "";
+  initialize({ routeState, state, tabName, baseUrl, settings }) {
+    this.state = state;
+    this.routeState = routeState;
+    this.baseUrl = baseUrl;
+    this.tabName = tabName;
+    this.setState();
+    this.listenTo(this.routeState, "change:treeNode", this.selectNode);
+    this.listenTo(this.routeState, "change:testResultTab", this.render);
+
+    this.settings = settings;
+    this.listenTo(this.settings, "change", this.render);
+    this.listenTo(this.state, "change", this.handleStateChange);
+
+    this.listenTo(hotkeys, "key:up", this.onKeyUp, this);
+    this.listenTo(hotkeys, "key:down", this.onKeyDown, this);
+    this.listenTo(hotkeys, "key:esc", this.onKeyBack, this);
+    this.listenTo(hotkeys, "key:left", this.onKeyBack, this);
+  }
+
+  applyFilters() {
+    const visibleStatuses = this.settings.getVisibleStatuses();
+    const visibleMarks = this.settings.getVisibleMarks();
+    const searchQuery = this.state.get(SEARCH_QUERY_KEY);
+    const filter = mix(byCriteria(searchQuery), byStatuses(visibleStatuses), byMark(visibleMarks));
+
+    const sortSettings = this.settings.getTreeSorting();
+    const sorter = getComparator(sortSettings);
+
+    this.collection.applyFilterAndSorting(filter, sorter);
+  }
+
+  setState() {
+    const treeNode = this.routeState.get("treeNode");
+    if (treeNode && treeNode.testResult) {
+      const uid = treeNode.testResult;
+      this.state.set(uid, true);
+    }
+    if (treeNode && treeNode.testGroup) {
+      const uid = treeNode.testGroup;
+      this.state.set(uid, true);
+    }
+  }
+
+  onBeforeRender() {
+    this.applyFilters();
+  }
+
+  handleStateChange() {
+    const query = this.state.get(SEARCH_QUERY_KEY);
+    // need to check this ot to re-render nodes on folding
+    if (query !== this.cachedQuery) {
+      this.cachedQuery = query;
+      this.render();
+    }
+  }
+
+  onRender() {
+    this.selectNode();
+    if (this.state.get(SEARCH_QUERY_KEY)) {
+      this.$(".node__title").each((i, node) => {
+        this.$(node).parent().addClass("node__expanded");
+      });
+    } else {
+      this.restoreState();
+    }
+  }
+
+  selectNode() {
+    const previous = this.routeState.previous("treeNode");
+    this.toggleNode(previous, false);
+    const current = this.routeState.get("treeNode");
+    this.toggleNode(current, true);
+    this.restoreState();
+  }
+
+  toggleNode(node, active = true) {
+    if (node) {
+      const el = this.findElement(node);
+      el.toggleClass("node__title_active", active);
+      this.changeState(node.testResult);
+      this.changeState(node.testGroup);
+    }
+  }
+
+  changeState(uid, active = true) {
+    if (active) {
+      this.state.set(uid, true);
+    } else {
+      this.state.unset(uid);
+    }
+  }
+
+  restoreState() {
+    this.$("[data-uid]").each((i, node) => {
+      const el = this.$(node);
+      const uid = el.data("uid");
+      el.toggleClass("node__expanded", this.state.has(uid));
+    });
+    this.$(".node__title_active").parents(".node").toggleClass("node__expanded", true);
+    if (this.$(".node").parents(".node__expanded").length > 0) {
+      this.$(".node__expanded").parents("div.node.node__expanded").toggleClass("node__expanded", true);
+    } else {
+      this.$(".node__expanded").parents(".node").toggleClass("node__expanded", true);
+    }
+  }
+
+  findElement(treeNode) {
+    if (treeNode.testResult) {
+      return this.$(`[data-uid='${treeNode.testResult}'][data-parentUid='${treeNode.testGroup}']`);
+    } else {
+      return this.$(`[data-uid='${treeNode.testGroup}']`);
+    }
+  }
+
+  @on("click .node__title")
+  onNodeClick(e) {
+    const node = this.$(e.currentTarget);
+    const uid = node.data("uid");
+    this.changeState(uid, !this.state.has(uid));
+    node.parent().toggleClass("node__expanded");
+  }
+
+  onKeyUp(event) {
+    event.preventDefault();
+    const current = this.routeState.get("treeNode");
+    if (current && current.testResult) {
+      this.selectTestResult(this.collection.getPreviousTestResult(current.testResult));
+    } else {
+      this.selectTestResult(this.collection.getLastTestResult());
+    }
+  }
+
+  onKeyDown(event) {
+    event.preventDefault();
+    const current = this.routeState.get("treeNode");
+    if (current && current.testResult) {
+      this.selectTestResult(this.collection.getNextTestResult(current.testResult));
+    } else {
+      this.selectTestResult(this.collection.getFirstTestResult());
+    }
+  }
+
+  onKeyBack(event) {
+    event.preventDefault();
+    const current = this.routeState.get("treeNode");
+    if (!current) {
+      return;
+    }
+    if (current.testGroup && current.testResult) {
+      if (this.routeState.get("attachment")) {
+        router.setSearch({ attachment: null });
+      } else {
+        router.toUrl(`${this.baseUrl}/${current.testGroup}`);
+      }
+    } else if (current.testGroup) {
+      router.toUrl(`${this.baseUrl}`);
+    }
+  }
+
+  selectTestResult(testResult) {
+    if (testResult) {
+      const tab = this.routeState.get("testResultTab") || "";
+      router.toUrl(`${this.baseUrl}/${testResult.parentUid}/${testResult.uid}/${tab}`, {
+        replace: true,
+      });
+    }
+  }
+
+  templateContext() {
+    return {
+      cls: this.className,
+      baseUrl: this.baseUrl,
+      showGroupInfo: this.settings.isShowGroupInfo(),
+      time: this.collection.time,
+      statistic: this.collection.statistic,
+      uid: this.collection.uid,
+      tabName: this.tabName,
+      items: this.collection.toJSON(),
+      testResultTab: this.routeState.get("testResultTab") || "",
+    };
+  }
+}
+
+export default TreeView;