[jest] Hiding EUI internals and explicitly testing integrations

[spalger]

In our current usage of EUI and Jest, we have many tests that are testing the integration of some component or portion of our application with EUI. This causes all sorts of problems:

• too many components are under test but assertions aren't related to them at all
• snapshots contain tons of unrelated bits which make upgrades really painful and cause information overload so things are missed in review
• UX optimizations in EUI like virtualization or focus-locking are being simulated in jest tests unnecessarily and have a serious performance and/or DX cost without any need
• CSS classes and internal wrapper components get exposed to tests and cause tighter coupling that we want to avoid.

In order to avoid most of this I think we need to work with the EUI folks to provide a black-box version of EUI that we use in our Jest tests. Whenever an EUI component is rendered it would be similar to using the shallow() helper from enzyme, where only the name of the component and props that were passed to the component would be available. Snapshots would reflect this change, and not include any of the internal implementation of EUI.

It is still important to test our integration with some of the more complex components in EUI, things like the table and data grid have integrations what EUI could/should provide helpers to test the props which are passed to make sure they behave correctly and then we can rely on EUI to test the components internally.

[elasticmachine]

Pinging @elastic/kibana-design (Team:Design)

[spalger]

It sounds like we've done something similar to this for the new DataGrid component, but I think it would make sense to implement a complex component controller that could be validated ourside of enzyme/rendering/snapshots.

import { EuiTableController EuiTable } from '@elastic/eui'

interface Props {
  ...
} 

export class TableController extends EuiTableController {
  constructor(props: Props) {
    super({
      ...
    })
  }
}

const Component: React.FC<Props> = (props) => {
  return <EuiTable controller={new TableController(props)} />
}

With something like this we could test the TableController and make sure that it behaves the way we expect without having to deal with the rendering side of things.

[elasticmachine]

Pinging @elastic/eui-design (EUI)