[Resolver] `SideEffectContext` changes, remove `@testing-library` uses #81077

oatkiller · 2020-10-19T22:04:55Z

Summary

getBoundingClientRect is now accessed through SideEffectContext.
writeText from the Clipboard API is now accessed through the
SideEffectContext
No longer using @testing-library/react and @testing-library/react-hooks
No longer using jest.spyOn (mostly) or jest.clearAllMocks

The motivation for this PR:

We already have SideEffectContext, which is meant to be an alternative to using jest.spyOn. This PR uses the SideEffectContext for getBoundingClientRect and navigator.clipboard.writeText.
We have been using enzyme lately. This removes uses of @testing-library/react and @testing-library/react-hooks in favor of enzyme.

For maintainers

This was checked for breaking API changes and was labeled appropriately

oatkiller · 2020-10-20T19:32:55Z

.../resolver/data_access_layer/mocks/no_ancestors_two_children_with_related_events_on_origin.ts

@@ -78,8 +78,7 @@ export function noAncestorsTwoChildrenWithRelatedEventsOnOrigin(): {
       */
      async eventsWithEntityIDAndCategory(
        entityID: string,
-        category: string,
-        after?: string


Removed unused param

@bkimmel I think we added this so we could mock the pagination functionality for the /events api. Are we still hoping to implement that?

https://github.com/elastic/kibana/blob/0f70bdd41f610a40eb8f0b53d5e30cb8283f3bc1/x-pack/plugins/security_solution/public/resolver/data_access_layer/mocks/no_ancestors_two_children_with_related_events_and_cursor_on_origin.ts I think that was this guy

oatkiller · 2020-10-20T19:33:34Z

x-pack/plugins/security_solution/public/resolver/store/actions.ts

  readonly payload: {
    /**
     * Used to identify the node that should be brought into view.
+     * @deprecated Nodes are brought into view upon selection instead. See `appReceivedNewExternalProperties`


noticed this used alongside another side effect. I'm scheduled to work on removing this.

oatkiller · 2020-10-20T19:33:47Z

x-pack/plugins/security_solution/public/resolver/test_utilities/extend_jest.ts

@@ -34,7 +34,7 @@ expect.extend({
    expected: T
  ): Promise<{ pass: boolean; message: () => string }> {
    // Used in printing out the pass or fail message
-    const matcherName = 'toSometimesYieldEqualTo';
+    const matcherName = 'toYieldEqualTo';


This was copy-pasted incorrectly (sorry.)

oatkiller · 2020-10-20T19:34:03Z

x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx

@@ -190,7 +190,7 @@ export class Simulator {
   * After 10 times, quit.
   * Use this to continually check a value. See `toYieldEqualTo`.
   */
-  public async *map<R>(mapper: () => R): AsyncIterable<R> {
+  public async *map<R>(mapper: (() => Promise<R>) | (() => R)): AsyncIterable<R> {


This function can now take a promise factory as well.

oatkiller · 2020-10-20T19:34:13Z

x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx

+  /**
+   * The last value written to the clipboard via the `SideEffectors`.
+   */
+  public get clipboardText(): string {


Access the (mock) clipboard text.

oatkiller · 2020-10-20T19:49:51Z

x-pack/plugins/security_solution/public/resolver/view/panels/node_list.tsx

@@ -218,6 +206,6 @@ const NodeDetailTimestamp = memo(({ eventDate }: { eventDate: Date | undefined }
  return formattedDate ? (
    <CopyablePanelField textToCopy={formattedDate} content={formattedDate} />
  ) : (
-    getEmptyTagValue()


This was imported from the greater security solution app. Also it required a theme provider that we don't use (at least during tests and in the resolver simulator.) The function returned an emdash that had a color taken from the EUI theme. I'll try and add back the color styling using our EUI theme.

In the future we should discuss EUI theme handling.

oatkiller · 2020-10-20T19:53:10Z

x-pack/plugins/security_solution/public/resolver/view/side_effect_context.ts

@@ -19,6 +19,12 @@ const sideEffectors: SideEffectors = {
    return window.cancelAnimationFrame(...args);
  },
  ResizeObserver,
+  writeTextToClipboard(text: string): Promise<void> {


provide the production implementations of these side effectors.

oatkiller · 2020-10-20T19:53:52Z

x-pack/plugins/security_solution/public/resolver/view/use_camera.test.tsx

@@ -4,13 +4,15 @@
 * you may not use this file except in compliance with the Elastic License.
 */

-import React, { FunctionComponent } from 'react';
-import { render, waitFor, RenderResult, fireEvent } from '@testing-library/react';


No longer use @testing-library. We have moved to enzyme now.

oatkiller · 2020-10-20T19:54:44Z

x-pack/plugins/security_solution/public/resolver/view/use_camera.test.tsx

+   * After 10 times, quit.
+   * Use this to continually check a value. See `toYieldEqualTo`.
+   */
+  async function* map<R>(mapper: () => R): AsyncIterable<R> {


This functionality is essentially copied from the resolver simulator. You can also find similar code in jest's github issues. It is used to continually assert a value until it is correct. See toYieldEqualTo.

x-pack/plugins/security_solution/public/resolver/view/use_camera.test.tsx

-      <Provider store={store}>
-        <SideEffectContext.Provider value={simulator.mock}>
-          <Test />
+  function TestWrapper({


oatkiller · 2020-10-20T20:33:09Z

x-pack/plugins/security_solution/public/resolver/view/panels/use_formatted_date.test.tsx

+      ).text();
+  });
+
+  it.each([


These look like this now:

myasonik · 2020-10-21T14:38:03Z

x-pack/plugins/security_solution/public/resolver/view/panels/copyable_panel_field.tsx


    return (
      <div onMouseLeave={onMouseLeave}>
        <EuiPopover
          anchorPosition={'downCenter'}
-          button={<ButtonContent />}
+          button={hoverArea}


Not sure if this is something you want to resolve in this PR, but all this hover interaction (and whatever is happening on onMouseLeave above) can't really be made accessibly.

I'm not super familiar with the security app so would need some help getting started to offer possible solutions but feel free to reach out with any questions.

This gif shows the feature in use. If the user hovers over the panel that contains the interactive divs, gray backgrounds are added to divs. On mouseenter, a tooltip shows up near the div. The tooltip contains a button with an image in it. You might not know it is a button. If the user hovers with the mouse over the button, a tooltip shows up on top of the original tooltip. This tooltip describes the button. Clicking this will attempt to copy text to the users clipboard.

Actually, I think there's a pretty straight forward solution to all this! 🤞

If StyledCopyableField becomes a button instead of a div, you can trigger the same popover on click (which works for keyboard "clicks" as well) and leave the same hover trigger you have now. This will also give you some basic focus states for free though you may want to style your own if you don't like the defaults.

You can also mimic the mouseenter effect on the whole panel by adding a StyledPanel:focus-within rule in addition to the :hover rule which will trigger when any children of the panel are focused.

Lastly, we can improve the accessibility of the popover by adding the ownFocus (or ownFocus={true}) attribute. (Honestly, this prop can/should be applied to every EuiPopover but isn't right now due to some historical reasons in EUI...)

Stepping out of strictly accessibility for a sec, there seems to be enough room in the screenshot you posted to add the copy button inline to the right of the timestamps. That would remove a lot of the a11y concerns we're dealing with now if it's a viable option...

We discussed doing that, but were looking to maintain parity with our current consuming application (security_solution) in how they have copy/paste functionality implemented. I know there's work planned to make all of this generally more accessible. Thoughts @monina-n @lindseypoli?

🔴 I already put my thoughts in on this on a previous PR, but just to reiterate , I think the problems with putting something in that keyboard users can't use overrides the style/ux consistency concerns.

x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx

bkimmel · 2020-10-21T21:23:53Z

Couple things to clear up, then I can thumb

* `getBoundingClientRect` is now access through `SideEffectContext`. * `writeText` from the `Clipboard` API is now accessed through the `SideEffectContext` * No longer using `@testing-library/react` and `@testing-library/react-hooks` * No longer using `jest.spyOn` or `jest.clearAllMocks`

oatkiller · 2020-10-26T20:29:37Z

@elasticmachine merge upstream

kibanamachine · 2020-10-26T22:10:04Z

💚 Build Succeeded

continuous-integration/kibana-ci/pull-request
Commit: c45484e

Metrics [docs]

async chunks size

id	before	after	diff
`securitySolution`	8.1MB	8.1MB	+1.2KB

History

💚 Build #83393 succeeded 7522b68
💚 Build #82933 succeeded 0f70bdd
💔 Build #82928 failed d2f775d
💚 Build #82914 succeeded 29e8ee6
💚 Build #82892 succeeded cd1ec0d

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

elastic#81077) * `getBoundingClientRect` is now accessed through `SideEffectContext`. * `writeText` from the `Clipboard` API is now accessed through the `SideEffectContext` * No longer using `@testing-library/react` and `@testing-library/react-hooks` * No longer using `jest.spyOn` (mostly) or `jest.clearAllMocks` The motivation for this PR: * We already have `SideEffectContext`, which is meant to be an alternative to using `jest.spyOn`. This PR uses the `SideEffectContext` for `getBoundingClientRect` and `navigator.clipboard.writeText`. * We have been using `enzyme` lately. This removes uses of `@testing-library/react` and `@testing-library/react-hooks` in favor of `enzyme`.

* master: (87 commits) [Actions] Adding `hasAuth` to Webhook Configuration to avoid confusing UX (elastic#81778) [i18n] add get_kibana_translation_paths tests (elastic#81624) [UX] Fix search term reset from url (elastic#81654) [Lens] Improved range formatter (elastic#80132) [Resolver] `SideEffectContext` changes, remove `@testing-library` uses (elastic#81077) [Time to Visualize] Update Library Text with Call to Action (elastic#81667) [docs] Resolving failed Kibana upgrade migrations (elastic#80999) [ftr/menuToggle] provide helper for enhanced menu toggle handling (elastic#81709) [Task Manager] adds basic observability into Task Manager's runtime operations (elastic#77868) Doc changes for stack management and grouped feature privileges (elastic#80486) Added functional test for alerts list filters by status, alert type and action type. Did a code refactoring and splitting for alerts tests. (elastic#81422) [Security Solution][Endpoint][Admin] Malware Protections Notify User Version (elastic#81415) Revert "[Actions] Adding `hasAuth` to Webhook Configuration to avoid confusing UX (elastic#81390)" [Maps] Use default format when proxying EMS-files (elastic#79760) [Discover] Deangularize context.html (elastic#81442) Use the displayName property in default editor (elastic#73311) adds bug label to Bug report for Security Solution template (elastic#81643) [ML] Transforms: Remove index field limitation for custom query. (elastic#81467) [Actions] Adding `hasAuth` to Webhook Configuration to avoid confusing UX (elastic#81390) [Task Manager] Mark task as failed if maxAttempts has been met. (elastic#80681) ...

#81077) (#81811) * `getBoundingClientRect` is now accessed through `SideEffectContext`. * `writeText` from the `Clipboard` API is now accessed through the `SideEffectContext` * No longer using `@testing-library/react` and `@testing-library/react-hooks` * No longer using `jest.spyOn` (mostly) or `jest.clearAllMocks` The motivation for this PR: * We already have `SideEffectContext`, which is meant to be an alternative to using `jest.spyOn`. This PR uses the `SideEffectContext` for `getBoundingClientRect` and `navigator.clipboard.writeText`. * We have been using `enzyme` lately. This removes uses of `@testing-library/react` and `@testing-library/react-hooks` in favor of `enzyme`.

oatkiller added release_note:skip Skip the PR/issue when compiling release notes v7.11.0 labels Oct 19, 2020

oatkiller requested a review from michaelolo24 October 19, 2020 22:05

oatkiller force-pushed the remove-react-testing-library branch from ba41788 to cd1ec0d Compare October 20, 2020 19:26

oatkiller commented Oct 20, 2020

View reviewed changes

oatkiller force-pushed the remove-react-testing-library branch 2 times, most recently from 29e8ee6 to d2f775d Compare October 20, 2020 21:24

oatkiller marked this pull request as ready for review October 21, 2020 14:02

oatkiller requested review from a team as code owners October 21, 2020 14:02

oatkiller changed the title ~~[Resolver] SideEffectContext changes~~ [Resolver] SideEffectContext changes, remove @testing-library uses Oct 21, 2020

myasonik reviewed Oct 21, 2020

View reviewed changes

bkimmel reviewed Oct 21, 2020

View reviewed changes

x-pack/plugins/security_solution/public/resolver/test_utilities/simulator/index.tsx Show resolved Hide resolved

michaelolo24 approved these changes Oct 21, 2020

View reviewed changes

oatkiller added 12 commits October 22, 2020 11:53

wip

3d9211e

stuff

ab34a0c

fixup

b7dac74

comment

a6d6e38

use enzyme for useFormattedDate tests

cdcfcbc

oops

707b0f5

cleanup tests

b670cd3

cleanup

9c19a9d

cleanup

d946f54

remove panel content utilities module

b0c1f22

support multiple dts that share the same dd

7522b68

oatkiller force-pushed the remove-react-testing-library branch from 0f70bdd to 7522b68 Compare October 22, 2020 15:56

bkimmel approved these changes Oct 22, 2020

View reviewed changes

Merge branch 'master' into remove-react-testing-library

c45484e

oatkiller merged commit 161972e into elastic:master Oct 27, 2020

oatkiller deleted the remove-react-testing-library branch October 27, 2020 16:41

oatkiller mentioned this pull request Oct 27, 2020

[7.x] [Resolver] SideEffectContext changes, remove @testing-library uses (#81077) #81811

Merged

MindyRS added the Team: SecuritySolution Security Solutions Team working on SIEM, Endpoint, Timeline, Resolver, etc. label Oct 27, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Resolver] `SideEffectContext` changes, remove `@testing-library` uses #81077

[Resolver] `SideEffectContext` changes, remove `@testing-library` uses #81077

oatkiller commented Oct 19, 2020 •

edited

oatkiller Oct 20, 2020

jonathan-buttner Oct 21, 2020

bkimmel Oct 21, 2020

oatkiller Oct 20, 2020

oatkiller Oct 20, 2020

oatkiller Oct 20, 2020

oatkiller Oct 20, 2020

oatkiller Oct 20, 2020

michaelolo24 Oct 21, 2020

oatkiller Oct 20, 2020

oatkiller Oct 20, 2020

oatkiller Oct 20, 2020

This comment was marked as resolved.

oatkiller Oct 20, 2020

myasonik Oct 21, 2020

oatkiller Oct 21, 2020 •

edited

myasonik Oct 21, 2020

myasonik Oct 21, 2020

michaelolo24 Oct 21, 2020

bkimmel Oct 21, 2020

bkimmel commented Oct 21, 2020

oatkiller commented Oct 26, 2020

kibanamachine commented Oct 26, 2020

[Resolver] SideEffectContext changes, remove @testing-library uses #81077

[Resolver] SideEffectContext changes, remove @testing-library uses #81077

Conversation

oatkiller commented Oct 19, 2020 • edited

Summary

For maintainers

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

This comment was marked as resolved.

Choose a reason for hiding this comment

Choose a reason for hiding this comment

oatkiller Oct 21, 2020 • edited

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

bkimmel commented Oct 21, 2020

oatkiller commented Oct 26, 2020

kibanamachine commented Oct 26, 2020

💚 Build Succeeded

Metrics [docs]

async chunks size

History

[Resolver] `SideEffectContext` changes, remove `@testing-library` uses #81077

[Resolver] `SideEffectContext` changes, remove `@testing-library` uses #81077

oatkiller commented Oct 19, 2020 •

edited

oatkiller Oct 21, 2020 •

edited