Merge pull request #2 from americanexpress/feature/docs-update

Internal refactor and docs clarification

Author: nathanforce

README.md

@@ -20,16 +20,27 @@ const Simple = () =>
     <Steps>
       <Step path="firstStep">
         <h1>First Step</h1>
-        <Navigation render={({ next }) => <button onClick={next}>Next</button>} />
+        <Navigation
+          render={({ next }) =>
+            <button onClick={next}>Next</button>}
+        />
       </Step>
       <Step path="secondStep">
         <h1>Second Step</h1>
-        <Navigation render={({ next }) => <button onClick={next}>Next</button>} />
-        <Navigation render={({ previous }) => <button onClick={previous}>Previous</button>} />
+        <Navigation
+          render={({ next, previous }) =>
+            <div>
+              <button onClick={next}>Next</button>
+              <button onClick={previous}>Previous</button>
+            </div>}
+        />
       </Step>
       <Step path="thirdStep">
         <h1>Third Step</h1>
-        <Navigation render={({ previous }) => <button onClick={previous}>Previous</button>} />
+        <Navigation
+          render={({ previous }) =>
+            <button onClick={previous}>Previous</button>}
+        />
       </Step>
     </Steps>
   </Wizard>;
@@ -77,9 +88,9 @@ Wraps all the content that will be conditionally shown when the step is active.
 
 #### Props
 ##### `path`: string
-Unique string for each component, if `routed`, this will be used as the path in the URL.
+Unique key for each step.
 ##### `name`: string *(optional)*
-A name for the step that can be used in the `<Progress>` component in order to display step titles.
+A name for the step that can later be accessed on [`context.wizard`](#contextwizard).
 ##### `className`: string *(optional)*
 CSS classes to be added to the `<div>` created by `<Step>`.
 
@@ -95,7 +106,7 @@ An object describing the current step with the signature: `{ path: string, name:
 ---
 
 ### `<Navigation>`
-Wrapper component for the Navigation of your `<Step>`.  Extends its child's props with [`context.wizard`](#contextwizard) and passes [`context.wizard`](#contextwizard) to its render prop.
+Exposes the Wizard navigation functionality for your components to use.  Extends its child's props with [`context.wizard`](#contextwizard) and passes [`context.wizard`](#contextwizard) to its render prop.
 #### Props
 ##### `render(wizard)`: function *(optional)*
 A function that will be used as the render function of `<Navigation>`.
@@ -130,11 +141,11 @@ import React from 'react';
 import { Route } from 'react-router-dom';
 import { Wizard } from 'react-albus';
 
-const RoutedWizard = () =>
+const RoutedWizard = ({ children }) =>
   <Route
-    render={({ match: { url }, history }) =>
+    render={({ history, match: { url } }) =>
       <Wizard history={history} basename={url}>
-        ...
+        {children}
       </Wizard>}
   />;
 

__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,
       }));
-      this.context.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;