Support component properties selector

Replaced primitive wrappers to primitive types
This commit is contained in:
Alexey Svetliakov
2016-07-05 22:02:20 +02:00
parent 69de0f48cd
commit 0a73adc78f
2 changed files with 76 additions and 48 deletions

View File

@@ -49,6 +49,7 @@ namespace ShallowWrapperTest {
shallowWrapper = shallowWrapper.find(MyComponent);
shallowWrapper.find(MyStatelessComponent).props().stateless;
shallowWrapper.find(MyStatelessComponent).shallow();
shallowWrapper.find({ prop: 'value' });
}
function test_findWhere() {
@@ -59,6 +60,7 @@ namespace ShallowWrapperTest {
function test_filter() {
elementWrapper = shallowWrapper.filter('.selector');
shallowWrapper = shallowWrapper.filter(MyComponent).shallow();
shallowWrapper.filter({ prop: 'val' });
}
function test_filterWhere() {
@@ -108,6 +110,7 @@ namespace ShallowWrapperTest {
function test_children() {
shallowWrapper = shallowWrapper.children();
shallowWrapper.children(MyStatelessComponent).props().stateless;
shallowWrapper.children({ prop: 'myprop' });
}
function test_childAt() {
@@ -135,6 +138,7 @@ namespace ShallowWrapperTest {
function test_closest() {
elementWrapper = shallowWrapper.closest('.selector');
shallowWrapper = shallowWrapper.closest(MyComponent);
shallowWrapper = shallowWrapper.closest({ prop: 'myprop' });
}
function test_shallow() {
@@ -301,26 +305,27 @@ namespace ReactWrapperTest {
function test_ref() {
reactWrapper = reactWrapper.ref('refName');
interface TmpType1 {
foo: string
}
interface TmpType2 {
bar: string
}
const tmp: ReactWrapper<TmpType1, TmpType2> = reactWrapper.ref<TmpType1, TmpType2>('refName');
}
function test_detach() {
reactWrapper.detach();
}
function test_find() {
elementWrapper = reactWrapper.find('.selector');
reactWrapper = reactWrapper.find(MyComponent);
reactWrapper.find(MyStatelessComponent).props().stateless;
reactWrapper.find({ prop: 'myprop' });
}
function test_findWhere() {
@@ -331,6 +336,7 @@ namespace ReactWrapperTest {
function test_filter() {
elementWrapper = reactWrapper.filter('.selector');
reactWrapper = reactWrapper.filter(MyComponent);
reactWrapper = reactWrapper.filter({ prop: 'myprop' });
}
function test_filterWhere() {
@@ -406,6 +412,7 @@ namespace ReactWrapperTest {
function test_closest() {
elementWrapper = reactWrapper.closest('.selector');
reactWrapper = reactWrapper.closest(MyComponent);
reactWrapper = reactWrapper.closest({ prop: 'myprop' });
}
function test_text() {
@@ -552,6 +559,7 @@ namespace CheerioWrapperTest {
elementWrapper = cheerioWrapper.find('.selector');
cheerioWrapper = cheerioWrapper.find(MyComponent);
cheerioWrapper.find(MyStatelessComponent).props().stateless;
cheerioWrapper.find({ prop: 'myprop' });
}
function test_findWhere() {
@@ -562,6 +570,7 @@ namespace CheerioWrapperTest {
function test_filter() {
elementWrapper = cheerioWrapper.filter('.selector');
cheerioWrapper = cheerioWrapper.filter(MyComponent);
cheerioWrapper = cheerioWrapper.filter({ prop: 'myprop' });
}
function test_filterWhere() {
@@ -637,6 +646,7 @@ namespace CheerioWrapperTest {
function test_closest() {
elementWrapper = cheerioWrapper.closest('.selector');
cheerioWrapper = cheerioWrapper.closest(MyComponent);
cheerioWrapper = cheerioWrapper.closest({ prop: 'myprop' });
}
function test_text() {

104
enzyme/enzyme.d.ts vendored
View File

@@ -19,8 +19,11 @@ declare module "enzyme" {
* 1. A Valid CSS Selector
* 2. A React Component Constructor
* 3. A React Component's displayName
* 4. A React Stateless component
* 5. A React component property map
*/
export type EnzymeSelector = String | typeof ElementClass;
export type EnzymeSelector = string | StatelessComponent<any> | ComponentClass<any> | {[key: string]: any};
export type EnzymePropSelector = { [key: string]: any };
interface CommonWrapper<P, S> {
/**
@@ -29,13 +32,14 @@ declare module "enzyme" {
*/
find<P2>(component: ComponentClass<P2>): CommonWrapper<P2, any>;
find<P2>(statelessComponent: StatelessComponent<P2>): CommonWrapper<P2, {}>;
find(props: EnzymePropSelector): CommonWrapper<any, any>;
find(selector: string): CommonWrapper<HTMLAttributes, any>;
/**
* Finds every node in the render tree that returns true for the provided predicate function.
* @param predicate
*/
findWhere(predicate: (wrapper: CommonWrapper<any, any>) => Boolean): CommonWrapper<any, any>;
findWhere(predicate: (wrapper: CommonWrapper<any, any>) => boolean): CommonWrapper<any, any>;
/**
* Removes nodes in the current wrapper that do not match the provided selector.
@@ -43,59 +47,60 @@ declare module "enzyme" {
*/
filter<P2>(component: ComponentClass<P2>): CommonWrapper<P2, any>;
filter<P2>(statelessComponent: StatelessComponent<P2>): CommonWrapper<P2, {}>;
filter(props: EnzymePropSelector): CommonWrapper<any, any>;
filter(selector: string): CommonWrapper<HTMLAttributes, any>;
/**
* Returns a new wrapper with only the nodes of the current wrapper that, when passed into the provided predicate function, return true.
* @param predicate
*/
filterWhere(predicate: (wrapper: this) => Boolean): this;
filterWhere(predicate: (wrapper: this) => boolean): this;
/**
* Returns whether or not the current wrapper has a node anywhere in it's render tree that looks like the one passed in.
* @param node
*/
contains(node: ReactElement<any>): Boolean;
contains(node: ReactElement<any>): boolean;
/**
* Returns whether or not a given react element exists in the shallow render tree.
* @param node
*/
containsMatchingElement(node: ReactElement<any>): Boolean;
containsMatchingElement(node: ReactElement<any>): boolean;
/**
* Returns whether or not all the given react elements exists in the shallow render tree
* @param nodes
*/
containsAllMatchingElements(nodes: ReactElement<any>[]): Boolean;
containsAllMatchingElements(nodes: ReactElement<any>[]): boolean;
/**
* Returns whether or not one of the given react elements exists in the shallow render tree.
* @param nodes
*/
containsAnyMatchingElements(nodes: ReactElement<any>[]): Boolean;
containsAnyMatchingElements(nodes: ReactElement<any>[]): boolean;
/**
* Returns whether or not the current render tree is equal to the given node, based on the expected value.
*/
equals(node: ReactElement<any>): Boolean;
equals(node: ReactElement<any>): boolean;
/**
* Returns whether or not a given react element matches the shallow render tree.
*/
matchesElement(node: ReactElement<any>): Boolean;
matchesElement(node: ReactElement<any>): boolean;
/**
* Returns whether or not the current node has a className prop including the passed in class name.
* @param className
*/
hasClass(className: String): Boolean;
hasClass(className: string): boolean;
/**
* Returns whether or not the current node matches a provided selector.
* @param selector
*/
is(selector: EnzymeSelector): Boolean;
is(selector: EnzymeSelector): boolean;
/**
* Returns a new wrapper with only the nodes of the current wrapper that don't match the provided selector.
@@ -111,6 +116,7 @@ declare module "enzyme" {
*/
children<P2>(component: ComponentClass<P2>): CommonWrapper<P2, any>;
children<P2>(statelessComponent: StatelessComponent<P2>): CommonWrapper<P2, {}>;
children(props: EnzymePropSelector): CommonWrapper<any, any>;
children(selector: string): CommonWrapper<HTMLAttributes, any>;
children(): CommonWrapper<any, any>;
@@ -118,8 +124,8 @@ declare module "enzyme" {
* Returns a new wrapper with child at the specified index.
* @param index
*/
childAt(index: Number): CommonWrapper<any, any>;
childAt<P2, S2>(index: Number): CommonWrapper<P2, S2>;
childAt(index: number): CommonWrapper<any, any>;
childAt<P2, S2>(index: number): CommonWrapper<P2, S2>;
/**
* Returns a wrapper around all of the parents/ancestors of the wrapper. Does not include the node in the
@@ -130,6 +136,7 @@ declare module "enzyme" {
*/
parents<P2>(component: ComponentClass<P2>): CommonWrapper<P2, any>;
parents<P2>(statelessComponent: StatelessComponent<P2>): CommonWrapper<P2, {}>;
parents(props: EnzymePropSelector): CommonWrapper<any, any>;
parents(selector: string): CommonWrapper<HTMLAttributes, any>;
parents(): CommonWrapper<any, any>;
@@ -147,6 +154,7 @@ declare module "enzyme" {
*/
closest<P2>(component: ComponentClass<P2>): CommonWrapper<P2, any>;
closest<P2>(statelessComponent: StatelessComponent<P2>): CommonWrapper<P2, {}>;
closest(props: EnzymePropSelector): CommonWrapper<any, any>;
closest(selector: string): CommonWrapper<HTMLAttributes, any>;
/**
@@ -156,14 +164,14 @@ declare module "enzyme" {
*
* Note: can only be called on a wrapper of a single node.
*/
text(): String;
text(): string;
/**
* Returns a string of the rendered HTML markup of the current render tree.
*
* Note: can only be called on a wrapper of a single node.
*/
html(): String;
html(): string;
/**
* Returns the node at a given index of the current wrapper.
@@ -191,14 +199,14 @@ declare module "enzyme" {
* Returns the state hash for the root node of the wrapper. Optionally pass in a prop name and it will return just that value.
* @param [key]
*/
state(key?: String): any;
state<T>(key?: String): T;
state(key?: string): any;
state<T>(key?: string): T;
/**
* Returns the context hash for the root node of the wrapper. Optionally pass in a prop name and it will return just that value.
*/
context(key?: String): any;
context<T>(key?: String): T;
context(key?: string): any;
context<T>(key?: string): T;
/**
* Returns the props hash for the current node of the wrapper.
@@ -213,14 +221,14 @@ declare module "enzyme" {
* NOTE: can only be called on a wrapper of a single node.
* @param key
*/
prop(key: String): any;
prop<T>(key: String): T;
prop(key: string): any;
prop<T>(key: string): T;
/**
* Returns the key value for the node of the current wrapper.
* NOTE: can only be called on a wrapper of a single node.
*/
key(): String;
key(): string;
/**
* Simulate events.
@@ -286,7 +294,7 @@ declare module "enzyme" {
* Returns an html-like string of the wrapper for debugging purposes. Useful to print out to the console when
* tests are not passing when you expect them to.
*/
debug(): String;
debug(): string;
/**
* Returns the type of the current node of this wrapper. If it's a composite component, this will be the
@@ -294,12 +302,12 @@ declare module "enzyme" {
*
* Note: can only be called on a wrapper of a single node.
*/
type(): String | Function;
type(): string | Function;
/**
* Returns the name of the current node of the wrapper.
*/
name(): String;
name(): string;
/**
* Iterates through each node of the current wrapper and executes the provided function with a wrapper around
@@ -341,25 +349,25 @@ declare module "enzyme" {
* Returns whether or not any of the nodes in the wrapper match the provided selector.
* @param selector
*/
some(selector: EnzymeSelector): Boolean;
some(selector: EnzymeSelector): boolean;
/**
* Returns whether or not any of the nodes in the wrapper pass the provided predicate function.
* @param fn
*/
someWhere(fn: (wrapper: this) => Boolean): Boolean;
someWhere(fn: (wrapper: this) => boolean): boolean;
/**
* Returns whether or not all of the nodes in the wrapper match the provided selector.
* @param selector
*/
every(selector: EnzymeSelector): Boolean;
every(selector: EnzymeSelector): boolean;
/**
* Returns whether or not any of the nodes in the wrapper pass the provided predicate function.
* @param fn
*/
everyWhere(fn: (wrapper: this) => Boolean): Boolean;
everyWhere(fn: (wrapper: this) => boolean): boolean;
length: number;
}
@@ -375,6 +383,7 @@ declare module "enzyme" {
*/
find<P2>(component: ComponentClass<P2>): ShallowWrapper<P2, any>;
find<P2>(statelessComponent: (props: P2) => JSX.Element): ShallowWrapper<P2, {}>;
find(props: EnzymePropSelector): ShallowWrapper<any, any>;
find(selector: string): ShallowWrapper<HTMLAttributes, any>;
/**
@@ -383,13 +392,14 @@ declare module "enzyme" {
*/
filter<P2>(component: ComponentClass<P2>): ShallowWrapper<P2, any>;
filter<P2>(statelessComponent: StatelessComponent<P2>): ShallowWrapper<P2, {}>;
filter(props: EnzymePropSelector): ShallowWrapper<any, any>;
filter(selector: string): ShallowWrapper<HTMLAttributes, any>;
/**
* Finds every node in the render tree that returns true for the provided predicate function.
* @param predicate
*/
findWhere(predicate: (wrapper: CommonWrapper<any, any>) => Boolean): ShallowWrapper<any, any>;
findWhere(predicate: (wrapper: CommonWrapper<any, any>) => boolean): ShallowWrapper<any, any>;
/**
* Returns a new wrapper with all of the children of the node(s) in the current wrapper. Optionally, a selector
@@ -398,6 +408,7 @@ declare module "enzyme" {
*/
children<P2>(component: ComponentClass<P2>): ShallowWrapper<P2, any>;
children<P2>(statelessComponent: StatelessComponent<P2>): ShallowWrapper<P2, {}>;
children(props: EnzymePropSelector): ShallowWrapper<any, any>;
children(selector: string): ShallowWrapper<HTMLAttributes, any>;
children(): ShallowWrapper<any, any>;
@@ -405,8 +416,8 @@ declare module "enzyme" {
* Returns a new wrapper with child at the specified index.
* @param index
*/
childAt(index: Number): ShallowWrapper<any, any>;
childAt<P2, S2>(index: Number): ShallowWrapper<P2, S2>;
childAt(index: number): ShallowWrapper<any, any>;
childAt<P2, S2>(index: number): ShallowWrapper<P2, S2>;
/**
* Returns a wrapper around all of the parents/ancestors of the wrapper. Does not include the node in the
@@ -417,6 +428,7 @@ declare module "enzyme" {
*/
parents<P2>(component: ComponentClass<P2>): ShallowWrapper<P2, any>;
parents<P2>(statelessComponent: StatelessComponent<P2>): ShallowWrapper<P2, {}>;
parents(props: EnzymePropSelector): ShallowWrapper<any, any>;
parents(selector: string): ShallowWrapper<HTMLAttributes, any>;
parents(): ShallowWrapper<any, any>;
@@ -429,6 +441,7 @@ declare module "enzyme" {
*/
closest<P2>(component: ComponentClass<P2>): ShallowWrapper<P2, any>;
closest<P2>(statelessComponent: StatelessComponent<P2>): ShallowWrapper<P2, {}>;
closest(props: EnzymePropSelector): ShallowWrapper<any, any>;
closest(selector: string): ShallowWrapper<HTMLAttributes, any>;
/**
@@ -443,19 +456,19 @@ declare module "enzyme" {
/**
* Returns a wrapper of the node that matches the provided reference name.
*
*
* NOTE: can only be called on a wrapper instance that is also the root instance.
*/
ref(refName: String): ReactWrapper<any, any>;
ref<P2, S2>(refName: String): ReactWrapper<P2, S2>;
ref(refName: string): ReactWrapper<any, any>;
ref<P2, S2>(refName: string): ReactWrapper<P2, S2>;
/**
* Detaches the react tree from the DOM. Runs ReactDOM.unmountComponentAtNode() under the hood.
*
*
* This method will most commonly be used as a "cleanup" method if you decide to use the attachTo option in mount(node, options).
*
*
* The method is intentionally not "fluent" (in that it doesn't return this) because you should not be doing anything with this wrapper after this method is called.
*
*
* Using the attachTo is not generally recommended unless it is absolutely necessary to test something. It is your responsibility to clean up after yourself at the end of the test if you do decide to use it, though.
*/
detach() : void;
@@ -466,13 +479,14 @@ declare module "enzyme" {
*/
find<P2>(component: ComponentClass<P2>): ReactWrapper<P2, any>;
find<P2>(statelessComponent: (props: P2) => JSX.Element): ReactWrapper<P2, {}>;
find(props: EnzymePropSelector): ReactWrapper<any, any>;
find(selector: string): ReactWrapper<HTMLAttributes, any>;
/**
* Finds every node in the render tree that returns true for the provided predicate function.
* @param predicate
*/
findWhere(predicate: (wrapper: CommonWrapper<any, any>) => Boolean): ReactWrapper<any, any>;
findWhere(predicate: (wrapper: CommonWrapper<any, any>) => boolean): ReactWrapper<any, any>;
/**
* Removes nodes in the current wrapper that do not match the provided selector.
@@ -480,6 +494,7 @@ declare module "enzyme" {
*/
filter<P2>(component: ComponentClass<P2>): ReactWrapper<P2, any>;
filter<P2>(statelessComponent: StatelessComponent<P2>): ReactWrapper<P2, {}>;
filter(props: EnzymePropSelector): ReactWrapper<any, any>;
filter(selector: string): ReactWrapper<HTMLAttributes, any>;
/**
@@ -489,6 +504,7 @@ declare module "enzyme" {
*/
children<P2>(component: ComponentClass<P2>): ReactWrapper<P2, any>;
children<P2>(statelessComponent: StatelessComponent<P2>): ReactWrapper<P2, {}>;
children(props: EnzymePropSelector): ReactWrapper<any, any>;
children(selector: string): ReactWrapper<HTMLAttributes, any>;
children(): ReactWrapper<any, any>;
@@ -496,8 +512,8 @@ declare module "enzyme" {
* Returns a new wrapper with child at the specified index.
* @param index
*/
childAt(index: Number): ReactWrapper<any, any>;
childAt<P2, S2>(index: Number): ReactWrapper<P2, S2>;
childAt(index: number): ReactWrapper<any, any>;
childAt<P2, S2>(index: number): ReactWrapper<P2, S2>;
/**
* Returns a wrapper around all of the parents/ancestors of the wrapper. Does not include the node in the
@@ -508,6 +524,7 @@ declare module "enzyme" {
*/
parents<P2>(component: ComponentClass<P2>): ReactWrapper<P2, any>;
parents<P2>(statelessComponent: StatelessComponent<P2>): ReactWrapper<P2, {}>;
parents(props: EnzymePropSelector): ReactWrapper<any, any>;
parents(selector: string): ReactWrapper<HTMLAttributes, any>;
parents(): ReactWrapper<any, any>;
@@ -520,6 +537,7 @@ declare module "enzyme" {
*/
closest<P2>(component: ComponentClass<P2>): ReactWrapper<P2, any>;
closest<P2>(statelessComponent: StatelessComponent<P2>): ReactWrapper<P2, {}>;
closest(props: EnzymePropSelector): ReactWrapper<any, any>;
closest(selector: string): ReactWrapper<HTMLAttributes, any>;
/**
@@ -554,7 +572,7 @@ declare module "enzyme" {
*/
export function render<P, S>(node: ReactElement<P>, options?: any): CheerioWrapper<P, S>;
export function describeWithDOM(description: String, fn: Function): void;
export function describeWithDOM(description: string, fn: Function): void;
export function spyLifecycle(component: typeof Component): void;
}
}