diff --git a/chai-enzyme/index.d.ts b/chai-enzyme/index.d.ts index 23e9058ef6..6997abd5fe 100644 --- a/chai-enzyme/index.d.ts +++ b/chai-enzyme/index.d.ts @@ -8,6 +8,7 @@ /// /// /// +/// declare namespace Chai { type EnzymeSelector = string | React.StatelessComponent | React.ComponentClass | { [key: string]: any }; @@ -143,9 +144,9 @@ declare namespace Chai { } declare module "chai-enzyme" { - import { ShallowWrapper, ReactWrapper, CheerioWrapper } from "enzyme"; + import { ShallowWrapper, ReactWrapper } from "enzyme"; - type DebugWrapper = ShallowWrapper | CheerioWrapper | ReactWrapper; + type DebugWrapper = ShallowWrapper | Cheerio | ReactWrapper; function chaiEnzyMe(wrapper?: (debugWrapper: DebugWrapper) => string): (chai: any) => void; module chaiEnzyMe { diff --git a/enzyme/enzyme-tests.tsx b/enzyme/enzyme-tests.tsx index 035f0dfcd7..120365eab4 100644 --- a/enzyme/enzyme-tests.tsx +++ b/enzyme/enzyme-tests.tsx @@ -1,48 +1,44 @@ -import { shallow, mount, render, describeWithDOM, spyLifecycle } from "enzyme"; import * as React from "react"; -import {Component, ReactElement, HTMLAttributes} from "react"; -import {ShallowWrapper, ReactWrapper, CheerioWrapper} from "enzyme"; +import {shallow, mount, render, ShallowWrapper, ReactWrapper} from "enzyme"; +import {Component, ReactElement, HTMLAttributes, ComponentClass, StatelessComponent} from "react"; // Help classes/interfaces interface MyComponentProps { - propsProperty: any; + stringProp: string; numberProp?: number; } interface StatelessProps { - stateless: any; + stateless: string; } interface MyComponentState { - stateProperty: any; + stateProperty: string; } class MyComponent extends Component { setState(...args: any[]) { + console.log(args); } } const MyStatelessComponent = (props: StatelessProps) => ; -// API -namespace SpyLifecycleTest { - spyLifecycle(MyComponent); -} - // ShallowWrapper namespace ShallowWrapperTest { var shallowWrapper: ShallowWrapper = - shallow(); + shallow(); var reactElement: ReactElement, - objectVal: Object, - boolVal: Boolean, - stringVal: String, + objectVal: {}, + boolVal: boolean, + stringVal: string, numOrStringVal: number | string, - elementWrapper: ShallowWrapper, {}> + elementWrapper: ShallowWrapper, {}>, + statelessWrapper: ShallowWrapper; function test_shallow_options() { - shallow(, { + shallow(, { context: { test: "a", }, @@ -51,11 +47,10 @@ namespace ShallowWrapperTest { } function test_find() { - elementWrapper = shallowWrapper.find('.selector'); shallowWrapper = shallowWrapper.find(MyComponent); - shallowWrapper.find(MyStatelessComponent).props().stateless; - shallowWrapper.find(MyStatelessComponent).shallow(); - shallowWrapper.find({ prop: 'value' }); + statelessWrapper = shallowWrapper.find(MyStatelessComponent); + shallowWrapper = shallowWrapper.find({ prop: 'value' }); + elementWrapper = shallowWrapper.find('.selector'); } function test_findWhere() { @@ -64,15 +59,16 @@ namespace ShallowWrapperTest { } function test_filter() { + shallowWrapper = shallowWrapper.filter(MyComponent); + statelessWrapper = shallowWrapper.filter(MyStatelessComponent); + shallowWrapper = shallowWrapper.filter({ prop: 'value' }); elementWrapper = shallowWrapper.filter('.selector'); - shallowWrapper = shallowWrapper.filter(MyComponent).shallow(); - shallowWrapper.filter({ prop: 'val' }); } function test_filterWhere() { shallowWrapper = shallowWrapper.filterWhere(wrapper => { - wrapper.props().propsProperty; + wrapper.props().stringProp; return true; }); } @@ -95,11 +91,11 @@ namespace ShallowWrapperTest { function test_dive() { interface TmpProps { - foo: any + foo: any; } interface TmpState { - bar: any + bar: any; } const diveWrapper: ShallowWrapper = shallowWrapper.dive({ context: { foobar: 'barfoo' }}); @@ -122,11 +118,11 @@ namespace ShallowWrapperTest { } function test_isEmpty() { - boolVal = shallowWrapper.isEmpty() + boolVal = shallowWrapper.isEmpty(); } function test_exists() { - boolVal = shallowWrapper.exists() + boolVal = shallowWrapper.exists(); } function test_not() { @@ -135,19 +131,21 @@ namespace ShallowWrapperTest { function test_children() { shallowWrapper = shallowWrapper.children(); - shallowWrapper.children(MyStatelessComponent).props().stateless; - shallowWrapper.children({ prop: 'myprop' }); + shallowWrapper = shallowWrapper.children(MyComponent); + statelessWrapper = shallowWrapper.children(MyStatelessComponent); + shallowWrapper = shallowWrapper.children({ prop: 'value' }); + elementWrapper = shallowWrapper.children('.selector'); } function test_childAt() { const childWrapper: ShallowWrapper = shallowWrapper.childAt(0); interface TmpType1 { - foo: any + foo: any; } interface TmpType2 { - bar: any + bar: any; } const childWrapper2: ShallowWrapper = shallowWrapper.childAt(0); @@ -155,6 +153,10 @@ namespace ShallowWrapperTest { function test_parents() { shallowWrapper = shallowWrapper.parents(); + shallowWrapper = shallowWrapper.parents(MyComponent); + statelessWrapper = shallowWrapper.parents(MyStatelessComponent); + shallowWrapper = shallowWrapper.parents({ prop: 'myprop' }); + elementWrapper = shallowWrapper.parents('.selector'); } function test_parent() { @@ -162,9 +164,10 @@ namespace ShallowWrapperTest { } function test_closest() { - elementWrapper = shallowWrapper.closest('.selector'); shallowWrapper = shallowWrapper.closest(MyComponent); + statelessWrapper = shallowWrapper.closest(MyStatelessComponent); shallowWrapper = shallowWrapper.closest({ prop: 'myprop' }); + elementWrapper = shallowWrapper.closest('.selector'); } function test_shallow() { @@ -175,15 +178,10 @@ namespace ShallowWrapperTest { shallowWrapper = shallowWrapper.unmount(); } - function test_render() { - var cheerioWrapper: CheerioWrapper = shallowWrapper.render(); - } - function test_text() { stringVal = shallowWrapper.text(); } - function test_html() { stringVal = shallowWrapper.html(); } @@ -206,23 +204,28 @@ namespace ShallowWrapperTest { function test_state() { const state: MyComponentState = shallowWrapper.state(); - shallowWrapper.state('key'); - const tmp: String = shallowWrapper.state('key'); + const prop: string = shallowWrapper.state('stateProperty'); + const prop2: number = shallowWrapper.state('key'); + const prop3 = shallowWrapper.state('key'); } function test_context() { shallowWrapper.context(); shallowWrapper.context('key'); - const tmp: String = shallowWrapper.context('key'); + const tmp: string = shallowWrapper.context('key'); } function test_props() { - objectVal = shallowWrapper.props(); + const props: MyComponentProps = shallowWrapper.props(); + const props2: MyComponentProps = shallowWrapper.find(MyComponent).props(); + const props3: StatelessProps = shallowWrapper.find(MyStatelessComponent).props(); + const props4: HTMLAttributes = shallowWrapper.find('.selector').props(); } function test_prop() { - shallowWrapper.prop('key'); - const tmp: String = shallowWrapper.prop('key'); + const tmp: number = shallowWrapper.prop('numberProp'); + const tmp2: string = shallowWrapper.prop('key'); + const tmp3 = shallowWrapper.prop('key'); } function test_key() { @@ -239,7 +242,7 @@ namespace ShallowWrapperTest { } function test_setProps() { - shallowWrapper = shallowWrapper.setProps({ propsProperty: 'foo' }, () => console.log('props updated')); + shallowWrapper = shallowWrapper.setProps({ stringProp: 'foo' }); } function test_setContext() { @@ -259,20 +262,20 @@ namespace ShallowWrapperTest { } function test_type() { - var stringOrFunction: String | Function = shallowWrapper.type(); + const type: string | StatelessComponent | ComponentClass = shallowWrapper.type(); } function test_name() { - var str: String = shallowWrapper.name(); + stringVal = shallowWrapper.name(); } function test_forEach() { shallowWrapper = - shallowWrapper.forEach(wrapper => wrapper.shallow().props().propsProperty); + shallowWrapper.forEach(wrapper => wrapper.shallow().props().stringProp); } function test_map() { - var arrayNumbers: Array = + var arrayNumbers: number[] = shallowWrapper.map(wrapper => wrapper.props().numberProp); } @@ -286,13 +289,15 @@ namespace ShallowWrapperTest { function test_reduceRight() { const total: number = shallowWrapper.reduceRight( - (amount: number, n: ShallowWrapper) => amount + n.prop('amount') + (amount: number, n: ShallowWrapper) => amount + n.prop('numberProp') ); } function test_some() { - boolVal = shallowWrapper.some('.selector'); boolVal = shallowWrapper.some(MyComponent); + boolVal = shallowWrapper.some(MyStatelessComponent); + boolVal = shallowWrapper.some({ prop: 'myprop' }); + boolVal = shallowWrapper.some('.selector'); } function test_someWhere() { @@ -300,8 +305,10 @@ namespace ShallowWrapperTest { } function test_every() { - boolVal = shallowWrapper.every('.selector'); boolVal = shallowWrapper.every(MyComponent); + boolVal = shallowWrapper.every(MyStatelessComponent); + boolVal = shallowWrapper.every({ prop: 'myprop' }); + boolVal = shallowWrapper.every('.selector'); } function test_everyWhere() { @@ -321,13 +328,14 @@ namespace ShallowWrapperTest { // ReactWrapper namespace ReactWrapperTest { var reactWrapper: ReactWrapper = - mount(); + mount(); var reactElement: ReactElement, - objectVal: Object, - boolVal: Boolean, - stringVal: String, - elementWrapper: ReactWrapper, {}> + objectVal: {}, + boolVal: boolean, + stringVal: string, + elementWrapper: ReactWrapper, {}>, + statelessWrapper: ReactWrapper; function test_unmount() { reactWrapper = reactWrapper.unmount(); @@ -336,7 +344,7 @@ namespace ReactWrapperTest { function test_mount() { reactWrapper = reactWrapper.mount(); - mount(, { + mount(, { attachTo: document.getElementById('test'), context: { a: "b" @@ -348,11 +356,11 @@ namespace ReactWrapperTest { reactWrapper = reactWrapper.ref('refName'); interface TmpType1 { - foo: string + foo: string; } interface TmpType2 { - bar: string + bar: string; } const tmp: ReactWrapper = reactWrapper.ref('refName'); @@ -365,8 +373,8 @@ namespace ReactWrapperTest { function test_find() { elementWrapper = reactWrapper.find('.selector'); reactWrapper = reactWrapper.find(MyComponent); - reactWrapper.find(MyStatelessComponent).props().stateless; - reactWrapper.find({ prop: 'myprop' }); + statelessWrapper = reactWrapper.find(MyStatelessComponent); + reactWrapper = reactWrapper.find({ prop: 'myprop' }); } function test_findWhere() { @@ -375,15 +383,16 @@ namespace ReactWrapperTest { } function test_filter() { - elementWrapper = reactWrapper.filter('.selector'); reactWrapper = reactWrapper.filter(MyComponent); + statelessWrapper = reactWrapper.filter(MyStatelessComponent); reactWrapper = reactWrapper.filter({ prop: 'myprop' }); + elementWrapper = reactWrapper.filter('.selector'); } function test_filterWhere() { reactWrapper = reactWrapper.filterWhere(wrapper => { - wrapper.props().propsProperty; + wrapper.props().stringProp; return true; }); } @@ -421,7 +430,7 @@ namespace ReactWrapperTest { } function test_isEmpty() { - boolVal = reactWrapper.isEmpty() + boolVal = reactWrapper.isEmpty(); } function test_not() { @@ -430,17 +439,21 @@ namespace ReactWrapperTest { function test_children() { reactWrapper = reactWrapper.children(); + reactWrapper = reactWrapper.children(MyComponent); + statelessWrapper = reactWrapper.children(MyStatelessComponent); + reactWrapper = reactWrapper.children({ prop: 'myprop' }); + elementWrapper = reactWrapper.children('.selector'); } function test_childAt() { const childWrapper: ReactWrapper = reactWrapper.childAt(0); interface TmpType1 { - foo: any + foo: any; } interface TmpType2 { - bar: any + bar: any; } const childWrapper2: ReactWrapper = reactWrapper.childAt(0); @@ -448,6 +461,10 @@ namespace ReactWrapperTest { function test_parents() { reactWrapper = reactWrapper.parents(); + reactWrapper = reactWrapper.parents(MyComponent); + statelessWrapper = reactWrapper.parents(MyStatelessComponent); + reactWrapper = reactWrapper.parents({ prop: 'myprop' }); + elementWrapper = reactWrapper.parents('.selector'); } function test_parent() { @@ -455,9 +472,10 @@ namespace ReactWrapperTest { } function test_closest() { - elementWrapper = reactWrapper.closest('.selector'); reactWrapper = reactWrapper.closest(MyComponent); + statelessWrapper = reactWrapper.closest(MyStatelessComponent); reactWrapper = reactWrapper.closest({ prop: 'myprop' }); + elementWrapper = reactWrapper.closest('.selector'); } function test_text() { @@ -485,24 +503,29 @@ namespace ReactWrapperTest { } function test_state() { - reactWrapper.state(); - reactWrapper.state('key'); - const tmp: String = reactWrapper.state('key'); + const state: MyComponentState = reactWrapper.state(); + const prop: string = reactWrapper.state('stateProperty'); + const prop2: number = reactWrapper.state('key'); + const prop3 = reactWrapper.state('key'); } function test_context() { reactWrapper.context(); reactWrapper.context('key'); - const tmp: String = reactWrapper.context('key'); + const tmp: string = reactWrapper.context('key'); } function test_props() { - objectVal = reactWrapper.props(); + const props: MyComponentProps = reactWrapper.props(); + const props2: MyComponentProps = reactWrapper.find(MyComponent).props(); + const props3: StatelessProps = reactWrapper.find(MyStatelessComponent).props(); + const props4: HTMLAttributes = reactWrapper.find('.selector').props(); } function test_prop() { - reactWrapper.prop('key'); - const tmp: String = reactWrapper.prop('key'); + const tmp: number = reactWrapper.prop('numberProp'); + const tmp2: string = reactWrapper.prop('key'); + const tmp3 = reactWrapper.prop('key'); } function test_key() { @@ -519,7 +542,7 @@ namespace ReactWrapperTest { } function test_setProps() { - reactWrapper = reactWrapper.setProps({ propsProperty: 'foo' }); + reactWrapper = reactWrapper.setProps({ stringProp: 'foo' }); } function test_setContext() { @@ -539,40 +562,42 @@ namespace ReactWrapperTest { } function test_type() { - var stringOrFunction: String | Function = reactWrapper.type(); + const type: string | StatelessComponent | ComponentClass = reactWrapper.type(); } function test_name() { - var str: String = reactWrapper.name(); + stringVal = reactWrapper.name(); } function test_forEach() { reactWrapper = - reactWrapper.forEach(wrapper => wrapper.props().propsProperty); + reactWrapper.forEach(wrapper => wrapper.props().stringProp); } function test_map() { - var arrayNumbers: Array = + var arrayNumbers: number[] = reactWrapper.map(wrapper => wrapper.props().numberProp); } function test_reduce() { const total: number = reactWrapper.reduce( - (amount: number, n: ReactWrapper) => amount + n.prop('amount') + (amount: number, n: ReactWrapper) => amount + n.prop('numberProp') ); } function test_reduceRight() { const total: number = reactWrapper.reduceRight( - (amount: number, n: ReactWrapper) => amount + n.prop('amount') + (amount: number, n: ReactWrapper) => amount + n.prop('numberProp') ); } function test_some() { - boolVal = reactWrapper.some('.selector'); boolVal = reactWrapper.some(MyComponent); + boolVal = reactWrapper.some(MyStatelessComponent); + boolVal = reactWrapper.some({ prop: 'myprop' }); + boolVal = reactWrapper.some('.selector'); } function test_someWhere() { @@ -580,8 +605,10 @@ namespace ReactWrapperTest { } function test_every() { - boolVal = reactWrapper.every('.selector'); boolVal = reactWrapper.every(MyComponent); + boolVal = reactWrapper.every(MyStatelessComponent); + boolVal = reactWrapper.every({ prop: 'myprop' }); + boolVal = reactWrapper.every('.selector'); } function test_everyWhere() { @@ -594,239 +621,9 @@ namespace ReactWrapperTest { // CheerioWrapper namespace CheerioWrapperTest { - var cheerioWrapper: CheerioWrapper = - render(); + const wrapper: Cheerio = + shallow(
).render() || + mount(
).render(); - var reactElement: ReactElement, - objectVal: Object, - boolVal: Boolean, - stringVal: String, - elementWrapper: CheerioWrapper, {}> - - function test_find() { - elementWrapper = cheerioWrapper.find('.selector'); - cheerioWrapper = cheerioWrapper.find(MyComponent); - cheerioWrapper.find(MyStatelessComponent).props().stateless; - cheerioWrapper.find({ prop: 'myprop' }); - } - - function test_findWhere() { - cheerioWrapper = - cheerioWrapper.findWhere((aCheerioWrapper: CheerioWrapper) => true); - } - - function test_filter() { - elementWrapper = cheerioWrapper.filter('.selector'); - cheerioWrapper = cheerioWrapper.filter(MyComponent); - cheerioWrapper = cheerioWrapper.filter({ prop: 'myprop' }); - } - - function test_filterWhere() { - cheerioWrapper = - cheerioWrapper.filterWhere(wrapper => { - wrapper.props().propsProperty; - return true; - }); - } - - function test_contains() { - boolVal = cheerioWrapper.contains(
); - } - - function test_containsMatchingElement() { - boolVal = cheerioWrapper.contains(
); - } - - function test_containsAllMatchingElements() { - boolVal = cheerioWrapper.containsAllMatchingElements([
]); - } - - function test_containsAnyMatchingElement() { - boolVal = cheerioWrapper.containsAnyMatchingElements([
]); - } - - function test_equals() { - boolVal = cheerioWrapper.equals(
); - } - - function test_matchesElement() { - boolVal = cheerioWrapper.matchesElement(
); - } - - function test_hasClass() { - boolVal = cheerioWrapper.find('.my-button').hasClass('disabled'); - } - - function test_is() { - boolVal = cheerioWrapper.is('.some-class'); - } - - function test_isEmpty() { - boolVal = cheerioWrapper.isEmpty() - } - - function test_not() { - elementWrapper = cheerioWrapper.find('.foo').not('.bar'); - } - - function test_children() { - cheerioWrapper = cheerioWrapper.children(); - } - - function test_childAt() { - const childWrapper: CheerioWrapper = cheerioWrapper.childAt(0); - - interface TmpType1 { - foo: any - } - - interface TmpType2 { - bar: any - } - - const childWrapper2: CheerioWrapper = cheerioWrapper.childAt(0); - } - - function test_parents() { - cheerioWrapper = cheerioWrapper.parents(); - } - - function test_parent() { - cheerioWrapper = cheerioWrapper.parent(); - } - - function test_closest() { - elementWrapper = cheerioWrapper.closest('.selector'); - cheerioWrapper = cheerioWrapper.closest(MyComponent); - cheerioWrapper = cheerioWrapper.closest({ prop: 'myprop' }); - } - - function test_text() { - stringVal = cheerioWrapper.text(); - } - - function test_html() { - stringVal = cheerioWrapper.html(); - } - - function test_get() { - reactElement = cheerioWrapper.get(1); - } - - function test_at() { - cheerioWrapper = cheerioWrapper.at(1); - } - - function test_first() { - cheerioWrapper = cheerioWrapper.first(); - } - - function test_last() { - cheerioWrapper = cheerioWrapper.last(); - } - - function test_state() { - cheerioWrapper.state(); - cheerioWrapper.state('key'); - const tmp: String = cheerioWrapper.state('key'); - } - - function test_context() { - cheerioWrapper.context(); - cheerioWrapper.context('key'); - const tmp: String = cheerioWrapper.context('key'); - } - - function test_props() { - objectVal = cheerioWrapper.props(); - } - - function test_prop() { - cheerioWrapper.prop('key'); - const tmp: String = cheerioWrapper.prop('key'); - } - - function test_key() { - stringVal = cheerioWrapper.key(); - } - - function test_simulate(...args: any[]) { - cheerioWrapper.simulate('click'); - cheerioWrapper.simulate('click', args); - } - - function test_setState() { - cheerioWrapper = cheerioWrapper.setState({ stateProperty: 'state' }); - } - - function test_setProps() { - cheerioWrapper = cheerioWrapper.setProps({ propsProperty: 'foo' }); - } - - function test_setContext() { - cheerioWrapper = cheerioWrapper.setContext({ name: 'baz' }); - } - - function test_instance() { - var myComponent: MyComponent = cheerioWrapper.instance(); - } - - function test_update() { - cheerioWrapper = cheerioWrapper.update(); - } - - function test_debug() { - stringVal = cheerioWrapper.debug(); - } - - function test_type() { - var stringOrFunction: String | Function = cheerioWrapper.type(); - } - - function test_name() { - var str: String = cheerioWrapper.name(); - } - - function test_forEach() { - cheerioWrapper = - cheerioWrapper.forEach((aCheerioWrapper: CheerioWrapper) => { - }); - } - - function test_map() { - var arrayNumbers: Array = - cheerioWrapper.map(wrapper => wrapper.props().numberProp); - } - - function test_reduce() { - const total: number = - cheerioWrapper.reduce( - (amount: number, n: CheerioWrapper) => amount + n.prop('amount') - ); - } - - function test_reduceRight() { - const total: number = - cheerioWrapper.reduceRight( - (amount: number, n: CheerioWrapper) => amount + n.prop('amount') - ); - } - - function test_some() { - boolVal = cheerioWrapper.some('.selector'); - boolVal = cheerioWrapper.some(MyComponent); - } - - function test_someWhere() { - boolVal = cheerioWrapper.someWhere((aCheerioWrapper: CheerioWrapper) => true); - } - - function test_every() { - boolVal = cheerioWrapper.every('.selector'); - boolVal = cheerioWrapper.every(MyComponent); - } - - function test_everyWhere() { - boolVal = cheerioWrapper.everyWhere((aCheerioWrapper: CheerioWrapper) => true); - } + wrapper.toggleClass('className'); } diff --git a/enzyme/index.d.ts b/enzyme/index.d.ts index 5502b0eb85..7559985e21 100644 --- a/enzyme/index.d.ts +++ b/enzyme/index.d.ts @@ -1,16 +1,27 @@ -// Type definitions for Enzyme v2.7.0 +// Type definitions for Enzyme 2.7 // Project: https://github.com/airbnb/enzyme -// Definitions by: Marian Palkus , Cap3 , Ivo Stratev , Tom Crockett +// Definitions by: Marian Palkus , Cap3 , Ivo Stratev , Tom Crockett , jwbay // Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped // TypeScript Version: 2.1 -import { ReactElement, Component, StatelessComponent, ComponentClass, HTMLAttributes as ReactHTMLAttributes, SVGAttributes as ReactSVGAttributes } from "react"; +/// +import { ReactElement, Component, HTMLAttributes as ReactHTMLAttributes, SVGAttributes as ReactSVGAttributes } from "react"; type HTMLAttributes = ReactHTMLAttributes<{}> & ReactSVGAttributes<{}>; export class ElementClass extends Component { } +/* These are purposefully stripped down versions of React.ComponentClass and React.StatelessComponent. + * The optional static properties on them break overload ordering for wrapper methods if they're not + * all specified in the implementation. TS chooses the EnzymePropSelector overload and loses the generics + */ +interface ComponentClass { + new(props?: Props, context?: any): Component; +} + +type StatelessComponent = (props: Props, context?: any) => JSX.Element; + /** * Many methods in Enzyme's API accept a selector as an argument. Selectors in Enzyme can fall into one of the * following three categories: @@ -21,34 +32,12 @@ export class ElementClass extends Component { * 4. A React Stateless component * 5. A React component property map */ -export type EnzymeSelector = string | StatelessComponent | ComponentClass | { [key: string]: any }; -export type EnzymePropSelector = { [key: string]: any }; +export interface EnzymePropSelector { + [key: string]: any; +} +export type EnzymeSelector = string | StatelessComponent | ComponentClass | EnzymePropSelector; interface CommonWrapper { - /** - * Find every node in the render tree that matches the provided selector. - * @param selector The selector to match. - */ - find(component: ComponentClass): CommonWrapper; - find(statelessComponent: StatelessComponent): CommonWrapper; - find(props: EnzymePropSelector): CommonWrapper; - find(selector: string): CommonWrapper; - - /** - * Finds every node in the render tree that returns true for the provided predicate function. - * @param predicate - */ - findWhere(predicate: (wrapper: CommonWrapper) => boolean): CommonWrapper; - - /** - * Removes nodes in the current wrapper that do not match the provided selector. - * @param selector The selector to match. - */ - filter(component: ComponentClass): CommonWrapper; - filter(statelessComponent: StatelessComponent): CommonWrapper; - filter(props: EnzymePropSelector): CommonWrapper; - filter(selector: string): CommonWrapper; - /** * Returns a new wrapper with only the nodes of the current wrapper that, when passed into the provided predicate function, return true. * @param predicate @@ -71,13 +60,13 @@ interface CommonWrapper { * Returns whether or not all the given react elements exists in the shallow render tree * @param nodes */ - containsAllMatchingElements(nodes: ReactElement[]): boolean; + containsAllMatchingElements(nodes: Array>): boolean; /** * Returns whether or not one of the given react elements exists in the shallow render tree. * @param nodes */ - containsAnyMatchingElements(nodes: ReactElement[]): boolean; + containsAnyMatchingElements(nodes: Array>): boolean; /** * Returns whether or not the current render tree is equal to the given node, based on the expected value. @@ -118,54 +107,6 @@ interface CommonWrapper { */ not(selector: EnzymeSelector): this; - /** - * Returns a new wrapper with all of the children of the node(s) in the current wrapper. Optionally, a selector - * can be provided and it will filter the children by this selector. - * @param [selector] - */ - children(component: ComponentClass): CommonWrapper; - children(statelessComponent: StatelessComponent): CommonWrapper; - children(props: EnzymePropSelector): CommonWrapper; - children(selector: string): CommonWrapper; - children(): CommonWrapper; - - /** - * Returns a new wrapper with child at the specified index. - * @param index - */ - childAt(index: number): CommonWrapper; - childAt(index: number): CommonWrapper; - - /** - * Returns a wrapper around all of the parents/ancestors of the wrapper. Does not include the node in the - * current wrapper. Optionally, a selector can be provided and it will filter the parents by this selector. - * - * Note: can only be called on a wrapper of a single node. - * @param [selector] - */ - parents(component: ComponentClass): CommonWrapper; - parents(statelessComponent: StatelessComponent): CommonWrapper; - parents(props: EnzymePropSelector): CommonWrapper; - parents(selector: string): CommonWrapper; - parents(): CommonWrapper; - - /** - * Returns a wrapper with the direct parent of the node in the current wrapper. - */ - parent(): CommonWrapper; - - /** - * Returns a wrapper of the first element that matches the selector by traversing up through the current node's - * ancestors in the tree, starting with itself. - * - * Note: can only be called on a wrapper of a single node. - * @param selector - */ - closest(component: ComponentClass): CommonWrapper; - closest(statelessComponent: StatelessComponent): CommonWrapper; - closest(props: EnzymePropSelector): CommonWrapper; - closest(selector: string): CommonWrapper; - /** * Returns a string of the rendered text of the current render tree. This function should be looked at with * skepticism if being used to test what the actual HTML output of the component will be. If that is what you @@ -209,14 +150,14 @@ interface CommonWrapper { * @param [key] */ state(): S; - state(key: string): any; + state(key: K): S[K]; state(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(key?: string): T; + context(): any; + context(key: string): T; /** * Returns the props hash for the current node of the wrapper. @@ -231,7 +172,7 @@ interface CommonWrapper { * NOTE: can only be called on a wrapper of a single node. * @param key */ - prop(key: string): any; + prop(key: K): P[K]; prop(key: string): T; /** @@ -260,7 +201,7 @@ interface CommonWrapper { * @param state * @param [callback] */ - setState(state: S, callback?: () => void): this; + setState(state: Pick, callback?: () => void): this; /** * A method that sets the props of the root component, and re-renders. Useful for when you are wanting to test @@ -274,7 +215,7 @@ interface CommonWrapper { * @param props * @param [callback] */ - setProps(props: P, callback?: () => void): this; + setProps(props: Pick): this; /** * A method that sets the context of the root component, and re-renders. Useful for when you are wanting to @@ -284,7 +225,7 @@ interface CommonWrapper { * NOTE: can only be called on a wrapper instance that is also the root instance. * @param state */ - setContext(context: Object): this; + setContext(context: any): this; /** * Gets the instance of the component being rendered as the root node passed into shallow(). @@ -308,14 +249,6 @@ interface CommonWrapper { */ debug(): string; - /** - * Returns the type of the current node of this wrapper. If it's a composite component, this will be the - * component constructor. If it's native DOM node, it will be a string of the tag name. - * - * Note: can only be called on a wrapper of a single node. - */ - type(): string | Function; - /** * Returns the name of the current node of the wrapper. */ @@ -381,12 +314,29 @@ interface CommonWrapper { */ everyWhere(fn: (wrapper: this) => boolean): boolean; + /** + * Returns true if renderer returned null + */ + isEmptyRender(): boolean; + + /** + * Renders the component to static markup and returns a Cheerio wrapper around the result. + */ + render(): Cheerio; + + /** + * Returns the type of the current node of this wrapper. If it's a composite component, this will be the + * component constructor. If it's native DOM node, it will be a string of the tag name. + * + * Note: can only be called on a wrapper of a single node. + */ + type(): string | ComponentClass

| StatelessComponent

; + length: number; } export interface ShallowWrapper extends CommonWrapper { shallow(): ShallowWrapper; - render(): CheerioWrapper; unmount(): ShallowWrapper; /** @@ -394,7 +344,7 @@ export interface ShallowWrapper extends CommonWrapper { * @param selector The selector to match. */ find(component: ComponentClass): ShallowWrapper; - find(statelessComponent: (props: P2) => JSX.Element): ShallowWrapper; + find(statelessComponent: StatelessComponent): ShallowWrapper; find(props: EnzymePropSelector): ShallowWrapper; find(selector: string): ShallowWrapper; @@ -403,7 +353,7 @@ export interface ShallowWrapper extends CommonWrapper { * @param selector The selector to match. */ filter(component: ComponentClass): ShallowWrapper; - filter(statelessComponent: StatelessComponent): ShallowWrapper; + filter(statelessComponent: StatelessComponent): ShallowWrapper; filter(props: EnzymePropSelector): ShallowWrapper; filter(selector: string): ShallowWrapper; @@ -411,7 +361,7 @@ export interface ShallowWrapper extends CommonWrapper { * Finds every node in the render tree that returns true for the provided predicate function. * @param predicate */ - findWhere(predicate: (wrapper: CommonWrapper) => boolean): ShallowWrapper; + findWhere(predicate: (wrapper: ShallowWrapper) => boolean): ShallowWrapper; /** * Returns a new wrapper with all of the children of the node(s) in the current wrapper. Optionally, a selector @@ -419,10 +369,9 @@ export interface ShallowWrapper extends CommonWrapper { * @param [selector] */ children(component: ComponentClass): ShallowWrapper; - children(statelessComponent: StatelessComponent): ShallowWrapper; - children(props: EnzymePropSelector): ShallowWrapper; + children(statelessComponent: StatelessComponent): ShallowWrapper; children(selector: string): ShallowWrapper; - children(): ShallowWrapper; + children(props?: EnzymePropSelector): ShallowWrapper; /** * Returns a new wrapper with child at the specified index. @@ -432,13 +381,13 @@ export interface ShallowWrapper extends CommonWrapper { childAt(index: number): ShallowWrapper; /** - * Shallow render the one non-DOM child of the current wrapper, and return a wrapper around the result. - * NOTE: can only be called on wrapper of a single non-DOM component element node. - * @param [options] - */ - dive(options?: ShallowRendererProps): ShallowWrapper; + * Shallow render the one non-DOM child of the current wrapper, and return a wrapper around the result. + * NOTE: can only be called on wrapper of a single non-DOM component element node. + * @param [options] + */ + dive(options?: ShallowRendererProps): ShallowWrapper; - /** + /** * Returns a wrapper around all of the parents/ancestors of the wrapper. Does not include the node in the * current wrapper. Optionally, a selector can be provided and it will filter the parents by this selector. * @@ -446,10 +395,9 @@ export interface ShallowWrapper extends CommonWrapper { * @param [selector] */ parents(component: ComponentClass): ShallowWrapper; - parents(statelessComponent: StatelessComponent): ShallowWrapper; - parents(props: EnzymePropSelector): ShallowWrapper; + parents(statelessComponent: StatelessComponent): ShallowWrapper; parents(selector: string): ShallowWrapper; - parents(): ShallowWrapper; + parents(props?: EnzymePropSelector): ShallowWrapper; /** * Returns a wrapper of the first element that matches the selector by traversing up through the current node's @@ -459,7 +407,7 @@ export interface ShallowWrapper extends CommonWrapper { * @param selector */ closest(component: ComponentClass): ShallowWrapper; - closest(statelessComponent: StatelessComponent): ShallowWrapper; + closest(statelessComponent: StatelessComponent): ShallowWrapper; closest(props: EnzymePropSelector): ShallowWrapper; closest(selector: string): ShallowWrapper; @@ -467,17 +415,11 @@ export interface ShallowWrapper extends CommonWrapper { * Returns a wrapper with the direct parent of the node in the current wrapper. */ parent(): ShallowWrapper; - - /** - * Returns true if renderer returned null - */ - isEmptyRender(): boolean; } export interface ReactWrapper extends CommonWrapper { unmount(): ReactWrapper; mount(): ReactWrapper; - render(): CheerioWrapper; /** * Returns a wrapper of the node that matches the provided reference name. @@ -503,7 +445,7 @@ export interface ReactWrapper extends CommonWrapper { * @param selector The selector to match. */ find(component: ComponentClass): ReactWrapper; - find(statelessComponent: (props: P2) => JSX.Element): ReactWrapper; + find(statelessComponent: StatelessComponent): ReactWrapper; find(props: EnzymePropSelector): ReactWrapper; find(selector: string): ReactWrapper; @@ -511,14 +453,14 @@ export interface ReactWrapper extends CommonWrapper { * Finds every node in the render tree that returns true for the provided predicate function. * @param predicate */ - findWhere(predicate: (wrapper: CommonWrapper) => boolean): ReactWrapper; + findWhere(predicate: (wrapper: ReactWrapper) => boolean): ReactWrapper; /** * Removes nodes in the current wrapper that do not match the provided selector. * @param selector The selector to match. */ filter(component: ComponentClass): ReactWrapper; - filter(statelessComponent: StatelessComponent): ReactWrapper; + filter(statelessComponent: StatelessComponent): ReactWrapper; filter(props: EnzymePropSelector): ReactWrapper; filter(selector: string): ReactWrapper; @@ -528,10 +470,9 @@ export interface ReactWrapper extends CommonWrapper { * @param [selector] */ children(component: ComponentClass): ReactWrapper; - children(statelessComponent: StatelessComponent): ReactWrapper; - children(props: EnzymePropSelector): ReactWrapper; + children(statelessComponent: StatelessComponent): ReactWrapper; children(selector: string): ReactWrapper; - children(): ReactWrapper; + children(props?: EnzymePropSelector): ReactWrapper; /** * Returns a new wrapper with child at the specified index. @@ -548,10 +489,9 @@ export interface ReactWrapper extends CommonWrapper { * @param [selector] */ parents(component: ComponentClass): ReactWrapper; - parents(statelessComponent: StatelessComponent): ReactWrapper; - parents(props: EnzymePropSelector): ReactWrapper; + parents(statelessComponent: StatelessComponent): ReactWrapper; parents(selector: string): ReactWrapper; - parents(): ReactWrapper; + parents(props?: EnzymePropSelector): ReactWrapper; /** * Returns a wrapper of the first element that matches the selector by traversing up through the current node's @@ -561,7 +501,7 @@ export interface ReactWrapper extends CommonWrapper { * @param selector */ closest(component: ComponentClass): ReactWrapper; - closest(statelessComponent: StatelessComponent): ReactWrapper; + closest(statelessComponent: StatelessComponent): ReactWrapper; closest(props: EnzymePropSelector): ReactWrapper; closest(selector: string): ReactWrapper; @@ -569,15 +509,6 @@ export interface ReactWrapper extends CommonWrapper { * Returns a wrapper with the direct parent of the node in the current wrapper. */ parent(): ReactWrapper; - - /** - * Returns true if renderer returned null - */ - isEmptyRender(): boolean; -} - -export interface CheerioWrapper extends CommonWrapper { - } export interface ShallowRendererProps { @@ -626,8 +557,4 @@ export function mount(node: ReactElement

, options?: MountRendererProps) * @param node * @param [options] */ -export function render(node: ReactElement

, options?: any): CheerioWrapper; - -export function describeWithDOM(description: string, fn: Function): void; - -export function spyLifecycle(component: typeof Component): void; +export function render(node: ReactElement

, options?: any): Cheerio; diff --git a/enzyme/tslint.json b/enzyme/tslint.json new file mode 100644 index 0000000000..f9e30021f4 --- /dev/null +++ b/enzyme/tslint.json @@ -0,0 +1,3 @@ +{ + "extends": "../tslint.json" +}