teleport
teleport copied to clipboard
Published
20 hours ago •
gravitational
gravitational
`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"
>
<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)
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.
Real hit on master: https://github.com/gravitational/teleport/actions/runs/9454659844/job/26042712960#step:7:1969
Another one: https://github.com/gravitational/teleport/actions/runs/9464826650/job/26072969097#step:7:1950
Another one: https://github.com/gravitational/teleport/actions/runs/9468633750/job/26085413530#step:7:1970
Another one: https://github.com/gravitational/teleport/actions/runs/9469121212/job/26087050477#step:7:1951
https://github.com/gravitational/teleport/actions/runs/9468466609/job/26084888343
