feat: LEAP-355: Enhance Relation helpers and fix ts typings (#23)

* feat: LEAP-355: Enhance Relation helpers and fix ts typings

* Enhance ToolBar with additional helper methods

Added more detailed commentary to the existing functions in ToolBar.ts. Furthermore, enhanced the functionalities by introducing new functions for interacting with annotation elements. These new features and methods will help in interacting with the annotations dropdown, creating new annotations, and selecting specific annotations from the list.

* Rename Relation methods for clarity

The 'relation' function was renamed to 'getRelation', and the hover/unhover functions were renamed to 'hoverOverRelation' and 'stopHoveringOverRelation'. This was done to improve readability and better express the functionalities of these methods in the LSF Relations helper file.

* Add blur event after filing relation lebel input

helpers/LSF/Relations.ts

@@ -1,13 +1,209 @@
+import Chainable = Cypress.Chainable;
+
+const DIRECTION = {
+  LEFT: 'left',
+  RIGHT: 'right',
+  BOTH: 'bi',
+};
+
+type Direction = typeof DIRECTION[keyof typeof DIRECTION];
+
+type RelationIdxArgs = [idx: number];
+type RelationFromToArgs = [from: string, to: string];
+type RelationArgs = RelationIdxArgs | RelationFromToArgs;
+
 export const Relations = {
+  DIRECTION,
+  /**
+   * Get relation by index or by from/to labels
+   * @param args
+   */
+  getRelation(...args: RelationArgs): Chainable<JQuery<HTMLElement>> {
+    if (args.length === 1) {
+      const idx: number = args[0];
+
+      return cy.get('.lsf-relations .lsf-relations__item').eq(idx);
+    } else {
+      const [from, to]: RelationFromToArgs = args;
+
+      return cy.get('.lsf-relations').contains(from).closest('.lsf-relations').contains(to);
+    }
+  },
+  /**
+   * Check number of existed relations
+   * @param count
+   */
   hasRelations(count: number) {
     cy.get('.lsf-details__section-head').should('have.text', `Relations (${count})`);
   },
-  hasRelation(from: string, to: string) {
-    cy.get('.lsf-relations').contains(from).closest('.lsf-relations').contains(to);
+  /**
+   * Check that relation exists
+   * @param relationArgs
+   */
+  hasRelation(...relationArgs: RelationArgs) {
+    this.getRelation(...relationArgs).should('be.visible');
+  },
+  /**
+   * Check that relation has specific direction
+   * @param direction
+   * @param relationArgs
+   */
+  hasRelationDirection(direction: Direction, ...relationArgs: RelationArgs) {
+    this.getRelation(...relationArgs)
+      .find(`[data-direction="${direction}"]`)
+      .should('be.visible');
+  },
+  /**
+   * Check that relation has specific labels
+   * @param labels
+   * @param relationArgs
+   */
+  hasRelationLabels(labels: string | string[], ...relationArgs: RelationArgs) {
+    if (!Array.isArray(labels)) {
+      labels = [labels];
+    }
+
+    const $selector = this.getRelation(...relationArgs)
+      .find('.lsf-relation-meta .ant-select-selection-overflow');
+
+    if (labels.length === 0) {
+      // There is also input in the selector
+      $selector.children().should('have.length', 1);
+      return;
+    }
+
+    for (const label of labels) {
+      this.getRelation(...relationArgs).find(`.ant-select-selection-item[title="${label}"]`).should('be.visible');
+    }
+  },
+  addLabelToRelation(label: string, ...relationArgs: RelationArgs) {
+    this.getRelation(...relationArgs)
+      .find('.lsf-relation-meta .ant-select-selector')
+      .click()
+      .find('.ant-select-selection-search-input')
+      .type(label)
+      .type('{enter}');
+
+    cy.get('body').click();
+  },
+  /**
+   * Check that relation is hidden
+   * @param relationArgs
+   */
+  isHiddenRelation(...relationArgs: RelationArgs) {
+    this.getRelation(...relationArgs).should('have.class', 'lsf-relations__item_hidden');
+  },
+  /**
+   * Check that relation is not hidden
+   * @param relationArgs
+   */
+  isNotHiddenRelation(...relationArgs: RelationArgs) {
+    this.getRelation(...relationArgs).should('not.have.class', 'lsf-relations__item_hidden');
+  },
+  /**
+   * Hover over relation to show action buttons
+   * @param relationArgs
+   */
+  hoverOverRelation(...relationArgs: RelationArgs) {
+    this.getRelation(...relationArgs).trigger('mouseover');
+  },
+  /**
+   * Stop hovering over relation to hide action buttons
+   * @param relationArgs
+   */
+  stopHoveringOverRelation(...relationArgs: RelationArgs) {
+    this.getRelation(...relationArgs).trigger('mouseout');
+  },
+  /**
+   * Toggle relation direction
+   * @param relationArgs
+   */
+  toggleRelationDirection(...relationArgs: RelationArgs) {
+    this.getRelation(...relationArgs)
+      .find('.lsf-relations__direction')
+      .parent()
+      .click();
+  },
+  /**
+   * Click delete relation button
+   * @param relationArgs
+   */
+  clickDelete(...relationArgs: RelationArgs) {
+    this.getRelation(...relationArgs)
+      .find('[aria-label="Delete Relation"]')
+      .click();
+  },
+  /**
+   * Click show relation button
+   * @param relationArgs
+   */
+  clickShowRelation(...relationArgs: RelationArgs) {
+    this.getRelation(...relationArgs)
+      .find('[aria-label="Show Relation"]')
+      .click();
+  },
+  /**
+   * Click hide relation button
+   * @param relationArgs
+   */
+  clickHideRelation(...relationArgs: RelationArgs) {
+    this.getRelation(...relationArgs)
+      .find('[aria-label="Hide Relation"]')
+      .click();
+  },
+  /**
+   * Click show relation labels button
+   * @param relationArgs
+   */
+  clickShowRelationLabels(...relationArgs: RelationArgs) {
+    this.getRelation(...relationArgs)
+      .find('[aria-label="Show Relation Labels"]')
+      .click();
+  },
+  /**
+   * Click hide relation labels button
+   * @param relationArgs
+   */
+  clickHideRelationLabels(...relationArgs: RelationArgs) {
+    this.getRelation(...relationArgs)
+      .find('[aria-label="Hide Relation Labels"]')
+      .click();
+  },
+  /**
+   * Action that deletes relation without additional preparations
+   * @param relationArgs
+   */
+  deleteRelationAction(...relationArgs: RelationArgs) {
+    this.hoverOverRelation(...relationArgs);
+    this.clickDelete(...relationArgs);
+  },
+  /**
+   * Action that hides relation without additional preparations
+   * @param relationArgs
+   */
+  hideRelationAction(...relationArgs: RelationArgs) {
+    this.hoverOverRelation(...relationArgs);
+    this.clickHideRelation(...relationArgs);
+    this.stopHoveringOverRelation(...relationArgs);
+  },
+  /**
+   * Action that shows relation without additional preparations
+   * @param relationArgs
+   */
+  showRelationAction(...relationArgs: RelationArgs) {
+    this.hoverOverRelation(...relationArgs);
+    this.clickShowRelation(...relationArgs);
+    this.stopHoveringOverRelation(...relationArgs);
   },
+  /**
+   * Toggle relation creation mode by button
+   */
   toggleCreation() {
     cy.get('.lsf-region-actions__group_align_left > :nth-child(1) > .lsf-button__icon').click();
   },
+  /**
+   * Toggle relation creation mode by hotkey
+   */
   toggleCreationWithHotkey() {
     // hotkey is alt + r
     cy.get('body').type('{alt}r');

helpers/LSF/ToolBar.ts

@@ -1,10 +1,62 @@
 export const ToolBar = {
-  get root() {
+  /**
+   * Represents the root HTML element.
+   * @returns {Cypress.Chainable<JQuery<HTMLElement>>} Cypress object which represents the root HTML element.
+   */
+  get root(): Cypress.Chainable<JQuery<HTMLElement>> {
     return cy.get('.lsf-topbar');
   },
-
-  get submitBtn() {
+  /**
+   * Represents the submit button HTML element.
+   * @returns {Cypress.Chainable<JQuery<HTMLElement>>} Cypress object which represents the submit button HTML element.
+   */
+  get submitBtn(): Cypress.Chainable<JQuery<HTMLElement>> {
     return this.root
       .find('[aria-label="submit"]');
   },
+  /**
+   * Represents the annotations dropdown toggle HTML element.
+   * @returns {Cypress.Chainable<JQuery<HTMLElement>>} Cypress object which represents the annotations toggle HTML element.
+   */
+  get annotationsToggle(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.root
+      .find('.lsf-annotations-list');
+  },
+  /**
+   * Represents the create annotation button HTML element.
+   * @returns {Cypress.Chainable<JQuery<HTMLElement>>} Cypress object which represents the create annotation button HTML element.
+   */
+  get createAnnotationButton(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.root
+      .find('.lsf-annotations-list__create');
+  },
+  /**
+   * Represents the list of annotation HTML elements in the dropdown.
+   * @returns {Cypress.Chainable<JQuery<HTMLElement>>} Cypress object which represents the list of annotation HTML elements in the dropdown.
+   */
+  get annotationsList(): Cypress.Chainable<JQuery<HTMLElement>> {
+    return this.root.find('.lsf-annotations-list__list');
+  },
+  /**
+   * Toggles the display of the annotations list.
+   */
+  toggleAnnotationsList(): void {
+    this.annotationsToggle.click();
+  },
+  /**
+   * Triggers the creation of a new annotation.
+   */
+  createNewAnnotation(): void {
+    this.createAnnotationButton.click();
+  },
+  /**
+   * Triggers a click event on a specific annotation in the list.
+   * @param annotationIndex {number} - The index of the annotation in the list.
+   */
+  selectAnnotation(annotationIndex: number): void {
+    this.annotationsList
+      .find('.lsf-annotations-list__entity')
+      .eq(annotationIndex)
+      .click();
+  },
 };

tsconfig.json

@@ -7,5 +7,8 @@
     "types": ["cypress", "node"],
     "typeRoots": ["./types", "./node_modules/@types"]
   },
-  "include": ["**/*.ts"]
+  "include": [
+    "**/*.ts",
+    "node_modules/cypress/types/jquery/JQuery.d.ts"
+  ]
 }

types/Cypress.d.ts

@@ -1,11 +1,12 @@
+/// <reference types="cypress/types/cypress" />
 declare namespace Cypress {
   interface Tresholdable {
     treshold?: number;
   }
   interface CompareScreenshotOptions extends ScreenshotOptions {
     withHidden: string[];
   }
-  interface Chainable {
+  interface Chainable<Subject = any> {
     /**
      * Custom command to select DOM element by data-cy attribute.
      * @example cy.dataCy('greeting')