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

exports[`navigating between routes given route with optional path parameters when navigating to route with path parameters renders 1`] = `
<div>
  <div
    class="ClusterManager"
  >
    <div
      class="topBar"
    >
      <div
        class="items"
      >
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive focusable"
            data-testid="home-button"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="home"
            >
              home
            </span>
          </i>
        </div>
        <div
          class="size-sm"
        />
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive disabled focusable"
            data-testid="history-back"
          >
            <span
              class="icon"
              data-icon-name="arrow_back"
            >
              arrow_back
            </span>
          </i>
        </div>
        <div
          class="size-sm"
        />
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive disabled focusable"
            data-testid="history-forward"
          >
            <span
              class="icon"
              data-icon-name="arrow_forward"
            >
              arrow_forward
            </span>
          </i>
        </div>
        <div
          class="separator"
        />
      </div>
    </div>
    <main>
      <div
        id="lens-views"
      />
      <pre>
        {
  "someParameter": "some-value",
  "someOtherParameter": "some-other-value"
}
      </pre>
    </main>
    <div
      class="HotbarMenu flex column"
    >
      <div
        class="HotbarItems flex column gaps"
      >
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="0"
        >
          <div
            style="z-index: 12; position: absolute;"
          >
            <div
              class="HotbarIcon contextMenuAvailable"
            >
              <div
                class="Avatar rounded disabled avatar"
                id="hotbarIcon-hotbar-icon-catalog-entity"
                style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
              >
                Ca
              </div>
            </div>
          </div>
        </div>
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="1"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="2"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="3"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="4"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="5"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="6"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="7"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="8"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="9"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="10"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="11"
        />
      </div>
      <div
        class="HotbarSelector"
      >
        <i
          class="Icon material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="arrow_left"
          >
            arrow_left
          </span>
        </i>
        <div
          class="HotbarIndex"
        >
          <div
            class="badge Badge small clickable"
            id="hotbarIndex"
          >
            1
          </div>
        </div>
        <i
          class="Icon material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="arrow_right"
          >
            arrow_right
          </span>
        </i>
      </div>
    </div>
    <div
      class="StatusBar"
      data-testid="status-bar"
    >
      <div
        class="leftSide"
        data-testid="status-bar-left"
      />
      <div
        class="rightSide"
        data-testid="status-bar-right"
      />
    </div>
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
</div>
`;

exports[`navigating between routes given route without path parameters when navigating to route renders 1`] = `
<div>
  <div
    class="ClusterManager"
  >
    <div
      class="topBar"
    >
      <div
        class="items"
      >
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive focusable"
            data-testid="home-button"
            tabindex="0"
          >
            <span
              class="icon"
              data-icon-name="home"
            >
              home
            </span>
          </i>
        </div>
        <div
          class="size-sm"
        />
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive disabled focusable"
            data-testid="history-back"
          >
            <span
              class="icon"
              data-icon-name="arrow_back"
            >
              arrow_back
            </span>
          </i>
        </div>
        <div
          class="size-sm"
        />
        <div
          class="preventedDragging"
        >
          <i
            class="Icon material interactive disabled focusable"
            data-testid="history-forward"
          >
            <span
              class="icon"
              data-icon-name="arrow_forward"
            >
              arrow_forward
            </span>
          </i>
        </div>
        <div
          class="separator"
        />
      </div>
    </div>
    <main>
      <div
        id="lens-views"
      />
      <div>
        Some component
      </div>
    </main>
    <div
      class="HotbarMenu flex column"
    >
      <div
        class="HotbarItems flex column gaps"
      >
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="0"
        >
          <div
            style="z-index: 12; position: absolute;"
          >
            <div
              class="HotbarIcon contextMenuAvailable"
            >
              <div
                class="Avatar rounded disabled avatar"
                id="hotbarIcon-hotbar-icon-catalog-entity"
                style="width: 40px; height: 40px; background: rgb(5, 1, 130);"
              >
                Ca
              </div>
            </div>
          </div>
        </div>
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="1"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="2"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="3"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="4"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="5"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="6"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="7"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="8"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="9"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="10"
        />
        <div
          class="HotbarCell isDraggingOwner animateDown"
          index="11"
        />
      </div>
      <div
        class="HotbarSelector"
      >
        <i
          class="Icon material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="arrow_left"
          >
            arrow_left
          </span>
        </i>
        <div
          class="HotbarIndex"
        >
          <div
            class="badge Badge small clickable"
            id="hotbarIndex"
          >
            1
          </div>
        </div>
        <i
          class="Icon material interactive focusable"
          tabindex="0"
        >
          <span
            class="icon"
            data-icon-name="arrow_right"
          >
            arrow_right
          </span>
        </i>
      </div>
    </div>
    <div
      class="StatusBar"
      data-testid="status-bar"
    >
      <div
        class="leftSide"
        data-testid="status-bar-left"
      />
      <div
        class="rightSide"
        data-testid="status-bar-right"
      />
    </div>
  </div>
  <div
    class="Notifications flex column align-flex-end"
  />
</div>
`;
