mirror of
https://github.com/facebook/react.git
synced 2025-11-01 09:12:30 +00:00
Added TreeContext tests
This commit is contained in:
Brian Vaughn
@@ -0,0 +1,713 @@
|
||||
// Jest Snapshot v1, https://goo.gl/fbAQLP
|
||||
|
||||
exports[`TreeListContext owners state should support entering and existing the owners tree view: 0: mount 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▾ <Parent>
|
||||
<Child>
|
||||
<Child>
|
||||
`;
|
||||
|
||||
exports[`TreeListContext owners state should support entering and existing the owners tree view: 1: initial state 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": null,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": null,
|
||||
"selectedElementIndex": null,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext owners state should support entering and existing the owners tree view: 2: parent owners tree 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 3,
|
||||
"numElements": 3,
|
||||
"ownerFlatTree": Array [
|
||||
Object {
|
||||
"children": Array [
|
||||
4,
|
||||
5,
|
||||
],
|
||||
"depth": 0,
|
||||
"displayName": "Parent",
|
||||
"id": 3,
|
||||
"isCollapsed": false,
|
||||
"key": null,
|
||||
"ownerID": 2,
|
||||
"parentID": 2,
|
||||
"type": 5,
|
||||
"weight": 3,
|
||||
},
|
||||
Object {
|
||||
"children": Array [],
|
||||
"depth": 1,
|
||||
"displayName": "Child",
|
||||
"id": 4,
|
||||
"isCollapsed": false,
|
||||
"key": null,
|
||||
"ownerID": 3,
|
||||
"parentID": 3,
|
||||
"type": 5,
|
||||
"weight": 1,
|
||||
},
|
||||
Object {
|
||||
"children": Array [],
|
||||
"depth": 1,
|
||||
"displayName": "Child",
|
||||
"id": 5,
|
||||
"isCollapsed": false,
|
||||
"key": null,
|
||||
"ownerID": 3,
|
||||
"parentID": 3,
|
||||
"type": 5,
|
||||
"weight": 1,
|
||||
},
|
||||
],
|
||||
"ownerID": 3,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 3,
|
||||
"selectedElementIndex": 0,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext owners state should support entering and existing the owners tree view: 3: final state 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 3,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 3,
|
||||
"selectedElementIndex": 1,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 0: mount 1`] = `
|
||||
[root]
|
||||
<Foo>
|
||||
<Bar>
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 1: initial state 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": null,
|
||||
"numElements": 2,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": null,
|
||||
"selectedElementIndex": null,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 2: search for "ba" 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 3,
|
||||
"numElements": 2,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": 0,
|
||||
"searchResults": Array [
|
||||
3,
|
||||
],
|
||||
"searchText": "ba",
|
||||
"selectedElementID": 3,
|
||||
"selectedElementIndex": 1,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should add newly mounted elements to the search results set if they match the current text: 3: mount Baz 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 3,
|
||||
"numElements": 3,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": 0,
|
||||
"searchResults": Array [
|
||||
3,
|
||||
4,
|
||||
],
|
||||
"searchText": "ba",
|
||||
"selectedElementID": 3,
|
||||
"selectedElementIndex": 1,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should find elements matching search text: 0: mount 1`] = `
|
||||
[root]
|
||||
<Foo>
|
||||
<Bar>
|
||||
<Baz>
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should find elements matching search text: 1: initial state 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": null,
|
||||
"numElements": 3,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": null,
|
||||
"selectedElementIndex": null,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should find elements matching search text: 2: search for "ba" 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 3,
|
||||
"numElements": 3,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": 0,
|
||||
"searchResults": Array [
|
||||
3,
|
||||
4,
|
||||
],
|
||||
"searchText": "ba",
|
||||
"selectedElementID": 3,
|
||||
"selectedElementIndex": 1,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should find elements matching search text: 3: search for "f" 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 2,
|
||||
"numElements": 3,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": 0,
|
||||
"searchResults": Array [
|
||||
2,
|
||||
],
|
||||
"searchText": "f",
|
||||
"selectedElementID": 2,
|
||||
"selectedElementIndex": 0,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should find elements matching search text: 4: search for "q" 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 2,
|
||||
"numElements": 3,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "q",
|
||||
"selectedElementID": 2,
|
||||
"selectedElementIndex": 0,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should remove unmounted elements from the search results set: 0: mount 1`] = `
|
||||
[root]
|
||||
<Foo>
|
||||
<Bar>
|
||||
<Baz>
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should remove unmounted elements from the search results set: 1: initial state 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": null,
|
||||
"numElements": 3,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": null,
|
||||
"selectedElementIndex": null,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should remove unmounted elements from the search results set: 2: search for "ba" 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 3,
|
||||
"numElements": 3,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": 0,
|
||||
"searchResults": Array [
|
||||
3,
|
||||
4,
|
||||
],
|
||||
"searchText": "ba",
|
||||
"selectedElementID": 3,
|
||||
"selectedElementIndex": 1,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should remove unmounted elements from the search results set: 3: go to second result 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 4,
|
||||
"numElements": 3,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": 1,
|
||||
"searchResults": Array [
|
||||
3,
|
||||
4,
|
||||
],
|
||||
"searchText": "ba",
|
||||
"selectedElementID": 4,
|
||||
"selectedElementIndex": 2,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should remove unmounted elements from the search results set: 4: unmount Baz 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": null,
|
||||
"numElements": 2,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": 0,
|
||||
"searchResults": Array [
|
||||
3,
|
||||
],
|
||||
"searchText": "ba",
|
||||
"selectedElementID": null,
|
||||
"selectedElementIndex": null,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should select the next and previous items within the search results: 0: mount 1`] = `
|
||||
[root]
|
||||
<Foo>
|
||||
<Baz>
|
||||
<Bar>
|
||||
<Baz>
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should select the next and previous items within the search results: 1: initial state 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": null,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": null,
|
||||
"selectedElementIndex": null,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should select the next and previous items within the search results: 2: search for "ba" 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 3,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": 0,
|
||||
"searchResults": Array [
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
],
|
||||
"searchText": "ba",
|
||||
"selectedElementID": 3,
|
||||
"selectedElementIndex": 1,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should select the next and previous items within the search results: 3: go to second result 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 4,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": 1,
|
||||
"searchResults": Array [
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
],
|
||||
"searchText": "ba",
|
||||
"selectedElementID": 4,
|
||||
"selectedElementIndex": 2,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should select the next and previous items within the search results: 4: go to third result 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 5,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": 2,
|
||||
"searchResults": Array [
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
],
|
||||
"searchText": "ba",
|
||||
"selectedElementID": 5,
|
||||
"selectedElementIndex": 3,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should select the next and previous items within the search results: 5: go to second result 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 4,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": 1,
|
||||
"searchResults": Array [
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
],
|
||||
"searchText": "ba",
|
||||
"selectedElementID": 4,
|
||||
"selectedElementIndex": 2,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should select the next and previous items within the search results: 6: go to first result 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 3,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": 0,
|
||||
"searchResults": Array [
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
],
|
||||
"searchText": "ba",
|
||||
"selectedElementID": 3,
|
||||
"selectedElementIndex": 1,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should select the next and previous items within the search results: 7: wrap to last result 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 5,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": 2,
|
||||
"searchResults": Array [
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
],
|
||||
"searchText": "ba",
|
||||
"selectedElementID": 5,
|
||||
"selectedElementIndex": 3,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext search state should select the next and previous items within the search results: 8: wrap to first result 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 3,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": 0,
|
||||
"searchResults": Array [
|
||||
3,
|
||||
4,
|
||||
5,
|
||||
],
|
||||
"searchText": "ba",
|
||||
"selectedElementID": 3,
|
||||
"selectedElementIndex": 1,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select child elements: 0: mount 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▾ <Parent>
|
||||
<Child>
|
||||
<Child>
|
||||
▾ <Parent>
|
||||
<Child>
|
||||
<Child>
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select child elements: 1: initial state 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": null,
|
||||
"numElements": 7,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": null,
|
||||
"selectedElementIndex": null,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select child elements: 2: select first element 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 2,
|
||||
"numElements": 7,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 2,
|
||||
"selectedElementIndex": 0,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select child elements: 3: select Parent 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 3,
|
||||
"numElements": 7,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 3,
|
||||
"selectedElementIndex": 1,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select child elements: 4: select Child 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 4,
|
||||
"numElements": 7,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 4,
|
||||
"selectedElementIndex": 2,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select parent elements and then collapse: 0: mount 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▾ <Parent>
|
||||
<Child>
|
||||
<Child>
|
||||
▾ <Parent>
|
||||
<Child>
|
||||
<Child>
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select parent elements and then collapse: 1: initial state 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": null,
|
||||
"numElements": 7,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": null,
|
||||
"selectedElementIndex": null,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select parent elements and then collapse: 2: select last child 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 8,
|
||||
"numElements": 7,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 8,
|
||||
"selectedElementIndex": 6,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select parent elements and then collapse: 3: select Parent 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 6,
|
||||
"numElements": 7,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 6,
|
||||
"selectedElementIndex": 4,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select parent elements and then collapse: 4: select Grandparent 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 2,
|
||||
"numElements": 7,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 2,
|
||||
"selectedElementIndex": 0,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select the next and previous elements in the tree: 0: mount 1`] = `
|
||||
[root]
|
||||
▾ <Grandparent>
|
||||
▾ <Parent>
|
||||
<Child>
|
||||
<Child>
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select the next and previous elements in the tree: 1: initial state 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": null,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": null,
|
||||
"selectedElementIndex": null,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select the next and previous elements in the tree: 2: select first element 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 2,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 2,
|
||||
"selectedElementIndex": 0,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (0) 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 3,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 3,
|
||||
"selectedElementIndex": 1,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (1) 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 4,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 4,
|
||||
"selectedElementIndex": 2,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select the next and previous elements in the tree: 3: select element after (2) 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 5,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 5,
|
||||
"selectedElementIndex": 3,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (1) 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 2,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 2,
|
||||
"selectedElementIndex": 0,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (2) 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 3,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 3,
|
||||
"selectedElementIndex": 1,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select the next and previous elements in the tree: 4: select element before (3) 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 4,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 4,
|
||||
"selectedElementIndex": 2,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select the next and previous elements in the tree: 5: select previous wraps around to last 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 5,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 5,
|
||||
"selectedElementIndex": 3,
|
||||
}
|
||||
`;
|
||||
|
||||
exports[`TreeListContext tree state should select the next and previous elements in the tree: 6: select next wraps around to first 1`] = `
|
||||
Object {
|
||||
"inspectedElementID": 2,
|
||||
"numElements": 4,
|
||||
"ownerFlatTree": null,
|
||||
"ownerID": null,
|
||||
"searchIndex": null,
|
||||
"searchResults": Array [],
|
||||
"searchText": "",
|
||||
"selectedElementID": 2,
|
||||
"selectedElementIndex": 0,
|
||||
}
|
||||
`;
|
||||
@@ -53,15 +53,15 @@ describe('OwnersListContext', () => {
|
||||
|
||||
it('should fetch the owners list for the selected element', async done => {
|
||||
const Grandparent = () => <Parent />;
|
||||
const Parent = ({ count }) => {
|
||||
const Parent = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Child duration={1} />
|
||||
<Child duration={2} />
|
||||
<Child />
|
||||
<Child />
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
const Child = ({ duration }) => null;
|
||||
const Child = () => null;
|
||||
|
||||
utils.act(() =>
|
||||
ReactDOM.render(<Grandparent />, document.createElement('div'))
|
||||
@@ -118,15 +118,15 @@ describe('OwnersListContext', () => {
|
||||
store.componentFilters = [utils.createDisplayNameFilter('^Parent$')];
|
||||
|
||||
const Grandparent = () => <Parent />;
|
||||
const Parent = ({ count }) => {
|
||||
const Parent = () => {
|
||||
return (
|
||||
<React.Fragment>
|
||||
<Child duration={1} />
|
||||
<Child duration={2} />
|
||||
<Child />
|
||||
<Child />
|
||||
</React.Fragment>
|
||||
);
|
||||
};
|
||||
const Child = ({ duration }) => null;
|
||||
const Child = () => null;
|
||||
|
||||
utils.act(() =>
|
||||
ReactDOM.render(<Grandparent />, document.createElement('div'))
|
||||
|
||||
@@ -0,0 +1,428 @@
|
||||
// @flow
|
||||
|
||||
import typeof ReactTestRenderer from 'react-test-renderer';
|
||||
import type Bridge from 'src/bridge';
|
||||
import type Store from 'src/devtools/store';
|
||||
import type {
|
||||
DispatcherContext,
|
||||
StateContext,
|
||||
} from 'src/devtools/views/Components/TreeContext';
|
||||
|
||||
describe('TreeListContext', () => {
|
||||
let React;
|
||||
let ReactDOM;
|
||||
let TestRenderer: ReactTestRenderer;
|
||||
let bridge: Bridge;
|
||||
let store: Store;
|
||||
let utils;
|
||||
|
||||
let BridgeContext;
|
||||
let StoreContext;
|
||||
let TreeContext;
|
||||
|
||||
let dispatch: DispatcherContext;
|
||||
let state: StateContext;
|
||||
|
||||
beforeEach(() => {
|
||||
utils = require('./utils');
|
||||
utils.beforeEachProfiling();
|
||||
|
||||
bridge = global.bridge;
|
||||
store = global.store;
|
||||
store.collapseNodesByDefault = false;
|
||||
|
||||
React = require('react');
|
||||
ReactDOM = require('react-dom');
|
||||
TestRenderer = utils.requireTestRenderer();
|
||||
|
||||
BridgeContext = require('src/devtools/views/context').BridgeContext;
|
||||
StoreContext = require('src/devtools/views/context').StoreContext;
|
||||
TreeContext = require('src/devtools/views/Components/TreeContext');
|
||||
});
|
||||
|
||||
afterEach(() => {
|
||||
// Reset between tests
|
||||
dispatch = ((null: any): DispatcherContext);
|
||||
state = ((null: any): StateContext);
|
||||
});
|
||||
|
||||
const Capture = () => {
|
||||
dispatch = React.useContext(TreeContext.TreeDispatcherContext);
|
||||
state = React.useContext(TreeContext.TreeStateContext);
|
||||
return null;
|
||||
};
|
||||
|
||||
const Contexts = () => {
|
||||
return (
|
||||
<BridgeContext.Provider value={bridge}>
|
||||
<StoreContext.Provider value={store}>
|
||||
<TreeContext.TreeContextController>
|
||||
<Capture />
|
||||
</TreeContext.TreeContextController>
|
||||
</StoreContext.Provider>
|
||||
</BridgeContext.Provider>
|
||||
);
|
||||
};
|
||||
|
||||
describe('tree state', () => {
|
||||
it('should select the next and previous elements in the tree', () => {
|
||||
const Grandparent = () => <Parent />;
|
||||
const Parent = () => (
|
||||
<React.Fragment>
|
||||
<Child />
|
||||
<Child />
|
||||
</React.Fragment>
|
||||
);
|
||||
const Child = () => null;
|
||||
|
||||
utils.act(() =>
|
||||
ReactDOM.render(<Grandparent />, document.createElement('div'))
|
||||
);
|
||||
|
||||
expect(store).toMatchSnapshot('0: mount');
|
||||
|
||||
let renderer;
|
||||
utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
|
||||
expect(state).toMatchSnapshot('1: initial state');
|
||||
|
||||
utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('2: select first element');
|
||||
|
||||
while (
|
||||
state.selectedElementIndex !== null &&
|
||||
state.selectedElementIndex < store.numElements - 1
|
||||
) {
|
||||
const index = ((state.selectedElementIndex: any): number);
|
||||
utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot(`3: select element after (${index})`);
|
||||
}
|
||||
|
||||
while (
|
||||
state.selectedElementIndex !== null &&
|
||||
state.selectedElementIndex > 0
|
||||
) {
|
||||
const index = ((state.selectedElementIndex: any): number);
|
||||
utils.act(() => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot(`4: select element before (${index})`);
|
||||
}
|
||||
|
||||
utils.act(() => dispatch({ type: 'SELECT_PREVIOUS_ELEMENT_IN_TREE' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('5: select previous wraps around to last');
|
||||
|
||||
utils.act(() => dispatch({ type: 'SELECT_NEXT_ELEMENT_IN_TREE' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('6: select next wraps around to first');
|
||||
});
|
||||
|
||||
it('should select child elements', () => {
|
||||
const Grandparent = () => (
|
||||
<React.Fragment>
|
||||
<Parent />
|
||||
<Parent />
|
||||
</React.Fragment>
|
||||
);
|
||||
const Parent = () => (
|
||||
<React.Fragment>
|
||||
<Child />
|
||||
<Child />
|
||||
</React.Fragment>
|
||||
);
|
||||
const Child = () => null;
|
||||
|
||||
utils.act(() =>
|
||||
ReactDOM.render(<Grandparent />, document.createElement('div'))
|
||||
);
|
||||
|
||||
expect(store).toMatchSnapshot('0: mount');
|
||||
|
||||
let renderer;
|
||||
utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
|
||||
expect(state).toMatchSnapshot('1: initial state');
|
||||
|
||||
utils.act(() =>
|
||||
dispatch({ type: 'SELECT_ELEMENT_AT_INDEX', payload: 0 })
|
||||
);
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('2: select first element');
|
||||
|
||||
utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('3: select Parent');
|
||||
|
||||
utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('4: select Child');
|
||||
|
||||
const previousState = state;
|
||||
|
||||
// There are no more children to select, so this should be a no-op
|
||||
utils.act(() => dispatch({ type: 'SELECT_CHILD_ELEMENT_IN_TREE' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toEqual(previousState);
|
||||
});
|
||||
|
||||
it('should select parent elements and then collapse', () => {
|
||||
const Grandparent = () => (
|
||||
<React.Fragment>
|
||||
<Parent />
|
||||
<Parent />
|
||||
</React.Fragment>
|
||||
);
|
||||
const Parent = () => (
|
||||
<React.Fragment>
|
||||
<Child />
|
||||
<Child />
|
||||
</React.Fragment>
|
||||
);
|
||||
const Child = () => null;
|
||||
|
||||
utils.act(() =>
|
||||
ReactDOM.render(<Grandparent />, document.createElement('div'))
|
||||
);
|
||||
|
||||
expect(store).toMatchSnapshot('0: mount');
|
||||
|
||||
let renderer;
|
||||
utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
|
||||
expect(state).toMatchSnapshot('1: initial state');
|
||||
|
||||
const lastChildID = store.getElementIDAtIndex(store.numElements - 1);
|
||||
|
||||
utils.act(() =>
|
||||
dispatch({ type: 'SELECT_ELEMENT_BY_ID', payload: lastChildID })
|
||||
);
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('2: select last child');
|
||||
|
||||
utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('3: select Parent');
|
||||
|
||||
utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('4: select Grandparent');
|
||||
|
||||
const previousState = state;
|
||||
|
||||
// There are no more ancestors to select, so this should be a no-op
|
||||
utils.act(() => dispatch({ type: 'SELECT_PARENT_ELEMENT_IN_TREE' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toEqual(previousState);
|
||||
});
|
||||
});
|
||||
|
||||
describe('search state', () => {
|
||||
it('should find elements matching search text', () => {
|
||||
const Foo = () => null;
|
||||
const Bar = () => null;
|
||||
const Baz = () => null;
|
||||
|
||||
utils.act(() =>
|
||||
ReactDOM.render(
|
||||
<React.Fragment>
|
||||
<Foo />
|
||||
<Bar />
|
||||
<Baz />
|
||||
</React.Fragment>,
|
||||
document.createElement('div')
|
||||
)
|
||||
);
|
||||
|
||||
expect(store).toMatchSnapshot('0: mount');
|
||||
|
||||
let renderer;
|
||||
utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
|
||||
expect(state).toMatchSnapshot('1: initial state');
|
||||
|
||||
utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('2: search for "ba"');
|
||||
|
||||
utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'f' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('3: search for "f"');
|
||||
|
||||
utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'q' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('4: search for "q"');
|
||||
});
|
||||
|
||||
it('should select the next and previous items within the search results', () => {
|
||||
const Foo = () => null;
|
||||
const Bar = () => null;
|
||||
const Baz = () => null;
|
||||
|
||||
utils.act(() =>
|
||||
ReactDOM.render(
|
||||
<React.Fragment>
|
||||
<Foo />
|
||||
<Baz />
|
||||
<Bar />
|
||||
<Baz />
|
||||
</React.Fragment>,
|
||||
document.createElement('div')
|
||||
)
|
||||
);
|
||||
|
||||
expect(store).toMatchSnapshot('0: mount');
|
||||
|
||||
let renderer;
|
||||
utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
|
||||
expect(state).toMatchSnapshot('1: initial state');
|
||||
|
||||
utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('2: search for "ba"');
|
||||
|
||||
utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('3: go to second result');
|
||||
|
||||
utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('4: go to third result');
|
||||
|
||||
utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('5: go to second result');
|
||||
|
||||
utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('6: go to first result');
|
||||
|
||||
utils.act(() => dispatch({ type: 'GO_TO_PREVIOUS_SEARCH_RESULT' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('7: wrap to last result');
|
||||
|
||||
utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('8: wrap to first result');
|
||||
});
|
||||
|
||||
it('should add newly mounted elements to the search results set if they match the current text', async done => {
|
||||
const Foo = () => null;
|
||||
const Bar = () => null;
|
||||
const Baz = () => null;
|
||||
|
||||
const container = document.createElement('div');
|
||||
|
||||
utils.act(() =>
|
||||
ReactDOM.render(
|
||||
<React.Fragment>
|
||||
<Foo />
|
||||
<Bar />
|
||||
</React.Fragment>,
|
||||
container
|
||||
)
|
||||
);
|
||||
|
||||
expect(store).toMatchSnapshot('0: mount');
|
||||
|
||||
let renderer;
|
||||
utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
|
||||
expect(state).toMatchSnapshot('1: initial state');
|
||||
|
||||
utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('2: search for "ba"');
|
||||
|
||||
await utils.actSuspense(() =>
|
||||
ReactDOM.render(
|
||||
<React.Fragment>
|
||||
<Foo />
|
||||
<Bar />
|
||||
<Baz />
|
||||
</React.Fragment>,
|
||||
container
|
||||
)
|
||||
);
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('3: mount Baz');
|
||||
|
||||
done();
|
||||
});
|
||||
|
||||
it('should remove unmounted elements from the search results set', async done => {
|
||||
const Foo = () => null;
|
||||
const Bar = () => null;
|
||||
const Baz = () => null;
|
||||
|
||||
const container = document.createElement('div');
|
||||
|
||||
utils.act(() =>
|
||||
ReactDOM.render(
|
||||
<React.Fragment>
|
||||
<Foo />
|
||||
<Bar />
|
||||
<Baz />
|
||||
</React.Fragment>,
|
||||
container
|
||||
)
|
||||
);
|
||||
|
||||
expect(store).toMatchSnapshot('0: mount');
|
||||
|
||||
let renderer;
|
||||
utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
|
||||
expect(state).toMatchSnapshot('1: initial state');
|
||||
|
||||
utils.act(() => dispatch({ type: 'SET_SEARCH_TEXT', payload: 'ba' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('2: search for "ba"');
|
||||
|
||||
utils.act(() => dispatch({ type: 'GO_TO_NEXT_SEARCH_RESULT' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('3: go to second result');
|
||||
|
||||
await utils.actSuspense(() =>
|
||||
ReactDOM.render(
|
||||
<React.Fragment>
|
||||
<Foo />
|
||||
<Bar />
|
||||
</React.Fragment>,
|
||||
container
|
||||
)
|
||||
);
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('4: unmount Baz');
|
||||
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
describe('owners state', () => {
|
||||
it('should support entering and existing the owners tree view', () => {
|
||||
const Grandparent = () => <Parent />;
|
||||
const Parent = () => (
|
||||
<React.Fragment>
|
||||
<Child />
|
||||
<Child />
|
||||
</React.Fragment>
|
||||
);
|
||||
const Child = () => null;
|
||||
|
||||
utils.act(() =>
|
||||
ReactDOM.render(<Grandparent />, document.createElement('div'))
|
||||
);
|
||||
|
||||
expect(store).toMatchSnapshot('0: mount');
|
||||
|
||||
let renderer;
|
||||
utils.act(() => (renderer = TestRenderer.create(<Contexts />)));
|
||||
expect(state).toMatchSnapshot('1: initial state');
|
||||
|
||||
let parentID = ((store.getElementIDAtIndex(1): any): number);
|
||||
utils.act(() => dispatch({ type: 'SELECT_OWNER', payload: parentID }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('2: parent owners tree');
|
||||
|
||||
utils.act(() => dispatch({ type: 'RESET_OWNER_STACK' }));
|
||||
utils.act(() => renderer.update(<Contexts />));
|
||||
expect(state).toMatchSnapshot('3: final state');
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -38,7 +38,7 @@ import Store from '../../store';
|
||||
|
||||
import type { Element } from './types';
|
||||
|
||||
type StateContext = {|
|
||||
export type StateContext = {|
|
||||
// Tree
|
||||
numElements: number,
|
||||
selectedElementID: number | null,
|
||||
@@ -117,7 +117,7 @@ type Action =
|
||||
| ACTION_SET_SEARCH_TEXT
|
||||
| ACTION_UPDATE_INSPECTED_ELEMENT_ID;
|
||||
|
||||
type DispatcherContext = (action: Action) => void;
|
||||
export type DispatcherContext = (action: Action) => void;
|
||||
|
||||
const TreeStateContext = createContext<StateContext>(
|
||||
((null: any): StateContext)
|
||||
|
||||
Reference in New Issue
Block a user