version(s) uplift

.babelrc

@@ -1,9 +1,3 @@
 {
-  "presets": ["env", "react", "stage-0"],
-  "plugins": ["transform-do-expressions"],
-  "env": {
-    "development/client": {
-      "presets": ["react-hmre"]
-    }
-  }
+  "presets": ["amex"]
 }

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "amex"
+}

.github/workflows/tests.yml

@@ -0,0 +1,35 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - main
+  pull_request:
+
+jobs:
+  tests:
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node: ['12.x']
+    name: Node ${{ matrix.node }}
+    steps:
+    - name: Checkout
+      uses: actions/checkout@v2
+      with:
+        fetch-depth: 0
+        persist-credentials: false
+        ref: ${{ github.event.pull_request.head.sha }}
+    - run: |
+        git remote set-branches --add origin main
+        git fetch
+    - name: Setup Node
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node }}
+    - name: Install Dependencies
+      run: yarn
+      env:
+        NODE_ENV: development
+    - name: Run Tests
+      run: yarn run test

README.md

@@ -129,6 +129,7 @@ A higher order component that adds [`context.wizard`](#contextwizard) as a `wiza
 * `step` (object): Describes the current step with structure: `{ id: string }`.
 * `steps` (array): Array of `step` objects in the order they were declared within `<Steps>`.
 * `history` (object): The backing [`history`](https://github.com/ReactTraining/history#properties) object.
+* `preserveQuery` (boolean): Whether or not to preserve the query string when navigating between steps.
 * `next()` (function): Moves to the next step in order.
 * `previous()` (function): Moves to the previous step in order.
 * `go(n)` (function): Moves `n` steps in history.
@@ -145,13 +146,15 @@ import React from 'react';
 import { Route } from 'react-router-dom';
 import { Wizard } from 'react-albus';
 
-const RoutedWizard = ({ children }) =>
+const RoutedWizard = ({ children }) => (
   <Route
-    render={({ history, match: { url } }) =>
+    render={({ history, match: { url } }) => (
       <Wizard history={history} basename={url}>
         {children}
-      </Wizard>}
-  />;
+      </Wizard>
+    )}
+  />
+);
 
 export default RoutedWizard;
 ```

__tests__/.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": "amex/test"
+}

__tests__/__snapshots__/wizardShape.spec.jsx.snap → __tests__/__snapshots__/wizardShape.spec.js.snap

@@ -4,7 +4,7 @@ exports[`wizardShape exports the correct shape 1`] = `
 Object {
   "isRequired": Object {
     "go": "squawk",
-    "history": "squawk",
+    "history": Object {},
     "next": "squawk",
     "previous": "squawk",
     "push": "squawk",

__tests__/components/Step.spec.jsx → __tests__/components/Step.spec.js

@@ -33,7 +33,7 @@ describe('Step', () => {
   it('should pass wizard to function as child', () => {
     shallow(
       <Step>
-        {wizard => {
+        {(wizard) => {
           expect(wizard).toEqual(context.wizard);
         }}
       </Step>,
@@ -44,7 +44,7 @@ describe('Step', () => {
   it('should pass wizard to render prop', () => {
     shallow(
       <Step
-        render={wizard => {
+        render={(wizard) => {
           expect(wizard).toEqual(context.wizard);
         }}
       />,

__tests__/components/WithWizard.spec.jsx → __tests__/components/WithWizard.spec.js

@@ -33,7 +33,7 @@ describe('WithWizard', () => {
   it('should pass wizard to function as child', () => {
     shallow(
       <WithWizard>
-        {wizard => {
+        {(wizard) => {
           expect(wizard).toEqual(context.wizard);
         }}
       </WithWizard>,
@@ -44,7 +44,7 @@ describe('WithWizard', () => {
   it('should pass wizard to render prop', () => {
     shallow(
       <WithWizard
-        render={wizard => {
+        render={(wizard) => {
           expect(wizard).toEqual(context.wizard);
         }}
       />,

__tests__/components/Wizard.spec.jsx → __tests__/components/Wizard.spec.js

@@ -15,7 +15,9 @@
 import React from 'react';
 import { mount } from 'enzyme';
 
-import { Wizard, Steps, Step, WithWizard } from '../../src';
+import {
+  Wizard, Steps, Step, WithWizard,
+} from '../../src';
 
 describe('Wizard', () => {
   describe('with no props', () => {
@@ -25,7 +27,7 @@ describe('Wizard', () => {
       mounted = mount(
         <Wizard>
           <WithWizard>
-            {prop => {
+            {(prop) => {
               wizard = prop;
               return null;
             }}
@@ -93,7 +95,7 @@ describe('Wizard', () => {
       mounted = mount(
         <Wizard onNext={onNext}>
           <WithWizard>
-            {prop => {
+            {(prop) => {
               wizard = prop;
               return null;
             }}
@@ -137,7 +139,7 @@ describe('Wizard', () => {
       mounted = mount(
         <Wizard history={history}>
           <WithWizard>
-            {prop => {
+            {(prop) => {
               wizard = prop;
               return null;
             }}
@@ -178,7 +180,7 @@ describe('Wizard', () => {
       mounted = mount(
         <Wizard history={history} exactMatch={false}>
           <WithWizard>
-            {prop => {
+            {(prop) => {
               wizard = prop;
               return null;
             }}
@@ -203,4 +205,127 @@ describe('Wizard', () => {
       mounted.unmount();
     });
   });
+
+  describe('with existing history and preserving search params', () => {
+    let wizard;
+    let mounted;
+
+    const mockReplace = jest.fn();
+    const mockPush = jest.fn();
+
+    beforeEach(() => {
+      jest.clearAllMocks();
+    });
+
+    describe('initially at /gryffindor with ?foo=bar', () => {
+      const history = {
+        replace: mockReplace,
+        listen: () => () => null,
+        location: {
+          pathname: '/gryffindor',
+          search: '?foo=bar',
+        },
+      };
+
+      beforeEach(() => {
+        mounted = mount(
+          <Wizard history={history} preserveQuery={true}>
+            <WithWizard>
+              {(prop) => {
+                wizard = prop;
+                return null;
+              }}
+            </WithWizard>
+            <Steps>
+              <Step id="gryffindor">
+                <div />
+              </Step>
+              <Step id="slytherin">
+                <div />
+              </Step>
+              <Step id="hufflepuff">
+                <div />
+              </Step>
+            </Steps>
+          </Wizard>
+        );
+      });
+
+      it('should preserve query when calling next', () => {
+        wizard.history.push = mockPush;
+        wizard.next();
+        expect(mockPush).toBeCalledWith('/slytherin');
+      });
+
+      it('should preserve query when calling replace', () => {
+        wizard.replace('hufflepuff');
+        expect(mockReplace).toBeCalledWith('/hufflepuff');
+      });
+
+      it('should produce the correct URL string when preserving search params', () => {
+        wizard.replace('hufflepuff');
+        const callArgs = mockReplace.mock.calls[0][0];
+        expect(callArgs).toBe('/hufflepuff');
+      });
+
+      it('should not add search params if none existed initially when calling push', () => {
+        wizard.history.push = mockPush;
+        history.location.search = '';
+        wizard.push('hufflepuff');
+        expect(mockPush).toBeCalledWith('/hufflepuff');
+      });
+    });
+
+    describe('initially at /slytherin with ?quidditch=true', () => {
+      const history = {
+        replace: mockReplace,
+        listen: () => () => null,
+        location: {
+          pathname: '/slytherin',
+          search: '?quidditch=true',
+        },
+      };
+
+      beforeEach(() => {
+        mounted = mount(
+          <Wizard history={history} preserveQuery={true}>
+            <WithWizard>
+              {(prop) => {
+                wizard = prop;
+                return null;
+              }}
+            </WithWizard>
+            <Steps>
+              <Step id="gryffindor">
+                <div />
+              </Step>
+              <Step id="slytherin">
+                <div />
+              </Step>
+              <Step id="hufflepuff">
+                <div />
+              </Step>
+            </Steps>
+          </Wizard>
+        );
+      });
+
+      it('should preserve query when calling next', () => {
+        wizard.history.push = jest.fn();
+        wizard.next();
+        expect(wizard.history.push).toBeCalledWith('/hufflepuff');
+      });
+
+      it('should produce the correct URL string when preserving search params', () => {
+        wizard.replace('gryffindor');
+        const callArgs = mockReplace.mock.calls[0][0];
+        // const actualURL = `${callArgs.pathname}${callArgs.search}`;
+        expect(callArgs).toBe('/gryffindor');
+      });
+    });
+
+    afterEach(() => {
+      mounted.unmount();
+    });
+  });
 });

__tests__/wizardShape.spec.jsx → __tests__/wizardShape.spec.js

@@ -15,8 +15,8 @@
 import { wizardShape } from '../src';
 
 jest.mock('prop-types', () => ({
-  shape: shape => ({ isRequired: shape }),
-  arrayOf: item => ({ isRequired: item }),
+  shape: (shape) => ({ isRequired: shape }),
+  arrayOf: (item) => ({ isRequired: item }),
   func: { isRequired: 'squawk' },
   object: { isRequired: 'squawk' },
   string: { isRequired: 'squawk' },

examples/add-animation/Navigation.js

@@ -3,16 +3,18 @@ import { WithWizard } from 'react-albus';
 
 const Navigation = () => (
   <WithWizard
-    render={({ next, previous, step, steps }) => (
+    render={({
+      next, previous, step, steps,
+    }) => (
       <div className="example-buttons">
         {steps.indexOf(step) < steps.length - 1 && (
-          <button className="btn-fluid margin-1-b" onClick={next}>
-            Next
-          </button>
+        <button className="btn-fluid margin-1-b" onClick={next} type="button">
+          Next
+        </button>
         )}
 
         {steps.indexOf(step) > 0 && (
-          <button className="btn-fluid btn-secondary" onClick={previous}>
+          <button className="btn-fluid btn-secondary" onClick={previous} type="button">
             Back
           </button>
         )}

examples/add-animation/index.js

@@ -48,4 +48,4 @@ const AddAnimation = () => (
   </BrowserRouter>
 );
 
-render(<AddAnimation />, document.getElementById('add-animation'));
+render(<AddAnimation />, document.querySelector('#add-animation'));

examples/add-animation/package.json

@@ -11,4 +11,4 @@
     "react-router-dom": "4.1.2",
     "react-transition-group": "2.2.1"
   }
-}
+}