Skip to content

Feat/typescript types #18

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 7, 2018
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,13 @@ jobs:
- run: |
yarn lint
yarn flow-check
typescript:
<<: *defaults
steps:
- attach_workspace:
at: ~/react-native-testing-library
- run: |
yarn typescript-check
tests:
<<: *defaults
steps:
Expand All @@ -51,6 +58,9 @@ workflows:
- lint-and-flow:
requires:
- install-dependencies
- typescript:
requires:
- install-dependencies
- tests:
requires:
- install-dependencies
7 changes: 6 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"version": "0.2.1",
"description": "Simple React Native testing utilities helping you write better tests with less effort",
"main": "src/index.js",
"typings": "./typings/index.d.ts",
"repository": "git@github.com:callstack/react-native-testing-library.git",
"author": "Michał Pierzchała <thymikee@gmail.com>",
"license": "MIT",
Expand All @@ -11,6 +12,8 @@
"@babel/core": "^7.1.2",
"@babel/runtime": "^7.1.2",
"@callstack/eslint-config": "^2.0.0",
"@types/react": "^16.4.15",
"@types/react-test-renderer": "^16.0.3",
"babel-core": "7.0.0-bridge.0",
"babel-jest": "^23.6.0",
"eslint": "^5.6.1",
Expand All @@ -19,7 +22,8 @@
"metro-react-native-babel-preset": "^0.48.0",
"pretty-format": "^23.6.0",
"react": "^16.5.2",
"react-test-renderer": "^16.5.2"
"react-test-renderer": "^16.5.2",
"typescript": "^3.1.1"
},
"peerDependencies": {
"pretty-format": ">=20.0.0",
Expand All @@ -32,6 +36,7 @@
"scripts": {
"test": "jest",
"flow-check": "flow check",
"typescript-check": "tsc --noEmit --skipLibCheck --jsx react ./typings/__tests__/*",
"lint": "eslint src --cache"
}
}
79 changes: 79 additions & 0 deletions typings/__tests__/index.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
import * as React from 'react';
import { ReactTestInstance } from 'react-test-renderer';
import { render, fireEvent, shallow, flushMicrotasksQueue, debug } from '../..';

const View = props => props.children;
const Text = props => props.children;

const TestComponent = () => (
<View>
<Text>Test component</Text>
</View>
);

const tree = render(<TestComponent />);

// getByAPI tests
const getByNameString: ReactTestInstance = tree.getByName('View');
const getByNameContructor: ReactTestInstance = tree.getByName(View);
const getByTextString: ReactTestInstance = tree.getByText('<View />');
const getByTextRegExp: ReactTestInstance = tree.getByText(/View/g);
const getByProps: ReactTestInstance = tree.getByProps({ value: 2 });
const getByTestId: ReactTestInstance = tree.getByTestId('test-id');
const getAllByNameString: Array<ReactTestInstance> = tree.getAllByName('View');
const getAllByNameConstructor: Array<ReactTestInstance> = tree.getAllByName(
View
);
const getAllByTextString: Array<ReactTestInstance> = tree.getAllByText(
'<View />'
);
const getAllByTextRegExp: Array<ReactTestInstance> = tree.getAllByText(/Text/g);
const getAllByProps: Array<ReactTestInstance> = tree.getAllByProps({
value: 2,
});

// queuryByAPI tests
const queryByNameString: ReactTestInstance | null = tree.queryByName('View');
const queryByNameConstructor: ReactTestInstance | null = tree.queryByName(View);
const queryByTextString: ReactTestInstance | null = tree.queryByText(
'<View />'
);
const queryByTextRegExp: ReactTestInstance | null = tree.queryByText(/View/g);
const queryByProps: ReactTestInstance | null = tree.queryByProps({ value: 2 });
const queryByTestId: ReactTestInstance | null = tree.queryByTestId('test-id');
const queryAllByNameString: Array<ReactTestInstance> = tree.getAllByName(
'View'
);
const queryAllByNameConstructor: Array<ReactTestInstance> = tree.getAllByName(
View
);
const queryAllByTextString: Array<ReactTestInstance> = tree.queryAllByText(
'View'
);
const queryAllByTextRegExp: Array<ReactTestInstance> = tree.queryAllByText(
/View/g
);
const queryAllByProps: Array<ReactTestInstance> = tree.getAllByProps({
value: 2,
});

tree.update(<View />);
tree.unmount();

// fireEvent API tests
fireEvent(getByNameString, 'press');
fireEvent(getByNameString, 'press', 'data');
fireEvent.press(getByNameString);
fireEvent.doublePress(getByNameString);
fireEvent.changeText(getByNameString, 'string');
fireEvent.scroll(getByNameString, 'eventData');

// shallow API
const shallowTree: { output: React.ReactElement<any> } = shallow(
<TestComponent />
);

const waitForFlush: Promise<any> = flushMicrotasksQueue();

debug(<TestComponent />);
debug(getByNameString);
59 changes: 59 additions & 0 deletions typings/index.d.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
import * as React from 'react';
import { ReactTestInstance } from 'react-test-renderer';

export interface GetByAPI {
getByName: (name: React.ReactType) => ReactTestInstance;
Copy link
Member

Choose a reason for hiding this comment

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

name: React.ReactType | string, same for getAllByName

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Copy link
Member

Choose a reason for hiding this comment

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

Oh, that's cool! Didn't know that :D

getByText: (text: string | RegExp) => ReactTestInstance;
getByProps: (props: Record<string, any>) => ReactTestInstance;
getByTestId: (testID: string) => ReactTestInstance;
getAllByName: (name: React.ReactType) => Array<ReactTestInstance>;
getAllByText: (text: string | RegExp) => Array<ReactTestInstance>;
getAllByProps: (props: Record<string, any>) => Array<ReactTestInstance>;
}

export interface QueryByAPI {
queryByName: (name: React.ReactType) => ReactTestInstance | null;
Copy link
Member

Choose a reason for hiding this comment

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

same as above

queryByText: (name: string | RegExp) => ReactTestInstance | null;
queryByProps: (props: Record<string, any>) => ReactTestInstance | null;
queryByTestId: (testID: string) => ReactTestInstance | null;
queryAllByName: (name: React.ReactType) => Array<ReactTestInstance> | [];
queryAllByText: (text: string | RegExp) => Array<ReactTestInstance> | [];
queryAllByProps: (
props: Record<string, any>
) => Array<ReactTestInstance> | [];
}

export interface RenderOptions {
createNodeMock: (element: React.ReactElement<any>) => any;
}

export interface RenderAPI extends GetByAPI, QueryByAPI {
update(nextElement: React.ReactElement<any>): void;
unmount(nextElement?: React.ReactElement<any>): void;
}

export type FireEventFunction = (
element: ReactTestInstance,
eventName: string,
data?: any
) => any;

export type FireEventAPI = FireEventFunction & {
press: (element: ReactTestInstance) => any;
doublePress: (element: ReactTestInstance) => any;
changeText: (element: ReactTestInstance, data?: any) => any;
scroll: (element: ReactTestInstance, data?: any) => any;
};

export declare const render: (
component: React.ReactElement<any>,
options?: RenderOptions
) => RenderAPI;
export declare const shallow: <P = {}>(
instance: ReactTestInstance | React.ReactElement<P>
) => { output: React.ReactElement<P> };
export declare const flushMicrotasksQueue: () => Promise<any>;
export declare const debug: (
instance: ReactTestInstance | React.ReactElement<any>
) => void;
export declare const fireEvent: FireEventAPI;
30 changes: 30 additions & 0 deletions yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -662,6 +662,26 @@
eslint-plugin-react "^7.5.1"
prettier "^1.14.2"

"@types/prop-types@*":
version "15.5.6"
resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.5.6.tgz#9c03d3fed70a8d517c191b7734da2879b50ca26c"
integrity sha512-ZBFR7TROLVzCkswA3Fmqq+IIJt62/T7aY/Dmz+QkU7CaW2QFqAitCE8Ups7IzmGhcN1YWMBT4Qcoc07jU9hOJQ==

"@types/react-test-renderer@^16.0.3":
version "16.0.3"
resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-16.0.3.tgz#cce5c983d66cc5c3582e7c2f44b274ab635a8acc"
integrity sha512-NWOAxVQeJxpXuNKgw83Hah0nquiw1nUexM9qY/Hk3a+XhZwgMtaa6GLA9E1TKMT75Odb3/KE/jiBO4enTuEJjQ==
dependencies:
"@types/react" "*"

"@types/react@*", "@types/react@^16.4.15":
version "16.4.15"
resolved "https://registry.yarnpkg.com/@types/react/-/react-16.4.15.tgz#1f24f1d03b1fc682d92f8485be99d59bf7981191"
integrity sha512-EFQyVZhZCrRjwYDVziTEUGri/ygArIi/ES+JAI0j+3FR0LZ0uRfq2Ed7YnZ1CCn9CM3malSWwTKw5Jo0gVV82A==
dependencies:
"@types/prop-types" "*"
csstype "^2.2.0"

abab@^2.0.0:
version "2.0.0"
resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.0.tgz#aba0ab4c5eee2d4c79d3487d85450fb2376ebb0f"
Expand Down Expand Up @@ -1443,6 +1463,11 @@ cssstyle@^1.0.0:
dependencies:
cssom "0.3.x"

csstype@^2.2.0:
version "2.5.7"
resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.5.7.tgz#bf9235d5872141eccfb2d16d82993c6b149179ff"
integrity sha512-Nt5VDyOTIIV4/nRFswoCKps1R5CD1hkiyjBE9/thNaNZILLEviVw9yWQw15+O+CpNjQKB/uvdcxFFOrSflY3Yw==

damerau-levenshtein@^1.0.4:
version "1.0.4"
resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.4.tgz#03191c432cb6eea168bb77f3a55ffdccb8978514"
Expand Down Expand Up @@ -4941,6 +4966,11 @@ type-check@~0.3.2:
dependencies:
prelude-ls "~1.1.2"

typescript@^3.1.1:
version "3.1.1"
resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.1.1.tgz#3362ba9dd1e482ebb2355b02dfe8bcd19a2c7c96"
integrity sha512-Veu0w4dTc/9wlWNf2jeRInNodKlcdLgemvPsrNpfu5Pq39sgfFjvIIgTsvUHCoLBnMhPoUA+tFxsXjU6VexVRQ==

uglify-js@^3.1.4:
version "3.4.9"
resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.9.tgz#af02f180c1207d76432e473ed24a28f4a782bae3"
Expand Down