navigation-stack 0.1.0

package/test/environment/BrowserEnvironment.test.js

@@ -0,0 +1,165 @@
+import delay from 'delay';
+
+import BrowserEnvironment from '../../src/environment/BrowserEnvironment';
+
+describe('BrowserEnvironment', () => {
+  beforeEach(() => {
+    window.history.replaceState(null, null, '/');
+  });
+
+  it('should parse the initial location', () => {
+    window.history.replaceState(null, null, '/foo?bar=baz#qux');
+    const environment = new BrowserEnvironment();
+
+    expect(environment.init()).to.eql({
+      action: 'POP',
+      pathname: '/foo',
+      search: '?bar=baz',
+      query: {
+        bar: 'baz',
+      },
+      hash: '#qux',
+      key: undefined,
+      index: 0,
+      delta: 0,
+      state: undefined,
+    });
+  });
+
+  it('should support basic navigation', async () => {
+    window.history.replaceState(null, null, '/foo');
+    const environment = new BrowserEnvironment();
+
+    const listener = sinon.spy();
+    environment.subscribe(listener);
+
+    const barLocation = environment.navigate({
+      action: 'PUSH',
+      pathname: '/bar',
+      search: '?search',
+      hash: '#hash',
+      state: { the: 'state' },
+    });
+
+    expect(window.location).to.include({
+      pathname: '/bar',
+      search: '?search',
+      hash: '#hash',
+    });
+    expect(barLocation).to.deep.include({
+      action: 'PUSH',
+      pathname: '/bar',
+      search: '?search',
+      hash: '#hash',
+      index: 1,
+      delta: 1,
+      state: { the: 'state' },
+    });
+    expect(barLocation.key).not.to.be.empty();
+
+    expect(
+      environment.navigate({
+        action: 'PUSH',
+        pathname: '/baz',
+        search: '',
+        hash: '',
+      }),
+    ).to.include({
+      action: 'PUSH',
+      pathname: '/baz',
+      index: 2,
+      delta: 1,
+    });
+
+    expect(window.location.pathname).to.equal('/baz');
+
+    expect(
+      environment.navigate({
+        action: 'REPLACE',
+        pathname: '/qux',
+        search: '',
+        hash: '',
+      }),
+    ).to.include({
+      action: 'REPLACE',
+      pathname: '/qux',
+      index: 2,
+      delta: 0,
+    });
+    await delay(20);
+
+    expect(window.location.pathname).to.equal('/qux');
+    expect(listener).not.to.have.been.called();
+
+    environment.shift(-1);
+    await delay(20);
+
+    expect(window.location).to.include({
+      pathname: '/bar',
+      search: '?search',
+      hash: '#hash',
+    });
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.deep.include({
+      action: 'POP',
+      pathname: '/bar',
+      search: '?search',
+      hash: '#hash',
+      key: barLocation.key,
+      index: 1,
+      delta: -1,
+      state: { the: 'state' },
+    });
+    listener.resetHistory();
+
+    window.history.back();
+    await delay(20);
+
+    expect(window.location.pathname).to.equal('/foo');
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.deep.include({
+      action: 'POP',
+      pathname: '/foo',
+      index: 0,
+      delta: -1,
+      state: undefined,
+    });
+    listener.resetHistory();
+  });
+
+  it('should support subscribing and unsubscribing', async () => {
+    const environment = new BrowserEnvironment();
+    environment.navigate({
+      action: 'PUSH',
+      pathname: '/bar',
+      search: '',
+      hash: '',
+    });
+    environment.navigate({
+      action: 'PUSH',
+      pathname: '/baz',
+      search: '',
+      hash: '',
+    });
+
+    const listener = sinon.spy();
+    const unsubscribe = environment.subscribe(listener);
+
+    environment.shift(-1);
+    await delay(20);
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.include({
+      action: 'POP',
+      pathname: '/bar',
+    });
+    listener.resetHistory();
+
+    unsubscribe();
+
+    environment.shift(-1);
+    await delay(20);
+
+    expect(listener).not.to.have.been.called();
+  });
+});

package/test/environment/MemoryEnvironment.test.js

@@ -0,0 +1,218 @@
+import MemoryEnvironment from '../../src/environment/MemoryEnvironment';
+
+const STATE_KEY = '@@navigation-stack/environment-state';
+
+function save(state) {
+  window.sessionStorage.setItem(STATE_KEY, state);
+}
+
+function load() {
+  return window.sessionStorage.getItem(STATE_KEY);
+}
+
+describe('MemoryEnvironment', () => {
+  it('should parse the initial location', () => {
+    const environment = new MemoryEnvironment('/foo?bar=baz#qux');
+
+    expect(environment.init()).to.eql({
+      action: 'POP',
+      pathname: '/foo',
+      search: '?bar=baz',
+      query: {
+        bar: 'baz',
+      },
+      hash: '#qux',
+      index: 0,
+      delta: 0,
+    });
+  });
+
+  it('should support basic navigation', () => {
+    const environment = new MemoryEnvironment('/foo');
+
+    const listener = sinon.spy();
+    environment.subscribe(listener);
+
+    const barLocation = environment.navigate({
+      action: 'PUSH',
+      pathname: '/bar',
+      state: { the: 'state' },
+    });
+
+    expect(barLocation).to.deep.include({
+      action: 'PUSH',
+      pathname: '/bar',
+      index: 1,
+      delta: 1,
+      state: { the: 'state' },
+    });
+    expect(barLocation.key).not.to.be.empty();
+
+    expect(
+      environment.navigate({ action: 'PUSH', pathname: '/baz' }),
+    ).to.include({
+      action: 'PUSH',
+      pathname: '/baz',
+      index: 2,
+      delta: 1,
+    });
+
+    expect(
+      environment.navigate({ action: 'REPLACE', pathname: '/qux' }),
+    ).to.include({
+      action: 'REPLACE',
+      pathname: '/qux',
+      index: 2,
+      delta: 0,
+    });
+
+    expect(listener).not.to.have.been.called();
+
+    environment.shift(-1);
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.deep.include({
+      action: 'POP',
+      pathname: '/bar',
+      key: barLocation.key,
+      index: 1,
+      delta: -1,
+      state: { the: 'state' },
+    });
+  });
+
+  it('should support subscribing and unsubscribing', () => {
+    const environment = new MemoryEnvironment('/foo');
+    environment.navigate({ action: 'PUSH', pathname: '/bar' });
+    environment.navigate({ action: 'PUSH', pathname: '/baz' });
+
+    const listener = sinon.spy();
+    const unsubscribe = environment.subscribe(listener);
+
+    environment.shift(-1);
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.include({
+      action: 'POP',
+      pathname: '/bar',
+    });
+    listener.resetHistory();
+
+    unsubscribe();
+
+    environment.shift(-1);
+
+    expect(listener).not.to.have.been.called();
+  });
+
+  it('should respect stack bounds', () => {
+    const environment = new MemoryEnvironment('/foo');
+    environment.navigate({ action: 'PUSH', pathname: '/bar' });
+    environment.navigate({ action: 'PUSH', pathname: '/baz' });
+
+    const listener = sinon.spy();
+    environment.subscribe(listener);
+
+    environment.shift(-390);
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.include({
+      action: 'POP',
+      pathname: '/foo',
+      delta: -2,
+    });
+    listener.resetHistory();
+
+    environment.shift(-1);
+
+    expect(listener).not.to.have.been.called();
+
+    environment.shift(+22);
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.include({
+      action: 'POP',
+      pathname: '/baz',
+      delta: 2,
+    });
+    listener.resetHistory();
+
+    environment.shift(+1);
+
+    expect(listener).not.to.have.been.called();
+  });
+
+  it('should reset forward entries on push', () => {
+    const environment = new MemoryEnvironment('/foo');
+    environment.navigate({ action: 'PUSH', pathname: '/bar' });
+    environment.navigate({ action: 'PUSH', pathname: '/baz' });
+    environment.shift(-2);
+    environment.navigate({ action: 'REPLACE', pathname: '/qux' });
+
+    const listener = sinon.spy();
+    environment.subscribe(listener);
+
+    environment.shift(+1);
+
+    expect(listener).to.have.been.calledOnce();
+    expect(listener.firstCall.args[0]).to.include({
+      action: 'POP',
+      pathname: '/bar',
+      delta: 1,
+    });
+  });
+
+  it('should not reset forward entries on replace', () => {
+    const environment = new MemoryEnvironment('/foo');
+    environment.navigate({ action: 'PUSH', pathname: '/bar' });
+    environment.navigate({ action: 'PUSH', pathname: '/baz' });
+    environment.shift(-2);
+    environment.navigate({ action: 'PUSH', pathname: '/qux' });
+
+    const listener = sinon.spy();
+    environment.subscribe(listener);
+
+    environment.shift(+1);
+
+    expect(listener).not.to.have.been.called();
+  });
+
+  describe('persistence', () => {
+    beforeEach(() => {
+      window.sessionStorage.clear();
+    });
+
+    it('should support persistence', () => {
+      const environment1 = new MemoryEnvironment('/foo', { save, load });
+      expect(environment1.init()).to.include({
+        pathname: '/foo',
+      });
+
+      environment1.navigate({ action: 'PUSH', pathname: '/bar' });
+      environment1.navigate({ action: 'PUSH', pathname: '/baz' });
+      environment1.shift(-1);
+
+      const environment2 = new MemoryEnvironment('/foo', { save, load });
+      expect(environment2.init()).to.include({
+        pathname: '/bar',
+      });
+
+      environment2.shift(+1);
+      expect(environment2.init()).to.include({
+        pathname: '/baz',
+      });
+    });
+
+    it('should ignore broken session storage entry', () => {
+      sessionStorage.setItem(
+        '@@navigation-stack/state',
+        JSON.stringify({ stack: [], index: 2 }),
+      );
+
+      const environment = new MemoryEnvironment('/foo', { save, load });
+      expect(environment.init()).to.include({
+        pathname: '/foo',
+      });
+    });
+  });
+});

package/test/environment/ServerEnvironment.test.js

@@ -0,0 +1,23 @@
+import ServerEnvironment from '../../src/environment/ServerEnvironment';
+
+describe('ServerEnvironment', () => {
+  it('should parse the initial location', () => {
+    const environment = new ServerEnvironment('/foo?bar=baz#qux');
+
+    expect(environment.init()).to.eql({
+      action: 'POP',
+      pathname: '/foo',
+      search: '?bar=baz',
+      query: {
+        bar: 'baz',
+      },
+      hash: '#qux',
+    });
+  });
+
+  it('should have dummy support for subscriptions', () => {
+    const environment = new ServerEnvironment('/foo?bar=baz#qux');
+    const unsubscribe = environment.subscribe();
+    expect(unsubscribe).to.not.throw();
+  });
+});

package/test/getLocationUrl.test.js

@@ -0,0 +1,33 @@
+import getLocationUrl from '../src/getLocationUrl';
+
+describe('getLocationUrl', () => {
+  it('should get location URL (`pathname`, `search`, and `hash`)', () => {
+    expect(
+      getLocationUrl({
+        pathname: '/foo',
+        search: '?bar=baz',
+        hash: '#qux',
+      }),
+    ).to.equal('/foo?bar=baz#qux');
+  });
+
+  it('should get location URL (no `search` but with `query`)', () => {
+    expect(
+      getLocationUrl({
+        pathname: '/foo',
+        query: {
+          bar: 'baz',
+        },
+        hash: '#qux',
+      }),
+    ).to.equal('/foo?bar=baz#qux');
+  });
+
+  it('should get location URL (just `pathname`)', () => {
+    expect(
+      getLocationUrl({
+        pathname: '/foo',
+      }),
+    ).to.equal('/foo');
+  });
+});

package/test/helpers.js

@@ -0,0 +1,34 @@
+import ActionTypes from '../src/ActionTypes';
+
+export function shouldWarn(about) {
+  console.warn.expected.push(about); // eslint-disable-line no-console
+}
+
+export function invokeLocationMiddleware(middleware, action) {
+  let result;
+
+  function next(nextAction) {
+    result = nextAction;
+  }
+
+  middleware()(next)(action);
+
+  return result;
+}
+
+export function transformInputLocationUsingMiddleware(middleware, location) {
+  return invokeLocationMiddleware(middleware, {
+    type: ActionTypes.NAVIGATE,
+    payload: location,
+  }).payload;
+}
+
+export function transformEnvironmentLocationUsingMiddleware(
+  middleware,
+  location,
+) {
+  return invokeLocationMiddleware(middleware, {
+    type: ActionTypes.UPDATE,
+    payload: location,
+  }).payload;
+}

package/test/index.js

@@ -0,0 +1,44 @@
+import dirtyChai from 'dirty-chai';
+
+global.chai.use(dirtyChai);
+
+// const testsContext = import.meta.webpackContext('.', true, /\.test\.js$/);
+const testsContext = require.context('.', true, /\.test\.js$/);
+testsContext.keys().forEach(testsContext);
+
+beforeEach(() => {
+  /* eslint-disable no-console */
+  sinon.stub(console, 'warn').callsFake((message) => {
+    let expected = false;
+
+    console.warn.expected.forEach((about) => {
+      if (message.includes(about)) {
+        console.warn.warned[about] = true;
+        expected = true;
+      }
+    });
+
+    if (expected) {
+      return;
+    }
+
+    console.warn.threw = true;
+    throw new Error(message);
+  });
+
+  console.warn.expected = [];
+  console.warn.warned = Object.create(null);
+  console.warn.threw = false;
+  /* eslint-enable no-console */
+});
+
+afterEach(() => {
+  /* eslint-disable no-console */
+  const { expected, warned, threw } = console.warn;
+  console.warn.restore();
+
+  if (!threw && expected.length) {
+    expect(warned).to.have.keys(expected);
+  }
+  /* eslint-enable no-console */
+});

package/test/index.test.js

@@ -0,0 +1,20 @@
+import * as exports from '../src';
+
+describe('index', () => {
+  it('should export top level correctly', () => {
+    expect(exports.Actions).to.exist();
+    expect(exports.ActionTypes).to.exist();
+    expect(exports.addBasePath).to.exist();
+    expect(exports.removeBasePath).to.exist();
+    expect(exports.getLocationUrl).to.exist();
+    expect(exports.parseLocationUrl).to.exist();
+    expect(exports.addNavigationBlocker).to.exist();
+    expect(exports.getLocationUrl).to.exist();
+    expect(exports.parseLocationUrl).to.exist();
+    expect(exports.createMiddlewares).to.exist();
+    expect(exports.locationReducer).to.exist();
+    expect(exports.BrowserEnvironment).to.exist();
+    expect(exports.MemoryEnvironment).to.exist();
+    expect(exports.ServerEnvironment).to.exist();
+  });
+});

package/test/locationReducer.test.js

@@ -0,0 +1,42 @@
+import ActionTypes from '../src/ActionTypes';
+import locationReducer from '../src/locationReducer';
+
+describe('locationReducer', () => {
+  const prevState = {
+    action: 'PUSH',
+    delta: 1,
+    hash: '',
+    index: 5,
+    key: 'h0j8qq:4',
+    pathname: '/new/path',
+    query: {},
+    search: '',
+  };
+
+  it('should handle UPDATE', () => {
+    const newLocation = {
+      action: 'PUSH',
+      delta: 1,
+      hash: '#qux',
+      index: 6,
+      key: 'h0j8qq:5',
+      pathname: '/foo',
+      query: {
+        bar: 'baz',
+      },
+      search: '?bar=baz',
+    };
+    const action = {
+      type: ActionTypes.UPDATE,
+      payload: newLocation,
+    };
+    expect(locationReducer(prevState, action)).to.eql(newLocation);
+  });
+
+  it('should not handle unknown action', () => {
+    const unknownAction = {
+      type: 'UNKNOWN',
+    };
+    expect(locationReducer(prevState, unknownAction)).to.equal(prevState);
+  });
+});

package/test/middleware/createBasePathMiddleware.test.js

@@ -0,0 +1,67 @@
+import createBasePathMiddleware from '../../src/middleware/createBasePathMiddleware';
+import {
+  transformEnvironmentLocationUsingMiddleware,
+  transformInputLocationUsingMiddleware,
+} from '../helpers';
+
+describe('createBasePathMiddleware', () => {
+  [
+    ['/foo', 'generic `basePath`'],
+    ['/foo/', '`basePath` with a trailing slash'],
+  ].forEach(([basePath, title]) => {
+    describe(title, () => {
+      const basePathMiddleware = createBasePathMiddleware(basePath);
+
+      it('should prepend `basePath` to `location.pathname` on input locations', () => {
+        expect(
+          transformInputLocationUsingMiddleware(basePathMiddleware, {
+            pathname: '/path',
+          }),
+        ).to.eql({
+          pathname: '/foo/path',
+        });
+      });
+
+      it('should strip `basePath` from `location.pathname` on environment locations', () => {
+        expect(
+          transformEnvironmentLocationUsingMiddleware(basePathMiddleware, {
+            pathname: '/foo/path',
+          }),
+        ).to.eql({
+          pathname: '/path',
+        });
+      });
+
+      it('should handle unrecognized paths on environment locations', () => {
+        expect(
+          transformEnvironmentLocationUsingMiddleware(basePathMiddleware, {
+            pathname: '/bar/path',
+          }),
+        ).to.eql({
+          pathname: '/bar/path',
+        });
+      });
+    });
+  });
+
+  describe('No `basePath` specified', () => {
+    const basePathMiddleware = createBasePathMiddleware('/');
+
+    it('should not modify `location.pathname` of input locations', () => {
+      const location = { pathname: '/path' };
+      expect(
+        transformInputLocationUsingMiddleware(basePathMiddleware, location),
+      ).to.equal(location);
+    });
+
+    it('should not modify `location.pathname` of environment locations', () => {
+      const location = { pathname: '/path' };
+      expect(
+        transformEnvironmentLocationUsingMiddleware(
+          basePathMiddleware,
+          location,
+        ),
+      ).to.equal(location);
+    });
+  });
+});