DocumentNodes.story.test.tsx flakiness

[ravicious]

Failure

Link(s) to logs

• No links as I was running this locally at 0a26cdc.

for i in {1..100}; do yarn test || {echo "Failed after $i attempts" && break}; done

Relevant snippet

 FAIL  web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.story.test.tsx
  ● render DocumentNodes

    expect(received).toMatchSnapshot()

    Snapshot name: `render DocumentNodes 1`

    - Snapshot  - 114
    + Received  + 141

Full snippet

 FAIL  web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.story.test.tsx
  ● render DocumentNodes

    expect(received).toMatchSnapshot()

    Snapshot name: `render DocumentNodes 1`

    - Snapshot  - 114
    + Received  + 141

    @@ -1,5 +1,26 @@
    + .c6 {
    +   display: flex;
    +   align-items: center;
    +   justify-content: center;
    +   border-radius: 2px;
    +   box-sizing: border-box;
    +   box-shadow: 0 1px 4px rgba(0,0,0,0.24);
    +   margin: 0 0 24px 0;
    +   min-height: 40px;
    +   padding: 8px 16px;
    +   overflow: auto;
    +   word-break: break-word;
    +   line-height: 1.5;
    +   background: #FF6257;
    +   color: #000000;
    + }
    +
    + .c6 a {
    +   color: #FFFFFF;
    + }
    +
      .c0 {
        box-sizing: border-box;
        margin: -16px;
        height: 100%;
        width: 100%;
    @@ -22,27 +43,27 @@
      .c5 {
        box-sizing: border-box;
        margin-bottom: 8px;
      }

    - .c6 {
    + .c7 {
        box-sizing: border-box;
      }

    - .c13 {
    + .c14 {
        box-sizing: border-box;
        padding-left: 24px;
        padding-right: 24px;
      }

    - .c23 {
    + .c24 {
        box-sizing: border-box;
        margin-bottom: 4px;
        margin-right: 8px;
      }

    - .c30 {
    + .c31 {
        line-height: 1.5;
        margin: 0;
        display: inline-flex;
        justify-content: center;
        align-items: center;
    @@ -66,61 +87,61 @@
        min-height: 24px;
        padding: 0px 16px;
        height: 24px;
      }

    - .c30:hover,
    - .c30:focus {
    + .c31:hover,
    + .c31:focus {
        background: rgba(255,255,255,0.07);
      }

    - .c30:active {
    + .c31:active {
        background: rgba(255,255,255,0.13);
      }

    - .c30:disabled {
    + .c31:disabled {
        background: rgba(255,255,255,0.12);
        color: rgba(255,255,255,0.3);
        cursor: auto;
      }

    - .c21 {
    + .c22 {
        display: inline-flex;
        align-items: center;
        justify-content: center;
      }

    - .c31 {
    + .c32 {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        color: rgba(255,255,255,0.72);
        margin-left: 4px;
        margin-right: -8px;
      }

    - .c19 {
    + .c20 {
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        margin: 0px;
      }

    - .c25 {
    + .c26 {
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 400;
        font-size: 12px;
        line-height: 16px;
        margin: 0px;
        margin-right: 4px;
        font-weight: 500;
      }

    - .c28 {
    + .c29 {
        box-sizing: border-box;
        border-radius: 10px;
        display: inline-block;
        font-size: 10px;
        font-weight: 500;
    @@ -135,61 +156,61 @@

      .c1 {
        display: flex;
      }

    - .c7 {
    + .c8 {
        display: flex;
        flex-direction: column;
      }

    - .c14 {
    + .c15 {
        display: flex;
        align-items: center;
        gap: 8px;
      }

    - .c24 {
    + .c25 {
        display: flex;
        justify-content: flex-end;
      }

    - .c27 {
    + .c28 {
        display: flex;
        flex-wrap: wrap;
      }

    - .c15 {
    + .c16 {
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;
      }

    - .c15[disabled] {
    + .c16[disabled] {
        cursor: default;
      }

    - .c18 {
    + .c19 {
        width: 32px;
        height: 16px;
        border-radius: 10px;
        cursor: inherit;
        flex-shrink: 0;
        background: rgba(255,255,255,0.07);
        transition: background 0.15s ease-in-out;
      }

    - .c18:hover {
    + .c19:hover {
        background: rgba(255,255,255,0.13);
      }

    - .c18:active {
    + .c19:active {
        background: rgba(255,255,255,0.18);
      }

    - .c18:before {
    + .c19:before {
        content: '';
        position: absolute;
        top: 50%;
        width: 12px;
        height: 12px;
    @@ -198,103 +219,103 @@
        background: #FFFFFF;
        box-shadow: 0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px rgba(0,0,0,0.14),0px 1px 3px rgba(0,0,0,0.12);
        transition: transform 0.05s ease-in;
      }

    - .c16 {
    + .c17 {
        opacity: 0;
        position: absolute;
        cursor: inherit;
        z-index: -1;
      }

    - .c16:checked + .c17:before {
    + .c17:checked + .c18:before {
        transform: translate(18px,-50%);
      }

    - .c16:enabled:checked + .c17 {
    + .c17:enabled:checked + .c18 {
        background: #00BFA6;
      }

    - .c16:enabled:checked + .c17:hover {
    + .c17:enabled:checked + .c18:hover {
        background: #33CCB8;
      }

    - .c16:enabled:checked + .c17:active {
    + .c17:enabled:checked + .c18:active {
        background: #66D9CA;
      }

    - .c16:disabled + .c17 {
    + .c17:disabled + .c18 {
        background: rgba(255,255,255,0.07);
      }

    - .c16:disabled + .c17:before {
    + .c17:disabled + .c18:before {
        opacity: 0.36;
        box-shadow: none;
      }

    - .c16:disabled:checked + .c17 {
    + .c17:disabled:checked + .c18 {
        background: rgba(0,191,166,0.25);
      }

    - .c22 {
    + .c23 {
        height: 18px;
        width: 18px;
        color: inherit;
      }

    - .c20 {
    + .c21 {
        vertical-align: middle;
        display: inline-block;
        height: 18px;
      }

    - .c20:hover {
    + .c21:hover {
        cursor: pointer;
      }

    - .c26 {
    + .c27 {
        border-collapse: collapse;
        border-spacing: 0;
        border-style: hidden;
        font-size: 12px;
        width: 100%;
      }

    - .c26 > thead > tr > th,
    - .c26 > tbody > tr > th,
    - .c26 > tfoot > tr > th,
    - .c26 > thead > tr > td,
    - .c26 > tbody > tr > td,
    - .c26 > tfoot > tr > td {
    + .c27 > thead > tr > th,
    + .c27 > tbody > tr > th,
    + .c27 > tfoot > tr > th,
    + .c27 > thead > tr > td,
    + .c27 > tbody > tr > td,
    + .c27 > tfoot > tr > td {
        padding: 8px 8px;
        vertical-align: middle;
      }

    - .c26 > thead > tr > th:first-child,
    - .c26 > tbody > tr > th:first-child,
    - .c26 > tfoot > tr > th:first-child,
    - .c26 > thead > tr > td:first-child,
    - .c26 > tbody > tr > td:first-child,
    - .c26 > tfoot > tr > td:first-child {
    + .c27 > thead > tr > th:first-child,
    + .c27 > tbody > tr > th:first-child,
    + .c27 > tfoot > tr > th:first-child,
    + .c27 > thead > tr > td:first-child,
    + .c27 > tbody > tr > td:first-child,
    + .c27 > tfoot > tr > td:first-child {
        padding-left: 24px;
      }

    - .c26 > thead > tr > th:last-child,
    - .c26 > tbody > tr > th:last-child,
    - .c26 > tfoot > tr > th:last-child,
    - .c26 > thead > tr > td:last-child,
    - .c26 > tbody > tr > td:last-child,
    - .c26 > tfoot > tr > td:last-child {
    + .c27 > thead > tr > th:last-child,
    + .c27 > tbody > tr > th:last-child,
    + .c27 > tfoot > tr > th:last-child,
    + .c27 > thead > tr > td:last-child,
    + .c27 > tbody > tr > td:last-child,
    + .c27 > tfoot > tr > td:last-child {
        padding-right: 24px;
      }

    - .c26 > tbody > tr > td {
    + .c27 > tbody > tr > td {
        vertical-align: middle;
      }

    - .c26 > thead > tr > th {
    + .c27 > thead > tr > th {
        color: #FFFFFF;
        font-weight: 600;
        font-size: 14px;
        line-height: 24px;
        cursor: pointer;
    @@ -302,95 +323,95 @@
        padding-top: 0;
        text-align: left;
        white-space: nowrap;
      }

    - .c26 > thead > tr > th svg {
    + .c27 > thead > tr > th svg {
        height: 12px;
      }

    - .c26 > tbody > tr > td {
    + .c27 > tbody > tr > td {
        color: #FFFFFF;
        font-weight: 300;
        font-size: 14px;
        line-height: 20px;
        letter-spacing: 0.035px;
      }

    - .c26 tbody tr {
    + .c27 tbody tr {
        transition: all 150ms;
        position: relative;
        border-top: 2px solid rgba(255,255,255,0.07);
      }

    - .c26 tbody tr:hover {
    + .c27 tbody tr:hover {
        border-top: 2px solid rgba(0,0,0,0);
        background-color: #222C59;
      }

    - .c26 tbody tr:hover:after {
    + .c27 tbody tr:hover:after {
        box-shadow: 0px 1px 10px 0px rgba(0,0,0,0.12),0px 4px 5px 0px rgba(0,0,0,0.14),0px 2px 4px -1px rgba(0,0,0,0.20);
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        width: 100%;
        height: 100%;
      }

    - .c26 tbody tr:hover + tr {
    + .c27 tbody tr:hover + tr {
        border-top: 2px solid rgba(0,0,0,0);
      }

    - .c29 {
    + .c30 {
        cursor: pointer;
      }

    - .c29:hover {
    + .c30:hover {
        background-color: rgba(255,255,255,0.13);
      }

    - .c12 {
    + .c13 {
        position: relative;
        height: 100%;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 0 200px 200px 0;
      }

    - .c11 {
    + .c12 {
        position: absolute;
        height: 100%;
        right: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        border-left: 1px solid rgba(255,255,255,0.07);
        border-radius: 0 200px 200px 0;
      }

    - .c9 {
    + .c10 {
        position: relative;
        display: flex;
        overflow: hidden;
        border-radius: 200px;
        height: 100%;
        background: transparent;
        max-width: 725px;
      }

    - .c8 {
    + .c9 {
        border-radius: 200px;
        width: 100%;
        height: 56px;
        margin-bottom: 12px;
      }

    - .c10 {
    + .c11 {
        border: none;
        outline: none;
        box-sizing: border-box;
        font-size: 16px;
        width: 100%;
    @@ -430,56 +451,62 @@
            class="c3 c4"
          >
            <div
              class="c5"
            />
    +       <div
    +         class="c6"
    +         kind="danger"
    +       >
    +         Network request failed
    +       </div>
            <form
    -         class="c6 c7"
    +         class="c7 c8"
            >
              <div
    -           class="c8"
    +           class="c9"
              >
                <div
    -             class="c9"
    +             class="c10"
                >
                  <input
    -               class="c10"
    +               class="c11"
                    placeholder="Search..."
                    value=""
                  />
                  <div
    -               class="c11"
    +               class="c12"
                  >
                    <div
    -                 class="c12"
    +                 class="c13"
                    >
                      <div
    -                   class="c13 c14"
    +                   class="c14 c15"
                      >
                        <label
    -                     class="c15"
    +                     class="c16"
                        >
                          <input
    -                       class="c16"
    +                       class="c17"
                            data-testid="toggle"
                            type="checkbox"
                          />
                          <div
    -                       class="c17 c18"
    +                       class="c18 c19"
                          />
                        </label>
                        <div
    -                     class="c19"
    +                     class="c20"
                        >
                          Advanced
                        </div>
                        <span
    -                     class="c20"
    +                     class="c21"
                          role="icon"
                        >
                          <span
    -                       class="c21 c22"
    +                       class="c22 c23"
                          >
                            <svg
                              fill="currentColor"
                              height="20"
                              viewBox="0 0 24 24"
    @@ -503,14 +530,14 @@
                    </div>
                  </div>
                </div>
              </div>
              <div
    -           class="c23 c24"
    +           class="c24 c25"
              >
                <div
    -             class="c25"
    +             class="c26"
                  font-weight="500"
                  style="white-space: nowrap; letter-spacing: 0.15px;"
                >
                  Showing
                  <strong>
    @@ -527,21 +554,21 @@
                  </strong>
                </div>
              </div>
            </form>
            <table
    -         class="c26"
    +         class="c27"
            >
              <thead>
                <tr>
                  <th>
                    <a
                      style="display: flex; align-items: center;"
                    >
                      Hostname
                      <span
    -                   class="c21 icon icon-chevronup"
    +                   class="c22 icon icon-chevronup"
                        title="sort items asc"
                      >
                        <svg
                          fill="currentColor"
                          height="24"
    @@ -580,37 +607,37 @@
                  <td>
                    172.10.1.20:3022
                  </td>
                  <td>
                    <div
    -                 class="c6 c27"
    +                 class="c7 c28"
                    >
                      <div
    -                   class="c28 c29"
    +                   class="c29 c30"
                        kind="secondary"
                      >
                        cluster: one
                      </div>
                      <div
    -                   class="c28 c29"
    +                   class="c29 c30"
                        kind="secondary"
                      >
                        kernel: 4.15.0-51-generic
                      </div>
                    </div>
                  </td>
                  <td
                    align="right"
                  >
                    <button
    -                 class="c30"
    +                 class="c31"
                      height="24px"
                      kind="border"
                    >
                      Connect
                      <span
    -                   class="c31 icon icon-chevrondown"
    +                   class="c32 icon icon-chevrondown"
                        color="text.slightlyMuted"
                      >
                        <svg
                          fill="currentColor"
                          height="16"
    @@ -634,37 +661,37 @@
                  <td>
                    172.10.1.42:3022
                  </td>
                  <td>
                    <div
    -                 class="c6 c27"
    +                 class="c7 c28"
                    >
                      <div
    -                   class="c28 c29"
    +                   class="c29 c30"
                        kind="secondary"
                      >
                        cluster: one
                      </div>
                      <div
    -                   class="c28 c29"
    +                   class="c29 c30"
                        kind="secondary"
                      >
                        kernel: 4.15.0-51-generic
                      </div>
                    </div>
                  </td>
                  <td
                    align="right"
                  >
                    <button
    -                 class="c30"
    +                 class="c31"
                      height="24px"
                      kind="border"
                    >
                      Connect
                      <span
    -                   class="c31 icon icon-chevrondown"
    +                   class="c32 icon icon-chevrondown"
                        color="text.slightlyMuted"
                      >
                        <svg
                          fill="currentColor"
                          height="16"
    @@ -693,37 +720,37 @@
                      ← tunnel
                    </span>
                  </td>
                  <td>
                    <div
    -                 class="c6 c27"
    +                 class="c7 c28"
                    >
                      <div
    -                   class="c28 c29"
    +                   class="c29 c30"
                        kind="secondary"
                      >
                        cluster: one
                      </div>
                      <div
    -                   class="c28 c29"
    +                   class="c29 c30"
                        kind="secondary"
                      >
                        kernel: 4.15.0-51-generic
                      </div>
                    </div>
                  </td>
                  <td
                    align="right"
                  >
                    <button
    -                 class="c30"
    +                 class="c31"
                      height="24px"
                      kind="border"
                    >
                      Connect
                      <span
    -                   class="c31 icon icon-chevrondown"
    +                   class="c32 icon icon-chevrondown"
                        color="text.slightlyMuted"
                      >
                        <svg
                          fill="currentColor"
                          height="16"
    @@ -752,37 +779,37 @@
                      ← tunnel
                    </span>
                  </td>
                  <td>
                    <div
    -                 class="c6 c27"
    +                 class="c7 c28"
                    >
                      <div
    -                   class="c28 c29"
    +                   class="c29 c30"
                        kind="secondary"
                      >
                        cluster: one
                      </div>
                      <div
    -                   class="c28 c29"
    +                   class="c29 c30"
                        kind="secondary"
                      >
                        kernel: 4.15.0-51-generic
                      </div>
                    </div>
                  </td>
                  <td
                    align="right"
                  >
                    <button
    -                 class="c30"
    +                 class="c31"
                      height="24px"
                      kind="border"
                    >
                      Connect
                      <span
    -                   class="c31 icon icon-chevrondown"
    +                   class="c32 icon icon-chevrondown"
                        color="text.slightlyMuted"
                      >
                        <svg
                          fill="currentColor"
                          height="16"
    @@ -806,61 +833,61 @@
                  <td>
                    172.10.1.24:3022
                  </td>
                  <td>
                    <div
    -                 class="c6 c27"
    +                 class="c7 c28"
                    >
                      <div
    -                   class="c28 c29"
    +                   class="c29 c30"
                        kind="secondary"
                      >
                        cluster: one
                      </div>
                      <div
    -                   class="c28 c29"
    +                   class="c29 c30"
                        kind="secondary"
                      >
                        kernel: 4.15.0-51-generic
                      </div>
                      <div
    -                   class="c28 c29"
    +                   class="c29 c30"
                        kind="secondary"
                      >
                        lortavma: one
                      </div>
                      <div
    -                   class="c28 c29"
    +                   class="c29 c30"
                        kind="secondary"
                      >
                        lenisret: 4.15.0-51-generic
                      </div>
                      <div
    -                   class="c28 c29"
    +                   class="c29 c30"
                        kind="secondary"
                      >
                        lofdevod: one
                      </div>
                      <div
    -                   class="c28 c29"
    +                   class="c29 c30"
                        kind="secondary"
                      >
                        llhurlaz: 4.15.0-51-generic
                      </div>
                    </div>
                  </td>
                  <td
                    align="right"
                  >
                    <button
    -                 class="c30"
    +                 class="c31"
                      height="24px"
                      kind="border"
                    >
                      Connect
                      <span
    -                   class="c31 icon icon-chevrondown"
    +                   class="c32 icon icon-chevrondown"
                        color="text.slightlyMuted"
                      >
                        <svg
                          fill="currentColor"
                          height="16"

      35 |     expect(ctx.nodesService.fetchNodes).toHaveBeenCalledTimes(1)
      36 |   );
    > 37 |   expect(container.firstChild).toMatchSnapshot();
         |                                ^
      38 | });
      39 |

      at Object.toMatchSnapshot (web/packages/teleport/src/Console/DocumentNodes/DocumentNodes.story.test.tsx:37:32)

[ravicious]

This test needs to wait for some kind of a change of what's rendered on the screen instead of waiting for a service to be called.