// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders compact no background successfully 1`] = `
<DocumentFragment>
  <div
    class="pf-c-tree-view pf-m-compact pf-m-no-background"
  >
    <ul
      class="pf-c-tree-view__list"
      role="tree"
    >
      <li
        aria-expanded="true"
        class="pf-c-tree-view__list-item pf-m-expanded"
        id="AppLaunch"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            tabindex="0"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-content"
              >
                <span
                  class="pf-c-tree-view__node-text"
                >
                  ApplicationLauncher
                </span>
              </span>
            </span>
          </button>
        </div>
        <ul
          class="pf-c-tree-view__list"
          role="group"
        >
          <li
            class="pf-c-tree-view__list-item"
            id="App1"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-content"
                  >
                    <span
                      class="pf-c-tree-view__node-text"
                    >
                      Application 1
                    </span>
                  </span>
                </span>
              </button>
            </div>
          </li>
          <li
            class="pf-c-tree-view__list-item"
            id="App2"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-content"
                  >
                    <span
                      class="pf-c-tree-view__node-text"
                    >
                      Application 2
                    </span>
                  </span>
                </span>
              </button>
            </div>
          </li>
        </ul>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Cost"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-content"
              >
                <span
                  class="pf-c-tree-view__node-text"
                >
                  Cost Management
                </span>
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Sources"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-content"
              >
                <span
                  class="pf-c-tree-view__node-text"
                >
                  Sources
                </span>
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Long"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-content"
              >
                <span
                  class="pf-c-tree-view__node-text"
                >
                  Really really really long folder name that overflows the container it is in
                </span>
              </span>
            </span>
          </button>
        </div>
      </li>
    </ul>
  </div>
</DocumentFragment>
`;

exports[`renders compact successfully 1`] = `
<DocumentFragment>
  <div
    class="pf-c-tree-view pf-m-compact"
  >
    <ul
      class="pf-c-tree-view__list"
      role="tree"
    >
      <li
        aria-expanded="true"
        class="pf-c-tree-view__list-item pf-m-expanded"
        id="AppLaunch"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            tabindex="0"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-content"
              >
                <span
                  class="pf-c-tree-view__node-text"
                >
                  ApplicationLauncher
                </span>
              </span>
            </span>
          </button>
        </div>
        <ul
          class="pf-c-tree-view__list"
          role="group"
        >
          <li
            class="pf-c-tree-view__list-item"
            id="App1"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-content"
                  >
                    <span
                      class="pf-c-tree-view__node-text"
                    >
                      Application 1
                    </span>
                  </span>
                </span>
              </button>
            </div>
          </li>
          <li
            class="pf-c-tree-view__list-item"
            id="App2"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-content"
                  >
                    <span
                      class="pf-c-tree-view__node-text"
                    >
                      Application 2
                    </span>
                  </span>
                </span>
              </button>
            </div>
          </li>
        </ul>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Cost"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-content"
              >
                <span
                  class="pf-c-tree-view__node-text"
                >
                  Cost Management
                </span>
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Sources"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-content"
              >
                <span
                  class="pf-c-tree-view__node-text"
                >
                  Sources
                </span>
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Long"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-content"
              >
                <span
                  class="pf-c-tree-view__node-text"
                >
                  Really really really long folder name that overflows the container it is in
                </span>
              </span>
            </span>
          </button>
        </div>
      </li>
    </ul>
  </div>
</DocumentFragment>
`;

exports[`renders guides successfully 1`] = `
<DocumentFragment>
  <div
    class="pf-c-tree-view pf-m-guides"
  >
    <ul
      class="pf-c-tree-view__list"
      role="tree"
    >
      <li
        aria-expanded="true"
        class="pf-c-tree-view__list-item pf-m-expanded"
        id="AppLaunch"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            tabindex="0"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                ApplicationLauncher
              </span>
            </span>
          </button>
        </div>
        <ul
          class="pf-c-tree-view__list"
          role="group"
        >
          <li
            class="pf-c-tree-view__list-item"
            id="App1"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-text"
                  >
                    Application 1
                  </span>
                </span>
              </button>
            </div>
          </li>
          <li
            class="pf-c-tree-view__list-item"
            id="App2"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-text"
                  >
                    Application 2
                  </span>
                </span>
              </button>
            </div>
          </li>
        </ul>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Cost"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Cost Management
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Sources"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Sources
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Long"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Really really really long folder name that overflows the container it is in
              </span>
            </span>
          </button>
        </div>
      </li>
    </ul>
  </div>
</DocumentFragment>
`;

exports[`tree view renders active successfully 1`] = `
<DocumentFragment>
  <div
    class="pf-c-tree-view"
  >
    <ul
      class="pf-c-tree-view__list"
      role="tree"
    >
      <li
        aria-expanded="true"
        class="pf-c-tree-view__list-item pf-m-expanded"
        id="AppLaunch"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            tabindex="0"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                ApplicationLauncher
              </span>
            </span>
          </button>
        </div>
        <ul
          class="pf-c-tree-view__list"
          role="group"
        >
          <li
            class="pf-c-tree-view__list-item"
            id="App1"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-text"
                  >
                    Application 1
                  </span>
                </span>
              </button>
            </div>
          </li>
          <li
            class="pf-c-tree-view__list-item"
            id="App2"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-text"
                  >
                    Application 2
                  </span>
                </span>
              </button>
            </div>
          </li>
        </ul>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Cost"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Cost Management
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Sources"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Sources
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Long"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Really really really long folder name that overflows the container it is in
              </span>
            </span>
          </button>
        </div>
      </li>
    </ul>
  </div>
</DocumentFragment>
`;

exports[`tree view renders badges successfully 1`] = `
<DocumentFragment>
  <div
    class="pf-c-tree-view"
  >
    <ul
      class="pf-c-tree-view__list"
      role="tree"
    >
      <li
        aria-expanded="true"
        class="pf-c-tree-view__list-item pf-m-expanded"
        id="AppLaunch"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            tabindex="0"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                ApplicationLauncher
              </span>
              <span
                class="pf-c-tree-view__node-count"
              >
                <span
                  class="pf-c-badge pf-m-read"
                >
                  2
                </span>
              </span>
            </span>
          </button>
        </div>
        <ul
          class="pf-c-tree-view__list"
          role="group"
        >
          <li
            class="pf-c-tree-view__list-item"
            id="App1"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-text"
                  >
                    Application 1
                  </span>
                  <span
                    class="pf-c-tree-view__node-count"
                  >
                    <span
                      class="pf-c-badge pf-m-read"
                    >
                      2
                    </span>
                  </span>
                </span>
              </button>
            </div>
          </li>
          <li
            class="pf-c-tree-view__list-item"
            id="App2"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-text"
                  >
                    Application 2
                  </span>
                  <span
                    class="pf-c-tree-view__node-count"
                  >
                    <span
                      class="pf-c-badge pf-m-read"
                    >
                      2
                    </span>
                  </span>
                </span>
              </button>
            </div>
          </li>
        </ul>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Cost"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Cost Management
              </span>
              <span
                class="pf-c-tree-view__node-count"
              >
                <span
                  class="pf-c-badge pf-m-read"
                >
                  1
                </span>
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Sources"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Sources
              </span>
              <span
                class="pf-c-tree-view__node-count"
              >
                <span
                  class="pf-c-badge pf-m-read"
                >
                  1
                </span>
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Long"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Really really really long folder name that overflows the container it is in
              </span>
              <span
                class="pf-c-tree-view__node-count"
              >
                <span
                  class="pf-c-badge pf-m-read"
                >
                  1
                </span>
              </span>
            </span>
          </button>
        </div>
      </li>
    </ul>
  </div>
</DocumentFragment>
`;

exports[`tree view renders basic successfully 1`] = `
<DocumentFragment>
  <div
    class="pf-c-tree-view"
  >
    <ul
      class="pf-c-tree-view__list"
      role="tree"
    >
      <li
        aria-expanded="true"
        class="pf-c-tree-view__list-item pf-m-expanded"
        id="AppLaunch"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            tabindex="0"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                ApplicationLauncher
              </span>
            </span>
          </button>
        </div>
        <ul
          class="pf-c-tree-view__list"
          role="group"
        >
          <li
            class="pf-c-tree-view__list-item"
            id="App1"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-text"
                  >
                    Application 1
                  </span>
                </span>
              </button>
            </div>
          </li>
          <li
            class="pf-c-tree-view__list-item"
            id="App2"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-text"
                  >
                    Application 2
                  </span>
                </span>
              </button>
            </div>
          </li>
        </ul>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Cost"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Cost Management
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Sources"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Sources
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Long"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Really really really long folder name that overflows the container it is in
              </span>
            </span>
          </button>
        </div>
      </li>
    </ul>
  </div>
</DocumentFragment>
`;

exports[`tree view renders checkboxes successfully 1`] = `
<DocumentFragment>
  <div
    class="pf-c-tree-view"
  >
    <ul
      class="pf-c-tree-view__list"
      role="tree"
    >
      <li
        aria-expanded="true"
        class="pf-c-tree-view__list-item pf-m-expanded"
        id="AppLaunch"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <label
            class="pf-c-tree-view__node pf-m-selectable"
            for="checkbox-id18"
            id="label-checkbox-id18"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <button
                aria-labelledby="label-checkbox-id18"
                class="pf-c-tree-view__node-toggle"
                tabindex="0"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </button>
              <span
                class="pf-c-tree-view__node-check"
              >
                <input
                  id="checkbox-id18"
                  tabindex="0"
                  type="checkbox"
                />
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                ApplicationLauncher
              </span>
            </span>
          </label>
        </div>
        <ul
          class="pf-c-tree-view__list"
          role="group"
        >
          <li
            class="pf-c-tree-view__list-item"
            id="App1"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <label
                class="pf-c-tree-view__node pf-m-selectable"
                for="checkbox-id19"
                id="label-checkbox-id19"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <button
                    aria-labelledby="label-checkbox-id19"
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </button>
                  <span
                    class="pf-c-tree-view__node-check"
                  >
                    <input
                      id="checkbox-id19"
                      tabindex="-1"
                      type="checkbox"
                    />
                  </span>
                  <span
                    class="pf-c-tree-view__node-text"
                  >
                    Application 1
                  </span>
                </span>
              </label>
            </div>
          </li>
          <li
            class="pf-c-tree-view__list-item"
            id="App2"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <label
                class="pf-c-tree-view__node pf-m-selectable"
                for="checkbox-id20"
                id="label-checkbox-id20"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <button
                    aria-labelledby="label-checkbox-id20"
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                    type="button"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </button>
                  <span
                    class="pf-c-tree-view__node-check"
                  >
                    <input
                      id="checkbox-id20"
                      tabindex="-1"
                      type="checkbox"
                    />
                  </span>
                  <span
                    class="pf-c-tree-view__node-text"
                  >
                    Application 2
                  </span>
                </span>
              </label>
            </div>
          </li>
        </ul>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Cost"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <label
            class="pf-c-tree-view__node pf-m-selectable"
            for="checkbox-id21"
            id="label-checkbox-id21"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <button
                aria-labelledby="label-checkbox-id21"
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </button>
              <span
                class="pf-c-tree-view__node-check"
              >
                <input
                  id="checkbox-id21"
                  tabindex="-1"
                  type="checkbox"
                />
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Cost Management
              </span>
            </span>
          </label>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Sources"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <label
            class="pf-c-tree-view__node pf-m-selectable"
            for="checkbox-id22"
            id="label-checkbox-id22"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <button
                aria-labelledby="label-checkbox-id22"
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </button>
              <span
                class="pf-c-tree-view__node-check"
              >
                <input
                  id="checkbox-id22"
                  tabindex="-1"
                  type="checkbox"
                />
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Sources
              </span>
            </span>
          </label>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Long"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <label
            class="pf-c-tree-view__node pf-m-selectable"
            for="checkbox-id23"
            id="label-checkbox-id23"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <button
                aria-labelledby="label-checkbox-id23"
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </button>
              <span
                class="pf-c-tree-view__node-check"
              >
                <input
                  id="checkbox-id23"
                  tabindex="-1"
                  type="checkbox"
                />
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Really really really long folder name that overflows the container it is in
              </span>
            </span>
          </label>
        </div>
      </li>
    </ul>
  </div>
</DocumentFragment>
`;

exports[`tree view renders icons successfully 1`] = `
<DocumentFragment>
  <div
    class="pf-c-tree-view"
  >
    <ul
      class="pf-c-tree-view__list"
      role="tree"
    >
      <li
        aria-expanded="true"
        class="pf-c-tree-view__list-item pf-m-expanded"
        id="AppLaunch"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            tabindex="0"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-icon"
              >
                <svg
                  aria-hidden="true"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style="vertical-align: -0.125em;"
                  viewBox="0 0 576 512"
                  width="1em"
                >
                  <path
                    d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"
                  />
                </svg>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                ApplicationLauncher
              </span>
            </span>
          </button>
        </div>
        <ul
          class="pf-c-tree-view__list"
          role="group"
        >
          <li
            class="pf-c-tree-view__list-item"
            id="App1"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-icon"
                  >
                    <svg
                      aria-hidden="true"
                      fill="currentColor"
                      height="1em"
                      role="img"
                      style="vertical-align: -0.125em;"
                      viewBox="0 0 512 512"
                      width="1em"
                    >
                      <path
                        d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"
                      />
                    </svg>
                  </span>
                  <span
                    class="pf-c-tree-view__node-text"
                  >
                    Application 1
                  </span>
                </span>
              </button>
            </div>
          </li>
          <li
            class="pf-c-tree-view__list-item"
            id="App2"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-icon"
                  >
                    <svg
                      aria-hidden="true"
                      fill="currentColor"
                      height="1em"
                      role="img"
                      style="vertical-align: -0.125em;"
                      viewBox="0 0 512 512"
                      width="1em"
                    >
                      <path
                        d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"
                      />
                    </svg>
                  </span>
                  <span
                    class="pf-c-tree-view__node-text"
                  >
                    Application 2
                  </span>
                </span>
              </button>
            </div>
          </li>
        </ul>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Cost"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-icon"
              >
                <svg
                  aria-hidden="true"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style="vertical-align: -0.125em;"
                  viewBox="0 0 512 512"
                  width="1em"
                >
                  <path
                    d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"
                  />
                </svg>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Cost Management
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Sources"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-icon"
              >
                <svg
                  aria-hidden="true"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style="vertical-align: -0.125em;"
                  viewBox="0 0 512 512"
                  width="1em"
                >
                  <path
                    d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"
                  />
                </svg>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Sources
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Long"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-icon"
              >
                <svg
                  aria-hidden="true"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style="vertical-align: -0.125em;"
                  viewBox="0 0 512 512"
                  width="1em"
                >
                  <path
                    d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"
                  />
                </svg>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Really really really long folder name that overflows the container it is in
              </span>
            </span>
          </button>
        </div>
      </li>
    </ul>
  </div>
</DocumentFragment>
`;

exports[`tree view renders individual flag options successfully 1`] = `
<DocumentFragment>
  <div
    class="pf-c-tree-view"
  >
    <ul
      class="pf-c-tree-view__list"
      role="tree"
    >
      <li
        aria-expanded="true"
        class="pf-c-tree-view__list-item pf-m-expanded"
        id="AppLaunch"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <label
            class="pf-c-tree-view__node pf-m-selectable"
            for="checkbox-id36"
            id="label-checkbox-id36"
            tabindex="0"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <button
                aria-labelledby="label-checkbox-id36"
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </button>
              <span
                class="pf-c-tree-view__node-check"
              >
                <input
                  id="checkbox-id36"
                  tabindex="-1"
                  type="checkbox"
                />
              </span>
              <span
                class="pf-c-tree-view__node-icon"
              >
                <svg
                  aria-hidden="true"
                  fill="currentColor"
                  height="1em"
                  role="img"
                  style="vertical-align: -0.125em;"
                  viewBox="0 0 576 512"
                  width="1em"
                >
                  <path
                    d="M572.694 292.093L500.27 416.248A63.997 63.997 0 0 1 444.989 448H45.025c-18.523 0-30.064-20.093-20.731-36.093l72.424-124.155A64 64 0 0 1 152 256h399.964c18.523 0 30.064 20.093 20.73 36.093zM152 224h328v-48c0-26.51-21.49-48-48-48H272l-64-64H48C21.49 64 0 85.49 0 112v278.046l69.077-118.418C86.214 242.25 117.989 224 152 224z"
                  />
                </svg>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                ApplicationLauncher
              </span>
            </span>
          </label>
        </div>
        <ul
          class="pf-c-tree-view__list"
          role="group"
        >
          <li
            class="pf-c-tree-view__list-item"
            id="App1"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-text"
                  >
                    Application 1
                  </span>
                </span>
              </button>
            </div>
          </li>
          <li
            class="pf-c-tree-view__list-item"
            id="App2"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-text"
                  >
                    Application 2
                  </span>
                  <span
                    class="pf-c-tree-view__node-count"
                  >
                    <span
                      class="pf-c-badge pf-m-read"
                    >
                      2
                    </span>
                  </span>
                </span>
              </button>
            </div>
          </li>
        </ul>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Cost"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Cost Management
              </span>
              <span
                class="pf-c-tree-view__node-count"
              >
                <span
                  class="pf-c-badge pf-m-read"
                >
                  1
                </span>
              </span>
            </span>
          </button>
          <div
            class="pf-c-tree-view__action"
          >
            <button
              aria-disabled="false"
              aria-label="Folder action"
              class="pf-c-button pf-m-plain"
              data-ouia-component-id="OUIA-Generated-Button-plain-1"
              data-ouia-component-type="PF4/Button"
              data-ouia-safe="true"
              type="button"
            >
              <svg
                aria-hidden="true"
                fill="currentColor"
                height="1em"
                role="img"
                style="vertical-align: -0.125em;"
                viewBox="0 0 512 512"
                width="1em"
              >
                <path
                  d="M464 128H272l-64-64H48C21.49 64 0 85.49 0 112v288c0 26.51 21.49 48 48 48h416c26.51 0 48-21.49 48-48V176c0-26.51-21.49-48-48-48z"
                />
              </svg>
            </button>
          </div>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Sources"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Sources
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Long"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Really really really long folder name that overflows the container it is in
              </span>
            </span>
          </button>
        </div>
      </li>
    </ul>
  </div>
</DocumentFragment>
`;

exports[`tree view renders search successfully 1`] = `
<DocumentFragment>
  <div
    class="pf-c-tree-view__search"
  >
    <input
      aria-label="Search input example"
      class="pf-c-form-control pf-m-search"
      id="input-search"
      name="search-input"
      type="search"
    />
  </div>
</DocumentFragment>
`;

exports[`tree view renders toolbar successfully 1`] = `
<DocumentFragment>
  <div
    class="pf-c-tree-view"
  >
    <div>
      test
    </div>
    <hr
      class="pf-c-divider"
    />
    <ul
      class="pf-c-tree-view__list"
      role="tree"
    >
      <li
        aria-expanded="true"
        class="pf-c-tree-view__list-item pf-m-expanded"
        id="AppLaunch"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            tabindex="0"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                ApplicationLauncher
              </span>
            </span>
          </button>
        </div>
        <ul
          class="pf-c-tree-view__list"
          role="group"
        >
          <li
            class="pf-c-tree-view__list-item"
            id="App1"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-text"
                  >
                    Application 1
                  </span>
                </span>
              </button>
            </div>
          </li>
          <li
            class="pf-c-tree-view__list-item"
            id="App2"
            role="treeitem"
            tabindex="-1"
          >
            <div
              class="pf-c-tree-view__content"
            >
              <button
                class="pf-c-tree-view__node"
                type="button"
              >
                <span
                  class="pf-c-tree-view__node-container"
                >
                  <span
                    class="pf-c-tree-view__node-toggle"
                    tabindex="-1"
                  >
                    <span
                      class="pf-c-tree-view__node-toggle-icon"
                    >
                      <svg
                        aria-hidden="true"
                        fill="currentColor"
                        height="1em"
                        role="img"
                        style="vertical-align: -0.125em;"
                        viewBox="0 0 256 512"
                        width="1em"
                      >
                        <path
                          d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                        />
                      </svg>
                    </span>
                  </span>
                  <span
                    class="pf-c-tree-view__node-text"
                  >
                    Application 2
                  </span>
                </span>
              </button>
            </div>
          </li>
        </ul>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Cost"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Cost Management
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Sources"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Sources
              </span>
            </span>
          </button>
        </div>
      </li>
      <li
        class="pf-c-tree-view__list-item"
        id="Long"
        role="treeitem"
        tabindex="-1"
      >
        <div
          class="pf-c-tree-view__content"
        >
          <button
            class="pf-c-tree-view__node"
            type="button"
          >
            <span
              class="pf-c-tree-view__node-container"
            >
              <span
                class="pf-c-tree-view__node-toggle"
                tabindex="-1"
              >
                <span
                  class="pf-c-tree-view__node-toggle-icon"
                >
                  <svg
                    aria-hidden="true"
                    fill="currentColor"
                    height="1em"
                    role="img"
                    style="vertical-align: -0.125em;"
                    viewBox="0 0 256 512"
                    width="1em"
                  >
                    <path
                      d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
                    />
                  </svg>
                </span>
              </span>
              <span
                class="pf-c-tree-view__node-text"
              >
                Really really really long folder name that overflows the container it is in
              </span>
            </span>
          </button>
        </div>
      </li>
    </ul>
  </div>
</DocumentFragment>
`;
