navigation-stack 0.4.0 → 0.5.0

package/test/scroll-position/ScrollPositionRestoration.test.js

@@ -2,12 +2,12 @@ import { offset, scrollLeft, scrollTop } from 'dom-helpers';
 import sinon from 'sinon';
 
 import addScrollableContainer from './addScrollableContainer';
-import addScrollableContainerWithHyperlink from './addScrollableContainerWithHyperlink';
+import addScrollableContainerWithAnchors from './addScrollableContainerWithAnchors';
 import createApp from './createApp';
 import delay from './delay';
 import { setEventListener, triggerEvent } from './mockPageLifecycle';
 import runApp from './runApp';
-import withScrollableContainerAtIndexPage from './withScrollableContainerAtIndexPage';
+import withScrollableContainerAtIndexPageWithDisabledAutomaticScrollPositionRestoration from './withScrollableContainerAtIndexPageWithDisabledAutomaticScrollPositionRestoration';
 import PageLifecycle from '../../src/session/lifecycle/page-lifecycle/PageLifecycleInstance';
 
 describe('ScrollPositionRestoration', () => {
@@ -59,13 +59,14 @@ describe('ScrollPositionRestoration', () => {
 
   describe('default behavior', () => {
     it('should emulate browser scroll behavior', (done) => {
-      const app = addScrollableContainerWithHyperlink(createApp());
+      const app = addScrollableContainerWithAnchors(createApp());
       const child1 = document.getElementById('child1');
       const child2 = document.getElementById('child2-id');
 
       unlisten = runApp(app, [
         () => {
-          // This will be ignored, but will exercise the throttle logic.
+          // This scroll will be ignored (overwritten by a subsequent scroll),
+          // but it will test the "throttle scroll events" code.
           scrollTop(window, 10000);
 
           setTimeout(() => {
@@ -113,7 +114,7 @@ describe('ScrollPositionRestoration', () => {
         configurable: true,
       });
 
-      const app = addScrollableContainerWithHyperlink(createApp());
+      const app = addScrollableContainerWithAnchors(createApp());
 
       unlisten = runApp(app, [
         () => {
@@ -130,7 +131,7 @@ describe('ScrollPositionRestoration', () => {
 
   describe('custom behavior', () => {
     it('should allow scroll suppression', (done) => {
-      const app = addScrollableContainerWithHyperlink(
+      const app = addScrollableContainerWithAnchors(
         createApp({
           shouldUpdatePageScrollPositionForLocation: (
             location,
@@ -167,7 +168,7 @@ describe('ScrollPositionRestoration', () => {
     });
 
     it('should ignore scroll events when `disableSavingScrollPosition()` is used', (done) => {
-      const app = addScrollableContainerWithHyperlink(createApp());
+      const app = addScrollableContainerWithAnchors(createApp());
 
       unlisten = runApp(app, [
         () => {
@@ -205,7 +206,7 @@ describe('ScrollPositionRestoration', () => {
     });
 
     it('should allow custom position', (done) => {
-      const app = addScrollableContainerWithHyperlink(
+      const app = addScrollableContainerWithAnchors(
         createApp({
           getPageScrollPositionForLocation: () => [10, 20],
         }),
@@ -230,47 +231,59 @@ describe('ScrollPositionRestoration', () => {
       ]);
     });
 
-    it('should save scroll position even if no scroll events are dispatched', (done) => {
-      let customInitialPageScrollPosition;
-
-      const app = addScrollableContainerWithHyperlink(
-        createApp({
-          // eslint-disable-next-line no-unused-vars
-          getPageScrollPositionForLocation(location, prevLocation) {
-            if (customInitialPageScrollPosition) {
-              return [10, 20];
-            }
-            return undefined;
-          },
-        }),
-      );
-
-      unlisten = runApp(app, [
-        () => {
-          app.goTo('/detail');
-        },
-        () => {
-          customInitialPageScrollPosition = [10, 20];
-          app.goTo('/');
-        },
-        () => {
-          customInitialPageScrollPosition = undefined;
-          app.goTo('/detail');
-        },
-        () => {
-          app.goBack();
-        },
-        () => {
-          // Here, it said "expected 9.966666221618652 to equal 10".
-          // Using `.to.be.closeTo()` here instead of `.to.equal()` to work around this browser issue.
-          expect(scrollLeft(window)).to.be.closeTo(10, 0.5);
-          // Here, it said "expected 19.933332443237305 to equal 20".
-          // Using `.to.be.closeTo()` here instead of `.to.equal()` to work around this browser issue.
-          expect(scrollTop(window)).to.be.closeTo(20, 0.5);
-          done();
-        },
-      ]);
-    });
+    // This test case was disabled because `ScrollPositionRestoration` doesn't save
+    // scroll position on page load. It only saves scroll position on actual scroll events.
+    // If there were no scroll events, the scroll position doesn't get saved.
+    // The rationale is that when there were no scroll events, the scroll position
+    // is gonna be either a default one or a custom one specified by passing a custom
+    // `getPageScrollPositionForLocation()` function. In the latter case, the custom
+    // `getPageScrollPositionForLocation()` function is responsible to return a correct scroll position
+    // every time it gets called rather than just return a correct scroll position once,
+    // save it immediately and then restore it when returning to the page.
+    //
+    // it('should save scroll position even if no scroll events are dispatched', (done) => {
+    //   let customInitialPageScrollPosition;
+    //
+    //   const app = addScrollableContainerWithAnchors(
+    //     createApp({
+    //       // eslint-disable-next-line no-unused-vars
+    //       getPageScrollPositionForLocation(location, prevLocation) {
+    //         // Only when navigated via `.goTo()`. Ignore `.goBack()` navigation.
+    //         if (prevLocation && location.index > prevLocation.index) {
+    //           return [10, 20];
+    //         }
+    //         return undefined;
+    //       },
+    //     }),
+    //   );
+    //
+    //   unlisten = runApp(app, [
+    //     () => {
+    //       app.goTo('/detail');
+    //     },
+    //     () => {
+    //       app.goTo('/');
+    //     },
+    //     () => {
+    //       app.goTo('/detail');
+    //     },
+    //     () => {
+    //       if (customInitialPageScrollPosition === 123) {
+    //         customInitialPageScrollPosition = 456;
+    //       }
+    //       app.goBack();
+    //     },
+    //     () => {
+    //       // Here, it said "expected 9.966666221618652 to equal 10".
+    //       // Using `.to.be.closeTo()` here instead of `.to.equal()` to work around this browser issue.
+    //       expect(scrollLeft(window)).to.be.closeTo(10, 0.5);
+    //       // Here, it said "expected 19.933332443237305 to equal 20".
+    //       // Using `.to.be.closeTo()` here instead of `.to.equal()` to work around this browser issue.
+    //       expect(scrollTop(window)).to.be.closeTo(20, 0.5);
+    //       done();
+    //     },
+    //   ]);
+    // });
   });
 
   describe('scrollable container', () => {
@@ -308,12 +321,13 @@ describe('ScrollPositionRestoration', () => {
       ]);
     });
 
-    it('should restore scroll on remount', (done) => {
-      const { container, ...app } = withScrollableContainerAtIndexPage(
-        createApp({
-          shouldUpdatePageScrollPositionForLocation: () => false,
-        }),
-      );
+    it('should automatically restore a previously-saved scroll position when adding a scrollable container', (done) => {
+      const { container, ...app } =
+        withScrollableContainerAtIndexPageWithDisabledAutomaticScrollPositionRestoration(
+          createApp({
+            shouldUpdatePageScrollPositionForLocation: () => false,
+          }),
+        );
 
       unlisten = runApp(app, [
         () => {
@@ -325,6 +339,8 @@ describe('ScrollPositionRestoration', () => {
         () => {
           expect(container.scrollHeight).to.equal(100);
           expect(scrollTop(container)).to.equal(0);
+          // This `scrollTop()` won't trigger a "scroll" event
+          // because the container height is only `100` so it's not scrollable.
           scrollTop(container, 5000);
           delay(() => {
             app.goBack();
@@ -357,6 +373,7 @@ describe('ScrollPositionRestoration', () => {
 
             const app2 = addScrollableContainer(
               createApp({
+                // Restore the data of the session of `app1`.
                 sessionKey: app1.getSessionKey(),
                 shouldUpdatePageScrollPositionForLocation: () => false,
               }),
@@ -377,7 +394,7 @@ describe('ScrollPositionRestoration', () => {
 
     it('should ignore scroll events when `disableSavingScrollPosition` is used', (done) => {
       const app = addScrollableContainer(
-        addScrollableContainerWithHyperlink(createApp()),
+        addScrollableContainerWithAnchors(createApp()),
       );
 
       unlisten = runApp(app, [

package/test/scroll-position/addScrollableContainer.js

@@ -16,14 +16,17 @@ export default function addScrollableContainer(app) {
   // Add the scrollable container to the website.
   document.body.appendChild(container);
 
-  // This function will only be called once, so no need to guard.
   function listen(listener) {
     const unlisten = app.listen(listener);
 
-    app.registerScrollableContainer('container', container);
+    const unregisterScrollableContainer = app.registerScrollableContainer(
+      'container',
+      container,
+    );
 
     return () => {
       unlisten();
+      unregisterScrollableContainer();
       document.body.removeChild(container);
     };
   }

package/test/scroll-position/{addScrollableContainerWithHyperlink.js → addScrollableContainerWithAnchors.js}

@@ -7,27 +7,33 @@
 // * When the current location is "/", the scrollable container size is 20000x20000.
 // * At any other location, the scrollable container size is 10000x10000.
 //
-export default function withRoutes(app) {
+export default function addScrollableContainerWithAnchors(app) {
   const container = document.createElement('div');
   document.body.appendChild(container);
 
   const child1 = document.createElement('div');
+  // In HTML, an "anchor" is matched either by `id` attribute value
+  // or by `name` attribute value.
   child1.id = 'child1';
   child1.style.height = '100px';
   container.appendChild(child1);
 
   const child2 = document.createElement('a');
   child2.id = 'child2-id';
+  // In HTML, an "anchor" is matched either by `id` attribute value
+  // or by `name` attribute value.
+  // Here, it tests the correctness of scrolling to an anchor called "child2".
+  // The `id` attribute value is different so that it doesn't interfere.
   child2.name = 'child2';
   child2.style.height = '100px';
   child2.appendChild(document.createTextNode('link'));
   container.appendChild(child2);
 
-  // This function will only be called once, so no need to guard.
   function listen(listener) {
     const unlisten = app.listen((location) => {
       listener(location);
 
+      // Scrollable container has different height on different pages.
       if (location.pathname === '/') {
         container.style.height = '20000px';
         container.style.width = '20000px';

package/test/scroll-position/createApp.js

@@ -10,6 +10,7 @@ export default function createApp({
 } = {}) {
   let currentLocation = null;
 
+  let locationRenderedListeners = [];
   let listeners = [];
   let scrollPositionRestoration = null;
   let navigationStack = null;
@@ -24,6 +25,22 @@ export default function createApp({
     });
 
     scrollPositionRestoration.locationRendered(location);
+
+    for (const locationRenderedListener of locationRenderedListeners) {
+      locationRenderedListener(location);
+    }
+  }
+
+  // Adds a "location rendered" listener.
+  function whenRenderedLocation(listener) {
+    locationRenderedListeners.push(listener);
+
+    // Returns a "remove listener" function.
+    return () => {
+      locationRenderedListeners = locationRenderedListeners.filter(
+        (_) => _ !== listener,
+      );
+    };
   }
 
   // Removes a "location change" event listener.
@@ -77,6 +94,8 @@ export default function createApp({
     return scrollPositionRestoration.addScrollableContainer(key, element, {
       _shouldUpdateScrollPositionForLocation:
         options && options.shouldUpdateScrollPositionForLocation,
+      _getScrollPositionForLocation:
+        options && options.getScrollPositionForLocation,
     });
   }
 
@@ -108,5 +127,6 @@ export default function createApp({
     disableSavingScrollPosition,
     enableSavingScrollPosition,
     getSessionKey: () => session.key,
+    whenRenderedLocation,
   };
 }

package/test/scroll-position/withScrollableContainerAtIndexPageWithDisabledAutomaticScrollPositionRestoration.js

@@ -0,0 +1,72 @@
+// Adds a 100x100 scrollable container on the website.
+//
+// * When the current location is "/", it renders a large amount of content
+//   (20000x20000 to be specific) inside the container, making it scrollable.
+//
+// * At any other location, it doesn't render anything in the container.
+//
+export default function withScrollableContainerAtIndexPageWithDisabledAutomaticScrollPositionRestoration(
+  app,
+) {
+  const container = document.createElement('div');
+  container.style.height = '100px';
+  container.style.width = '100px';
+  container.style.overflow = 'hidden';
+  document.body.appendChild(container);
+
+  let scrollableContainerContentElement;
+  let unregisterScrollableContainer;
+
+  function listen(listener) {
+    function shouldUpdateScrollableContainerScrollPositionForLocation(
+      location,
+      prevLocation,
+    ) {
+      // Disable the automatic scroll position restoration on "back" navigation
+      // to check that it automatically restores scroll position when calling
+      // `ScrollPositionRestoration.addScrollableContainer()` method.
+      if (prevLocation && location.index < prevLocation.index) {
+        return false;
+      }
+      return true;
+    }
+
+    app.whenRenderedLocation((location) => {
+      if (location.pathname === '/') {
+        unregisterScrollableContainer = app.registerScrollableContainer(
+          'container',
+          container,
+          {
+            shouldUpdateScrollPositionForLocation:
+              shouldUpdateScrollableContainerScrollPositionForLocation,
+          },
+        );
+      }
+    });
+
+    const unlisten = app.listen((location) => {
+      listener(location);
+
+      if (location.pathname === '/') {
+        scrollableContainerContentElement = document.createElement('div');
+        scrollableContainerContentElement.style.height = '20000px';
+        scrollableContainerContentElement.style.width = '20000px';
+        container.appendChild(scrollableContainerContentElement);
+      } else {
+        unregisterScrollableContainer();
+        container.removeChild(scrollableContainerContentElement);
+      }
+    });
+
+    return () => {
+      unlisten();
+      document.body.removeChild(container);
+    };
+  }
+
+  return {
+    ...app,
+    container,
+    listen,
+  };
+}

package/test/session/InMemorySession.test.js

@@ -13,7 +13,7 @@ describe('InMemorySession', () => {
     session.start(parseInputLocation('/initial?bar=baz#qux'));
 
     expect(location).to.deep.include({
-      operation: 'INIT',
+      operation: 'init',
       pathname: '/initial',
       search: '?bar=baz',
       query: {
@@ -42,21 +42,21 @@ describe('InMemorySession', () => {
 
     expect(listener).to.have.been.calledOnce();
     expect(listener.firstCall.args[0]).to.deep.include({
-      operation: 'INIT',
+      operation: 'init',
       pathname: '/initial',
       index: 0,
       delta: 0,
     });
     listener.resetHistory();
 
-    session.navigate('PUSH', {
+    session.navigate('push', {
       pathname: '/new',
     });
 
     const newLocation = location;
 
     expect(newLocation).to.deep.include({
-      operation: 'PUSH',
+      operation: 'push',
       pathname: '/new',
       index: 1,
       delta: 1,
@@ -65,17 +65,17 @@ describe('InMemorySession', () => {
 
     expect(listener).to.have.been.calledOnce();
     expect(listener.firstCall.args[0]).to.deep.include({
-      operation: 'PUSH',
+      operation: 'push',
       pathname: '/new',
       index: 1,
       delta: 1,
     });
     listener.resetHistory();
 
-    session.navigate('PUSH', { pathname: '/new-2' });
+    session.navigate('push', { pathname: '/new-2' });
 
     expect(location).to.include({
-      operation: 'PUSH',
+      operation: 'push',
       pathname: '/new-2',
       index: 2,
       delta: 1,
@@ -83,17 +83,17 @@ describe('InMemorySession', () => {
 
     expect(listener).to.have.been.calledOnce();
     expect(listener.firstCall.args[0]).to.deep.include({
-      operation: 'PUSH',
+      operation: 'push',
       pathname: '/new-2',
       index: 2,
       delta: 1,
     });
     listener.resetHistory();
 
-    session.navigate('REPLACE', { pathname: '/new-3' });
+    session.navigate('replace', { pathname: '/new-3' });
 
     expect(location).to.include({
-      operation: 'REPLACE',
+      operation: 'replace',
       pathname: '/new-3',
       index: 2,
       delta: 0,
@@ -101,7 +101,7 @@ describe('InMemorySession', () => {
 
     expect(listener).to.have.been.calledOnce();
     expect(listener.firstCall.args[0]).to.deep.include({
-      operation: 'REPLACE',
+      operation: 'replace',
       pathname: '/new-3',
       index: 2,
       delta: 0,
@@ -112,7 +112,7 @@ describe('InMemorySession', () => {
 
     expect(listener).to.have.been.calledOnce();
     expect(listener.firstCall.args[0]).to.deep.include({
-      operation: 'SHIFT',
+      operation: 'shift',
       pathname: '/new',
       key: newLocation.key,
       index: 1,
@@ -126,8 +126,8 @@ describe('InMemorySession', () => {
   it('should support subscribing and unsubscribing', () => {
     const session = new InMemorySession();
     session.start(parseInputLocation('/initial'));
-    session.navigate('PUSH', { pathname: '/new' });
-    session.navigate('PUSH', { pathname: '/new-2' });
+    session.navigate('push', { pathname: '/new' });
+    session.navigate('push', { pathname: '/new-2' });
 
     const listener = sinon.spy();
     const unsubscribe = session.subscribe(listener);
@@ -136,7 +136,7 @@ describe('InMemorySession', () => {
 
     expect(listener).to.have.been.calledOnce();
     expect(listener.firstCall.args[0]).to.include({
-      operation: 'SHIFT',
+      operation: 'shift',
       pathname: '/new',
     });
     listener.resetHistory();
@@ -153,8 +153,8 @@ describe('InMemorySession', () => {
   it('should respect stack bounds', () => {
     const session = new InMemorySession();
     session.start(parseInputLocation('/initial'));
-    session.navigate('PUSH', { pathname: '/new' });
-    session.navigate('PUSH', { pathname: '/new-2' });
+    session.navigate('push', { pathname: '/new' });
+    session.navigate('push', { pathname: '/new-2' });
 
     const listener = sinon.spy();
     session.subscribe(listener);
@@ -169,7 +169,7 @@ describe('InMemorySession', () => {
 
     expect(listener).to.have.been.calledOnce();
     expect(listener.firstCall.args[0]).to.include({
-      operation: 'SHIFT',
+      operation: 'shift',
       pathname: '/initial',
       delta: -2,
     });
@@ -189,7 +189,7 @@ describe('InMemorySession', () => {
 
     expect(listener).to.have.been.calledOnce();
     expect(listener.firstCall.args[0]).to.include({
-      operation: 'SHIFT',
+      operation: 'shift',
       pathname: '/new-2',
       delta: 2,
     });
@@ -207,10 +207,10 @@ describe('InMemorySession', () => {
   it('should not reset forward entries on replace', () => {
     const session = new InMemorySession();
     session.start(parseInputLocation('/initial'));
-    session.navigate('PUSH', { pathname: '/new' });
-    session.navigate('PUSH', { pathname: '/new-2' });
+    session.navigate('push', { pathname: '/new' });
+    session.navigate('push', { pathname: '/new-2' });
     session.shift(-2);
-    session.navigate('REPLACE', { pathname: '/new-3' });
+    session.navigate('replace', { pathname: '/new-3' });
 
     const listener = sinon.spy();
     session.subscribe(listener);
@@ -219,7 +219,7 @@ describe('InMemorySession', () => {
 
     expect(listener).to.have.been.calledOnce();
     expect(listener.firstCall.args[0]).to.include({
-      operation: 'SHIFT',
+      operation: 'shift',
       pathname: '/new',
       delta: 1,
     });
@@ -231,10 +231,10 @@ describe('InMemorySession', () => {
     const session = new InMemorySession();
 
     session.start(parseInputLocation('/initial'));
-    session.navigate('PUSH', { pathname: '/new' });
-    session.navigate('PUSH', { pathname: '/new-2' });
+    session.navigate('push', { pathname: '/new' });
+    session.navigate('push', { pathname: '/new-2' });
     session.shift(-2);
-    session.navigate('PUSH', { pathname: '/new-3' });
+    session.navigate('push', { pathname: '/new-3' });
 
     const listener = sinon.spy();
     session.subscribe(listener);
@@ -297,8 +297,8 @@ describe('InMemorySession', () => {
   //       pathname: '/initial',
   //     });
   //
-  //     session1._navigation.navigate('PUSH', { pathname: '/new' });
-  //     session1._navigation.navigate('PUSH', { pathname: '/new-2' });
+  //     session1._navigation.navigate('push', { pathname: '/new' });
+  //     session1._navigation.navigate('push', { pathname: '/new-2' });
   //     session1._navigation.shift(-1);
   //
   //     const session2 = new InMemorySession({ save, load });

package/test/session/ServerSession.test.js

@@ -13,7 +13,7 @@ describe('ServerSideRenderSession', () => {
     session.start(parseInputLocation('/foo?bar=baz#qux'));
 
     expect(location).to.deep.include({
-      operation: 'INIT',
+      operation: 'init',
       pathname: '/foo',
       search: '?bar=baz',
       query: {