@zohodesk/components 1.6.31 → 1.6.34

package/es/Tooltip/__tests__/__snapshots__/Tooltip.spec.js.snap

@@ -0,0 +1,813 @@
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
+
+exports[`Tooltip Render with a following hover on an element without a title 1`] = `<DocumentFragment />`;
+
+exports[`Tooltip Render with a following hover on another titled element 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Next tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with click event on the hovered element 1`] = `<DocumentFragment />`;
+
+exports[`Tooltip Render with customClass 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext custom-tooltip"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-dottedTitle and a title different from the element text 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-dottedTitle and an overflowing element text 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Full saved title
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-ishtml as false 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      <b>
+        Bold
+      </b>
+       text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-ishtml as true 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      <b>
+        Bold
+      </b>
+       text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title taking precedence over title 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Data title
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-position as bottom with space below 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-position as bottom without space below 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 720px;"
+  >
+    <span
+      class="tooltiparrow arrowDown"
+      style="left: 44px; top: 36px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-position as left at the bottom screen edge 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 293px; top: 758px;"
+  >
+    <span
+      class="tooltiparrow arrowRight"
+      style="left: 98px; top: 41px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-position as left at the top screen edge 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 293px; top: 2px;"
+  >
+    <span
+      class="tooltiparrow arrowRight"
+      style="left: 98px; top: 10px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-position as left in rtl 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 457px; top: 290px;"
+  >
+    <span
+      class="tooltiparrow arrowLeft"
+      style="left: -1px; top: 19px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-position as left with space on the left 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 293px; top: 290px;"
+  >
+    <span
+      class="tooltiparrow arrowRight"
+      style="left: 98px; top: 19px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-position as left without space on the left 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 80px; top: 290px;"
+  >
+    <span
+      class="tooltiparrow arrowLeft"
+      style="left: -1px; top: 19px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-position as right in rtl 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 293px; top: 290px;"
+  >
+    <span
+      class="tooltiparrow arrowRight"
+      style="left: 98px; top: 19px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-position as right with space on the right 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 457px; top: 290px;"
+  >
+    <span
+      class="tooltiparrow arrowLeft"
+      style="left: -1px; top: 19px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-position as right without space on the right 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 823px; top: 290px;"
+  >
+    <span
+      class="tooltiparrow arrowRight"
+      style="left: 98px; top: 19px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-position as top at the left screen edge 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 2px; top: 250px;"
+  >
+    <span
+      class="tooltiparrow arrowDown"
+      style="left: 9px; top: 36px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-position as top at the right screen edge 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 898px; top: 250px;"
+  >
+    <span
+      class="tooltiparrow arrowDown"
+      style="left: 73px; top: 36px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-position as top with space above 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 250px;"
+  >
+    <span
+      class="tooltiparrow arrowDown"
+      style="left: 44px; top: 36px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-position as top without space above 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 40px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-wrap as break-spaces 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_breakSpaces"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-wrap as nowrap 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-wrap as pre 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_preWrap"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-wrap as pre-line 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_preLine"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-title-wrap as pre-wrap 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_preWrap"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-tooltip-noarrow as false 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 250px;"
+  >
+    <span
+      class="tooltiparrow arrowDown"
+      style="left: 44px; top: 36px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with data-tooltip-noarrow as true 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 250px;"
+  >
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with dataId 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="tooltip-dataId"
+    data-test-id="tooltip-dataId"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with default props 1`] = `<DocumentFragment />`;
+
+exports[`Tooltip Render with mouseleave event on the hovered element 1`] = `<DocumentFragment />`;
+
+exports[`Tooltip Render with mouseup event on the hovered element 1`] = `<DocumentFragment />`;
+
+exports[`Tooltip Render with no position at the left screen edge 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 2px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 9px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with no position at the right screen edge 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 898px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 73px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with no position below the target 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with no position near the bottom edge flipping above 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 720px;"
+  >
+    <span
+      class="tooltiparrow arrowDown"
+      style="left: 44px; top: 36px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with title attribute only 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Tooltip text
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with title matching an overflowing element text 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Save
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with title matching the element text 1`] = `<DocumentFragment />`;
+
+exports[`Tooltip Render with title matching the element text and data-istitle 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Save
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Tooltip Render with title matching the text of an icon element 1`] = `
+<DocumentFragment>
+  <div
+    class="tooltiptext"
+    data-id="toolTip"
+    data-test-id="toolTip"
+    style="left: 377px; top: 330px;"
+  >
+    <span
+      class="tooltiparrow arrowUp"
+      style="left: 44px; top: -4px;"
+    />
+    <div
+      class="tooltipcont whiteSpace_normal"
+    >
+      Save
+    </div>
+  </div>
+</DocumentFragment>
+`;