@@ -171,8 +171,16 @@ function mergeSessionState(state) {
171
171
} ;
172
172
}
173
173
174
+ function attachDivWithID ( id ) {
175
+ if ( document . getElementById ( id ) ) return ;
176
+ const div = document . createElement ( 'DIV' ) ;
177
+ div . id = id ;
178
+ document . body . appendChild ( div ) ;
179
+ }
180
+
174
181
describe ( 'NavigatorCard' , ( ) => {
175
182
beforeEach ( ( ) => {
183
+ document . body . innerHTML = '' ;
176
184
jest . clearAllMocks ( ) ;
177
185
// mock the position helper function, as its too difficult to mock the boundingClientRects
178
186
getChildPositionInScroller = jest . spyOn ( NavigatorCard . methods , 'getChildPositionInScroller' )
@@ -929,6 +937,7 @@ describe('NavigatorCard', () => {
929
937
} ) ;
930
938
931
939
it ( 'allows filtering the items, opening all items, that have matches in children' , async ( ) => {
940
+ attachDivWithID ( root0Child0 . uid ) ;
932
941
const wrapper = createWrapper ( ) ;
933
942
await flushPromises ( ) ;
934
943
// item is not scrolled to
@@ -959,6 +968,7 @@ describe('NavigatorCard', () => {
959
968
root0Child1GrandChild0 ,
960
969
root1 ,
961
970
] ;
971
+ attachDivWithID ( root0Child0 . uid ) ;
962
972
963
973
const wrapper = createWrapper ( {
964
974
propsData : {
@@ -980,6 +990,7 @@ describe('NavigatorCard', () => {
980
990
} ) ;
981
991
982
992
it ( 'renders all the children of a directly matched parent' , async ( ) => {
993
+ attachDivWithID ( root0Child0 . uid ) ;
983
994
const wrapper = createWrapper ( ) ;
984
995
const filter = wrapper . find ( FilterInput ) ;
985
996
await flushPromises ( ) ;
@@ -1007,6 +1018,7 @@ describe('NavigatorCard', () => {
1007
1018
} ) ;
1008
1019
1009
1020
it ( 'allows filtering the items using Tags, opening all items, that have matches in children' , async ( ) => {
1021
+ attachDivWithID ( root0Child0 . uid ) ;
1010
1022
const wrapper = createWrapper ( ) ;
1011
1023
await flushPromises ( ) ;
1012
1024
const filter = wrapper . find ( FilterInput ) ;
@@ -1024,6 +1036,7 @@ describe('NavigatorCard', () => {
1024
1036
} ) ;
1025
1037
1026
1038
it ( 'aliases `project` to `tutorial`, when filtering using tags' , async ( ) => {
1039
+ attachDivWithID ( root0Child0 . uid ) ;
1027
1040
const wrapper = createWrapper ( ) ;
1028
1041
const filter = wrapper . find ( FilterInput ) ;
1029
1042
await flushPromises ( ) ;
@@ -1038,6 +1051,7 @@ describe('NavigatorCard', () => {
1038
1051
} ) ;
1039
1052
1040
1053
it ( 'allows filtering the items with filter and Tags, opening all items, that have matches in children' , async ( ) => {
1054
+ attachDivWithID ( root0Child0 . uid ) ;
1041
1055
const wrapper = createWrapper ( ) ;
1042
1056
const filter = wrapper . find ( FilterInput ) ;
1043
1057
await flushPromises ( ) ;
@@ -1742,10 +1756,14 @@ describe('NavigatorCard', () => {
1742
1756
describe ( 'navigating' , ( ) => {
1743
1757
it ( 'changes the open item, when navigating across pages, keeping the previously open items' , async ( ) => {
1744
1758
// simulate navigating to the bottom most item.
1759
+ attachDivWithID ( root0Child0 . uid ) ;
1745
1760
const wrapper = createWrapper ( ) ;
1746
1761
await flushPromises ( ) ;
1762
+ // item is in viewport, no need to scroll to it
1763
+ expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenCalledTimes ( 0 ) ;
1747
1764
// simulate the new item is below the fold
1748
1765
getChildPositionInScroller . mockReturnValueOnce ( 1 ) ;
1766
+ attachDivWithID ( root0Child1GrandChild0 . uid ) ;
1749
1767
wrapper . setProps ( {
1750
1768
activePath : [
1751
1769
root0 . path ,
@@ -1754,6 +1772,7 @@ describe('NavigatorCard', () => {
1754
1772
] ,
1755
1773
} ) ;
1756
1774
await flushPromises ( ) ;
1775
+ expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenCalledTimes ( 1 ) ;
1757
1776
expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenLastCalledWith ( 3 ) ;
1758
1777
// assert all are open
1759
1778
const all = wrapper . findAll ( NavigatorCardItem ) ;
@@ -1786,13 +1805,15 @@ describe('NavigatorCard', () => {
1786
1805
// simulate the new item is above the scrollarea
1787
1806
getChildPositionInScroller . mockReturnValueOnce ( - 1 ) ;
1788
1807
// navigate to the top level sibling
1808
+ attachDivWithID ( root1 . uid ) ;
1789
1809
wrapper . setProps ( {
1790
1810
activePath : [
1791
1811
root1 . path ,
1792
1812
] ,
1793
1813
} ) ;
1794
1814
await flushPromises ( ) ;
1795
1815
// assert it scrolls to the item
1816
+ expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenCalledTimes ( 2 ) ;
1796
1817
expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenLastCalledWith ( 4 ) ;
1797
1818
// assert items are still open
1798
1819
expect ( all . at ( 0 ) . props ( ) ) . toMatchObject ( {
@@ -1828,13 +1849,18 @@ describe('NavigatorCard', () => {
1828
1849
} ) ;
1829
1850
1830
1851
it ( 'tracks current open item, from clicking child items, handling duplicate router changes on the way' , async ( ) => {
1852
+ attachDivWithID ( root0Child0 . uid ) ;
1831
1853
const wrapper = createWrapper ( ) ;
1832
1854
await flushPromises ( ) ;
1855
+ expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenCalledTimes ( 0 ) ;
1833
1856
let allItems = wrapper . findAll ( NavigatorCardItem ) ;
1834
1857
const targetChild = allItems . at ( 2 ) ;
1835
1858
expect ( targetChild . props ( 'item' ) ) . toEqual ( root0Child1 ) ;
1836
1859
// simulate the new item is below the fold
1837
1860
getChildPositionInScroller . mockReturnValueOnce ( 1 ) ;
1861
+ // add an element with the same ID as the one we are navigating to,
1862
+ // otherwise we won't scroll to it
1863
+ attachDivWithID ( root0Child1 . uid ) ;
1838
1864
// trigger a navigation
1839
1865
targetChild . vm . $emit ( 'navigate' , root0Child1 . uid ) ;
1840
1866
await wrapper . vm . $nextTick ( ) ;
@@ -2039,9 +2065,10 @@ describe('NavigatorCard', () => {
2039
2065
2040
2066
describe ( 'scroll to item' , ( ) => {
2041
2067
it ( 'resets the scroll position, if initiating a filter' , async ( ) => {
2042
- const wrapper = createWrapper ( ) ;
2068
+ attachDivWithID ( root0Child0 . uid ) ;
2043
2069
// simulate item is above the scrollarea
2044
2070
getChildPositionInScroller . mockReturnValueOnce ( 1 ) ;
2071
+ const wrapper = createWrapper ( ) ;
2045
2072
await flushPromises ( ) ;
2046
2073
expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenCalledTimes ( 1 ) ;
2047
2074
expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenLastCalledWith ( 1 ) ;
@@ -2055,43 +2082,45 @@ describe('NavigatorCard', () => {
2055
2082
expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenLastCalledWith ( 0 ) ;
2056
2083
} ) ;
2057
2084
2058
- it ( 'keeps the scroll position, if the item is already in the viewport, on navigation' , async ( ) => {
2085
+ it ( 'scrolls to item, if HIDE_DEPRECATED_TAG is picked' , async ( ) => {
2086
+ attachDivWithID ( root0Child0 . uid ) ;
2087
+ // simulate item is in viewport
2088
+ getChildPositionInScroller . mockReturnValueOnce ( 0 ) ;
2059
2089
const wrapper = createWrapper ( ) ;
2060
2090
await flushPromises ( ) ;
2061
2091
expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenCalledTimes ( 0 ) ;
2062
- wrapper . findAll ( NavigatorCardItem ) . at ( 2 ) . vm . $emit ( 'navigate' , root0Child1 . uid ) ;
2063
- await flushPromises ( ) ;
2064
- // make sure scrollToItem is not called, because active item is already in the viewport
2065
- expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenCalledTimes ( 0 ) ;
2066
- // simulate header scroll
2092
+ // simulate item is below the viewport
2067
2093
getChildPositionInScroller . mockReturnValueOnce ( 1 ) ;
2068
- wrapper . findAll ( NavigatorCardItem ) . at ( 2 ) . vm . $emit ( 'navigate' , root0Child0 . uid ) ;
2094
+ // add the "Hide Deprecated" tag
2095
+ wrapper . find ( FilterInput ) . vm . $emit ( 'update:selectedTags' , [ HIDE_DEPRECATED_TAG ] ) ;
2069
2096
await flushPromises ( ) ;
2070
- // make sure scrollToItem is not called, because active item is already in the viewport
2097
+ // assert current active item is still scrolled to
2071
2098
expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenCalledTimes ( 1 ) ;
2099
+ expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenLastCalledWith ( 1 ) ;
2072
2100
} ) ;
2073
2101
2074
- it ( 'scrolls to item, if outside of visible viewport, on page navigation' , async ( ) => {
2102
+ it ( 'keeps the scroll position, if the item is already in the viewport, on navigation' , async ( ) => {
2103
+ attachDivWithID ( root0Child0 . uid ) ;
2075
2104
const wrapper = createWrapper ( ) ;
2076
2105
await flushPromises ( ) ;
2106
+ // assert scrollToItem is not called, because its "in view"
2077
2107
expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenCalledTimes ( 0 ) ;
2078
- getChildPositionInScroller . mockReturnValueOnce ( - 1 ) ;
2079
- // scroll to the item
2108
+ attachDivWithID ( root0Child1 . uid ) ;
2080
2109
wrapper . findAll ( NavigatorCardItem ) . at ( 2 ) . vm . $emit ( 'navigate' , root0Child1 . uid ) ;
2081
2110
await flushPromises ( ) ;
2082
- // make sure scrollToItem is called
2083
- expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenCalledTimes ( 1 ) ;
2084
- // assert it was called for the 3-rd item
2085
- expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenLastCalledWith ( 2 ) ;
2086
- // assert scrolling beyond
2111
+ // make sure scrollToItem is not called again, because active item is still in the viewport
2112
+ expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenCalledTimes ( 0 ) ;
2113
+ // simulate item is below the fold and assert navigating to new place scrolls the item
2087
2114
getChildPositionInScroller . mockReturnValueOnce ( 1 ) ;
2088
- // scroll to the item
2089
- wrapper . findAll ( NavigatorCardItem ) . at ( 2 ) . vm . $emit ( 'navigate' , root0Child0 . uid ) ;
2115
+ // prepare
2116
+ attachDivWithID ( root0Child1GrandChild0 . uid ) ;
2117
+ // navigate
2118
+ wrapper . findAll ( NavigatorCardItem ) . at ( 2 ) . vm . $emit ( 'navigate' , root0Child1GrandChild0 . uid ) ;
2090
2119
await flushPromises ( ) ;
2091
- // make sure scrollToItem is called
2092
- expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenCalledTimes ( 2 ) ;
2093
- // assert it was called for the 3-rd item
2094
- expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenLastCalledWith ( 1 ) ;
2120
+ // assert scrollToItem is called, because item was under the fold
2121
+ expect ( RecycleScrollerStub . methods . scrollToItem ) . toHaveBeenCalledTimes ( 1 ) ;
2122
+ expect ( RecycleScrollerStub . methods . scrollToItem )
2123
+ . toHaveBeenLastCalledWith ( 3 ) ;
2095
2124
} ) ;
2096
2125
2097
2126
it ( 'scrolls to the focused item, if not visible' , async ( ) => {
0 commit comments