Refactored wizard context

Author: jackjocross

__tests__/components/Steps.spec.jsx

@@ -20,12 +20,12 @@ import { Steps } from '../../src';
 const FakeStep = () => <div />;
 
 describe('Steps', () => {
-  it('should call _setSteps', () => {
+  it('should call _init', () => {
     const context = {
       wizard: {
-        _setSteps: jest.fn(),
         steps: [],
       },
+      wizardInit: jest.fn(),
     };
 
     shallow(
@@ -34,20 +34,19 @@ describe('Steps', () => {
       </Steps>,
       { context },
     );
-    // eslint-disable-next-line no-underscore-dangle
-    expect(context.wizard._setSteps).toHaveBeenCalled();
+    expect(context.wizardInit).toHaveBeenCalled();
   });
 
-  it('should not call _setSteps if wizard already has steps', () => {
+  it('should not call _init if wizard already has steps', () => {
     const context = {
       wizard: {
-        _setSteps: jest.fn(),
         steps: [
           'we',
           'have',
           'steps',
         ],
       },
+      wizardInit: jest.fn(),
     };
 
     shallow(
@@ -56,8 +55,7 @@ describe('Steps', () => {
       </Steps>,
       { context },
     );
-    // eslint-disable-next-line no-underscore-dangle
-    expect(context.wizard._setSteps).not.toHaveBeenCalled();
+    expect(context.wizardInit).not.toHaveBeenCalled();
   });
 
   it('should render correct child if controlled', () => {

__tests__/components/Wizard.spec.jsx

@@ -12,33 +12,39 @@
  * the License.
  */
 
-import React from 'react';
+import React, { PropTypes } from 'react';
 import { mount } from 'enzyme';
 
 import { Wizard } from '../../src';
 
+const ExposeWizard = ({ children }, context) => children(context);
+ExposeWizard.contextTypes = {
+  wizard: PropTypes.object,
+  wizardInit: PropTypes.func,
+};
+
 describe('Wizard', () => {
   let mounted;
-  let setSteps;
+  let init;
   let step;
   let next;
   let previous;
   let push;
   let go;
 
-  describe('without render prop', () => {
+  describe('with render prop', () => {
     beforeEach(() => {
       const history = {
         replace: () => null,
         listen: () => () => null,
       };
 
       mounted = mount(
-        <Wizard history={history} />,
+        <Wizard history={history} render={() => null} />,
       );
     });
 
-    it('should render without steps', () => {
+    it('should render', () => {
       expect(mounted).toMatchSnapshot();
     });
 
@@ -50,27 +56,31 @@ describe('Wizard', () => {
   describe('with no other props', () => {
     beforeEach(() => {
       mounted = mount(
-        <Wizard
-          render={({
-            _setSteps,
-            step: wizardStep,
-            next: wizardNext,
-            previous: wizardPrevious,
-            push: wizardPush,
-            go: wizardGo,
-          }) => {
-            setSteps = _setSteps;
-            step = wizardStep;
-            next = wizardNext;
-            previous = wizardPrevious;
-            push = wizardPush;
-            go = wizardGo;
-            return <noscript />;
-          }}
-        />,
+        <Wizard>
+          <ExposeWizard>
+            {({
+              wizard: {
+                step: wizardStep,
+                next: wizardNext,
+                previous: wizardPrevious,
+                push: wizardPush,
+                go: wizardGo,
+              },
+              wizardInit,
+            }) => {
+              step = wizardStep;
+              next = wizardNext;
+              previous = wizardPrevious;
+              push = wizardPush;
+              go = wizardGo;
+              init = wizardInit;
+              return null;
+            }}
+          </ExposeWizard>
+        </Wizard>,
       );
 
-      setSteps([
+      init([
         { path: 'gryffindor' },
         { path: 'slytherin' },
       ]);
@@ -119,20 +129,23 @@ describe('Wizard', () => {
 
     beforeEach(() => {
       mounted = mount(
-        <Wizard
-          onNext={onNext}
-          render={({
-            _setSteps,
-            next: wizardNext,
-          }) => {
-            setSteps = _setSteps;
-            next = wizardNext;
-            return <noscript />;
-          }}
-        />,
+        <Wizard onNext={onNext}>
+          <ExposeWizard>
+            {({
+              wizard: {
+                next: wizardNext,
+              },
+              wizardInit,
+            }) => {
+              next = wizardNext;
+              init = wizardInit;
+              return null;
+            }}
+          </ExposeWizard>
+        </Wizard>,
       );
 
-      setSteps([
+      init([
         { path: 'gryffindor' },
         { path: 'slytherin' },
       ]);

__tests__/components/__snapshots__/Wizard.spec.jsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Wizard without render prop should render without steps 1`] = `
+exports[`Wizard with render prop should render 1`] = `
 <Wizard
   basename=""
   className=""
@@ -11,10 +11,6 @@ exports[`Wizard without render prop should render without steps 1`] = `
     }
   }
   onNext={null}
-  render={null}
->
-  <div
-    className=""
-  />
-</Wizard>
+  render={[Function]}
+/>
 `;

__tests__/utils/index.spec.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright (c) 2017 American Express Travel Related Services Company, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+import fixPath from '../../src/utils';
+
+describe('fixPath', () => {
+  it('should remove duplicate forward slashes', () => {
+    const path = 'path//to/something';
+    const fixedPath = fixPath(path);
+    expect(fixedPath).toBe('path/to/something');
+  });
+});

package.json

@@ -16,10 +16,7 @@
     "posttest": "npm run lint",
     "prepublish": "npm run build"
   },
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/americanexpress/react-albus.git"
-  },
+  "repository": "americanexpress/react-albus",
   "keywords": [
     "react",
     "react-component",

src/components/Steps.jsx

@@ -16,15 +16,15 @@ import React, { Component, PropTypes } from 'react';
 
 class Steps extends Component {
   componentWillMount() {
-    const { wizard } = this.context;
+    const { wizard, wizardInit } = this.context;
 
     // Register steps with Wizard if they're not already registered
     if (wizard && !wizard.steps.length) {
       const steps = React.Children.map(this.props.children, child => ({
         path: child.props.path,
         name: child.props.name,
       }));
-      wizard._setSteps(steps); // eslint-disable-line no-underscore-dangle
+      wizardInit(steps);
     }
   }
 
@@ -50,6 +50,7 @@ Steps.defaultProps = {
 
 Steps.contextTypes = {
   wizard: PropTypes.object,
+  wizardInit: PropTypes.func,
 };
 
 export default Steps;

src/components/Wizard.jsx

@@ -14,6 +14,7 @@
 
 import React, { Component, PropTypes } from 'react';
 import { createMemoryHistory } from 'history';
+import fixPath from '../utils';
 
 class Wizard extends Component {
   state = {
@@ -26,15 +27,15 @@ class Wizard extends Component {
   getChildContext() {
     return {
       wizard: {
-        _setSteps: this.setSteps,
         step: this.state.step,
         steps: this.steps,
         next: this.next,
-        previous: this.previous,
+        previous: this.props.history.goBack,
         push: this.push,
-        go: this.go,
+        go: this.props.history.go,
         history: this.props.history,
       },
+      wizardInit: this.init,
     };
   }
 
@@ -54,37 +55,30 @@ class Wizard extends Component {
     this.unlisten();
   }
 
-  setInitialStep() {
+  init = (steps) => {
+    this.steps = steps;
+
     if (this.props.onNext) {
       this.props.onNext({ path: null, name: null }, this.steps, this.replace);
     } else {
       this.replace();
     }
   }
 
-  setSteps = (steps) => {
-    this.steps = steps;
-    this.setInitialStep();
-  }
-
   steps = [];
-  previous = this.props.history.goBack;
-  go = this.props.history.go;
 
   get paths() {
     return this.steps.map(s => s.path);
   }
 
-  fixPath = pathname => pathname.replace(/\/\/+/g, '/');
-
   push = (step) => {
     const nextStep = step || this.paths[this.paths.indexOf(this.state.step.path) + 1];
-    this.props.history.push(this.fixPath(`${this.props.basename}/${nextStep}`));
+    this.props.history.push(fixPath(`${this.props.basename}/${nextStep}`));
   }
 
   replace = (step) => {
     const nextStep = step || this.paths[0];
-    this.props.history.replace(this.fixPath(`${this.props.basename}/${nextStep}`));
+    this.props.history.replace(fixPath(`${this.props.basename}/${nextStep}`));
   }
 
   next = () => {
@@ -131,6 +125,7 @@ Wizard.defaultProps = {
 
 Wizard.childContextTypes = {
   wizard: PropTypes.object,
+  wizardInit: PropTypes.func,
 };
 
 export default Wizard;

src/utils/index.js

@@ -0,0 +1,17 @@
+/*
+ * Copyright (c) 2017 American Express Travel Related Services Company, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
+ * in compliance with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under the License
+ * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing permissions and limitations under
+ * the License.
+ */
+
+const fixPath = pathname => pathname.replace(/\/\/+/g, '/');
+
+export default fixPath;