mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Added legacy (v15) tests
This commit is contained in:
Brian Vaughn
+3
-1
@@ -26,7 +26,7 @@
|
||||
"<rootDir>/src/__tests__/storeSerializer"
|
||||
],
|
||||
"testMatch": [
|
||||
"**/__tests__/*-test.js"
|
||||
"**/__tests__/**/*-test.js"
|
||||
]
|
||||
},
|
||||
"scripts": {
|
||||
@@ -131,8 +131,10 @@
|
||||
"prettier": "^1.16.4",
|
||||
"prop-types": "^15.6.2",
|
||||
"react": "0.0.0-4221565e1",
|
||||
"react-15": "npm:react@^15",
|
||||
"react-color": "^2.11.7",
|
||||
"react-dom": "0.0.0-4221565e1",
|
||||
"react-dom-15": "npm:react-dom@^15",
|
||||
"react-is": "0.0.0-4221565e1",
|
||||
"react-virtualized-auto-sizer": "^1.0.2",
|
||||
"react-window": "^1.8.0",
|
||||
|
||||
@@ -0,0 +1,279 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:false should filter DOM nodes from the store tree: 1: mount 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▾ <Parent>
|
||||
<Child>
|
||||
▾ <Parent>
|
||||
<Child>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 1: mount 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▾ <Parent>
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
▾ <Parent>
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 2: collapse first Parent 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▸ <Parent>
|
||||
▾ <Parent>
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 3: collapse second Parent 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▸ <Parent>
|
||||
▸ <Parent>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 4: expand first Parent 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▾ <Parent>
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
▸ <Parent>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 5: collapse Grandparent 1`] = `
|
||||
[root]
|
||||
▸ <Grandparent>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:false should support collapsing parts of the tree: 6: expand Grandparent 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▾ <Parent>
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
▸ <Parent>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 1: mount 1`] = `
|
||||
[root]
|
||||
▾ <Parent key="A">
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
<Child key="2">
|
||||
[root]
|
||||
▾ <Parent key="B">
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 2: update 1`] = `
|
||||
[root]
|
||||
▾ <Parent key="A">
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
<Child key="2">
|
||||
<Child key="3">
|
||||
[root]
|
||||
▾ <Parent key="B">
|
||||
<Child key="0">
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 3: unmount B 1`] = `
|
||||
[root]
|
||||
▾ <Parent key="A">
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
<Child key="2">
|
||||
<Child key="3">
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 1: mount 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▾ <Parent>
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
<Child key="2">
|
||||
<Child key="3">
|
||||
▾ <Parent>
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
<Child key="2">
|
||||
<Child key="3">
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 2: update 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▾ <Parent>
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
▾ <Parent>
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:false should support mount and update operations: 3: unmount 1`] = ``;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should filter DOM nodes from the store tree: 1: mount 1`] = `
|
||||
[root]
|
||||
▸ <Grandparent>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should filter DOM nodes from the store tree: 2: expand Grandparent 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▸ <Parent>
|
||||
▸ <Parent>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should filter DOM nodes from the store tree: 3: expand Parent 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▾ <Parent>
|
||||
<Child>
|
||||
▸ <Parent>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 1: mount 1`] = `
|
||||
[root]
|
||||
▸ <Wrapper>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 2: expand deepest node 1`] = `
|
||||
[root]
|
||||
▾ <Wrapper>
|
||||
▾ <Nested>
|
||||
▾ <Nested>
|
||||
▾ <Nested>
|
||||
<Nested>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 3: collapse root 1`] = `
|
||||
[root]
|
||||
▸ <Wrapper>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 4: expand root 1`] = `
|
||||
[root]
|
||||
▾ <Wrapper>
|
||||
▾ <Nested>
|
||||
▾ <Nested>
|
||||
▾ <Nested>
|
||||
<Nested>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 5: collapse middle node 1`] = `
|
||||
[root]
|
||||
▾ <Wrapper>
|
||||
▸ <Nested>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support expanding deep parts of the tree: 6: expand middle node 1`] = `
|
||||
[root]
|
||||
▾ <Wrapper>
|
||||
▾ <Nested>
|
||||
▾ <Nested>
|
||||
▾ <Nested>
|
||||
<Nested>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 1: mount 1`] = `
|
||||
[root]
|
||||
▸ <Grandparent>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 2: expand Grandparent 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▸ <Parent>
|
||||
▸ <Parent>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 3: expand first Parent 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▾ <Parent>
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
▸ <Parent>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 4: expand second Parent 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▾ <Parent>
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
▾ <Parent>
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 5: collapse first Parent 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▸ <Parent>
|
||||
▾ <Parent>
|
||||
<Child key="0">
|
||||
<Child key="1">
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 6: collapse second Parent 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▸ <Parent>
|
||||
▸ <Parent>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support expanding parts of the tree: 7: collapse Grandparent 1`] = `
|
||||
[root]
|
||||
▸ <Grandparent>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 1: mount 1`] = `
|
||||
[root]
|
||||
▸ <Parent key="A">
|
||||
[root]
|
||||
▸ <Parent key="B">
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 2: update 1`] = `
|
||||
[root]
|
||||
▸ <Parent key="A">
|
||||
[root]
|
||||
▸ <Parent key="B">
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 3: unmount B 1`] = `
|
||||
[root]
|
||||
▸ <Parent key="A">
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations for multiple roots: 4: unmount A 1`] = ``;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 1: mount 1`] = `
|
||||
[root]
|
||||
▸ <Parent>
|
||||
▸ <Parent>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 2: update 1`] = `
|
||||
[root]
|
||||
▸ <Parent>
|
||||
▸ <Parent>
|
||||
`;
|
||||
|
||||
exports[`Store (legacy) collapseNodesByDefault:true should support mount and update operations: 3: unmount 1`] = ``;
|
||||
|
||||
exports[`Store (legacy) should not allow a root node to be collapsed: 1: mount 1`] = `
|
||||
[root]
|
||||
<Component>
|
||||
`;
|
||||
@@ -0,0 +1,404 @@
|
||||
// @flow
|
||||
|
||||
describe('Store (legacy)', () => {
|
||||
let React;
|
||||
let ReactDOM;
|
||||
let store;
|
||||
|
||||
const act = (callback: Function) => {
|
||||
callback();
|
||||
|
||||
jest.runAllTimers(); // Flush Bridge operations
|
||||
};
|
||||
|
||||
beforeEach(() => {
|
||||
store = global.store;
|
||||
|
||||
// Redirect all React/ReactDOM requires to the v15 UMD.
|
||||
// We use the UMD because Jest doesn't enable us to mock deep imports (e.g. "react/lib/Something").
|
||||
jest.mock('react', () => require.requireActual('react-15/dist/react.js'));
|
||||
jest.mock('react-dom', () => require.requireActual('react-dom-15/dist/react-dom.js'));
|
||||
|
||||
React = require('react');
|
||||
ReactDOM = require('react-dom');
|
||||
});
|
||||
|
||||
it('should not allow a root node to be collapsed', () => {
|
||||
const Component = () => <div>Hi</div>;
|
||||
|
||||
act(() =>
|
||||
ReactDOM.render(<Component count={4} />, document.createElement('div'))
|
||||
);
|
||||
expect(store).toMatchSnapshot('1: mount');
|
||||
|
||||
expect(store.roots).toHaveLength(1);
|
||||
|
||||
const rootID = store.roots[0];
|
||||
|
||||
expect(() => store.toggleIsCollapsed(rootID, true)).toThrow(
|
||||
'Root nodes cannot be collapsed'
|
||||
);
|
||||
});
|
||||
|
||||
describe('collapseNodesByDefault:false', () => {
|
||||
beforeEach(() => {
|
||||
store.collapseNodesByDefault = false;
|
||||
});
|
||||
|
||||
it('should support mount and update operations', () => {
|
||||
const Grandparent = ({ count }) => (
|
||||
<div>
|
||||
<Parent count={count} />
|
||||
<Parent count={count} />
|
||||
</div>
|
||||
);
|
||||
const Parent = ({ count }) =>
|
||||
<div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
|
||||
const Child = () => <div>Hi!</div>;
|
||||
|
||||
const container = document.createElement('div');
|
||||
|
||||
act(() => ReactDOM.render(<Grandparent count={4} />, container));
|
||||
expect(store).toMatchSnapshot('1: mount');
|
||||
|
||||
act(() => ReactDOM.render(<Grandparent count={2} />, container));
|
||||
expect(store).toMatchSnapshot('2: update');
|
||||
|
||||
act(() => ReactDOM.unmountComponentAtNode(container));
|
||||
expect(store).toMatchSnapshot('3: unmount');
|
||||
});
|
||||
|
||||
it('should support mount and update operations for multiple roots', () => {
|
||||
const Parent = ({ count }) =>
|
||||
<div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
|
||||
const Child = () => <div>Hi!</div>;
|
||||
|
||||
const containerA = document.createElement('div');
|
||||
const containerB = document.createElement('div');
|
||||
|
||||
act(() => {
|
||||
ReactDOM.render(<Parent key="A" count={3} />, containerA);
|
||||
ReactDOM.render(<Parent key="B" count={2} />, containerB);
|
||||
});
|
||||
expect(store).toMatchSnapshot('1: mount');
|
||||
|
||||
act(() => {
|
||||
ReactDOM.render(<Parent key="A" count={4} />, containerA);
|
||||
ReactDOM.render(<Parent key="B" count={1} />, containerB);
|
||||
});
|
||||
expect(store).toMatchSnapshot('2: update');
|
||||
|
||||
act(() => ReactDOM.unmountComponentAtNode(containerB));
|
||||
expect(store).toMatchSnapshot('3: unmount B');
|
||||
|
||||
act(() => ReactDOM.unmountComponentAtNode(containerA));
|
||||
expect(store).toMatchSnapshot('4: unmount A');
|
||||
});
|
||||
|
||||
it('should filter DOM nodes from the store tree', () => {
|
||||
const Grandparent = () => (
|
||||
<div>
|
||||
<div>
|
||||
<Parent />
|
||||
</div>
|
||||
<Parent />
|
||||
</div>
|
||||
);
|
||||
const Parent = () => (
|
||||
<div>
|
||||
<Child />
|
||||
</div>
|
||||
);
|
||||
const Child = () => <div>Hi!</div>;
|
||||
|
||||
act(() =>
|
||||
ReactDOM.render(
|
||||
<Grandparent count={4} />,
|
||||
document.createElement('div')
|
||||
)
|
||||
);
|
||||
expect(store).toMatchSnapshot('1: mount');
|
||||
});
|
||||
|
||||
it('should support collapsing parts of the tree', () => {
|
||||
const Grandparent = ({ count }) => (
|
||||
<div>
|
||||
<Parent count={count} />
|
||||
<Parent count={count} />
|
||||
</div>
|
||||
);
|
||||
const Parent = ({ count }) =>
|
||||
<div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
|
||||
const Child = () => <div>Hi!</div>;
|
||||
|
||||
act(() =>
|
||||
ReactDOM.render(
|
||||
<Grandparent count={2} />,
|
||||
document.createElement('div')
|
||||
)
|
||||
);
|
||||
expect(store).toMatchSnapshot('1: mount');
|
||||
|
||||
const grandparentID = store.getElementIDAtIndex(0);
|
||||
const parentOneID = store.getElementIDAtIndex(1);
|
||||
const parentTwoID = store.getElementIDAtIndex(4);
|
||||
|
||||
act(() => store.toggleIsCollapsed(parentOneID, true));
|
||||
expect(store).toMatchSnapshot('2: collapse first Parent');
|
||||
|
||||
act(() => store.toggleIsCollapsed(parentTwoID, true));
|
||||
expect(store).toMatchSnapshot('3: collapse second Parent');
|
||||
|
||||
act(() => store.toggleIsCollapsed(parentOneID, false));
|
||||
expect(store).toMatchSnapshot('4: expand first Parent');
|
||||
|
||||
act(() => store.toggleIsCollapsed(grandparentID, true));
|
||||
expect(store).toMatchSnapshot('5: collapse Grandparent');
|
||||
|
||||
act(() => store.toggleIsCollapsed(grandparentID, false));
|
||||
expect(store).toMatchSnapshot('6: expand Grandparent');
|
||||
});
|
||||
|
||||
// TODO Re-enable this test once the renderer supports it.
|
||||
xit('should support reordering of children', () => {
|
||||
const Root = ({ children }) => <div>{children}</div>;
|
||||
const Component = () => null;
|
||||
|
||||
const Foo = () => <div>{[<Component key="0" />]}</div>;
|
||||
const Bar = () => <div>{[<Component key="0" />, <Component key="1" />]}</div>;
|
||||
const foo = <Foo key="foo" />;
|
||||
const bar = <Bar key="bar" />;
|
||||
|
||||
const container = document.createElement('div');
|
||||
|
||||
act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
|
||||
expect(store).toMatchSnapshot('1: mount');
|
||||
|
||||
act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
|
||||
expect(store).toMatchSnapshot('3: reorder children');
|
||||
|
||||
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
|
||||
expect(store).toMatchSnapshot('4: collapse root');
|
||||
|
||||
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
|
||||
expect(store).toMatchSnapshot('5: expand root');
|
||||
});
|
||||
});
|
||||
|
||||
describe('collapseNodesByDefault:true', () => {
|
||||
beforeEach(() => {
|
||||
store.collapseNodesByDefault = true;
|
||||
});
|
||||
|
||||
it('should support mount and update operations', () => {
|
||||
const Parent = ({ count }) =>
|
||||
<div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
|
||||
const Child = () => <div>Hi!</div>;
|
||||
|
||||
const container = document.createElement('div');
|
||||
|
||||
act(() =>
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Parent count={1} />
|
||||
<Parent count={3} />
|
||||
</div>,
|
||||
container
|
||||
)
|
||||
);
|
||||
expect(store).toMatchSnapshot('1: mount');
|
||||
|
||||
act(() =>
|
||||
ReactDOM.render(
|
||||
<div>
|
||||
<Parent count={2} />
|
||||
<Parent count={1} />
|
||||
</div>,
|
||||
container
|
||||
)
|
||||
);
|
||||
expect(store).toMatchSnapshot('2: update');
|
||||
|
||||
act(() => ReactDOM.unmountComponentAtNode(container));
|
||||
expect(store).toMatchSnapshot('3: unmount');
|
||||
});
|
||||
|
||||
it('should support mount and update operations for multiple roots', () => {
|
||||
const Parent = ({ count }) =>
|
||||
<div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
|
||||
const Child = () => <div>Hi!</div>;
|
||||
|
||||
const containerA = document.createElement('div');
|
||||
const containerB = document.createElement('div');
|
||||
|
||||
act(() => {
|
||||
ReactDOM.render(<Parent key="A" count={3} />, containerA);
|
||||
ReactDOM.render(<Parent key="B" count={2} />, containerB);
|
||||
});
|
||||
expect(store).toMatchSnapshot('1: mount');
|
||||
|
||||
act(() => {
|
||||
ReactDOM.render(<Parent key="A" count={4} />, containerA);
|
||||
ReactDOM.render(<Parent key="B" count={1} />, containerB);
|
||||
});
|
||||
expect(store).toMatchSnapshot('2: update');
|
||||
|
||||
act(() => ReactDOM.unmountComponentAtNode(containerB));
|
||||
expect(store).toMatchSnapshot('3: unmount B');
|
||||
|
||||
act(() => ReactDOM.unmountComponentAtNode(containerA));
|
||||
expect(store).toMatchSnapshot('4: unmount A');
|
||||
});
|
||||
|
||||
it('should filter DOM nodes from the store tree', () => {
|
||||
const Grandparent = () => (
|
||||
<div>
|
||||
<div>
|
||||
<Parent />
|
||||
</div>
|
||||
<Parent />
|
||||
</div>
|
||||
);
|
||||
const Parent = () => (
|
||||
<div>
|
||||
<Child />
|
||||
</div>
|
||||
);
|
||||
const Child = () => <div>Hi!</div>;
|
||||
|
||||
act(() =>
|
||||
ReactDOM.render(
|
||||
<Grandparent count={4} />,
|
||||
document.createElement('div')
|
||||
)
|
||||
);
|
||||
expect(store).toMatchSnapshot('1: mount');
|
||||
|
||||
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
|
||||
expect(store).toMatchSnapshot('2: expand Grandparent');
|
||||
|
||||
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(1), false));
|
||||
expect(store).toMatchSnapshot('3: expand Parent');
|
||||
});
|
||||
|
||||
it('should support expanding parts of the tree', () => {
|
||||
const Grandparent = ({ count }) => (
|
||||
<div>
|
||||
<Parent count={count} />
|
||||
<Parent count={count} />
|
||||
</div>
|
||||
);
|
||||
const Parent = ({ count }) =>
|
||||
<div>{new Array(count).fill(true).map((_, index) => <Child key={index} />)}</div>;
|
||||
const Child = () => <div>Hi!</div>;
|
||||
|
||||
act(() =>
|
||||
ReactDOM.render(
|
||||
<Grandparent count={2} />,
|
||||
document.createElement('div')
|
||||
)
|
||||
);
|
||||
expect(store).toMatchSnapshot('1: mount');
|
||||
|
||||
const grandparentID = store.getElementIDAtIndex(0);
|
||||
|
||||
act(() => store.toggleIsCollapsed(grandparentID, false));
|
||||
expect(store).toMatchSnapshot('2: expand Grandparent');
|
||||
|
||||
const parentOneID = store.getElementIDAtIndex(1);
|
||||
const parentTwoID = store.getElementIDAtIndex(2);
|
||||
|
||||
act(() => store.toggleIsCollapsed(parentOneID, false));
|
||||
expect(store).toMatchSnapshot('3: expand first Parent');
|
||||
|
||||
act(() => store.toggleIsCollapsed(parentTwoID, false));
|
||||
expect(store).toMatchSnapshot('4: expand second Parent');
|
||||
|
||||
act(() => store.toggleIsCollapsed(parentOneID, true));
|
||||
expect(store).toMatchSnapshot('5: collapse first Parent');
|
||||
|
||||
act(() => store.toggleIsCollapsed(parentTwoID, true));
|
||||
expect(store).toMatchSnapshot('6: collapse second Parent');
|
||||
|
||||
act(() => store.toggleIsCollapsed(grandparentID, true));
|
||||
expect(store).toMatchSnapshot('7: collapse Grandparent');
|
||||
});
|
||||
|
||||
it('should support expanding deep parts of the tree', () => {
|
||||
const Wrapper = ({ forwardedRef }) => (
|
||||
<Nested depth={3} forwardedRef={forwardedRef} />
|
||||
);
|
||||
const Nested = ({ depth, forwardedRef }) =>
|
||||
depth > 0 ? (
|
||||
<Nested depth={depth - 1} forwardedRef={forwardedRef} />
|
||||
) : (
|
||||
<div ref={forwardedRef} />
|
||||
);
|
||||
|
||||
let ref = null;
|
||||
const refSetter = value => {
|
||||
ref = value;
|
||||
};
|
||||
|
||||
act(() =>
|
||||
ReactDOM.render(
|
||||
<Wrapper forwardedRef={refSetter} />,
|
||||
document.createElement('div')
|
||||
)
|
||||
);
|
||||
expect(store).toMatchSnapshot('1: mount');
|
||||
|
||||
const deepestedNodeID = global.agent.getIDForNode(ref);
|
||||
|
||||
act(() => store.toggleIsCollapsed(deepestedNodeID, false));
|
||||
expect(store).toMatchSnapshot('2: expand deepest node');
|
||||
|
||||
const rootID = store.getElementIDAtIndex(0);
|
||||
|
||||
act(() => store.toggleIsCollapsed(rootID, true));
|
||||
expect(store).toMatchSnapshot('3: collapse root');
|
||||
|
||||
act(() => store.toggleIsCollapsed(rootID, false));
|
||||
expect(store).toMatchSnapshot('4: expand root');
|
||||
|
||||
const id = store.getElementIDAtIndex(1);
|
||||
|
||||
act(() => store.toggleIsCollapsed(id, true));
|
||||
expect(store).toMatchSnapshot('5: collapse middle node');
|
||||
|
||||
act(() => store.toggleIsCollapsed(id, false));
|
||||
expect(store).toMatchSnapshot('6: expand middle node');
|
||||
});
|
||||
|
||||
// TODO Re-enable this test once the renderer supports it.
|
||||
xit('should support reordering of children', () => {
|
||||
const Root = ({ children }) => <div>{children}</div>;
|
||||
const Component = () => null;
|
||||
|
||||
const Foo = () => <div>{[<Component key="0" />]}</div>;
|
||||
const Bar = () => <div>{[<Component key="0" />, <Component key="1" />]}</div>;
|
||||
const foo = <Foo key="foo" />;
|
||||
const bar = <Bar key="bar" />;
|
||||
|
||||
const container = document.createElement('div');
|
||||
|
||||
act(() => ReactDOM.render(<Root>{[foo, bar]}</Root>, container));
|
||||
expect(store).toMatchSnapshot('1: mount');
|
||||
|
||||
act(() => ReactDOM.render(<Root>{[bar, foo]}</Root>, container));
|
||||
expect(store).toMatchSnapshot('3: reorder children');
|
||||
|
||||
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), false));
|
||||
expect(store).toMatchSnapshot('4: expand root');
|
||||
|
||||
act(() => {
|
||||
store.toggleIsCollapsed(store.getElementIDAtIndex(2), false);
|
||||
store.toggleIsCollapsed(store.getElementIDAtIndex(1), false);
|
||||
});
|
||||
expect(store).toMatchSnapshot('5: expand leaves');
|
||||
|
||||
act(() => store.toggleIsCollapsed(store.getElementIDAtIndex(0), true));
|
||||
expect(store).toMatchSnapshot('6: collapse root');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -3462,6 +3462,15 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
|
||||
safe-buffer "^5.0.1"
|
||||
sha.js "^2.4.8"
|
||||
|
||||
create-react-class@^15.6.0:
|
||||
version "15.6.3"
|
||||
resolved "https://registry.yarnpkg.com/create-react-class/-/create-react-class-15.6.3.tgz#2d73237fb3f970ae6ebe011a9e66f46dbca80036"
|
||||
integrity sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==
|
||||
dependencies:
|
||||
fbjs "^0.8.9"
|
||||
loose-envify "^1.3.1"
|
||||
object-assign "^4.1.1"
|
||||
|
||||
create-react-context@^0.2.1:
|
||||
version "0.2.3"
|
||||
resolved "https://registry.yarnpkg.com/create-react-context/-/create-react-context-0.2.3.tgz#9ec140a6914a22ef04b8b09b7771de89567cb6f3"
|
||||
@@ -4930,7 +4939,7 @@ fbjs@0.5.1:
|
||||
ua-parser-js "^0.7.9"
|
||||
whatwg-fetch "^0.9.0"
|
||||
|
||||
fbjs@^0.8.0:
|
||||
fbjs@^0.8.0, fbjs@^0.8.9:
|
||||
version "0.8.17"
|
||||
resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
|
||||
integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
|
||||
@@ -7562,7 +7571,7 @@ log-update@^2.0.0, log-update@^2.3.0:
|
||||
cli-cursor "^2.0.0"
|
||||
wrap-ansi "^3.0.1"
|
||||
|
||||
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
|
||||
loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
|
||||
version "1.4.0"
|
||||
resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
|
||||
integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
|
||||
@@ -9168,6 +9177,17 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
|
||||
minimist "^1.2.0"
|
||||
strip-json-comments "~2.0.1"
|
||||
|
||||
"react-15@npm:react@^15":
|
||||
version "15.6.2"
|
||||
resolved "https://registry.yarnpkg.com/react/-/react-15.6.2.tgz#dba0434ab439cfe82f108f0f511663908179aa72"
|
||||
integrity sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=
|
||||
dependencies:
|
||||
create-react-class "^15.6.0"
|
||||
fbjs "^0.8.9"
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.0"
|
||||
prop-types "^15.5.10"
|
||||
|
||||
react-color@^2.11.7:
|
||||
version "2.17.0"
|
||||
resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.17.0.tgz#e14b8a11f4e89163f65a34c8b43faf93f7f02aaa"
|
||||
@@ -9180,6 +9200,16 @@ react-color@^2.11.7:
|
||||
reactcss "^1.2.0"
|
||||
tinycolor2 "^1.4.1"
|
||||
|
||||
"react-dom-15@npm:react-dom@^15":
|
||||
version "15.6.2"
|
||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-15.6.2.tgz#41cfadf693b757faf2708443a1d1fd5a02bef730"
|
||||
integrity sha1-Qc+t9pO3V/rycIRDodH9WgK+9zA=
|
||||
dependencies:
|
||||
fbjs "^0.8.9"
|
||||
loose-envify "^1.1.0"
|
||||
object-assign "^4.1.0"
|
||||
prop-types "^15.5.10"
|
||||
|
||||
react-dom@0.0.0-4221565e1:
|
||||
version "0.0.0-4221565e1"
|
||||
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-0.0.0-4221565e1.tgz#d9044312a3294a8828867624a9fea7fd9aa76570"
|
||||
|
||||
Reference in New Issue
Block a user