React Testing Library (RTL) and Version Status Component

[nelsonni]

Testing React function components for UI interactions with Enzyme is cumbersome and brittle (i.e. prone to false negatives when tests needed to fire off a series of click/selection events). Therefore, React Testing Library is being added to provide testing infrastructure for user-centric actions (such as clicks and visual tests). Instead of testing implementation details, the updated tests now operate in ways similar to how a user would locate and interact with the React component UIs.

Additionally, several new and upcoming features required a re-architecture of the Metafile and Card type definitions. The introduction of React Testing Library also found several asynchronous bugs in the acquisition and loading functions for metafiles, cards, and repositories. This PR closes #98.

Includes:

• 25% increase in all Card component sizes
• metafiles.getMetafiles() refactored to be a Thunk Action Creator that retrieves Metafile objects based on one of three different parameters:
  • { id: UUID } for obtaining existing Metafile objects from the Redux store.
  • { filepath: PathLike } for obtaining new (or existing) Metafile objects associated with the specific file path and Git branch (if under version control).
  • { virtual: { name: string, handler: CardType, ... } } for obtaining new (or existing) Metafile objects that are not associated with a specific file path, but can be represented by a Metafile within the Redux store. All fields of the Metafile type can be included and set in this virtual parameter (except for id, modified, name, and handler).
• NarrowType and RemoveType have been simplified to use Extract<Type, Union> and Exclude<Type, ExcludedUnion> Utility Types instead of discriminated type narrowing (which required both Action and ActionKeys to be added at each invocation); now only the appropriate ActionKeys must be provided.
• Testing with mocked Redux stores previously required a handmade Redux store implementation (complete with fake data), and didn't allow actions to update the mocked state. Using @jedmao/redux-mock-store and injecting an action reducer (per Mock Store State is not being updated reduxjs/redux-mock-store#71 (comment)) has allowed for a generalized mock Redux store that simulates action updates for testing via mockStore.
• FileExplorer has been renamed to Explorer to align with the other card components (e.g. Editor, Browser, Diff).
• useDirectory React Hook updated with tests and a bugfix for a synchronization bug when initializing the hook data using the initialRoot parameter. Because calls to setState() on React useState hooks enqueue the subsequent updates to occur after the next component re-render, the useDirectory hook was providing stale data that didn't include the root metafile (and throwing subsequent errors when attempting to poll for directories and files).
• useDirectory hook switched from default export to explicit exporting, which was needed to allow the hook to be mocked for testing using @testing-library/react-hooks.
• extractFieldArray() and ExtractFieldMap() added to allow typed extraction of mocked Redux store fields that would normally be returned with DeepPartial<T> | undefined types on store.getState().field<T> calls.
• Metafile type definitions expanded to include a targets field for Diff cards to have UUIDs for linked cards (including being able to get live diff updates based on content changes in those cards).
• Card type definitions updated to include the UUID of only one related metafile (i.e. the metafile containing the content displayed in that card). Previously, the Card type allowed multiple linked metafiles in order to allow the Diff card to directly manage linked cards, but since the Diff card must maintain the diff'ed content in another metafile it made sense to migrate this information into the Metafiletype definitions.
• handlers.loadCard() refactored to be a Thunk Action Creator that retrieves and adds Card objects based on one of two different parameters:
  • { metafile: Metafile } for loading a new Card based on an existing Metafile from the Redux store.
  • { filepath: PathLike } for obtaining a new (or existing) Metafile object associated with the specific file path and Git branch (if under version control).
• ErrorDialog updated to correctly display error messages within the dialog. Previous attempts used @material-ui/core/TextField components inside of @material-ui/core/Dialog components, which are incompatible and result in null ops for rendering any text within the dialog.
• Bugfix for "TypeError: path must not be empty" error when git.getStatus parameter is a directory, since isomorphic-git.status() does not resolve the git status of directories (per git status for directories isomorphic-git/isomorphic-git#13), and instead suggests the use of isomorphic-git.statusMatrix() for descending into directories and gathering the git status of all contained files instead.
• Test suites updated to no longer use the .simulate() method in the Enzyme library (per Deprecating Enzyme's .simulate() function and replacing event handler invokers #98), and instead rely on the fireEvent commands in the React Testing Library (RTL).
• Dependency updates include:
  • hidefile v3.0.0 added
  • `@jedmao/redux-mock-store v3.0.5 added
  • Testing Library added
    • @testing-library/jest-dom v5.11.4 added
    • @testing-library/react v10.4.9 added
    • @testing-library/react-hooks v3.4.1 added
    • eslint-plugin-jest-dom v3.1.7 added
    • eslint-plugin-testing-library v3.8.0 added
    • react-select-event v5.0.0 added
  • isomorphic-git updated from v1.5.0 to v1.7.6
  • jest updated from v26.0.1 to v26.4.0

[nelsonni]

After e743c32, the test coverage is:

File	% Stmts	% Branch	% Funcs	% Lines	Uncovered Line #s
All files	70.58	47.76	57.04	73.02
components	52.18	10.1	33.09	56.03
BranchList.tsx	28.57	0	0	31.58	16-34
BranchStatusComponent.tsx	50	0	0	55.56	8-14
Browser.tsx	25	0	9.09	26.32	18-54,69-70,74
CanvasComponent.tsx	53.03	0	42.11	52.73	38-60,67-69,73-83,96-98
CardComponent.tsx	65	18.75	57.14	66.67	31-39,44-56,85
Diff.tsx	32.5	0	0	38.24	15-23,27-42,50-54
DiffPickerDialog.tsx	73.81	8.7	100	74.36	69-80
Editor.tsx	72.41	50	33.33	76.92	24-25,40-44
ErrorDialog.tsx	60	100	0	60	8-14
Explorer.tsx	55.81	40	21.43	63.89	34,41-60,67-71
FilePickerDialog.tsx	62.5	0	25	71.43	11-13,17
MergePickerDialog.tsx	78.57	100	40	78.57	17,28,33
NewCardDialog.tsx	45.98	17.39	45	51.35	43-56,60-96,103-105,118
RepoBranchList.tsx	57.58	0	10	65.52	21-26,32-43,53-54,58
StackComponent.tsx	46.15	0	0	50	10-23
containers	88.45	71.49	87.78	91.05
diff.ts	100	100	100	100
flatten.ts	100	100	100	100
format.ts	100	100	100	100
git.ts	80	52.5	85.71	83.33	54-56,116-120
handlers.ts	58.97	8.33	60	62.86	37-48,62-68,92-101
io.ts	98.59	90.91	100	100	145,269-270,279
metafiles.ts	90.72	79.1	79.17	94.94	89-92
repos.ts	88.16	68.33	91.67	92.42	140-141,152-153,197
store	100	100	100	100
actions.ts	100	100	100	100
immutables.ts	100	100	100	100
root.ts	100	100	100	100
store/hooks	50.94	50	25	53.19
useDirectory.ts	95.45	71.43	100	100	34,46-53
useGitStatus.ts	19.35	0	0	21.43	14-48
store/reducers	100	100	100	100
canvas.ts	100	100	100	100
cards.ts	100	100	100	100
errors.ts	100	100	100	100
filetypes.ts	100	100	100	100
metafiles.ts	100	100	100	100
repos.ts	100	100	100	100
stacks.ts	100	100	100	100
store/selectors	16.67	0	0	20
repos.ts	16.67	0	0	20	5-8

---