HierarchicalLocationsView.test.tsx.snap

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

exports[`<HierarchicalLocationsView /> displays a single location when complete 1`] = `
<div
  className="hierarchical-locations-view "
>
  <div
    className="file-locations hierarchical-locations-view__content"
  >
    <div>
      <VisibilitySensor
        onChange={[Function]}
        partialVisibility={true}
      >
        <div
          className="result-container"
          data-testid="result-container"
        >
          <div
            className="result-container__header result-container__header--collapsible"
            onClick={[Function]}
          >
            <svg
              className="mdi-icon icon-inline"
              height={24}
              viewBox="0 0 64 64"
              width={24}
            >
              <g>
                <path
                  d="M23,22.4c1.3,0,2.4-1.1,2.4-2.4s-1.1-2.4-2.4-2.4c-1.3,0-2.4,1.1-2.4,2.4S21.7,22.4,23,22.4z"
                />
                <path
                  d="M35,26.4c1.3,0,2.4-1.1,2.4-2.4s-1.1-2.4-2.4-2.4s-2.4,1.1-2.4,2.4S33.7,26.4,35,26.4z"
                />
                <path
                  d="M23,42.4c1.3,0,2.4-1.1,2.4-2.4s-1.1-2.4-2.4-2.4s-2.4,1.1-2.4,2.4S21.7,42.4,23,42.4z"
                />
                <path
                  d="M50,16h-1.5c-0.3,0-0.5,0.2-0.5,0.5v35c0,0.3-0.2,0.5-0.5,0.5h-27c-0.5,0-1-0.2-1.4-0.6l-0.6-0.6c-0.1-0.1-0.1-0.2-0.1-0.4 c0-0.3,0.2-0.5,0.5-0.5H44c1.1,0,2-0.9,2-2V12c0-1.1-0.9-2-2-2H14c-1.1,0-2,0.9-2,2v36.3c0,1.1,0.4,2.1,1.2,2.8l3.1,3.1 c1.1,1.1,2.7,1.8,4.2,1.8H50c1.1,0,2-0.9,2-2V18C52,16.9,51.1,16,50,16z M19,20c0-2.2,1.8-4,4-4c1.4,0,2.8,0.8,3.5,2 c1.1,1.9,0.4,4.3-1.5,5.4V33c1-0.6,2.3-0.9,4-0.9c1,0,2-0.5,2.8-1.3C32.5,30,33,29.1,33,28v-0.6c-1.2-0.7-2-2-2-3.5 c0-2.2,1.8-4,4-4c2.2,0,4,1.8,4,4c0,1.5-0.8,2.7-2,3.5h0c-0.1,2.1-0.9,4.4-2.5,6c-1.6,1.6-3.4,2.4-5.5,2.5c-0.8,0-1.4,0.1-1.9,0.3 c-0.2,0.1-1,0.8-1.2,0.9C26.6,38,27,38.9,27,40c0,2.2-1.8,4-4,4s-4-1.8-4-4c0-1.5,0.8-2.7,2-3.4V23.4C19.8,22.7,19,21.4,19,20z"
                />
              </g>
            </svg>
            <div
              className="result-container__header-title "
              data-testid="result-container-header"
            >
              <span
                onClick={[Function]}
              >
                <a
                  to="/github.com/foo/bar"
                >
                  foo/bar
                </a>
                 ›
                 
                <a
                  to="/github.com/foo/bar/-/blob/undefined"
                >
                  <strong>
                    
                  </strong>
                </a>
              </span>
            </div>
            <small
              className="result-container__toggle-matches-container"
            >
              <svg
                className="mdi-icon icon-inline"
                fill="currentColor"
                height={24}
                viewBox="0 0 24 24"
                width={24}
              >
                <path
                  d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
                />
              </svg>
            </small>
          </div>
          <div
            className="file-match-children"
          >
            <a
              className="file-match-children__item file-match-children__item-clickable e2e-file-match-children-item"
              onClick={[Function]}
              to="/github.com/foo/bar/-/blob/undefined#L2:1"
            >
              <VisibilitySensor
                offset={
                  Object {
                    "bottom": -500,
                  }
                }
                onChange={[Function]}
                partialVisibility={true}
              >
                <code
                  className="code-excerpt file-match-children__item-code-excerpt"
                >
                  <table>
                    <tbody>
                      <tr>
                        <td
                          className="line"
                        >
                          1
                        </td>
                        <td
                          className="code"
                        >
                           
                        </td>
                      </tr>
                      <tr>
                        <td
                          className="line"
                        >
                          2
                        </td>
                        <td
                          className="code"
                        >
                           
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </code>
              </VisibilitySensor>
            </a>
          </div>
        </div>
      </VisibilitySensor>
    </div>
  </div>
</div>
`;

exports[`<HierarchicalLocationsView /> displays multiple locations grouped by file 1`] = `
<div
  className="hierarchical-locations-view "
>
  <div
    className="resizable resizable--right hierarchical-locations-view__resizable"
    style={
      Object {
        "width": "200px",
      }
    }
  >
    <div
      className="resizable__ghost "
      onMouseMove={[Function]}
      onMouseUp={[Function]}
    />
    <div
      className="list-group list-group-flush hierarchical-locations-view__list"
    >
      <span
        className="list-group-item hierarchical-locations-view__item active"
        onClick={[Function]}
      >
        <span
          className="hierarchical-locations-view__item-name"
          title="file1.txt"
        >
          <span
            className="hierarchical-locations-view__item-name-text"
          >
             
            <strong>
              file1.txt
            </strong>
          </span>
        </span>
        <span
          className="badge badge-secondary badge-pill hierarchical-locations-view__item-badge"
        >
          2
        </span>
      </span>
      <span
        className="list-group-item hierarchical-locations-view__item "
        onClick={[Function]}
      >
        <span
          className="hierarchical-locations-view__item-name"
          title="file2.txt"
        >
          <span
            className="hierarchical-locations-view__item-name-text"
          >
             
            <strong>
              file2.txt
            </strong>
          </span>
        </span>
        <span
          className="badge badge-secondary badge-pill hierarchical-locations-view__item-badge"
        >
          3
        </span>
      </span>
    </div>
    <div
      className="resizable__handle resizable__handle--right "
      onMouseDown={[Function]}
    />
  </div>
  <div
    className="file-locations hierarchical-locations-view__content"
  >
    <div>
      <VisibilitySensor
        onChange={[Function]}
        partialVisibility={true}
      >
        <div
          className="result-container"
          data-testid="result-container"
        >
          <div
            className="result-container__header result-container__header--collapsible"
            onClick={[Function]}
          >
            <svg
              className="mdi-icon icon-inline"
              height={24}
              viewBox="0 0 64 64"
              width={24}
            >
              <g>
                <path
                  d="M23,22.4c1.3,0,2.4-1.1,2.4-2.4s-1.1-2.4-2.4-2.4c-1.3,0-2.4,1.1-2.4,2.4S21.7,22.4,23,22.4z"
                />
                <path
                  d="M35,26.4c1.3,0,2.4-1.1,2.4-2.4s-1.1-2.4-2.4-2.4s-2.4,1.1-2.4,2.4S33.7,26.4,35,26.4z"
                />
                <path
                  d="M23,42.4c1.3,0,2.4-1.1,2.4-2.4s-1.1-2.4-2.4-2.4s-2.4,1.1-2.4,2.4S21.7,42.4,23,42.4z"
                />
                <path
                  d="M50,16h-1.5c-0.3,0-0.5,0.2-0.5,0.5v35c0,0.3-0.2,0.5-0.5,0.5h-27c-0.5,0-1-0.2-1.4-0.6l-0.6-0.6c-0.1-0.1-0.1-0.2-0.1-0.4 c0-0.3,0.2-0.5,0.5-0.5H44c1.1,0,2-0.9,2-2V12c0-1.1-0.9-2-2-2H14c-1.1,0-2,0.9-2,2v36.3c0,1.1,0.4,2.1,1.2,2.8l3.1,3.1 c1.1,1.1,2.7,1.8,4.2,1.8H50c1.1,0,2-0.9,2-2V18C52,16.9,51.1,16,50,16z M19,20c0-2.2,1.8-4,4-4c1.4,0,2.8,0.8,3.5,2 c1.1,1.9,0.4,4.3-1.5,5.4V33c1-0.6,2.3-0.9,4-0.9c1,0,2-0.5,2.8-1.3C32.5,30,33,29.1,33,28v-0.6c-1.2-0.7-2-2-2-3.5 c0-2.2,1.8-4,4-4c2.2,0,4,1.8,4,4c0,1.5-0.8,2.7-2,3.5h0c-0.1,2.1-0.9,4.4-2.5,6c-1.6,1.6-3.4,2.4-5.5,2.5c-0.8,0-1.4,0.1-1.9,0.3 c-0.2,0.1-1,0.8-1.2,0.9C26.6,38,27,38.9,27,40c0,2.2-1.8,4-4,4s-4-1.8-4-4c0-1.5,0.8-2.7,2-3.4V23.4C19.8,22.7,19,21.4,19,20z"
                />
              </g>
            </svg>
            <div
              className="result-container__header-title "
              data-testid="result-container-header"
            >
              <span
                onClick={[Function]}
              >
                <a
                  to="/github.com/foo/bar"
                >
                  foo/bar
                </a>
                 ›
                 
                <a
                  to="/github.com/foo/bar/-/blob/file1.txt"
                >
                  <strong>
                    file1.txt
                  </strong>
                </a>
              </span>
            </div>
            <small
              className="result-container__toggle-matches-container"
            >
              <svg
                className="mdi-icon icon-inline"
                fill="currentColor"
                height={24}
                viewBox="0 0 24 24"
                width={24}
              >
                <path
                  d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
                />
              </svg>
            </small>
          </div>
          <div
            className="file-match-children"
          >
            <a
              className="file-match-children__item file-match-children__item-clickable e2e-file-match-children-item"
              onClick={[Function]}
              to="/github.com/foo/bar/-/blob/file1.txt#L2:1"
            >
              <VisibilitySensor
                offset={
                  Object {
                    "bottom": -500,
                  }
                }
                onChange={[Function]}
                partialVisibility={true}
              >
                <code
                  className="code-excerpt file-match-children__item-code-excerpt"
                >
                  <table>
                    <tbody>
                      <tr>
                        <td
                          className="line"
                        >
                          1
                        </td>
                        <td
                          className="code"
                        >
                           
                        </td>
                      </tr>
                      <tr>
                        <td
                          className="line"
                        >
                          2
                        </td>
                        <td
                          className="code"
                        >
                           
                        </td>
                      </tr>
                      <tr>
                        <td
                          className="line"
                        >
                          3
                        </td>
                        <td
                          className="code"
                        >
                           
                        </td>
                      </tr>
                      <tr>
                        <td
                          className="line"
                        >
                          4
                        </td>
                        <td
                          className="code"
                        >
                           
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </code>
              </VisibilitySensor>
            </a>
          </div>
        </div>
      </VisibilitySensor>
    </div>
  </div>
</div>
`;

exports[`<HierarchicalLocationsView /> displays partial locations before complete 1`] = `
<div
  className="hierarchical-locations-view "
>
  <div
    className="file-locations hierarchical-locations-view__content"
  >
    <div>
      <VisibilitySensor
        onChange={[Function]}
        partialVisibility={true}
      >
        <div
          className="result-container"
          data-testid="result-container"
        >
          <div
            className="result-container__header result-container__header--collapsible"
            onClick={[Function]}
          >
            <svg
              className="mdi-icon icon-inline"
              height={24}
              viewBox="0 0 64 64"
              width={24}
            >
              <g>
                <path
                  d="M23,22.4c1.3,0,2.4-1.1,2.4-2.4s-1.1-2.4-2.4-2.4c-1.3,0-2.4,1.1-2.4,2.4S21.7,22.4,23,22.4z"
                />
                <path
                  d="M35,26.4c1.3,0,2.4-1.1,2.4-2.4s-1.1-2.4-2.4-2.4s-2.4,1.1-2.4,2.4S33.7,26.4,35,26.4z"
                />
                <path
                  d="M23,42.4c1.3,0,2.4-1.1,2.4-2.4s-1.1-2.4-2.4-2.4s-2.4,1.1-2.4,2.4S21.7,42.4,23,42.4z"
                />
                <path
                  d="M50,16h-1.5c-0.3,0-0.5,0.2-0.5,0.5v35c0,0.3-0.2,0.5-0.5,0.5h-27c-0.5,0-1-0.2-1.4-0.6l-0.6-0.6c-0.1-0.1-0.1-0.2-0.1-0.4 c0-0.3,0.2-0.5,0.5-0.5H44c1.1,0,2-0.9,2-2V12c0-1.1-0.9-2-2-2H14c-1.1,0-2,0.9-2,2v36.3c0,1.1,0.4,2.1,1.2,2.8l3.1,3.1 c1.1,1.1,2.7,1.8,4.2,1.8H50c1.1,0,2-0.9,2-2V18C52,16.9,51.1,16,50,16z M19,20c0-2.2,1.8-4,4-4c1.4,0,2.8,0.8,3.5,2 c1.1,1.9,0.4,4.3-1.5,5.4V33c1-0.6,2.3-0.9,4-0.9c1,0,2-0.5,2.8-1.3C32.5,30,33,29.1,33,28v-0.6c-1.2-0.7-2-2-2-3.5 c0-2.2,1.8-4,4-4c2.2,0,4,1.8,4,4c0,1.5-0.8,2.7-2,3.5h0c-0.1,2.1-0.9,4.4-2.5,6c-1.6,1.6-3.4,2.4-5.5,2.5c-0.8,0-1.4,0.1-1.9,0.3 c-0.2,0.1-1,0.8-1.2,0.9C26.6,38,27,38.9,27,40c0,2.2-1.8,4-4,4s-4-1.8-4-4c0-1.5,0.8-2.7,2-3.4V23.4C19.8,22.7,19,21.4,19,20z"
                />
              </g>
            </svg>
            <div
              className="result-container__header-title "
              data-testid="result-container-header"
            >
              <span
                onClick={[Function]}
              >
                <a
                  to="/github.com/foo/bar"
                >
                  foo/bar
                </a>
                 ›
                 
                <a
                  to="/github.com/foo/bar/-/blob/undefined"
                >
                  <strong>
                    
                  </strong>
                </a>
              </span>
            </div>
            <small
              className="result-container__toggle-matches-container"
            >
              <svg
                className="mdi-icon icon-inline"
                fill="currentColor"
                height={24}
                viewBox="0 0 24 24"
                width={24}
              >
                <path
                  d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z"
                />
              </svg>
            </small>
          </div>
          <div
            className="file-match-children"
          >
            <a
              className="file-match-children__item file-match-children__item-clickable e2e-file-match-children-item"
              onClick={[Function]}
              to="/github.com/foo/bar/-/blob/undefined#L2:1"
            >
              <VisibilitySensor
                offset={
                  Object {
                    "bottom": -500,
                  }
                }
                onChange={[Function]}
                partialVisibility={true}
              >
                <code
                  className="code-excerpt file-match-children__item-code-excerpt"
                >
                  <table>
                    <tbody>
                      <tr>
                        <td
                          className="line"
                        >
                          1
                        </td>
                        <td
                          className="code"
                        >
                           
                        </td>
                      </tr>
                      <tr>
                        <td
                          className="line"
                        >
                          2
                        </td>
                        <td
                          className="code"
                        >
                           
                        </td>
                      </tr>
                    </tbody>
                  </table>
                </code>
              </VisibilitySensor>
            </a>
          </div>
        </div>
      </VisibilitySensor>
    </div>
  </div>
</div>
`;

exports[`<HierarchicalLocationsView /> shows a spinner before any locations emissions 1`] = `
<div
  className="loading-spinner icon-inline m-1"
/>
`;

exports[`<HierarchicalLocationsView /> shows a spinner if locations emits empty and is not complete 1`] = `
<div
  className="loading-spinner icon-inline m-1"
/>
`;