mirror of
https://github.com/bendtherules/react-fiber-traverse.git
synced 2026-08-18 22:01:49 +00:00
Compare commits
3
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 bendtherules
|
4310188a5b | ||
|
bendtherules
|
28d5f6ab1d | ||
|
bendtherules
|
d8bc1fad5f |
+15
-15
@@ -1,18 +1,18 @@
|
||||
{
|
||||
"dist/react-fiber-traverse.cjs.development.js": {
|
||||
"bundled": 9674,
|
||||
"minified": 4533,
|
||||
"gzipped": 1335
|
||||
"bundled": 7398,
|
||||
"minified": 3036,
|
||||
"gzipped": 967
|
||||
},
|
||||
"dist/react-fiber-traverse.cjs.production.js": {
|
||||
"bundled": 9674,
|
||||
"minified": 4533,
|
||||
"gzipped": 1335
|
||||
"bundled": 7398,
|
||||
"minified": 3036,
|
||||
"gzipped": 967
|
||||
},
|
||||
"dist/react-fiber-traverse.esm.js": {
|
||||
"bundled": 9312,
|
||||
"minified": 4229,
|
||||
"gzipped": 1245,
|
||||
"bundled": 7048,
|
||||
"minified": 2736,
|
||||
"gzipped": 869,
|
||||
"treeshaked": {
|
||||
"rollup": {
|
||||
"code": 49,
|
||||
@@ -24,13 +24,13 @@
|
||||
}
|
||||
},
|
||||
"dist/react-fiber-traverse.umd.development.js": {
|
||||
"bundled": 34862,
|
||||
"minified": 9669,
|
||||
"gzipped": 3394
|
||||
"bundled": 32560,
|
||||
"minified": 8698,
|
||||
"gzipped": 3085
|
||||
},
|
||||
"dist/react-fiber-traverse.umd.production.js": {
|
||||
"bundled": 34862,
|
||||
"minified": 9669,
|
||||
"gzipped": 3394
|
||||
"bundled": 32560,
|
||||
"minified": 8698,
|
||||
"gzipped": 3085
|
||||
}
|
||||
}
|
||||
|
||||
@@ -10,39 +10,29 @@
|
||||
## Basic Usage
|
||||
|
||||
```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
|
||||
// Say, if SomeComponentName looks like this -
|
||||
function SomeComponentName() {
|
||||
return <div>Some text</div>;
|
||||
}
|
||||
const rootElement = document.getElementById('root');
|
||||
render(<App>, 'root');
|
||||
|
||||
// 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'
|
||||
const rootFiberNode = getRootFiberNodeFromDOM(rootElement);
|
||||
|
||||
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
|
||||
|
||||
- [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
|
||||
|
||||
**Props**
|
||||
@@ -53,7 +43,7 @@ console.log(someFiberNode.child.stateNode.innerText); // <- returns 'Some text'
|
||||
**Example**
|
||||
|
||||
```jsx
|
||||
``` -->
|
||||
```
|
||||
|
||||
## Installation
|
||||
|
||||
|
||||
@@ -1,16 +1,16 @@
|
||||
# TODOs
|
||||
|
||||
1. Write docs and examples
|
||||
2. Reduce testcase boilerplate code for similar tests
|
||||
3. Publish to npm
|
||||
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 -
|
||||
- .\_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
|
||||
- add testcase to run across all versions of React 16.0.0 (dev+prod) and above (because internals change)
|
||||
Affected parts
|
||||
---------------
|
||||
a. Rollup config (input and output) X
|
||||
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
|
||||
8. Make it work with non React-DOM renderers
|
||||
f. Enable umd build from one index file
|
||||
+11
-30
@@ -13,40 +13,20 @@
|
||||
|
||||
## Basic Usage
|
||||
|
||||
```ts
|
||||
import React from "react";
|
||||
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'
|
||||
```jsx
|
||||
import React from 'react'
|
||||
import { render } from 'react-dom'
|
||||
|
||||
render(, document.getElementById('root'))
|
||||
```
|
||||
|
||||
## 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
|
||||
|
||||
**Props**
|
||||
@@ -57,7 +37,7 @@ console.log(someFiberNode.child.stateNode.innerText); // <- returns 'Some text'
|
||||
**Example**
|
||||
|
||||
```jsx
|
||||
``` -->
|
||||
```
|
||||
|
||||
## 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)
|
||||
- [`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:
|
||||
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
@@ -24,7 +24,7 @@
|
||||
|
||||
• **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`*
|
||||
|
||||
*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*
|
||||
|
||||
*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`*
|
||||
|
||||
*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`*
|
||||
|
||||
*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*
|
||||
|
||||
*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`*
|
||||
|
||||
*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*
|
||||
|
||||
*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*
|
||||
|
||||
*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`*
|
||||
|
||||
*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*
|
||||
|
||||
*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*
|
||||
|
||||
*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*
|
||||
|
||||
*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`*
|
||||
|
||||
*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*
|
||||
|
||||
*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*
|
||||
|
||||
*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*
|
||||
|
||||
*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*
|
||||
|
||||
*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`*
|
||||
|
||||
*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*
|
||||
|
||||
*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)*
|
||||
@@ -18,7 +18,7 @@
|
||||
|
||||
▸ **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:**
|
||||
|
||||
@@ -35,7 +35,7 @@ ___
|
||||
|
||||
▸ **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:**
|
||||
|
||||
@@ -52,7 +52,7 @@ ___
|
||||
|
||||
▸ **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:**
|
||||
|
||||
|
||||
@@ -8,7 +8,6 @@
|
||||
|
||||
### Interfaces
|
||||
|
||||
* [FiberNodeDOMContainer](../interfaces/_mocked_types_index_.fibernodedomcontainer.md)
|
||||
* [FiberNodeForComponentClass](../interfaces/_mocked_types_index_.fibernodeforcomponentclass.md)
|
||||
* [FiberNodeForFunctionComponent](../interfaces/_mocked_types_index_.fibernodeforfunctioncomponent.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)*
|
||||
|
||||
*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)*
|
||||
|
||||
*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)*
|
||||
@@ -17,7 +17,7 @@
|
||||
|
||||
▸ **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:**
|
||||
|
||||
@@ -41,7 +41,7 @@ ___
|
||||
|
||||
▸ **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:**
|
||||
|
||||
|
||||
+13
-50
@@ -8,8 +8,6 @@
|
||||
|
||||
### Functions
|
||||
|
||||
* [doesElementContainRootFiberNode](_utils_.md#doeselementcontainrootfibernode)
|
||||
* [getRootFiberNodeFromDOM](_utils_.md#getrootfibernodefromdom)
|
||||
* [isConstructorComponentClass](_utils_.md#isconstructorcomponentclass)
|
||||
* [isConstructorFunctionComponent](_utils_.md#isconstructorfunctioncomponent)
|
||||
* [isConstructorHtmlLike](_utils_.md#isconstructorhtmllike)
|
||||
@@ -20,52 +18,17 @@
|
||||
|
||||
## 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**(`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:**
|
||||
|
||||
Name | Type |
|
||||
------ | ------ |
|
||||
`ctr` | `React.ElementType` \| null |
|
||||
`ctr` | `React.ElementType` |
|
||||
|
||||
**Returns:** *boolean*
|
||||
|
||||
@@ -73,15 +36,15 @@ ___
|
||||
|
||||
### 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:**
|
||||
|
||||
Name | Type |
|
||||
------ | ------ |
|
||||
`ctr` | `React.ElementType` \| null |
|
||||
`ctr` | `React.ElementType` |
|
||||
|
||||
**Returns:** *boolean*
|
||||
|
||||
@@ -89,15 +52,15 @@ ___
|
||||
|
||||
### 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:**
|
||||
|
||||
Name | Type |
|
||||
------ | ------ |
|
||||
`ctr` | `React.ElementType` \| null |
|
||||
`ctr` | `React.ElementType` |
|
||||
|
||||
**Returns:** *boolean*
|
||||
|
||||
@@ -107,7 +70,7 @@ ___
|
||||
|
||||
▸ **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:**
|
||||
|
||||
@@ -123,7 +86,7 @@ ___
|
||||
|
||||
▸ **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:**
|
||||
|
||||
@@ -139,7 +102,7 @@ ___
|
||||
|
||||
▸ **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:**
|
||||
|
||||
@@ -155,7 +118,7 @@ ___
|
||||
|
||||
▸ **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:**
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
"use strict";
|
||||
|
||||
if (process.env.NODE_ENV === "production") {
|
||||
module.exports = require("./react-fiber-traverse.cjs.production.js");
|
||||
module.exports = require("./cjs-production/index.js");
|
||||
} else {
|
||||
module.exports = require("./react-fiber-traverse.cjs.development.js");
|
||||
module.exports = require("./cjs-development/index.js");
|
||||
}
|
||||
|
||||
+1
-10
@@ -1,12 +1,3 @@
|
||||
module.exports = {
|
||||
"*.{js,jsx,ts,tsx}": filenames => {
|
||||
// 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}"`;
|
||||
}
|
||||
"*.{js,jsx,ts,tsx}": () => "run-s check:* lint"
|
||||
};
|
||||
|
||||
Generated
+20
-1
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "react-fiber-traverse",
|
||||
"version": "0.0.7",
|
||||
"version": "0.0.4",
|
||||
"lockfileVersion": 1,
|
||||
"requires": true,
|
||||
"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": {
|
||||
"version": "5.2.0",
|
||||
"resolved": "https://registry.npmjs.org/rollup-plugin-node-resolve/-/rollup-plugin-node-resolve-5.2.0.tgz",
|
||||
|
||||
+8
-9
@@ -1,10 +1,10 @@
|
||||
{
|
||||
"name": "react-fiber-traverse",
|
||||
"version": "0.0.7",
|
||||
"version": "0.0.4",
|
||||
"description": "Traverse and other utils on top of React fiber tree",
|
||||
"main": "dist/index.js",
|
||||
"module": "dist/react-fiber-traverse.esm.js",
|
||||
"jsnext:main": "dist/react-fiber-traverse.esm.js",
|
||||
"module": "dist/esm/index.js",
|
||||
"jsnext:main": "dist/esm/index.js",
|
||||
"typings": "dist/index.d.ts",
|
||||
"files": [
|
||||
"dist"
|
||||
@@ -24,8 +24,7 @@
|
||||
"compile": "tsc -p tsconfig.base.json",
|
||||
"docs": "npx typedoc ./src/",
|
||||
"format": "prettier --write \"**/*.{js,ts,tsx}\"",
|
||||
"_lint": "eslint --ext .js,.ts,.jsx,.tsx",
|
||||
"lint": "npm run _lint -- .",
|
||||
"lint": "eslint . --ext .js,.ts",
|
||||
"postbundle": "del compiled && cp-cli ./index.js ./dist/index.js",
|
||||
"postversion": "git push && git push --tags && npm publish",
|
||||
"release": "npm version -m 'Release v%s'",
|
||||
@@ -35,14 +34,13 @@
|
||||
"test:es": "jest --config ./scripts/jest/config.es.js",
|
||||
"test:src": "jest --config ./scripts/jest/config.src.js",
|
||||
"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",
|
||||
"version": "run-s test authors docs && git add ."
|
||||
"version": "run-s test authors && git add ."
|
||||
},
|
||||
"husky": {
|
||||
"hooks": {
|
||||
"pre-commit": "lint-staged"
|
||||
"pre-commit": "lint-staged",
|
||||
"post-commit": "npm run fix:format"
|
||||
}
|
||||
},
|
||||
"repository": {
|
||||
@@ -108,6 +106,7 @@
|
||||
"rollup-plugin-babel": "4.3.3",
|
||||
"rollup-plugin-commonjs": "10.0.1",
|
||||
"rollup-plugin-filesize": "6.1.1",
|
||||
"rollup-plugin-multi-input": "^1.0.2",
|
||||
"rollup-plugin-node-resolve": "5.2.0",
|
||||
"rollup-plugin-replace": "2.2.0",
|
||||
"rollup-plugin-size-snapshot": "0.9.0",
|
||||
|
||||
+12
-14
@@ -2,9 +2,10 @@ import babel from "rollup-plugin-babel";
|
||||
import commonjs from "rollup-plugin-commonjs";
|
||||
import nodeResolve from "rollup-plugin-node-resolve";
|
||||
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 { terser } from "rollup-plugin-terser";
|
||||
import multiInput from "rollup-plugin-multi-input";
|
||||
import pkg from "./package.json";
|
||||
|
||||
const CJS_DEV = "CJS_DEV";
|
||||
@@ -13,7 +14,7 @@ const ES = "ES";
|
||||
const UMD_DEV = "UMD_DEV";
|
||||
const UMD_PROD = "UMD_PROD";
|
||||
|
||||
const input = "./compiled/index.js";
|
||||
const input = ["compiled/*.js"];
|
||||
|
||||
const getGlobals = bundleType => {
|
||||
const baseGlobals = {
|
||||
@@ -124,7 +125,7 @@ const getPlugins = bundleType => [
|
||||
)
|
||||
}),
|
||||
sourcemaps(),
|
||||
sizeSnapshot(),
|
||||
// sizeSnapshot(),
|
||||
isProduction(bundleType) &&
|
||||
terser({
|
||||
sourcemap: true,
|
||||
@@ -136,16 +137,15 @@ const getPlugins = bundleType => [
|
||||
warnings: true,
|
||||
ecma: 5,
|
||||
toplevel: false
|
||||
})
|
||||
}),
|
||||
multiInput({ relative: "compiled/" })
|
||||
];
|
||||
|
||||
const getCjsConfig = bundleType => ({
|
||||
input,
|
||||
external: getExternal(bundleType),
|
||||
output: {
|
||||
file: `dist/react-fiber-traverse.cjs.${
|
||||
isProduction(bundleType) ? "production" : "development"
|
||||
}.js`,
|
||||
dir: `dist/cjs-${isProduction(bundleType) ? "production" : "development"}`,
|
||||
format: "cjs",
|
||||
sourcemap: true
|
||||
},
|
||||
@@ -156,7 +156,7 @@ const getEsConfig = () => ({
|
||||
input,
|
||||
external: getExternal(ES),
|
||||
output: {
|
||||
file: pkg.module,
|
||||
dir: `dist/esm`,
|
||||
format: "es",
|
||||
sourcemap: true
|
||||
},
|
||||
@@ -167,9 +167,7 @@ const getUmdConfig = bundleType => ({
|
||||
input,
|
||||
external: getExternal(bundleType),
|
||||
output: {
|
||||
file: `dist/react-fiber-traverse.umd.${
|
||||
isProduction(bundleType) ? "production" : "development"
|
||||
}.js`,
|
||||
dir: `dist/umd-${isProduction(bundleType) ? "production" : "development"}`,
|
||||
format: "umd",
|
||||
globals: getGlobals(bundleType),
|
||||
name: "reactFiberTraverse",
|
||||
@@ -181,7 +179,7 @@ const getUmdConfig = bundleType => ({
|
||||
export default [
|
||||
getCjsConfig(CJS_DEV),
|
||||
getCjsConfig(CJS_PROD),
|
||||
getEsConfig(),
|
||||
getUmdConfig(UMD_DEV),
|
||||
getUmdConfig(UMD_PROD)
|
||||
getEsConfig()
|
||||
// getUmdConfig(UMD_DEV),
|
||||
// getUmdConfig(UMD_PROD)
|
||||
];
|
||||
|
||||
@@ -3,6 +3,6 @@ const srcConfig = require("./config.src");
|
||||
module.exports = Object.assign({}, srcConfig, {
|
||||
collectCoverage: false,
|
||||
moduleNameMapper: {
|
||||
"^../src$": `<rootDir>/dist/react-fiber-traverse.esm.js`
|
||||
"^../src$": `<rootDir>/dist/esm/index.js`
|
||||
}
|
||||
});
|
||||
|
||||
+1
-3
@@ -4,13 +4,11 @@ import {
|
||||
findNodeByComponentRef,
|
||||
findNodeByComponentName
|
||||
} from "./findNode";
|
||||
import * as Utils from "./utils";
|
||||
|
||||
export {
|
||||
traverse,
|
||||
traverseGenerator,
|
||||
findNodeByComponent,
|
||||
findNodeByComponentRef,
|
||||
findNodeByComponentName,
|
||||
Utils
|
||||
findNodeByComponentName
|
||||
};
|
||||
|
||||
+6
-13
@@ -7,7 +7,6 @@ import {
|
||||
FiberNodeDOMContainer
|
||||
} from "./mocked-types";
|
||||
|
||||
// Support null in all of these
|
||||
function isNodeHtmlLike(node: FiberNode): node is FiberNodeisHTMLLike {
|
||||
return typeof node.type === "string" || node.type === null;
|
||||
}
|
||||
@@ -31,8 +30,8 @@ function isNodeComponentClass(
|
||||
}
|
||||
|
||||
function isConstructorHtmlLike(
|
||||
ctr: React.ElementType | null
|
||||
): ctr is Exclude<React.ElementType | null, React.ComponentType> {
|
||||
ctr: React.ElementType
|
||||
): ctr is Exclude<React.ElementType, React.ComponentType> {
|
||||
if (typeof ctr === "string" || ctr === null) {
|
||||
return true;
|
||||
}
|
||||
@@ -40,7 +39,7 @@ function isConstructorHtmlLike(
|
||||
}
|
||||
|
||||
function isConstructorComponentClass(
|
||||
ctr: React.ElementType | null
|
||||
ctr: React.ElementType
|
||||
): ctr is React.ComponentClass {
|
||||
if (isConstructorHtmlLike(ctr)) {
|
||||
return false;
|
||||
@@ -57,20 +56,15 @@ function isConstructorComponentClass(
|
||||
}
|
||||
|
||||
function isConstructorFunctionComponent(
|
||||
ctr: React.ElementType | null
|
||||
ctr: React.ElementType
|
||||
): ctr is React.FunctionComponent {
|
||||
return typeof ctr === "function" && !isConstructorComponentClass(ctr);
|
||||
return !isConstructorComponentClass(ctr);
|
||||
}
|
||||
|
||||
function doesElementContainRootFiberNode(
|
||||
element: Element
|
||||
): element is FiberNodeDOMContainer {
|
||||
return (
|
||||
element.hasOwnProperty("_reactRootContainer") &&
|
||||
(element as (Element & {
|
||||
_reactRootContainer: any;
|
||||
}))._reactRootContainer.hasOwnProperty("_internalRoot")
|
||||
);
|
||||
return element.hasOwnProperty("_reactRootContainer");
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -107,6 +101,5 @@ export {
|
||||
isConstructorHtmlLike,
|
||||
isConstructorComponentClass,
|
||||
isConstructorFunctionComponent,
|
||||
doesElementContainRootFiberNode,
|
||||
getRootFiberNodeFromDOM
|
||||
};
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -26,7 +26,7 @@ describe("traverseGenerator", () => {
|
||||
document.body.removeChild(container);
|
||||
});
|
||||
|
||||
describe("ordered", () => {
|
||||
describe("basic", () => {
|
||||
it("order doesn't matter for 1 node if self is present - case 1", () => {
|
||||
const rootNode = mountAndGetRootNode(CDepth1, container);
|
||||
|
||||
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -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);
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -1,7 +1,7 @@
|
||||
import * as React from "react";
|
||||
import { mount } from "enzyme";
|
||||
import { FiberNode, FiberNodeForComponentClass } from "../../src/mocked-types";
|
||||
import { isConstructorComponentClass } from "../../src/utils";
|
||||
import { isConstructorFunctionComponent } from "../../src/utils";
|
||||
import getWrappedComponent from "./getWrappedComponent";
|
||||
|
||||
export class RootNodeNotFoundError extends Error {
|
||||
@@ -13,14 +13,14 @@ export class RootNodeNotFoundError extends Error {
|
||||
}
|
||||
|
||||
export function mountAndGetRootNode(
|
||||
SomeComponent: React.ElementType,
|
||||
SomeComponent: React.ComponentType,
|
||||
container: HTMLElement
|
||||
): FiberNode {
|
||||
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
|
||||
if (!isConstructorComponentClass(SomeComponent)) {
|
||||
if (isConstructorFunctionComponent(SomeComponent)) {
|
||||
ToMount = getWrappedComponent(SomeComponent);
|
||||
} else {
|
||||
ToMount = SomeComponent;
|
||||
@@ -41,7 +41,7 @@ export function mountAndGetRootNode(
|
||||
}
|
||||
|
||||
// Unwrap function components to return expected root node
|
||||
if (!isConstructorComponentClass(SomeComponent)) {
|
||||
if (isConstructorFunctionComponent(SomeComponent)) {
|
||||
return (rootNode as FiberNodeForComponentClass).child as FiberNode;
|
||||
} else {
|
||||
return rootNode;
|
||||
|
||||
Reference in New Issue
Block a user