Compare commits

..
3 Commits
Author SHA1 Message Date
bendtherules 4310188a5b 0.0.4 2019-08-08 18:40:03 +05:30
bendtherules 28d5f6ab1d Fix jest and other test configs from build 2019-08-08 18:30:51 +05:30
bendtherules d8bc1fad5f Setup multi-dist build with cjs, esm 2019-08-08 18:21:17 +05:30
34 changed files with 153 additions and 3664 deletions
+15 -15
View File
@@ -1,18 +1,18 @@
{ {
"dist/react-fiber-traverse.cjs.development.js": { "dist/react-fiber-traverse.cjs.development.js": {
"bundled": 9674, "bundled": 7398,
"minified": 4533, "minified": 3036,
"gzipped": 1335 "gzipped": 967
}, },
"dist/react-fiber-traverse.cjs.production.js": { "dist/react-fiber-traverse.cjs.production.js": {
"bundled": 9674, "bundled": 7398,
"minified": 4533, "minified": 3036,
"gzipped": 1335 "gzipped": 967
}, },
"dist/react-fiber-traverse.esm.js": { "dist/react-fiber-traverse.esm.js": {
"bundled": 9312, "bundled": 7048,
"minified": 4229, "minified": 2736,
"gzipped": 1245, "gzipped": 869,
"treeshaked": { "treeshaked": {
"rollup": { "rollup": {
"code": 49, "code": 49,
@@ -24,13 +24,13 @@
} }
}, },
"dist/react-fiber-traverse.umd.development.js": { "dist/react-fiber-traverse.umd.development.js": {
"bundled": 34862, "bundled": 32560,
"minified": 9669, "minified": 8698,
"gzipped": 3394 "gzipped": 3085
}, },
"dist/react-fiber-traverse.umd.production.js": { "dist/react-fiber-traverse.umd.production.js": {
"bundled": 34862, "bundled": 32560,
"minified": 9669, "minified": 8698,
"gzipped": 3394 "gzipped": 3085
} }
} }
+16 -26
View File
@@ -10,39 +10,29 @@
## Basic Usage ## Basic Usage
```ts ```ts
import React from "react"; import { render } from 'react-dom'
import { render } from "react-dom";
import { findNodeByComponentName, Utils } from "react-fiber-traverse"; import { findNodeByComponentName } from 'react-fiber-traverse'
import { getRootFiberNodeFromDOM } from 'react-fiber-traverse/utils'
// Sample component const rootElement = document.getElementById('root');
// Say, if SomeComponentName looks like this - render(<App>, 'root');
function SomeComponentName() {
return <div>Some text</div>;
}
// Render component const rootFiberNode = getRootFiberNodeFromDOM(rootElement);
const rootElement = document.getElementById("root");
render(<SomeComponentName />, rootElement);
// Get root node
const rootFiberNode = Utils.getRootFiberNodeFromDOM(rootElement);
// Get component node
const someFiberNode = findNodeByComponentName(
rootFiberNode,
"SomeComponentName"
); // <- returns FiberNode for first usage of 'SomeComponentName'
console.log(someFiberNode.child.stateNode); // <- returns reference to the div
console.log(someFiberNode.child.stateNode.innerText); // <- returns 'Some text'
const someFiberNode = findNodeByComponentName(rootFiberNode, 'SomeComponentName'); // <- returns FiberNode for first usage of 'SomeComponentName'
// Say, if SomeComponentName renders (<div>Some text</div>)
someFiberNode.stateNode // <- returns reference to the div
someFiberNode.stateNode.innerText // <- returns 'Some text'
``` ```
## Live Examples ## Live Examples
- [Basic Usage](https://codesandbox.io/s/react-example-x82zk?expanddevtools=1&fontsize=14) - [Basic Usage](https://codesandbox.io/)
<!-- - [API Example](https://codesandbox.io/)
- [UMD Build (Development)](https://codesandbox.io/)
- [UMD Build (Production)](https://codesandbox.io/)
## API ## API
**Props** **Props**
@@ -53,7 +43,7 @@ console.log(someFiberNode.child.stateNode.innerText); // <- returns 'Some text'
**Example** **Example**
```jsx ```jsx
``` --> ```
## Installation ## Installation
+9 -9
View File
@@ -1,16 +1,16 @@
# TODOs
1. Write docs and examples 1. Write docs and examples
2. Reduce testcase boilerplate code for similar tests 2. Reduce testcase boilerplate code for similar tests
3. Publish to npm 3. Publish to npm
4. Build some demo 4. Build some demo
5. Add `findAllNodes` helpers which searches all usages of the components - by name or class 5. Pack separate files
6. Fix getRootFiberNodeFromDOM and related helpers - Affected parts
- .\_internalRoot is not present is 16.0.0 but present in 16.9.0 ---------------
- actual node is available 2 levels nested inside this root node a. Rollup config (input and output) X
- add testcase to run across all versions of React 16.0.0 (dev+prod) and above (because internals change) b. package.json entrypoints X
c. root index.js for dynamic prod or dev redirection X
d. change unpkg links in readme
e. separate folder for types ?? (change tsconfig)
7. Make it work with older React versions f. Enable umd build from one index file
8. Make it work with non React-DOM renderers
+11 -30
View File
@@ -13,40 +13,20 @@
## Basic Usage ## Basic Usage
```ts ```jsx
import React from "react"; import React from 'react'
import { render } from "react-dom"; import { render } from 'react-dom'
import { findNodeByComponentName, Utils } from "react-fiber-traverse";
// Sample component
// Say, if SomeComponentName looks like this -
function SomeComponentName() {
return <div>Some text</div>;
}
// Render component
const rootElement = document.getElementById("root");
render(<SomeComponentName />, rootElement);
// Get root node
const rootFiberNode = Utils.getRootFiberNodeFromDOM(rootElement);
// Get component node
const someFiberNode = findNodeByComponentName(
rootFiberNode,
"SomeComponentName"
); // <- returns FiberNode for first usage of 'SomeComponentName'
console.log(someFiberNode.child.stateNode); // <- returns reference to the div
console.log(someFiberNode.child.stateNode.innerText); // <- returns 'Some text'
render(, document.getElementById('root'))
``` ```
## Live Examples ## Live Examples
- [Basic Usage](https://codesandbox.io/s/react-example-x82zk?expanddevtools=1&fontsize=14) - [Basic Usage](https://codesandbox.io/)
<!-- - [API Example](https://codesandbox.io/)
- [UMD Build (Development)](https://codesandbox.io/)
- [UMD Build (Production)](https://codesandbox.io/)
## API ## API
**Props** **Props**
@@ -57,7 +37,7 @@ console.log(someFiberNode.child.stateNode.innerText); // <- returns 'Some text'
**Example** **Example**
```jsx ```jsx
``` --> ```
## Installation ## Installation
@@ -74,6 +54,7 @@ For the non-minified development version, make sure you have already included:
- [`React`](https://unpkg.com/react/umd/react.development.js) - [`React`](https://unpkg.com/react/umd/react.development.js)
- [`ReactDOM`](https://unpkg.com/react-dom/umd/react-dom.development.js) - [`ReactDOM`](https://unpkg.com/react-dom/umd/react-dom.development.js)
- [`PropTypes`](https://unpkg.com/prop-types/prop-types.js)
For the minified production version, make sure you have already included: For the minified production version, make sure you have already included:
File diff suppressed because it is too large Load Diff
@@ -24,7 +24,7 @@
**child**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null* **child**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null*
*Defined in [mocked-types/index.ts:28](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L28)* *Defined in [mocked-types/index.ts:20](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L20)*
___ ___
@@ -32,7 +32,7 @@ ___
**elementType**: *`ComponentClass`* **elementType**: *`ComponentClass`*
*Defined in [mocked-types/index.ts:31](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L31)* *Defined in [mocked-types/index.ts:23](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L23)*
___ ___
@@ -40,7 +40,7 @@ ___
**sibling**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null* **sibling**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null*
*Defined in [mocked-types/index.ts:29](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L29)* *Defined in [mocked-types/index.ts:21](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L21)*
___ ___
@@ -48,7 +48,7 @@ ___
**stateNode**: *`Component`* **stateNode**: *`Component`*
*Defined in [mocked-types/index.ts:34](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L34)* *Defined in [mocked-types/index.ts:26](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L26)*
___ ___
@@ -56,4 +56,4 @@ ___
**type**: *`ComponentClass`* **type**: *`ComponentClass`*
*Defined in [mocked-types/index.ts:32](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L32)* *Defined in [mocked-types/index.ts:24](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L24)*
@@ -24,7 +24,7 @@
**child**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null* **child**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null*
*Defined in [mocked-types/index.ts:18](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L18)* *Defined in [mocked-types/index.ts:10](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L10)*
___ ___
@@ -32,7 +32,7 @@ ___
**elementType**: *`FunctionComponent`* **elementType**: *`FunctionComponent`*
*Defined in [mocked-types/index.ts:21](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L21)* *Defined in [mocked-types/index.ts:13](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L13)*
___ ___
@@ -40,7 +40,7 @@ ___
**sibling**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null* **sibling**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null*
*Defined in [mocked-types/index.ts:19](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L19)* *Defined in [mocked-types/index.ts:11](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L11)*
___ ___
@@ -48,7 +48,7 @@ ___
**stateNode**: *null* **stateNode**: *null*
*Defined in [mocked-types/index.ts:24](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L24)* *Defined in [mocked-types/index.ts:16](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L16)*
___ ___
@@ -56,4 +56,4 @@ ___
**type**: *`FunctionComponent`* **type**: *`FunctionComponent`*
*Defined in [mocked-types/index.ts:22](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L22)* *Defined in [mocked-types/index.ts:14](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L14)*
@@ -24,9 +24,9 @@
**child**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null* **child**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null*
*Defined in [mocked-types/index.ts:38](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L38)* *Defined in [mocked-types/index.ts:30](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L30)*
*Defined in [mocked-types/index.ts:48](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L48)* *Defined in [mocked-types/index.ts:40](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L40)*
___ ___
@@ -34,9 +34,9 @@ ___
**elementType**: *keyof IntrinsicElements* **elementType**: *keyof IntrinsicElements*
*Defined in [mocked-types/index.ts:41](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L41)* *Defined in [mocked-types/index.ts:33](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L33)*
*Defined in [mocked-types/index.ts:51](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L51)* *Defined in [mocked-types/index.ts:43](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L43)*
___ ___
@@ -44,9 +44,9 @@ ___
**sibling**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null* **sibling**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null*
*Defined in [mocked-types/index.ts:39](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L39)* *Defined in [mocked-types/index.ts:31](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L31)*
*Defined in [mocked-types/index.ts:49](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L49)* *Defined in [mocked-types/index.ts:41](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L41)*
___ ___
@@ -54,9 +54,9 @@ ___
**stateNode**: *`HTMLElement`* **stateNode**: *`HTMLElement`*
*Defined in [mocked-types/index.ts:44](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L44)* *Defined in [mocked-types/index.ts:36](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L36)*
*Defined in [mocked-types/index.ts:54](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L54)* *Defined in [mocked-types/index.ts:46](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L46)*
___ ___
@@ -64,6 +64,6 @@ ___
**type**: *keyof IntrinsicElements* **type**: *keyof IntrinsicElements*
*Defined in [mocked-types/index.ts:42](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L42)* *Defined in [mocked-types/index.ts:34](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L34)*
*Defined in [mocked-types/index.ts:52](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L52)* *Defined in [mocked-types/index.ts:44](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L44)*
@@ -24,7 +24,7 @@
**child**: *null* **child**: *null*
*Defined in [mocked-types/index.ts:58](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L58)* *Defined in [mocked-types/index.ts:50](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L50)*
___ ___
@@ -32,7 +32,7 @@ ___
**elementType**: *null* **elementType**: *null*
*Defined in [mocked-types/index.ts:61](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L61)* *Defined in [mocked-types/index.ts:53](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L53)*
___ ___
@@ -40,7 +40,7 @@ ___
**sibling**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null* **sibling**: *[FiberNode](../modules/_mocked_types_index_.md#fibernode) | null*
*Defined in [mocked-types/index.ts:59](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L59)* *Defined in [mocked-types/index.ts:51](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L51)*
___ ___
@@ -48,7 +48,7 @@ ___
**stateNode**: *`Text`* **stateNode**: *`Text`*
*Defined in [mocked-types/index.ts:64](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L64)* *Defined in [mocked-types/index.ts:56](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L56)*
___ ___
@@ -56,4 +56,4 @@ ___
**type**: *null* **type**: *null*
*Defined in [mocked-types/index.ts:62](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L62)* *Defined in [mocked-types/index.ts:54](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L54)*
+3 -3
View File
@@ -18,7 +18,7 @@
**findNodeByComponent**(`node`: [FiberNode](_mocked_types_index_.md#fibernode) | null, `expectedClassOrFunction`: `React.ComponentType`): *[FiberNode](_mocked_types_index_.md#fibernode) | null* **findNodeByComponent**(`node`: [FiberNode](_mocked_types_index_.md#fibernode) | null, `expectedClassOrFunction`: `React.ComponentType`): *[FiberNode](_mocked_types_index_.md#fibernode) | null*
*Defined in [findNode.ts:32](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/findNode.ts#L32)* *Defined in [findNode.ts:32](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/findNode.ts#L32)*
**Parameters:** **Parameters:**
@@ -35,7 +35,7 @@ ___
**findNodeByComponentName**(`node`: [FiberNode](_mocked_types_index_.md#fibernode) | null, `expectedName`: string): *[FiberNode](_mocked_types_index_.md#fibernode) | null* **findNodeByComponentName**(`node`: [FiberNode](_mocked_types_index_.md#fibernode) | null, `expectedName`: string): *[FiberNode](_mocked_types_index_.md#fibernode) | null*
*Defined in [findNode.ts:4](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/findNode.ts#L4)* *Defined in [findNode.ts:4](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/findNode.ts#L4)*
**Parameters:** **Parameters:**
@@ -52,7 +52,7 @@ ___
**findNodeByComponentRef**(`node`: [FiberNode](_mocked_types_index_.md#fibernode) | null, `expectedClassInstance`: `Component`): *[FiberNode](_mocked_types_index_.md#fibernode) | null* **findNodeByComponentRef**(`node`: [FiberNode](_mocked_types_index_.md#fibernode) | null, `expectedClassInstance`: `Component`): *[FiberNode](_mocked_types_index_.md#fibernode) | null*
*Defined in [findNode.ts:63](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/findNode.ts#L63)* *Defined in [findNode.ts:63](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/findNode.ts#L63)*
**Parameters:** **Parameters:**
+2 -3
View File
@@ -8,7 +8,6 @@
### Interfaces ### Interfaces
* [FiberNodeDOMContainer](../interfaces/_mocked_types_index_.fibernodedomcontainer.md)
* [FiberNodeForComponentClass](../interfaces/_mocked_types_index_.fibernodeforcomponentclass.md) * [FiberNodeForComponentClass](../interfaces/_mocked_types_index_.fibernodeforcomponentclass.md)
* [FiberNodeForFunctionComponent](../interfaces/_mocked_types_index_.fibernodeforfunctioncomponent.md) * [FiberNodeForFunctionComponent](../interfaces/_mocked_types_index_.fibernodeforfunctioncomponent.md)
* [FiberNodeForInstrinsicElement](../interfaces/_mocked_types_index_.fibernodeforinstrinsicelement.md) * [FiberNodeForInstrinsicElement](../interfaces/_mocked_types_index_.fibernodeforinstrinsicelement.md)
@@ -25,7 +24,7 @@
Ƭ **FiberNode**: *[FiberNodeForComponentClass](../interfaces/_mocked_types_index_.fibernodeforcomponentclass.md) | [FiberNodeForFunctionComponent](../interfaces/_mocked_types_index_.fibernodeforfunctioncomponent.md) | [FiberNodeForInstrinsicElement](../interfaces/_mocked_types_index_.fibernodeforinstrinsicelement.md) | [FiberNodeForTextNode](../interfaces/_mocked_types_index_.fibernodefortextnode.md)* Ƭ **FiberNode**: *[FiberNodeForComponentClass](../interfaces/_mocked_types_index_.fibernodeforcomponentclass.md) | [FiberNodeForFunctionComponent](../interfaces/_mocked_types_index_.fibernodeforfunctioncomponent.md) | [FiberNodeForInstrinsicElement](../interfaces/_mocked_types_index_.fibernodeforinstrinsicelement.md) | [FiberNodeForTextNode](../interfaces/_mocked_types_index_.fibernodefortextnode.md)*
*Defined in [mocked-types/index.ts:11](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L11)* *Defined in [mocked-types/index.ts:3](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L3)*
___ ___
@@ -33,4 +32,4 @@ ___
Ƭ **FiberNodeisHTMLLike**: *[FiberNodeForInstrinsicElement](../interfaces/_mocked_types_index_.fibernodeforinstrinsicelement.md) | [FiberNodeForTextNode](../interfaces/_mocked_types_index_.fibernodefortextnode.md)* Ƭ **FiberNodeisHTMLLike**: *[FiberNodeForInstrinsicElement](../interfaces/_mocked_types_index_.fibernodeforinstrinsicelement.md) | [FiberNodeForTextNode](../interfaces/_mocked_types_index_.fibernodefortextnode.md)*
*Defined in [mocked-types/index.ts:67](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/mocked-types/index.ts#L67)* *Defined in [mocked-types/index.ts:59](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/mocked-types/index.ts#L59)*
+2 -2
View File
@@ -17,7 +17,7 @@
**traverse**(`node`: [FiberNode](_mocked_types_index_.md#fibernode), `fn`: function): *void* **traverse**(`node`: [FiberNode](_mocked_types_index_.md#fibernode), `fn`: function): *void*
*Defined in [traverse.ts:4](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/traverse.ts#L4)* *Defined in [traverse.ts:4](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/traverse.ts#L4)*
**Parameters:** **Parameters:**
@@ -41,7 +41,7 @@ ___
**traverseGenerator**(`node`: [FiberNode](_mocked_types_index_.md#fibernode), `__namedParameters`: object): *`IterableIterator<FiberNode>`* **traverseGenerator**(`node`: [FiberNode](_mocked_types_index_.md#fibernode), `__namedParameters`: object): *`IterableIterator<FiberNode>`*
*Defined in [traverse.ts:15](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/traverse.ts#L15)* *Defined in [traverse.ts:15](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/traverse.ts#L15)*
**Parameters:** **Parameters:**
+13 -50
View File
@@ -8,8 +8,6 @@
### Functions ### Functions
* [doesElementContainRootFiberNode](_utils_.md#doeselementcontainrootfibernode)
* [getRootFiberNodeFromDOM](_utils_.md#getrootfibernodefromdom)
* [isConstructorComponentClass](_utils_.md#isconstructorcomponentclass) * [isConstructorComponentClass](_utils_.md#isconstructorcomponentclass)
* [isConstructorFunctionComponent](_utils_.md#isconstructorfunctioncomponent) * [isConstructorFunctionComponent](_utils_.md#isconstructorfunctioncomponent)
* [isConstructorHtmlLike](_utils_.md#isconstructorhtmllike) * [isConstructorHtmlLike](_utils_.md#isconstructorhtmllike)
@@ -20,52 +18,17 @@
## Functions ## Functions
### doesElementContainRootFiberNode
**doesElementContainRootFiberNode**(`element`: `Element`): *boolean*
*Defined in [utils.ts:65](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L65)*
**Parameters:**
Name | Type |
------ | ------ |
`element` | `Element` |
**Returns:** *boolean*
___
### getRootFiberNodeFromDOM
**getRootFiberNodeFromDOM**(`startElement?`: [Element](../interfaces/_mocked_types_index_.fibernodedomcontainer.md#element)): *[FiberNode](_mocked_types_index_.md#fibernode) | null*
*Defined in [utils.ts:82](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L82)*
Util to find root React Fiber node from html DOM tree.
Returns null, if not found.SHould be called after ReactDOM.render is finished.
**Parameters:**
Name | Type | Description |
------ | ------ | ------ |
`startElement?` | [Element](../interfaces/_mocked_types_index_.fibernodedomcontainer.md#element) | Starting DOM element to seach from. If not found, it checks inside its child nodes. Defaults to document.body |
**Returns:** *[FiberNode](_mocked_types_index_.md#fibernode) | null*
___
### isConstructorComponentClass ### isConstructorComponentClass
**isConstructorComponentClass**(`ctr`: `React.ElementType` | null): *boolean* **isConstructorComponentClass**(`ctr`: `React.ElementType`): *boolean*
*Defined in [utils.ts:42](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L42)* *Defined in [utils.ts:40](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/utils.ts#L40)*
**Parameters:** **Parameters:**
Name | Type | Name | Type |
------ | ------ | ------ | ------ |
`ctr` | `React.ElementType` \| null | `ctr` | `React.ElementType` |
**Returns:** *boolean* **Returns:** *boolean*
@@ -73,15 +36,15 @@ ___
### isConstructorFunctionComponent ### isConstructorFunctionComponent
**isConstructorFunctionComponent**(`ctr`: `React.ElementType` | null): *boolean* **isConstructorFunctionComponent**(`ctr`: `React.ElementType`): *boolean*
*Defined in [utils.ts:59](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L59)* *Defined in [utils.ts:57](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/utils.ts#L57)*
**Parameters:** **Parameters:**
Name | Type | Name | Type |
------ | ------ | ------ | ------ |
`ctr` | `React.ElementType` \| null | `ctr` | `React.ElementType` |
**Returns:** *boolean* **Returns:** *boolean*
@@ -89,15 +52,15 @@ ___
### isConstructorHtmlLike ### isConstructorHtmlLike
**isConstructorHtmlLike**(`ctr`: `React.ElementType` | null): *boolean* **isConstructorHtmlLike**(`ctr`: `React.ElementType`): *boolean*
*Defined in [utils.ts:33](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L33)* *Defined in [utils.ts:31](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/utils.ts#L31)*
**Parameters:** **Parameters:**
Name | Type | Name | Type |
------ | ------ | ------ | ------ |
`ctr` | `React.ElementType` \| null | `ctr` | `React.ElementType` |
**Returns:** *boolean* **Returns:** *boolean*
@@ -107,7 +70,7 @@ ___
**isNodeComponentClass**(`node`: [FiberNode](_mocked_types_index_.md#fibernode)): *boolean* **isNodeComponentClass**(`node`: [FiberNode](_mocked_types_index_.md#fibernode)): *boolean*
*Defined in [utils.ts:27](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L27)* *Defined in [utils.ts:25](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/utils.ts#L25)*
**Parameters:** **Parameters:**
@@ -123,7 +86,7 @@ ___
**isNodeFunctionComponent**(`node`: [FiberNode](_mocked_types_index_.md#fibernode)): *boolean* **isNodeFunctionComponent**(`node`: [FiberNode](_mocked_types_index_.md#fibernode)): *boolean*
*Defined in [utils.ts:21](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L21)* *Defined in [utils.ts:19](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/utils.ts#L19)*
**Parameters:** **Parameters:**
@@ -139,7 +102,7 @@ ___
**isNodeHtmlLike**(`node`: [FiberNode](_mocked_types_index_.md#fibernode)): *boolean* **isNodeHtmlLike**(`node`: [FiberNode](_mocked_types_index_.md#fibernode)): *boolean*
*Defined in [utils.ts:11](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L11)* *Defined in [utils.ts:9](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/utils.ts#L9)*
**Parameters:** **Parameters:**
@@ -155,7 +118,7 @@ ___
**isNodeNotHtmlLike**(`node`: [FiberNode](_mocked_types_index_.md#fibernode)): *boolean* **isNodeNotHtmlLike**(`node`: [FiberNode](_mocked_types_index_.md#fibernode)): *boolean*
*Defined in [utils.ts:15](https://github.com/bendtherules/react-fiber-traverse/blob/18ea2e7/src/utils.ts#L15)* *Defined in [utils.ts:13](https://github.com/bendtherules/react-fiber-traverse/blob/c9d7fd7/src/utils.ts#L13)*
**Parameters:** **Parameters:**
+2 -2
View File
@@ -1,7 +1,7 @@
"use strict"; "use strict";
if (process.env.NODE_ENV === "production") { if (process.env.NODE_ENV === "production") {
module.exports = require("./react-fiber-traverse.cjs.production.js"); module.exports = require("./cjs-production/index.js");
} else { } else {
module.exports = require("./react-fiber-traverse.cjs.development.js"); module.exports = require("./cjs-development/index.js");
} }
+1 -10
View File
@@ -1,12 +1,3 @@
module.exports = { module.exports = {
"*.{js,jsx,ts,tsx}": filenames => { "*.{js,jsx,ts,tsx}": () => "run-s check:* lint"
// Escape filenames and join by space
const joinedFilenames = filenames.map(str => `"${str}"`).join(" ");
return [
"run-s check:!(format)",
`npm run check:format -- ${joinedFilenames}`,
`npm run _lint -- ${joinedFilenames}`
];
// `run-s check:!(format) "check:format -- ${joinedFilenames}" "_lint -- ${joinedFilenames}"`;
}
}; };
+20 -1
View File
@@ -1,6 +1,6 @@
{ {
"name": "react-fiber-traverse", "name": "react-fiber-traverse",
"version": "0.0.7", "version": "0.0.4",
"lockfileVersion": 1, "lockfileVersion": 1,
"requires": true, "requires": true,
"dependencies": { "dependencies": {
@@ -10547,6 +10547,25 @@
} }
} }
}, },
"rollup-plugin-multi-input": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/rollup-plugin-multi-input/-/rollup-plugin-multi-input-1.0.2.tgz",
"integrity": "sha512-ktLat6+lrvT3Z3kVrUr/Fy3+5xaj/sIfNpBfDQO2P6sd3lAGPI+yi2Dj+fxxkVubIpRocN0Z4jPkN+c28uJimA==",
"dev": true,
"requires": {
"core-js": "^3.1.3",
"fast-glob": "^3.0.0",
"lodash": "^4.17.11"
},
"dependencies": {
"core-js": {
"version": "3.1.4",
"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.1.4.tgz",
"integrity": "sha512-YNZN8lt82XIMLnLirj9MhKDFZHalwzzrL9YLt6eb0T5D0EDl4IQ90IGkua8mHbnxNrkj1d8hbdizMc0Qmg1WnQ==",
"dev": true
}
}
},
"rollup-plugin-node-resolve": { "rollup-plugin-node-resolve": {
"version": "5.2.0", "version": "5.2.0",
"resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz", "resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz",
+8 -9
View File
@@ -1,10 +1,10 @@
{ {
"name": "react-fiber-traverse", "name": "react-fiber-traverse",
"version": "0.0.7", "version": "0.0.4",
"description": "Traverse and other utils on top of React fiber tree", "description": "Traverse and other utils on top of React fiber tree",
"main": "dist/index.js", "main": "dist/index.js",
"module": "dist/react-fiber-traverse.esm.js", "module": "dist/esm/index.js",
"jsnext:main": "dist/react-fiber-traverse.esm.js", "jsnext:main": "dist/esm/index.js",
"typings": "dist/index.d.ts", "typings": "dist/index.d.ts",
"files": [ "files": [
"dist" "dist"
@@ -24,8 +24,7 @@
"compile": "tsc -p tsconfig.base.json", "compile": "tsc -p tsconfig.base.json",
"docs": "npx typedoc ./src/", "docs": "npx typedoc ./src/",
"format": "prettier --write \"**/*.{js,ts,tsx}\"", "format": "prettier --write \"**/*.{js,ts,tsx}\"",
"_lint": "eslint --ext .js,.ts,.jsx,.tsx", "lint": "eslint . --ext .js,.ts",
"lint": "npm run _lint -- .",
"postbundle": "del compiled && cp-cli ./index.js ./dist/index.js", "postbundle": "del compiled && cp-cli ./index.js ./dist/index.js",
"postversion": "git push && git push --tags && npm publish", "postversion": "git push && git push --tags && npm publish",
"release": "npm version -m 'Release v%s'", "release": "npm version -m 'Release v%s'",
@@ -35,14 +34,13 @@
"test:es": "jest --config ./scripts/jest/config.es.js", "test:es": "jest --config ./scripts/jest/config.es.js",
"test:src": "jest --config ./scripts/jest/config.src.js", "test:src": "jest --config ./scripts/jest/config.src.js",
"test:src:watch": "npm run test:src -- --watch", "test:src:watch": "npm run test:src -- --watch",
"test:umd": "jest --config ./scripts/jest/config.umd.js",
"test:umdprod": "jest --config ./scripts/jest/config.umdprod.js",
"test:src:debug": "node --inspect ./node_modules/jest/bin/jest.js --config ./scripts/jest/config.src.js", "test:src:debug": "node --inspect ./node_modules/jest/bin/jest.js --config ./scripts/jest/config.src.js",
"version": "run-s test authors docs && git add ." "version": "run-s test authors && git add ."
}, },
"husky": { "husky": {
"hooks": { "hooks": {
"pre-commit": "lint-staged" "pre-commit": "lint-staged",
"post-commit": "npm run fix:format"
} }
}, },
"repository": { "repository": {
@@ -108,6 +106,7 @@
"rollup-plugin-babel": "4.3.3", "rollup-plugin-babel": "4.3.3",
"rollup-plugin-commonjs": "10.0.1", "rollup-plugin-commonjs": "10.0.1",
"rollup-plugin-filesize": "6.1.1", "rollup-plugin-filesize": "6.1.1",
"rollup-plugin-multi-input": "^1.0.2",
"rollup-plugin-node-resolve": "5.2.0", "rollup-plugin-node-resolve": "5.2.0",
"rollup-plugin-replace": "2.2.0", "rollup-plugin-replace": "2.2.0",
"rollup-plugin-size-snapshot": "0.9.0", "rollup-plugin-size-snapshot": "0.9.0",
+12 -14
View File
@@ -2,9 +2,10 @@ import babel from "rollup-plugin-babel";
import commonjs from "rollup-plugin-commonjs"; import commonjs from "rollup-plugin-commonjs";
import nodeResolve from "rollup-plugin-node-resolve"; import nodeResolve from "rollup-plugin-node-resolve";
import replace from "rollup-plugin-replace"; import replace from "rollup-plugin-replace";
import { sizeSnapshot } from "rollup-plugin-size-snapshot"; // import { sizeSnapshot } from "rollup-plugin-size-snapshot";
import sourcemaps from "rollup-plugin-sourcemaps"; import sourcemaps from "rollup-plugin-sourcemaps";
import { terser } from "rollup-plugin-terser"; import { terser } from "rollup-plugin-terser";
import multiInput from "rollup-plugin-multi-input";
import pkg from "./package.json"; import pkg from "./package.json";
const CJS_DEV = "CJS_DEV"; const CJS_DEV = "CJS_DEV";
@@ -13,7 +14,7 @@ const ES = "ES";
const UMD_DEV = "UMD_DEV"; const UMD_DEV = "UMD_DEV";
const UMD_PROD = "UMD_PROD"; const UMD_PROD = "UMD_PROD";
const input = "./compiled/index.js"; const input = ["compiled/*.js"];
const getGlobals = bundleType => { const getGlobals = bundleType => {
const baseGlobals = { const baseGlobals = {
@@ -124,7 +125,7 @@ const getPlugins = bundleType => [
) )
}), }),
sourcemaps(), sourcemaps(),
sizeSnapshot(), // sizeSnapshot(),
isProduction(bundleType) && isProduction(bundleType) &&
terser({ terser({
sourcemap: true, sourcemap: true,
@@ -136,16 +137,15 @@ const getPlugins = bundleType => [
warnings: true, warnings: true,
ecma: 5, ecma: 5,
toplevel: false toplevel: false
}) }),
multiInput({ relative: "compiled/" })
]; ];
const getCjsConfig = bundleType => ({ const getCjsConfig = bundleType => ({
input, input,
external: getExternal(bundleType), external: getExternal(bundleType),
output: { output: {
file: `dist/react-fiber-traverse.cjs.${ dir: `dist/cjs-${isProduction(bundleType) ? "production" : "development"}`,
isProduction(bundleType) ? "production" : "development"
}.js`,
format: "cjs", format: "cjs",
sourcemap: true sourcemap: true
}, },
@@ -156,7 +156,7 @@ const getEsConfig = () => ({
input, input,
external: getExternal(ES), external: getExternal(ES),
output: { output: {
file: pkg.module, dir: `dist/esm`,
format: "es", format: "es",
sourcemap: true sourcemap: true
}, },
@@ -167,9 +167,7 @@ const getUmdConfig = bundleType => ({
input, input,
external: getExternal(bundleType), external: getExternal(bundleType),
output: { output: {
file: `dist/react-fiber-traverse.umd.${ dir: `dist/umd-${isProduction(bundleType) ? "production" : "development"}`,
isProduction(bundleType) ? "production" : "development"
}.js`,
format: "umd", format: "umd",
globals: getGlobals(bundleType), globals: getGlobals(bundleType),
name: "reactFiberTraverse", name: "reactFiberTraverse",
@@ -181,7 +179,7 @@ const getUmdConfig = bundleType => ({
export default [ export default [
getCjsConfig(CJS_DEV), getCjsConfig(CJS_DEV),
getCjsConfig(CJS_PROD), getCjsConfig(CJS_PROD),
getEsConfig(), getEsConfig()
getUmdConfig(UMD_DEV), // getUmdConfig(UMD_DEV),
getUmdConfig(UMD_PROD) // getUmdConfig(UMD_PROD)
]; ];
+1 -1
View File
@@ -3,6 +3,6 @@ const srcConfig = require("./config.src");
module.exports = Object.assign({}, srcConfig, { module.exports = Object.assign({}, srcConfig, {
collectCoverage: false, collectCoverage: false,
moduleNameMapper: { moduleNameMapper: {
"^../src$": `<rootDir>/dist/react-fiber-traverse.esm.js` "^../src$": `<rootDir>/dist/esm/index.js`
} }
}); });
+1 -3
View File
@@ -4,13 +4,11 @@ import {
findNodeByComponentRef, findNodeByComponentRef,
findNodeByComponentName findNodeByComponentName
} from "./findNode"; } from "./findNode";
import * as Utils from "./utils";
export { export {
traverse, traverse,
traverseGenerator, traverseGenerator,
findNodeByComponent, findNodeByComponent,
findNodeByComponentRef, findNodeByComponentRef,
findNodeByComponentName, findNodeByComponentName
Utils
}; };
+6 -13
View File
@@ -7,7 +7,6 @@ import {
FiberNodeDOMContainer FiberNodeDOMContainer
} from "./mocked-types"; } from "./mocked-types";
// Support null in all of these
function isNodeHtmlLike(node: FiberNode): node is FiberNodeisHTMLLike { function isNodeHtmlLike(node: FiberNode): node is FiberNodeisHTMLLike {
return typeof node.type === "string" || node.type === null; return typeof node.type === "string" || node.type === null;
} }
@@ -31,8 +30,8 @@ function isNodeComponentClass(
} }
function isConstructorHtmlLike( function isConstructorHtmlLike(
ctr: React.ElementType | null ctr: React.ElementType
): ctr is Exclude<React.ElementType | null, React.ComponentType> { ): ctr is Exclude<React.ElementType, React.ComponentType> {
if (typeof ctr === "string" || ctr === null) { if (typeof ctr === "string" || ctr === null) {
return true; return true;
} }
@@ -40,7 +39,7 @@ function isConstructorHtmlLike(
} }
function isConstructorComponentClass( function isConstructorComponentClass(
ctr: React.ElementType | null ctr: React.ElementType
): ctr is React.ComponentClass { ): ctr is React.ComponentClass {
if (isConstructorHtmlLike(ctr)) { if (isConstructorHtmlLike(ctr)) {
return false; return false;
@@ -57,20 +56,15 @@ function isConstructorComponentClass(
} }
function isConstructorFunctionComponent( function isConstructorFunctionComponent(
ctr: React.ElementType | null ctr: React.ElementType
): ctr is React.FunctionComponent { ): ctr is React.FunctionComponent {
return typeof ctr === "function" && !isConstructorComponentClass(ctr); return !isConstructorComponentClass(ctr);
} }
function doesElementContainRootFiberNode( function doesElementContainRootFiberNode(
element: Element element: Element
): element is FiberNodeDOMContainer { ): element is FiberNodeDOMContainer {
return ( return element.hasOwnProperty("_reactRootContainer");
element.hasOwnProperty("_reactRootContainer") &&
(element as (Element & {
_reactRootContainer: any;
}))._reactRootContainer.hasOwnProperty("_internalRoot")
);
} }
/** /**
@@ -107,6 +101,5 @@ export {
isConstructorHtmlLike, isConstructorHtmlLike,
isConstructorComponentClass, isConstructorComponentClass,
isConstructorFunctionComponent, isConstructorFunctionComponent,
doesElementContainRootFiberNode,
getRootFiberNodeFromDOM getRootFiberNodeFromDOM
}; };
-177
View File
@@ -1,177 +0,0 @@
import * as React from "react";
// Import stuff from src
import { findNodeByComponent } from "../src";
import { mountAndGetRootNode } from "./utils/mountInEnzyme";
import getWrappedComponent from "./utils/getWrappedComponent";
// Import test helpers and sample components
import CDepth1 from "./sample-components/depth-1-simple";
import FnDepth1 from "./sample-components/depth-1-fn-simple";
import { createClassComponent } from "./utils/createComponent";
describe("findNodeByComponent", () => {
let container: HTMLDivElement;
beforeEach(() => {
container = document.body.appendChild(document.createElement("div"));
});
afterEach(() => {
document.body.removeChild(container);
});
describe("missing", () => {
it("should not work for top-level class with same component name", () => {
const WrappedC = getWrappedComponent(CDepth1);
const rootNode = mountAndGetRootNode(WrappedC, container);
const FakeCDepth1 = createClassComponent(CDepth1.name);
const found = findNodeByComponent(rootNode, FakeCDepth1);
expect(found).toBeFalsy();
expect(found).toBe(null);
});
it("should not work for top-level class with different component name", () => {
const WrappedC = getWrappedComponent(CDepth1);
const rootNode = mountAndGetRootNode(WrappedC, container);
const FakeCDepth1 = createClassComponent("randomname");
const found = findNodeByComponent(rootNode, FakeCDepth1);
expect(found).toBeFalsy();
expect(found).toBe(null);
});
it("should not work for 2nd-level class with same component name", () => {
class C1 extends React.Component {
render() {
return <C2 />;
}
}
class C2 extends React.Component {
render() {
return <div>C2 here</div>;
}
}
const WrappedC = getWrappedComponent(C1);
const rootNode = mountAndGetRootNode(WrappedC, container);
const FakeC2 = createClassComponent(C2.name);
const found = findNodeByComponent(rootNode, FakeC2);
expect(found).toBeFalsy();
expect(found).toBe(null);
});
it("should not work for 2nd-level class with different component name", () => {
class C1 extends React.Component {
render() {
return <C2 />;
}
}
class C2 extends React.Component {
render() {
return <div>C2 here</div>;
}
}
const WrappedC = getWrappedComponent(C1);
const rootNode = mountAndGetRootNode(WrappedC, container);
const FakeC2 = createClassComponent("randomName");
const found = findNodeByComponent(rootNode, FakeC2);
expect(found).toBeFalsy();
expect(found).toBe(null);
});
it("should not work for top-level function with same function name", () => {
const WrappedC = getWrappedComponent(FnDepth1);
const rootNode = mountAndGetRootNode(WrappedC, container);
const FakeFnDepth1 = createClassComponent(FnDepth1.name);
const found = findNodeByComponent(rootNode, FakeFnDepth1);
expect(found).toBeFalsy();
expect(found).toBe(null);
});
it("should not work for top-level function with different function name", () => {
const WrappedC = getWrappedComponent(FnDepth1);
const rootNode = mountAndGetRootNode(WrappedC, container);
const FakeFnDepth1 = createClassComponent("randomName");
const found = findNodeByComponent(rootNode, FakeFnDepth1);
expect(found).toBeFalsy();
expect(found).toBe(null);
});
it("should not work for 2nd-level function with same function name", () => {
function Fn1() {
return <Fn2 />;
}
function Fn2() {
return <div>Fn2 here</div>;
}
const WrappedC = getWrappedComponent(Fn1);
const rootNode = mountAndGetRootNode(WrappedC, container);
const FakeFn2 = createClassComponent(Fn2.name);
const found = findNodeByComponent(rootNode, FakeFn2);
expect(found).toBeFalsy();
expect(found).toBe(null);
});
it("should not work for 2nd-level function with different function name", () => {
function Fn1() {
return <Fn2 />;
}
function Fn2() {
return <div>Fn2 here</div>;
}
const WrappedC = getWrappedComponent(Fn1);
const rootNode = mountAndGetRootNode(WrappedC, container);
const FakeFn2 = createClassComponent("randomName");
const found = findNodeByComponent(rootNode, FakeFn2);
expect(found).toBeFalsy();
expect(found).toBe(null);
});
it("should not work for 5th-level function with same or diff fn name", () => {
function Fn1() {
return (
<div>
<div>
<span></span>
<Fn2></Fn2>
</div>
</div>
);
}
function Fn2() {
return <a href="google.com">Fn2 here</a>;
}
const WrappedC = getWrappedComponent(Fn1);
const rootNode = mountAndGetRootNode(WrappedC, container);
const FakeFn2Same = createClassComponent(Fn2.name);
const FakeFn2Diff = createClassComponent("randomname");
const foundSame = findNodeByComponent(rootNode, FakeFn2Same);
const foundDiff = findNodeByComponent(rootNode, FakeFn2Diff);
expect(foundSame).toBeFalsy();
expect(foundSame).toBe(null);
expect(foundDiff).toBeFalsy();
expect(foundDiff).toBe(null);
});
});
});
@@ -1,95 +0,0 @@
import * as React from "react";
// Import stuff from src
import { findNodeByComponentRef } from "../src";
import { mountAndGetRootNode } from "./utils/mountInEnzyme";
import getWrappedComponent from "./utils/getWrappedComponent";
class RandomClass extends React.Component {
render() {
return <div></div>;
}
}
// Import test helpers and sample components
describe("findNodeByComponentRef", () => {
let container: HTMLDivElement;
beforeEach(() => {
container = document.body.appendChild(document.createElement("div"));
});
afterEach(() => {
document.body.removeChild(container);
});
describe("negative", () => {
it("should not work for 2nd-level class", () => {
const C2Ref = React.createRef<C2>();
class C1 extends React.Component {
render() {
return <C2 ref={C2Ref} />;
}
}
class C2 extends React.Component {
render() {
return <div>C2 here</div>;
}
}
const WrappedC = getWrappedComponent(C1);
const rootNode = mountAndGetRootNode(WrappedC, container);
if (C2Ref.current === null) {
throw new Error("Ref is not yet set");
}
const foundSame = findNodeByComponentRef(rootNode, new C2({}));
const foundDiff = findNodeByComponentRef(rootNode, new RandomClass({}));
expect(foundSame).toBeFalsy();
expect(foundSame).toBe(null);
expect(foundDiff).toBeFalsy();
expect(foundDiff).toBe(null);
});
it("should work for 5th-level class", () => {
const C2Ref = React.createRef<C2>();
class C1 extends React.Component {
render() {
return (
<div>
<div>
<span></span>
<C2 ref={C2Ref}></C2>
</div>
</div>
);
}
}
class C2 extends React.Component {
render() {
return <a href="google.com">Fn2 here</a>;
}
}
const WrappedC = getWrappedComponent(C1);
const rootNode = mountAndGetRootNode(WrappedC, container);
if (C2Ref.current === null) {
throw new Error("Ref is not yet set");
}
const foundSame = findNodeByComponentRef(rootNode, new C2({}));
const foundDiff = findNodeByComponentRef(rootNode, new RandomClass({}));
expect(foundSame).toBeFalsy();
expect(foundSame).toBe(null);
expect(foundDiff).toBeFalsy();
expect(foundDiff).toBe(null);
});
});
});
+1 -1
View File
@@ -26,7 +26,7 @@ describe("traverseGenerator", () => {
document.body.removeChild(container); document.body.removeChild(container);
}); });
describe("ordered", () => { describe("basic", () => {
it("order doesn't matter for 1 node if self is present - case 1", () => { it("order doesn't matter for 1 node if self is present - case 1", () => {
const rootNode = mountAndGetRootNode(CDepth1, container); const rootNode = mountAndGetRootNode(CDepth1, container);
-143
View File
@@ -1,143 +0,0 @@
import * as React from "react";
// Import stuff from src
import { FiberNodeForComponentClass, FiberNode } from "../src/mocked-types";
import { traverseGenerator } from "../src";
// Import test helpers and sample components
import { mountAndGetRootNode } from "./utils/mountInEnzyme";
import {
createClassComponents
// createFunctionComponents
} from "./utils/createComponent";
describe("traverseGenerator", () => {
let container: HTMLDivElement;
beforeEach(() => {
container = document.body.appendChild(document.createElement("div"));
});
afterEach(() => {
document.body.removeChild(container);
});
describe("skipped", () => {
it("should traverse just top-level with skipChild", () => {
const [C2, C3, C4, C5] = createClassComponents(["C2", "C3", "C4", "C5"]);
class C1 extends React.Component {
render() {
return (
<React.Fragment>
<C2>
<C3 />
</C2>
<C4>
<C5 />
</C4>
</React.Fragment>
);
}
}
const rootNode = mountAndGetRootNode(C1, container);
const nodeIterator = traverseGenerator(rootNode);
// Consume generator
let nodes: Array<FiberNode> = [];
const genArgs = { skipChild: true };
for (
let result = nodeIterator.next();
!result.done;
result = nodeIterator.next(genArgs)
) {
const currentNode = result.value;
nodes.push(currentNode);
}
expect(nodes.length).toBe(1);
expect(
nodes.map(tmpNode => (tmpNode as FiberNodeForComponentClass).type)
).toEqual([C1]);
});
it("should traverse just first 2 levels with inner skipChild", () => {
const [C2, C3, C4, C5] = createClassComponents(["C2", "C3", "C4", "C5"]);
class C1 extends React.Component {
render() {
return (
<React.Fragment>
<C2>
<C3 />
</C2>
<C4>
<C5 />
</C4>
</React.Fragment>
);
}
}
const rootNode = mountAndGetRootNode(C1, container);
const nodeIterator = traverseGenerator(rootNode);
// Consume generator
let nodes: Array<FiberNode> = [];
const genArgs = { skipChild: true };
for (
let result = nodeIterator.next();
!result.done;
result = nodeIterator.next(nodes.length > 1 ? genArgs : undefined)
) {
const currentNode = result.value;
nodes.push(currentNode);
}
expect(nodes.length).toBe(3);
expect(
nodes.map(tmpNode => (tmpNode as FiberNodeForComponentClass).type)
).toEqual([C1, C2, C4]);
});
it("should traverse one branch correctly with skipSibling", () => {
const [C2, C3, C4, C5] = createClassComponents(["C2", "C3", "C4", "C5"]);
class C1 extends React.Component {
render() {
return (
<React.Fragment>
<C2>
<C3 />
</C2>
<C4>
<C5 />
</C4>
</React.Fragment>
);
}
}
const rootNode = mountAndGetRootNode(C1, container);
const nodeIterator = traverseGenerator(rootNode);
// Consume generator
let nodes: Array<FiberNode> = [];
const genArgs = { skipSibling: true };
for (
let result = nodeIterator.next();
!result.done;
result = nodeIterator.next(genArgs)
) {
const currentNode = result.value;
nodes.push(currentNode);
}
expect(nodes.length).toBe(3);
expect(
nodes.map(tmpNode => (tmpNode as FiberNodeForComponentClass).type)
).toEqual([C1, C2, C3]);
});
});
});
@@ -1,77 +0,0 @@
// import * as React from "react";
// Import stuff from src
import { doesElementContainRootFiberNode } from "../src/utils";
// Import test helpers and sample components
import { mountAndGetRootNode } from "./utils/mountInEnzyme";
import { createFunctionComponent } from "./utils/createComponent";
describe("traverse", () => {
let container: HTMLDivElement;
beforeEach(() => {
container = document.body.appendChild(document.createElement("div"));
});
afterEach(() => {
try {
document.body.removeChild(container);
} catch (error) {
if (!(error instanceof DOMException)) {
throw error;
}
}
});
describe("doesElementContainRootFiberNode", () => {
it("should work for direct element", () => {
const fn1 = createFunctionComponent("fn1");
const containerInner = container.appendChild(
document.createElement("span")
);
mountAndGetRootNode(fn1, containerInner);
const resultPositive = doesElementContainRootFiberNode(containerInner);
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).toBe(true);
});
it("should not work for parent element", () => {
const fn1 = createFunctionComponent("fn1");
const containerInner = container.appendChild(
document.createElement("span")
);
mountAndGetRootNode(fn1, containerInner);
const resultNegative = doesElementContainRootFiberNode(container);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
it("should not work for child element", () => {
const fn1 = createFunctionComponent("fn1");
const containerInner = container.appendChild(
document.createElement("span")
);
mountAndGetRootNode(fn1, container);
const resultNegative = doesElementContainRootFiberNode(containerInner);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
it("should work for body", () => {
const fn1 = createFunctionComponent("fn1");
mountAndGetRootNode(fn1, document.body);
const resultPositive = doesElementContainRootFiberNode(document.body);
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).toBe(true);
});
});
});
@@ -1,94 +0,0 @@
// import * as React from "react";
// Import stuff from src
import { getRootFiberNodeFromDOM } from "../src/utils";
// Import test helpers and sample components
import { mountAndGetRootNode } from "./utils/mountInEnzyme";
import { createClassComponent } from "./utils/createComponent";
describe("traverse", () => {
let container: HTMLDivElement;
beforeEach(() => {
container = document.body.appendChild(document.createElement("div"));
});
afterEach(() => {
try {
document.body.removeChild(container);
} catch (error) {
if (!(error instanceof DOMException)) {
throw error;
}
}
});
describe("getRootFiberNodeFromDOM", () => {
it("should work for direct element", () => {
const C1 = createClassComponent("C1");
const containerInner = container.appendChild(
document.createElement("span")
);
mountAndGetRootNode(C1, containerInner);
const resultPositive = getRootFiberNodeFromDOM(containerInner);
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).not.toBe(null);
expect((resultPositive as any).child.child.type).toBe(C1);
});
it("should work for parent element", () => {
const C1 = createClassComponent("C1");
const containerInner = container.appendChild(
document.createElement("span")
);
mountAndGetRootNode(C1, containerInner);
const resultPositive = getRootFiberNodeFromDOM(container);
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).not.toBe(null);
expect((resultPositive as any).child.child.type).toBe(C1);
});
it("should work without any element - default args", () => {
const C1 = createClassComponent("C1");
const containerInner = container.appendChild(
document.createElement("span")
);
mountAndGetRootNode(C1, containerInner);
const resultPositive = getRootFiberNodeFromDOM();
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).not.toBe(null);
expect((resultPositive as any).child.child.type).toBe(C1);
});
it("should not work for child element", () => {
const C1 = createClassComponent("C1");
const containerInner = container.appendChild(
document.createElement("span")
);
mountAndGetRootNode(C1, container);
const resultNegative = getRootFiberNodeFromDOM(containerInner);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(null);
});
it("should work for body", () => {
const C1 = createClassComponent("C1");
mountAndGetRootNode(C1, document.body);
const resultPositive = getRootFiberNodeFromDOM(document.body);
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).not.toBe(null);
expect((resultPositive as any).child.child.type).toBe(C1);
});
});
});
@@ -1,74 +0,0 @@
// import * as React from "react";
// Import stuff from src
import { isConstructorComponentClass } from "../src/utils";
import {
createFunctionComponent,
createClassComponent
} from "./utils/createComponent";
// Import test helpers and sample components
describe("utils", () => {
let container: HTMLDivElement;
beforeEach(() => {
container = document.body.appendChild(document.createElement("div"));
});
afterEach(() => {
document.body.removeChild(container);
});
describe("isConstructorComponentClass", () => {
it("should work for class components", () => {
const C1 = createClassComponent("C1");
const resultPositive = isConstructorComponentClass(C1);
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).toBe(true);
});
it("should not work for any class", () => {
const C1 = class {};
const resultNegative = isConstructorComponentClass(C1 as any);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
it("should not work for any function", () => {
const fn1 = function() {};
const resultNegative = isConstructorComponentClass(fn1 as any);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
it("should not work for function components", () => {
const fn1 = createFunctionComponent();
const resultNegative = isConstructorComponentClass(fn1);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
it("should not work for string", () => {
const resultNegative = isConstructorComponentClass("div");
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
it("should not work for null", () => {
const resultNegative = isConstructorComponentClass(null);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
});
});
@@ -1,74 +0,0 @@
// import * as React from "react";
// Import stuff from src
import { isConstructorFunctionComponent } from "../src/utils";
import {
createFunctionComponent,
createClassComponent
} from "./utils/createComponent";
// Import test helpers and sample components
describe("utils", () => {
let container: HTMLDivElement;
beforeEach(() => {
container = document.body.appendChild(document.createElement("div"));
});
afterEach(() => {
document.body.removeChild(container);
});
describe("isConstructorFunctionComponent", () => {
it("should work for any function - current limitation", () => {
const fn1 = function() {};
const resultPositive = isConstructorFunctionComponent(fn1 as any);
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).toBe(true);
});
it("should work for function components", () => {
const fn1 = createFunctionComponent();
const resultPositive = isConstructorFunctionComponent(fn1);
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).toBe(true);
});
it("should not work for string", () => {
const resultNegative = isConstructorFunctionComponent("div");
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
it("should not work for null", () => {
const resultNegative = isConstructorFunctionComponent(null);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
it("should work for any class - current limitation", () => {
const C1 = class {};
const resultPositive = isConstructorFunctionComponent(C1 as any);
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).toBe(true);
});
it("should not work for class components", () => {
const C1 = createClassComponent("C1");
const resultNegative = isConstructorFunctionComponent(C1);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
});
});
-74
View File
@@ -1,74 +0,0 @@
// import * as React from "react";
// Import stuff from src
import { isConstructorHtmlLike } from "../src/utils";
import {
createFunctionComponent,
createClassComponent
} from "./utils/createComponent";
// Import test helpers and sample components
describe("utils", () => {
let container: HTMLDivElement;
beforeEach(() => {
container = document.body.appendChild(document.createElement("div"));
});
afterEach(() => {
document.body.removeChild(container);
});
describe("isConstructorHtmlLike", () => {
it("should work for string", () => {
const resultPositive = isConstructorHtmlLike("div");
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).toBe(true);
});
it("should work for null", () => {
const resultPositive = isConstructorHtmlLike(null);
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).toBe(true);
});
it("should not work for any function", () => {
const fn1 = function() {};
const resultNegative = isConstructorHtmlLike(fn1 as any);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
it("should not work for function components", () => {
const fn1 = createFunctionComponent();
const resultNegative = isConstructorHtmlLike(fn1);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
it("should not work for any class", () => {
const C1 = class {};
const resultNegative = isConstructorHtmlLike(C1 as any);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
it("should not work for class components", () => {
const C1 = createClassComponent("C1");
const resultNegative = isConstructorHtmlLike(C1);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
});
});
-63
View File
@@ -1,63 +0,0 @@
// import * as React from "react";
// Import stuff from src
import { isNodeComponentClass } from "../src/utils";
import { mountAndGetRootNode } from "./utils/mountInEnzyme";
import {
createFunctionComponent,
createClassComponent
} from "./utils/createComponent";
// Import test helpers and sample components
describe("utils", () => {
let container: HTMLDivElement;
beforeEach(() => {
container = document.body.appendChild(document.createElement("div"));
});
afterEach(() => {
document.body.removeChild(container);
});
describe("isNodeComponentClass", () => {
it("should work for class component", () => {
const C1 = createClassComponent("C1");
const rootNode = mountAndGetRootNode(C1, container);
const result = isNodeComponentClass(rootNode);
expect(result).not.toBeFalsy();
expect(result).toBe(true);
});
it("should not work for function component", () => {
const fn1 = createFunctionComponent("fn1");
const rootNode = mountAndGetRootNode(fn1, container);
const result = isNodeComponentClass(rootNode);
expect(result).toBeFalsy();
expect(result).toBe(false);
});
it("should not work for html like component - div", () => {
const rootNode = mountAndGetRootNode("div", container);
const result = isNodeComponentClass(rootNode);
expect(result).toBeFalsy();
expect(result).toBe(false);
});
it("should not work for html like component - svg", () => {
const rootNode = mountAndGetRootNode("svg", container);
const result = isNodeComponentClass(rootNode);
expect(result).toBeFalsy();
expect(result).toBe(false);
});
});
});
@@ -1,63 +0,0 @@
// import * as React from "react";
// Import stuff from src
import { isNodeFunctionComponent } from "../src/utils";
import { mountAndGetRootNode } from "./utils/mountInEnzyme";
import {
createFunctionComponent,
createClassComponent
} from "./utils/createComponent";
// Import test helpers and sample components
describe("utils", () => {
let container: HTMLDivElement;
beforeEach(() => {
container = document.body.appendChild(document.createElement("div"));
});
afterEach(() => {
document.body.removeChild(container);
});
describe("isNodeFunctionComponent", () => {
it("should work for function component", () => {
const fn1 = createFunctionComponent("fn1");
const rootNode = mountAndGetRootNode(fn1, container);
const result = isNodeFunctionComponent(rootNode);
expect(result).not.toBeFalsy();
expect(result).toBe(true);
});
it("should not work for class component", () => {
const C1 = createClassComponent("C1");
const rootNode = mountAndGetRootNode(C1, container);
const result = isNodeFunctionComponent(rootNode);
expect(result).toBeFalsy();
expect(result).toBe(false);
});
it("should not work for html like component - div", () => {
const rootNode = mountAndGetRootNode("div", container);
const result = isNodeFunctionComponent(rootNode);
expect(result).toBeFalsy();
expect(result).toBe(false);
});
it("should work for html like component - svg", () => {
const rootNode = mountAndGetRootNode("svg", container);
const result = isNodeFunctionComponent(rootNode);
expect(result).toBeFalsy();
expect(result).toBe(false);
});
});
});
-102
View File
@@ -1,102 +0,0 @@
import * as React from "react";
// Import stuff from src
import { isNodeHtmlLike, isNodeNotHtmlLike } from "../src/utils";
import { mountAndGetRootNode } from "./utils/mountInEnzyme";
import { FiberNodeForInstrinsicElement } from "../src/mocked-types";
import {
createFunctionComponent,
createClassComponent
} from "./utils/createComponent";
// Import test helpers and sample components
describe("utils", () => {
let container: HTMLDivElement;
beforeEach(() => {
container = document.body.appendChild(document.createElement("div"));
});
afterEach(() => {
document.body.removeChild(container);
});
describe("isNodeHtmlLike", () => {
it("should work for div", () => {
const rootNode = mountAndGetRootNode("div", container);
const resultPositive = isNodeHtmlLike(rootNode);
const resultNegative = isNodeNotHtmlLike(rootNode);
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).toBe(true);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
it("should work for svg root element", () => {
const rootNode = mountAndGetRootNode("svg", container);
const resultPositive = isNodeHtmlLike(rootNode);
const resultNegative = isNodeNotHtmlLike(rootNode);
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).toBe(true);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
it("should work for svg inner elements", () => {
function SomeSVG() {
return (
<svg>
<circle cx={5} />
</svg>
);
}
const rootNode = mountAndGetRootNode(SomeSVG, container);
expect(isNodeHtmlLike(rootNode)).toBeFalsy();
const circleNode = (rootNode.child as FiberNodeForInstrinsicElement)
.child as FiberNodeForInstrinsicElement;
expect(circleNode).not.toBe(null);
expect(circleNode.type).toBe("circle");
const resultPositive = isNodeHtmlLike(circleNode);
const resultNegative = isNodeNotHtmlLike(circleNode);
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).toBe(true);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
it("should not work for function component", () => {
const fn1 = createFunctionComponent("fn1");
const rootNode = mountAndGetRootNode(fn1, container);
const resultPositive = isNodeNotHtmlLike(rootNode);
const resultNegative = isNodeHtmlLike(rootNode);
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).toBe(true);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
it("should not work for class component", () => {
const C1 = createClassComponent("C1");
const rootNode = mountAndGetRootNode(C1, container);
const resultPositive = isNodeNotHtmlLike(rootNode);
const resultNegative = isNodeHtmlLike(rootNode);
expect(resultPositive).not.toBeFalsy();
expect(resultPositive).toBe(true);
expect(resultNegative).toBeFalsy();
expect(resultNegative).toBe(false);
});
});
});
+5 -5
View File
@@ -1,7 +1,7 @@
import * as React from "react"; import * as React from "react";
import { mount } from "enzyme"; import { mount } from "enzyme";
import { FiberNode, FiberNodeForComponentClass } from "../../src/mocked-types"; import { FiberNode, FiberNodeForComponentClass } from "../../src/mocked-types";
import { isConstructorComponentClass } from "../../src/utils"; import { isConstructorFunctionComponent } from "../../src/utils";
import getWrappedComponent from "./getWrappedComponent"; import getWrappedComponent from "./getWrappedComponent";
export class RootNodeNotFoundError extends Error { export class RootNodeNotFoundError extends Error {
@@ -13,14 +13,14 @@ export class RootNodeNotFoundError extends Error {
} }
export function mountAndGetRootNode( export function mountAndGetRootNode(
SomeComponent: React.ElementType, SomeComponent: React.ComponentType,
container: HTMLElement container: HTMLElement
): FiberNode { ): FiberNode {
const rootRef = React.createRef<React.Component>(); const rootRef = React.createRef<React.Component>();
let ToMount: React.ComponentClass | undefined = undefined; let ToMount = undefined;
// Wrap function components in ComponentClass to be able to set ref // Wrap function components in ComponentClass to be able to set ref
if (!isConstructorComponentClass(SomeComponent)) { if (isConstructorFunctionComponent(SomeComponent)) {
ToMount = getWrappedComponent(SomeComponent); ToMount = getWrappedComponent(SomeComponent);
} else { } else {
ToMount = SomeComponent; ToMount = SomeComponent;
@@ -41,7 +41,7 @@ export function mountAndGetRootNode(
} }
// Unwrap function components to return expected root node // Unwrap function components to return expected root node
if (!isConstructorComponentClass(SomeComponent)) { if (isConstructorFunctionComponent(SomeComponent)) {
return (rootNode as FiberNodeForComponentClass).child as FiberNode; return (rootNode as FiberNodeForComponentClass).child as FiberNode;
} else { } else {
return rootNode; return rootNode;