Move to ts and jest

.babelrc

@@ -0,0 +1,7 @@
+{
+  "presets": [
+      "@babel/preset-env",
+      "@babel/preset-react",
+      "@babel/preset-typescript"
+  ]
+}

.gitignore

@@ -4,4 +4,5 @@
 /lib
 /node_modules
 /umd
+/build
 npm-debug.log*

__tests__/Wizard.test.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import {render, fireEvent, cleanup, waitForElement} from 'react-testing-library'
+// adds special assertions like toHaveTextContent
+import 'jest-dom/extend-expect';
+
+import { Wizard } from '../src/';
+
+describe('Wizard Component', () => {
+  afterEach(cleanup);
+
+  test('displays a welcome message', () => {
+    const { getByText } = render(
+      <Wizard initialValues={{}} onSubmit={null}>
+        <Wizard.Step>{() => <h2>@rahsheen/React-Wizard</h2>}</Wizard.Step>
+      </Wizard>
+    );
+
+    expect(getByText('@rahsheen/React-Wizard'))
+  });
+
+  test("does not render without children", () => {
+    // @ts-ignore 
+    const {container} = render(<Wizard initialValues={{}} onSubmit={null}></Wizard>)
+    expect(container.childElementCount).toBe(0)
+  })
+
+  test("doesn't render disabled steps", () => {
+    const {container, getByText} = render(
+      <Wizard initialValues={{}} onSubmit={null}>
+        <Wizard.Step>{() => <h2>rahsheen/React-Wizard</h2>}</Wizard.Step>
+        <Wizard.Step disabled={true}>{() => <h2>Step 2</h2>}</Wizard.Step>
+      </Wizard>
+    )
+
+    expect(container.childElementCount).toBe(1)
+  })
+
+  test("does not render future steps", () => {
+    const {container} = render(
+      <Wizard initialValues={{}} onSubmit={null}>
+        <Wizard.Step>{() => <h2>rahsheen/React-Wizard</h2>}</Wizard.Step>
+        <Wizard.Step>{() => <h2>Step 2</h2>}</Wizard.Step>
+      </Wizard>
+    )
+
+    expect(container.childElementCount).toBe(1)
+  })
+})

__tests__/useWizard.test.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { render, fireEvent, cleanup, waitForElement, act } from 'react-testing-library';
+// adds special assertions like toHaveTextContent
+import 'jest-dom/extend-expect';
+
+import { useWizard } from '../src/';
+
+describe('Wizard Hook', () => {
+  const Wizard = ({ children, ...rest }) => children(useWizard(rest));
+
+  function setup(props = {}) {
+    const returnVal = {};
+    render(
+      <Wizard {...props}>
+        {(val: any) => {
+          Object.assign(returnVal, val);
+          return null;
+        }}
+      </Wizard>
+    );
+    return returnVal;
+  }
+
+  afterEach(cleanup);
+
+  it('moves to the next step', () => {
+    const wizardData = setup();
+    expect(wizardData.index).toBe(0);
+    act(() => wizardData.nextStep());
+    expect(wizardData.index).toBe(1);
+  });
+
+  it('moves to the previous step', () => {
+    const wizardData = setup({ size: 5 });
+    expect(wizardData.index).toBe(0);
+    wizardData.nextStep();
+    wizardData.nextStep();
+    expect(wizardData.index).toBe(2);
+    wizardData.prevStep();
+    expect(wizardData.index).toBe(1);
+  });
+
+  it('Does not decrease index below 0', () => {
+    const wizardData = setup();
+    expect(wizardData.index).toBe(0);
+    wizardData.prevStep();
+    expect(wizardData.index).toBe(0);
+  });
+
+  it('Does not increase index above size', () => {
+    const wizardData = setup({ size: 3 });
+    expect(wizardData.index).toBe(0);
+    wizardData.nextStep();
+    wizardData.nextStep();
+    wizardData.nextStep();
+    wizardData.nextStep();
+    wizardData.nextStep();
+    // Zero-based index means last index is 2
+    expect(wizardData.index).toBe(2);
+  });
+
+  it('sets initial values', () => {
+    const initialValues = {
+      foo: 'Bippety',
+      bar: 3,
+      baz: () => {}
+    };
+
+    const wizardData = setup({ initialValues });
+    expect(JSON.stringify(wizardData.values)).toBe(JSON.stringify(initialValues));
+  });
+
+  it('changes values', () => {
+    const initialValues = {
+      foo: 'Bippety',
+      bar: 3,
+      baz: () => {}
+    };
+
+    const wizardData = setup({ initialValues });
+    wizardData.onChangeValue('bar', 100);
+    expect(JSON.stringify(wizardData.values)).toBe(JSON.stringify({ ...initialValues, bar: 100 }));
+  });
+
+  it('submits values', () => {
+    const initialValues = {
+      foo: 'Bippety',
+      bar: 3,
+      baz: () => {}
+    };
+
+    const onSubmit = args => {
+      expect(JSON.stringify(wizardData.values)).toBe(JSON.stringify(args));
+    }
+
+    const wizardData = setup({ initialValues, onSubmit });
+
+    wizardData.onSubmit();
+
+  })
+});

demo/src/index.js

@@ -1,6 +1,6 @@
 import React, { Component } from "react"
 import { render } from "react-dom"
-import { Wizard } from "../../src/"
+import { Wizard } from "../../build/lib/"
 
 class Demo extends Component {
   render() {
@@ -28,6 +28,15 @@ class Demo extends Component {
               </div>
             )}
           </Wizard.Step>
+          <Wizard.Step disabled>
+            {({ nextStep, prevStep, currentIndex }) => (
+              <div>
+                <h2>Bip {currentIndex}</h2>
+                <button onClick={prevStep}>Back</button>
+                <button onClick={nextStep}>Next</button>
+              </div>
+            )}
+          </Wizard.Step>
           <Wizard.Step>
             {({ nextStep, prevStep, currentIndex }) => (
               <div>