`DocumentNodes.story.test.tsx` flakiness

Failure

Link(s) to logs

No links as I was running this locally at 0a26cdc5ef5.

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" >

+ Network request failed +

Advanced

Showing @@ -527,21 +554,21 @@

Hostname cluster: one kernel: 4.15.0-51-generic		cluster: one kernel: 4.15.0-51-generic		cluster: one kernel: 4.15.0-51-generic		cluster: one kernel: 4.15.0-51-generic		cluster: one kernel: 4.15.0-51-generic lortavma: one lenisret: 4.15.0-51-generic lofdevod: one llhurlaz: 4.15.0-51-generic

gravitational / teleport