Flaky Test: context_menu_panel icon loading

[thompsongl]

As seen in https://kibana-ci.elastic.co/job/elastic-eui-pull-request/1082/console

17:02:24 FAIL src/components/context_menu/context_menu_panel.test.tsx
17:02:24   ● EuiContextMenu › props › panels and initialPanelId › allows you to click the title button to go back to the previous panel
17:02:24 
17:02:24     expect(value).toMatchSnapshot()
17:02:24 
17:02:24     Received value does not match stored snapshot "EuiContextMenu props panels and initialPanelId allows you to click the title button to go back to the previous panel 2".
17:02:24 
17:02:24     - Snapshot
17:02:24     + Received
17:02:24 
17:02:24     @@ -57,18 +57,24 @@
17:02:24             <span
17:02:24               class="euiContextMenu__itemLayout"
17:02:24             >
17:02:24               <svg
17:02:24                 aria-hidden="true"
17:02:24     -           class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__icon"
17:02:24     +           class="euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__icon"
17:02:24                 focusable="false"
17:02:24                 height="16"
17:02:24                 role="img"
17:02:24                 viewBox="0 0 16 16"
17:02:24                 width="16"
17:02:24                 xmlns="http://www.w3.org/2000/svg"
17:02:24     -         />
17:02:24     +         >
17:02:24     +           <title />
17:02:24     +           <path
17:02:24     +             d="M10.843 13.069L6.232 8.384a.546.546 0 010-.768l4.61-4.685a.552.552 0 000-.771.53.53 0 00-.759 0l-4.61 4.684a1.65 1.65 0 000 2.312l4.61 4.684a.53.53 0 00.76 0 .552.552 0 000-.771z"
17:02:24     +             fill-rule="nonzero"
17:02:24     +           />
17:02:24     +         </svg>
17:02:24               <span
17:02:24                 class="euiContextMenu__text"
17:02:24               >
17:02:24                 1
17:02:24               </span>
17:02:24     @@ -88,18 +94,24 @@
17:02:24                   >
17:02:24                     2a
17:02:24                   </span>
17:02:24                   <svg
17:02:24                     aria-hidden="true"
17:02:24     -               class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__arrow"
17:02:24     +               class="euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__arrow"
17:02:24                     focusable="false"
17:02:24                     height="16"
17:02:24                     role="img"
17:02:24                     viewBox="0 0 16 16"
17:02:24                     width="16"
17:02:24                     xmlns="http://www.w3.org/2000/svg"
17:02:24     -             />
17:02:24     +             >
17:02:24     +               <title />
17:02:24     +               <path
17:02:24     +                 d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
17:02:24     +                 fill-rule="nonzero"
17:02:24     +               />
17:02:24     +             </svg>
17:02:24                 </span>
17:02:24               </button>
17:02:24               <button
17:02:24                 class="euiContextMenuItem"
17:02:24                 type="button"
17:02:24     @@ -112,18 +124,24 @@
17:02:24                   >
17:02:24                     2b
17:02:24                   </span>
17:02:24                   <svg
17:02:24                     aria-hidden="true"
17:02:24     -               class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__arrow"
17:02:24     +               class="euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__arrow"
17:02:24                     focusable="false"
17:02:24                     height="16"
17:02:24                     role="img"
17:02:24                     viewBox="0 0 16 16"
17:02:24                     width="16"
17:02:24                     xmlns="http://www.w3.org/2000/svg"
17:02:24     -             />
17:02:24     +             >
17:02:24     +               <title />
17:02:24     +               <path
17:02:24     +                 d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
17:02:24     +                 fill-rule="nonzero"
17:02:24     +               />
17:02:24     +             </svg>
17:02:24                 </span>
17:02:24               </button>
17:02:24               <button
17:02:24                 class="euiContextMenuItem"
17:02:24                 type="button"
17:02:24     @@ -136,18 +154,24 @@
17:02:24                   >
17:02:24                     2c
17:02:24                   </span>
17:02:24                   <svg
17:02:24                     aria-hidden="true"
17:02:24     -               class="euiIcon euiIcon--medium euiIcon-isLoading euiContextMenu__arrow"
17:02:24     +               class="euiIcon euiIcon--medium euiIcon-isLoaded euiContextMenu__arrow"
17:02:24                     focusable="false"
17:02:24                     height="16"
17:02:24                     role="img"
17:02:24                     viewBox="0 0 16 16"
17:02:24                     width="16"
17:02:24                     xmlns="http://www.w3.org/2000/svg"
17:02:24     -             />
17:02:24     +             >
17:02:24     +               <title />
17:02:24     +               <path
17:02:24     +                 d="M5.157 13.069l4.611-4.685a.546.546 0 000-.768L5.158 2.93a.552.552 0 010-.771.53.53 0 01.759 0l4.61 4.684c.631.641.63 1.672 0 2.312l-4.61 4.684a.53.53 0 01-.76 0 .552.552 0 010-.771z"
17:02:24     +                 fill-rule="nonzero"
17:02:24     +               />
17:02:24     +             </svg>
17:02:24                 </span>
17:02:24               </button>
17:02:24             </div>
17:02:24           </div>
17:02:24         </div>
17:02:24 
17:02:24       83 |         await tick(20);
17:02:24       84 | 
17:02:24     > 85 |         expect(takeMountedSnapshot(component)).toMatchSnapshot();
17:02:24          |                                                ^
17:02:24       86 |       });
17:02:24       87 |     });
17:02:24       88 |   });
17:02:24 
17:02:24       at Object.toMatchSnapshot (src/components/context_menu/context_menu.test.tsx:85:48)
17:02:24       at tryCatch (node_modules/regenerator-runtime/runtime.js:45:40)
17:02:24       at Generator.invoke [as _invoke] (node_modules/regenerator-runtime/runtime.js:271:22)
17:02:24       at Generator.prototype.(anonymous function) [as next] (node_modules/regenerator-runtime/runtime.js:97:21)
17:02:24       at asyncGeneratorStep (src/components/context_menu/context_menu.test.tsx:26:103)
17:02:24       at _next (src/components/context_menu/context_menu.test.tsx:28:194)

[chandlerprall]

Food for thought: How can we re-purpose the new .testenv. mocked icon in our tests, excluded from icon.test.tsx which needs to have the actual icon component.

[thompsongl]

How can we re-purpose the new .testenv. mocked icon in our tests

This mocked component is now available in master, so we can start looking into this for real