Skip to content

[EuiDataGrid] Add unit tests for body/ components + minor refactors#5125

Merged
cee-chen merged 11 commits intoelastic:masterfrom
cee-chen:data-grid-unit-tests-body
Sep 2, 2021
Merged

[EuiDataGrid] Add unit tests for body/ components + minor refactors#5125
cee-chen merged 11 commits intoelastic:masterfrom
cee-chen:data-grid-unit-tests-body

Conversation

@cee-chen
Copy link
Copy Markdown
Contributor

@cee-chen cee-chen commented Sep 1, 2021

Summary

I originally started writing unit tests on the top-level files and realized those were some of the most complex 😅 I ended up going from small files to large for my own sanity.

Code coverage of new tests:

I strongly recommend following along by-commit. Here's a tl;dr breakdown of changes:

  • Straightforward tests
  • Non-straightforward tests:
    • 56c8215: EuiDataGridCell contains a high amount of native DOM behaviors (resize observer, mouse/keyboard events, focus/tab state, etc.) that are difficult to mimic in JSDom. I left general TODO blocks in here for sections of code I thought would be better served by writing in Cypress than Jest
    • cc8777c: EuiDataGridBody has the same difficulties (element height/width, focus/tabbing, complex UX interactions) that would be better tested in Cypress, which I've left TODOs for
    • I am planning on revisiting once the Cypress is merged in, but I am honestly wondering for these 2 tests if it might not be better to skip Jest testing them almost entirely and only use Cypress 🤔 the component lifecycle tests in EuiDataGridCell are likely worth keeping in Jest however.
  • Suggested refactors:
    • After parsing the source code while writing unit tests, I had some suggested cleanups for EuiDataGridCell and EuiDataGridBody that (IMO) makes the files a little simpler to read through and easier to unit test. I've laid out my reasoning for each change in the commit messages - would definitely appreciate folks' 2c on them!
    • b60fd93, b1f86d6, b89f80c, 041eeb2

Checklist

N/A - added tests are internal/dev-only changes, and code refactors did not change functionality, but file locations only

- Uses a non-inline snapshot, since this is a fairly complex component

- NOTE: this is only ~80% coverage, as a lot of the class fns are extremely native DOM specific (focus, etc.) and is better tested in Cypress than Jest
- They're not great, but there's a lot going on here that probably needs to be split up for more comprehensive unit-focused tests
- `key` was a little nebulous and I was struggling to figure out what the data structure shoudl look like - I think tweaking the type def naming would help clarify
- It's used in two separate places with essentially the same definition
- the `as any` cast doesn't seem to be needed anymore - I'm not seeing typescript errors
- DefaultColumnFormatter is repeated in DataGridBody and DataGridFooterRow

- Moving the fns to their own util file lets us write unit tests for them instead of having to dive into props and also removes extra complexity from the already-long DataGridBody file
- since comparators are schema related, and data_grid_schema contains several other similar utility exports/fns

- goal is to continue making data_grid_body more encapsulated/focused on (e.g.) display logic and letting other components handle the detailed sort logic

+ unit tests will be written later for data_grid_schema
@cee-chen cee-chen added skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) tech debt labels Sep 1, 2021
@kibanamachine
Copy link
Copy Markdown

Preview documentation changes for this PR: https://eui.elastic.co/pr_5125/

@thompsongl
Copy link
Copy Markdown
Contributor

💯 on all the refactors! Will take another pass to look at the tests.

Copy link
Copy Markdown
Contributor

@thompsongl thompsongl left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This all LGTM!

});

// TODO: This is likely better handled/asserted by Cypress.
// I'm leaving it in for now to provide example of props/inMemoryValues
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🆒

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Haha, I just realized there's a typo in that. doh, pushing up that fix, and also adding another quick .simulate() test for #5120 that just merged in

@cee-chen cee-chen enabled auto-merge (squash) September 2, 2021 22:54
@kibanamachine
Copy link
Copy Markdown

Preview documentation changes for this PR: https://eui.elastic.co/pr_5125/

@cee-chen cee-chen merged commit afaaedb into elastic:master Sep 2, 2021
@cee-chen cee-chen deleted the data-grid-unit-tests-body branch September 13, 2021 21:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

skip-changelog Use on PRs to skip changelog requirement (Don't delete - used for automation) tech debt

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants