Add typescript type declaration #5

sz-piotr · 2019-04-12T10:02:56Z

Closes #2

This PR adds typescript type declarations for the library. The declaration file tries to follow the order of exports from index.js.

Additionally it tries to fit seamlessly with the current build / release configuration by automatically copying the declaration file to /dist after compilation.

I would love to get feedback on this and get this as close as possible to the true types.

bcarroll22 · 2019-04-12T12:32:43Z

Thanks for working on this! Since I’m not very familiar with typescript, I’d like to get some feedback from @TAGraves before we merge. Really appreciate the contribution!

TAGraves · 2019-04-12T14:26:17Z

src/index.d.ts

+type Bound<T> = T extends (arg: any, ...rest: infer U) => infer V ? (...args: U) => V : never
+type BoundQueries<T> = { [P in keyof T]: Bound<T[P]> }
+
+export type FiberRoot = Omit<ReactTestInstance, 'find' | 'findAllByProps' | 'findAllByType' | 'findByProps' | 'findByType' | 'instance'>


Can you talk through your thinking in naming this FiberRoot? I was thinking something along the lines of NativeInstance or NativeElement although neither of those are quite right, either.

I am open to changing this. The FiberRoot was chosen to make the types consistent with documentation https://www.native-testing-library.com/docs/api-queries#bya11yhint

This brings up a good point, this change will likely require updating the docs also so that the types match.

TAGraves · 2019-04-12T14:28:02Z

src/index.d.ts

+  timeout?: number
+  interval?: number
+}
+export declare function waitForElement<T>(callback: () => T, options?: WaitOptions): Promise<T>


waitForElement also take container as an option.

This was actually removed, it no longer takes a container 👍

Unrelated to this PR, but the reason for this was that in dom-testing-library the container is used as the root of a MutationObserver but we don't actually observe for mutation. It was an option in previous versions, but it didn't actually do anything. This is true for ^1.6.0.

TAGraves · 2019-04-12T14:32:13Z

src/index.d.ts

+// ------------
+
+// TODO: options are pretty-format options
+export declare function prettyPrint(element: ReactTestRenderer | FiberRoot, maxLength?: number, options?: any): string


You can import { OptionsReceived } from 'pretty-format' to get the options.

Also, technically element can be anything. I would at least make it `ReactTestRenderer | FiberRoot | string

TAGraves

I'm 👍 on this once the native event second parameter is typed (and that type is used for all the fire event functions). Thanks for spending your time on this! It'll be great to get this released - we can iterate on making sure all the types are perfectly matched later.

sz-piotr · 2019-04-12T14:47:37Z

Great. I'll probably get around to continue work on it on Monday. Also, do you have any suggestions on what should be the type for the NativeEvent second parameter? I left it as any, because I didn't really know what it should be

bcarroll22 · 2019-04-12T15:02:01Z

NativeEvent is flexible because of handlers like onChangeText. It can either take something like:

new NativeEvent('change', { validTargets: ['TextInput'], nativeEvent: { text: 'hello world' } })

or:

new NativeEvent('changeText', 'hello world')

target would be the result of a query, so I suppose it'd be what we'd call FiberRoot or NativeElement.

new NativeEvent().event is intended to closely resemble what you'd receive from a real SyntheticEvent in react-native. So something like:

{ 
  type: 'PressEvent', 
  nativeEvent: { text: 'hello world' } 
}

but it'll also includes any other properties you passed to the constructor on the second arg. So for example:

new NativeEvent('change', { nativeEvent: { text: 'hello world' }, foo: 'bar' })

would give you this on event.event:

{ 
  type: 'change', 
  nativeEvent: { text: 'hello world' }, 
  foo: 'bar' 
}

codecov · 2019-04-14T02:45:27Z

Codecov Report

Merging #5 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff          @@
##           master     #5   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          15     15           
  Lines         290    290           
  Branches       49     49           
=====================================
  Hits          290    290

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update f83eacb...f3e292e. Read the comment docs.

codecov · 2019-04-14T02:45:27Z

Codecov Report

Merging #5 into master will not change coverage.
The diff coverage is n/a.

@@          Coverage Diff          @@
##           master     #5   +/-   ##
=====================================
  Coverage     100%   100%           
=====================================
  Files          15     15           
  Lines         290    290           
  Branches       49     49           
=====================================
  Hits          290    290

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update 4455511...33bbe01. Read the comment docs.

sz-piotr · 2019-04-15T14:29:06Z

Hey! I rebased the PR so that it includes all the changes made over the weekend. I also changed a few things:

Renamed FiberRoot to NativeTestInstance. The reasoning is (react|native)-testing-library -> (React|Native)TestInstance
Added OptionsReceived from pretty-format
Added event initialisers. Decided to go with NativeSyntheticEvent as the base. Hopefully this makes sense

bcarroll22 · 2019-04-15T23:24:17Z

Thanks again for all of this work. I’m good with getting this in and iterating, like @TAGraves mentioned. Your reasoning makes sense!

Next steps for me, I think because of the size of this library it would be a lot more maintainable if these were split into files like in dom-testing-library (there’s a lot going on in this compared to react-testing-library). That’s really my only feedback right now though. Thanks again for the hard work!

bcarroll22 · 2019-04-15T23:30:25Z

🎉 This PR is included in version 1.7.0 🎉

The release is available on:

npm package (@latest dist-tag)
GitHub release

Your semantic-release bot 📦🚀

TAGraves reviewed Apr 12, 2019

View reviewed changes

bcarroll22 force-pushed the master branch 3 times, most recently from 44d2c33 to f83eacb Compare April 14, 2019 01:47

sz-piotr added 3 commits April 15, 2019 15:58

Add typescript type declaration

420e3f6

Rename FiberRoot to NativeTestInstance

d7d3c38

Import OptionsReceived from prettyFormat

c153fce

sz-piotr force-pushed the master branch from 3091065 to 7b8a6e2 Compare April 15, 2019 14:23

Add types for NativeEvent

a6c2d16

sz-piotr force-pushed the master branch from 7b8a6e2 to a6c2d16 Compare April 15, 2019 14:25

Add validTargets to EventInit

33bbe01

bcarroll22 approved these changes Apr 15, 2019

View reviewed changes

bcarroll22 merged commit 7d5057a into testing-library:master Apr 15, 2019

bcarroll22 added the released label Apr 15, 2019

Uh oh!

Add typescript type declaration #5

Add typescript type declaration #5

Uh oh!

Conversation

sz-piotr commented Apr 12, 2019

Uh oh!

bcarroll22 commented Apr 12, 2019

Uh oh!

TAGraves Apr 12, 2019

Choose a reason for hiding this comment

Uh oh!

sz-piotr Apr 12, 2019

Choose a reason for hiding this comment

Uh oh!

bcarroll22 Apr 12, 2019

Choose a reason for hiding this comment

Uh oh!

TAGraves Apr 12, 2019

Choose a reason for hiding this comment

Uh oh!

bcarroll22 Apr 12, 2019

Choose a reason for hiding this comment

Uh oh!

TAGraves Apr 12, 2019

Choose a reason for hiding this comment

Uh oh!

TAGraves left a comment

Choose a reason for hiding this comment

Uh oh!

sz-piotr commented Apr 12, 2019

Uh oh!

bcarroll22 commented Apr 12, 2019

Uh oh!

codecov bot commented Apr 14, 2019

Codecov Report

Uh oh!

codecov bot commented Apr 14, 2019 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

sz-piotr commented Apr 15, 2019

Uh oh!

bcarroll22 commented Apr 15, 2019

Uh oh!

bcarroll22 commented Apr 15, 2019

Uh oh!

Uh oh!

codecov bot commented Apr 14, 2019 •

edited

Loading