# All files / src/utils isElementVisible.ts

95.34% Statements 41/43
83.33% Branches 5/6
100% Functions 1/1
95.34% Lines 41/43

Press n or j to go to the next uncovered block, b, p or k for the previous block.

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    441x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    1x
    102x

    102x
    102x
    102x
    376x
    49x
    49x
    327x
    327x
    327x
    53x
    53x
    53x
     /**
     * Note: requires the `$disable-display-none-class` variable to remain `false`.
     *
     * @remarks \@since 6.0.0
     */
    export const DISPLAY_NONE_CLASS = "rmd-display-none";

    /**
     * This is a small util to check if an element within react-md is visible by
     * checking the element and all parents to see if they contain the
     * {@link DISPLAY_NONE_CLASS}.
     *
     * @example
     * Simple Example
     * ```tsx
     * const treeItem = screen.getByRole("treeitem", { name: "Tree Item" });
     * const subTreeItem = screen.getByRole("treeitem", { Name: "Sub Tree Item" });
     *
     * expect(isElementVisible(treeItem)).toBe(true);
     * expect(isElementVisible(subTreeItem)).toBe(false):
     *
     * await user.click(treeItem);
     * expect(isElementVisible(treeItem)).toBe(true);
     * expect(isElementVisible(subTreeItem)).toBe(true);
     * ```
     * @remarks \@since 6.0.0
     */
    export function isElementVisible(element: HTMLElement | null): boolean {
      if (!element) {
        return false;
      }

      let currentElement: HTMLElement | null = element;
      while (currentElement) {
        if (currentElement.classList.contains(DISPLAY_NONE_CLASS)) {
          return false;
        }

        currentElement = currentElement.parentElement;
      }

      return true;
    }