# All files / 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
    29x

    29x
    29x
    29x
    95x
    15x
    15x
    80x
    80x
    80x
    14x
    14x
    14x
     /**
     * 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;
    }