navigation-stack 0.3.0 → 0.4.0

package/test/scroll-position/withScrollableContainerAtIndexPage.js

@@ -0,0 +1,62 @@
+// 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 withScrollableContainerAtIndexPage(app) {
+  const container = document.createElement('div');
+  container.style.height = '100px';
+  container.style.width = '100px';
+  container.style.overflow = 'hidden';
+  document.body.appendChild(container);
+
+  let element;
+  let unregister;
+
+  // This will only be called once, so no need to guard.
+  function listen(listener) {
+    function shouldUpdatePageScrollPositionForLocation(
+      location,
+      prevLocation,
+    ) {
+      // Disable the automatic scroll restoration after a SHIFT, to check the
+      // scroll-on-register behavior.
+      if (prevLocation && location.operation === 'SHIFT') {
+        return false;
+      }
+
+      return true;
+    }
+
+    const unlisten = app.listen((location) => {
+      listener(location);
+
+      if (location.pathname === '/') {
+        element = document.createElement('div');
+        element.style.height = '20000px';
+        element.style.width = '20000px';
+        container.appendChild(element);
+
+        unregister = app.registerScrollableContainer('container', container, {
+          shouldUpdatePageScrollPositionForLocation,
+        });
+      } else {
+        container.removeChild(element);
+        unregister();
+      }
+    });
+
+    return () => {
+      unlisten();
+      document.body.removeChild(container);
+    };
+  }
+
+  return {
+    ...app,
+    container,
+    listen,
+  };
+}

package/test/session/InMemorySession.test.js

@@ -0,0 +1,348 @@
+import parseInputLocation from '../../src/parseInputLocation';
+import InMemorySession from '../../src/session/InMemorySession';
+
+describe('InMemorySession', () => {
+  it('should parse the initial location', () => {
+    const session = new InMemorySession();
+
+    let location;
+    session.subscribe((newLocation) => {
+      location = newLocation;
+    });
+
+    session.start(parseInputLocation('/initial?bar=baz#qux'));
+
+    expect(location).to.deep.include({
+      operation: 'INIT',
+      pathname: '/initial',
+      search: '?bar=baz',
+      query: {
+        bar: 'baz',
+      },
+      hash: '#qux',
+      index: 0,
+      delta: 0,
+    });
+
+    session.stop();
+  });
+
+  it('should support basic navigation', () => {
+    const session = new InMemorySession();
+
+    let location;
+    session.subscribe((newLocation) => {
+      location = newLocation;
+    });
+
+    const listener = sinon.spy();
+    session.subscribe(listener);
+
+    session.start(parseInputLocation('/initial'));
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.deep.include({
+      operation: 'INIT',
+      pathname: '/initial',
+      index: 0,
+      delta: 0,
+    });
+    listener.resetHistory();
+
+    session.navigate('PUSH', {
+      pathname: '/new',
+    });
+
+    const newLocation = location;
+
+    expect(newLocation).to.deep.include({
+      operation: 'PUSH',
+      pathname: '/new',
+      index: 1,
+      delta: 1,
+    });
+    expect(newLocation.key).not.to.be.empty();
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.deep.include({
+      operation: 'PUSH',
+      pathname: '/new',
+      index: 1,
+      delta: 1,
+    });
+    listener.resetHistory();
+
+    session.navigate('PUSH', { pathname: '/new-2' });
+
+    expect(location).to.include({
+      operation: 'PUSH',
+      pathname: '/new-2',
+      index: 2,
+      delta: 1,
+    });
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.deep.include({
+      operation: 'PUSH',
+      pathname: '/new-2',
+      index: 2,
+      delta: 1,
+    });
+    listener.resetHistory();
+
+    session.navigate('REPLACE', { pathname: '/new-3' });
+
+    expect(location).to.include({
+      operation: 'REPLACE',
+      pathname: '/new-3',
+      index: 2,
+      delta: 0,
+    });
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.deep.include({
+      operation: 'REPLACE',
+      pathname: '/new-3',
+      index: 2,
+      delta: 0,
+    });
+    listener.resetHistory();
+
+    session.shift(-1);
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.deep.include({
+      operation: 'SHIFT',
+      pathname: '/new',
+      key: newLocation.key,
+      index: 1,
+      delta: -1,
+    });
+    listener.resetHistory();
+
+    session.stop();
+  });
+
+  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' });
+
+    const listener = sinon.spy();
+    const unsubscribe = session.subscribe(listener);
+
+    session.shift(-1);
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.include({
+      operation: 'SHIFT',
+      pathname: '/new',
+    });
+    listener.resetHistory();
+
+    unsubscribe();
+
+    session.shift(-1);
+
+    expect(listener).not.to.have.been.called();
+
+    session.stop();
+  });
+
+  it('should respect stack bounds', () => {
+    const session = new InMemorySession();
+    session.start(parseInputLocation('/initial'));
+    session.navigate('PUSH', { pathname: '/new' });
+    session.navigate('PUSH', { pathname: '/new-2' });
+
+    const listener = sinon.spy();
+    session.subscribe(listener);
+
+    expect(() => {
+      session.shift(-390);
+    }).to.throw('out of navigation history bounds');
+
+    expect(listener).to.not.have.been.called();
+
+    session.shift(-2);
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.include({
+      operation: 'SHIFT',
+      pathname: '/initial',
+      delta: -2,
+    });
+    listener.resetHistory();
+
+    expect(() => {
+      session.shift(-1);
+    }).to.throw('out of navigation history bounds');
+
+    expect(listener).not.to.have.been.called();
+
+    expect(() => {
+      session.shift(+22);
+    }).to.throw('out of navigation history bounds');
+
+    session.shift(+2);
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.include({
+      operation: 'SHIFT',
+      pathname: '/new-2',
+      delta: 2,
+    });
+    listener.resetHistory();
+
+    expect(() => {
+      session.shift(+1);
+    }).to.throw('out of navigation history bounds');
+
+    expect(listener).not.to.have.been.called();
+
+    session.stop();
+  });
+
+  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.shift(-2);
+    session.navigate('REPLACE', { pathname: '/new-3' });
+
+    const listener = sinon.spy();
+    session.subscribe(listener);
+
+    session.shift(+1);
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.include({
+      operation: 'SHIFT',
+      pathname: '/new',
+      delta: 1,
+    });
+
+    session.stop();
+  });
+
+  it('should reset forward entries on push', () => {
+    const session = new InMemorySession();
+
+    session.start(parseInputLocation('/initial'));
+    session.navigate('PUSH', { pathname: '/new' });
+    session.navigate('PUSH', { pathname: '/new-2' });
+    session.shift(-2);
+    session.navigate('PUSH', { pathname: '/new-3' });
+
+    const listener = sinon.spy();
+    session.subscribe(listener);
+
+    expect(() => {
+      session.shift(+1);
+    }).to.throw('out of navigation history bounds');
+
+    expect(listener).not.to.have.been.called();
+
+    session.stop();
+  });
+
+  it('should remove all subscriptions on stop', () => {
+    const session = new InMemorySession();
+
+    session.start(parseInputLocation('/initial'));
+
+    // eslint-disable-next-line no-underscore-dangle
+    expect(session._subscription._listeners.length).to.equal(1);
+
+    const listener = sinon.spy();
+    session.subscribe(listener);
+
+    // eslint-disable-next-line no-underscore-dangle
+    expect(session._subscription._listeners.length).to.equal(2);
+
+    session.stop();
+
+    // eslint-disable-next-line no-underscore-dangle
+    expect(session._subscription._listeners.length).to.equal(0);
+  });
+
+  // describe('persistence', () => {
+  //   // beforeEach(() => {
+  //   //   window.sessionStorage.clear();
+  //   // });
+  //
+  //   it('should support persistence', () => {
+  //     // function save(key, data) {
+  //     //   window.sessionStorage.setItem(key, data);
+  //     // }
+  //     //
+  //     // function load(key) {
+  //     //   return window.sessionStorage.getItem(key);
+  //     // }
+  //
+  //     const storage = {};
+  //
+  //     const save = (key, data) => {
+  //       storage[key] = data;
+  //     };
+  //
+  //     const load = (key) => {
+  //       return storage[key];
+  //     };
+  //
+  //     const session1 = new InMemorySession({ save, load });
+  //     expect(session1.start(parseInputLocation('/initial))).to.include({
+  //       pathname: '/initial',
+  //     });
+  //
+  //     session1._navigation.navigate('PUSH', { pathname: '/new' });
+  //     session1._navigation.navigate('PUSH', { pathname: '/new-2' });
+  //     session1._navigation.shift(-1);
+  //
+  //     const session2 = new InMemorySession({ save, load });
+  //     expect(parseInputLocation(session2.start('/initial'))).to.include({
+  //       pathname: '/new',
+  //     });
+  //
+  //     session2._navigation.shift(+1);
+  //     expect(parseInputLocation(session2.start())).to.include({
+  //       pathname: '/new-2',
+  //     });
+  //     session1.stop();
+  //     session2.stop();
+  //   });
+  //
+  //   it('should ignore broken session storage entry', () => {
+  //     // function save(key, data) {
+  //     //   window.sessionStorage.setItem(key, data);
+  //     // }
+  //     //
+  //     // function load(key) {
+  //     //   return window.sessionStorage.getItem(key);
+  //     // }
+  //
+  //     const storage = {};
+  //
+  //     const save = (key, data) => {
+  //       storage[key] = data;
+  //     };
+  //
+  //     const load = (key) => {
+  //       return storage[key];
+  //     };
+  //
+  //     save(
+  //       // `stack` should have sufficient items so that the `index` wouldn't be out of bounds.
+  //       JSON.stringify({ stack: [], index: 2 }),
+  //     );
+  //
+  //     const session = new InMemorySession({ save, load });
+  //     expect(session.start(parseInputLocation('/initial'))).to.include({
+  //       pathname: '/initial',
+  //     });
+  //     session.stop();
+  //   });
+  // });
+});

package/test/session/ServerSession.test.js

@@ -1,11 +1,19 @@
-import ServerSession from '../../src/session/ServerSession';
+import parseInputLocation from '../../src/parseInputLocation';
+import ServerSideRenderSession from '../../src/session/ServerSideRenderSession';
 
-describe('ServerSession', () => {
+describe('ServerSideRenderSession', () => {
   it('should parse the initial location', () => {
-    const session = new ServerSession('/foo?bar=baz#qux');
+    const session = new ServerSideRenderSession();
 
-    expect(session.navigation.init()).to.deep.include({
-      action: 'INIT',
+    let location;
+    session.subscribe((newLocation) => {
+      location = newLocation;
+    });
+
+    session.start(parseInputLocation('/foo?bar=baz#qux'));
+
+    expect(location).to.deep.include({
+      operation: 'INIT',
       pathname: '/foo',
       search: '?bar=baz',
       query: {
@@ -15,9 +23,9 @@ describe('ServerSession', () => {
     });
   });
 
-  it('should have dummy support for subscriptions', () => {
-    const session = new ServerSession('/foo?bar=baz#qux');
-    const unsubscribe = session.navigation.subscribe();
-    expect(unsubscribe).to.not.throw();
+  it('should support subscriptions', () => {
+    const session = new ServerSideRenderSession();
+    // eslint-disable-next-line no-unused-vars
+    expect(() => session.subscribe((location) => {})).to.not.throw();
   });
 });

package/test/session/WebBrowserSession.test.js

@@ -0,0 +1,265 @@
+import delay from 'delay';
+
+import parseInputLocation from '../../src/parseInputLocation';
+import WebBrowserSession from '../../src/session/WebBrowserSession';
+
+describe('WebBrowserSession.stop()', () => {
+  const sandbox = sinon.createSandbox();
+
+  afterEach(() => {
+    // Even if a test errors, the spies should be removed, otherwise it'll say:
+    // "Attempted to wrap addEventListener which is already wrapped".
+    sandbox.restore();
+  });
+
+  it('should add and remove "popstate" event listener', () => {
+    sandbox.spy(window, 'addEventListener');
+    sandbox.spy(window, 'removeEventListener');
+
+    const session = new WebBrowserSession();
+
+    session.subscribe(() => {});
+
+    const listener = sinon.spy();
+
+    // This subscription won't be "unsubscribed" by the code.
+    // It is expected to be "unsubscribed" automatically on `session.stop()`
+    // and not hold off the clearing of `popstate` listener.
+    session.subscribe(listener);
+
+    session.start(window.location);
+    session.stop();
+
+    expect(window.addEventListener)
+      .to.have.been.calledOnce()
+      .and.to.have.been.called.with('popstate');
+
+    expect(window.removeEventListener)
+      .to.have.been.calledOnce()
+      .and.to.have.been.called.with('popstate');
+  });
+});
+
+describe('WebBrowserSession', () => {
+  let session;
+
+  afterEach(() => {
+    // Even if a test errors, the session should still be stopped
+    // in order to remove the "popstate" listener so that it doesn't
+    // interfere with other tests.
+    session.stop();
+  });
+
+  it('should parse the initial location', () => {
+    window.history.replaceState(null, null, '/initial?bar=baz#qux');
+    session = new WebBrowserSession();
+
+    let location;
+    session.subscribe((newLocation) => {
+      location = newLocation;
+    });
+
+    session.start(parseInputLocation(window.location));
+
+    expect(location).to.deep.include({
+      operation: 'INIT',
+      pathname: '/initial',
+      search: '?bar=baz',
+      query: {
+        bar: 'baz',
+      },
+      hash: '#qux',
+      index: 0,
+      delta: 0,
+    });
+  });
+
+  it('should require initialization', () => {
+    session = new WebBrowserSession();
+
+    expect(() =>
+      session.navigate('PUSH', {
+        pathname: '/new',
+        search: '?search',
+        hash: '#hash',
+      }),
+    ).to.throw('Not started');
+  });
+
+  it('should support basic navigation', async () => {
+    window.history.replaceState(null, null, '/initial');
+
+    session = new WebBrowserSession();
+
+    let location;
+    session.subscribe((newLocation) => {
+      location = newLocation;
+    });
+
+    const listener = sinon.spy();
+    session.subscribe(listener);
+
+    session.start(parseInputLocation(window.location));
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.deep.include({
+      operation: 'INIT',
+      pathname: '/initial',
+      index: 0,
+      delta: 0,
+    });
+    listener.resetHistory();
+
+    session.navigate('PUSH', {
+      pathname: '/new',
+      search: '?search',
+      hash: '#hash',
+    });
+
+    const newLocation = location;
+
+    expect(window.location).to.include({
+      pathname: '/new',
+      search: '?search',
+      hash: '#hash',
+    });
+    expect(newLocation).to.deep.include({
+      operation: 'PUSH',
+      pathname: '/new',
+      search: '?search',
+      hash: '#hash',
+      index: 1,
+      delta: 1,
+    });
+    expect(newLocation.key).not.to.be.empty();
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.deep.include({
+      operation: 'PUSH',
+      pathname: '/new',
+      index: 1,
+      delta: 1,
+    });
+    listener.resetHistory();
+
+    session.navigate('PUSH', {
+      pathname: '/new-2',
+      search: '',
+      hash: '',
+    });
+
+    expect(location).to.include({
+      operation: 'PUSH',
+      pathname: '/new-2',
+      index: 2,
+      delta: 1,
+    });
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.deep.include({
+      operation: 'PUSH',
+      pathname: '/new-2',
+      index: 2,
+      delta: 1,
+    });
+    listener.resetHistory();
+
+    expect(window.location.pathname).to.equal('/new-2');
+
+    session.navigate('REPLACE', {
+      pathname: '/new-3',
+      search: '',
+      hash: '',
+    });
+
+    expect(location).to.include({
+      operation: 'REPLACE',
+      pathname: '/new-3',
+      index: 2,
+      delta: 0,
+    });
+    await delay(20);
+
+    expect(window.location.pathname).to.equal('/new-3');
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.deep.include({
+      operation: 'REPLACE',
+      pathname: '/new-3',
+      index: 2,
+      delta: 0,
+    });
+    listener.resetHistory();
+
+    session.shift(-1);
+    await delay(20);
+
+    expect(window.location).to.include({
+      pathname: '/new',
+      search: '?search',
+      hash: '#hash',
+    });
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.deep.include({
+      operation: 'SHIFT',
+      pathname: '/new',
+      search: '?search',
+      hash: '#hash',
+      key: newLocation.key,
+      index: 1,
+      delta: -1,
+    });
+    listener.resetHistory();
+
+    window.history.back();
+    await delay(20);
+
+    expect(window.location.pathname).to.equal('/initial');
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.deep.include({
+      operation: 'SHIFT',
+      pathname: '/initial',
+      index: 0,
+      delta: -1,
+    });
+    listener.resetHistory();
+  });
+
+  it('should support subscribing and unsubscribing', async () => {
+    window.history.replaceState(null, null, '/');
+    session = new WebBrowserSession();
+    session.start(parseInputLocation(window.location));
+    session.navigate('PUSH', {
+      pathname: '/new',
+      search: '',
+      hash: '',
+    });
+    session.navigate('PUSH', {
+      pathname: '/new-2',
+      search: '',
+      hash: '',
+    });
+
+    const listener = sinon.spy();
+    const unsubscribe = session.subscribe(listener);
+
+    session.shift(-1);
+    await delay(20);
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.include({
+      operation: 'SHIFT',
+      pathname: '/new',
+    });
+    listener.resetHistory();
+
+    unsubscribe();
+
+    session.shift(-1);
+    await delay(20);
+
+    expect(listener).not.to.have.been.called();
+  });
+});