Tests for global navigation feature

Author: sametweb

src/App.tsx

@@ -5,12 +5,16 @@ import Step2 from "./stepComponents/Step2";
 import Step3 from "./stepComponents/Step3";
 import Step4 from "./stepComponents/Step4";
 
-const Navigation = (props: NavigationComponentProps) => {
+export const Navigation = (props: NavigationComponentProps) => {
 	console.log(props);
 	return (
 		<div>
-			<button onClick={props.prev}>Previous</button>
-			<button onClick={props.next}>Next</button>
+			<button data-testid="global-prev" onClick={props.prev}>
+				Global Previous
+			</button>
+			<button data-testid="global-next" onClick={props.next}>
+				Global Next
+			</button>
 		</div>
 	);
 };

src/lib-ts/index.tsx

@@ -118,7 +118,7 @@ const StepsContext = React.createContext<StepsContext>({
 	state: {},
 	handleChange: (event) => {},
 	setState: (key, value) => {},
-	getState: (key, defaultValue) => "" || false || defaultValue,
+	getState: (key, defaultValue) => "",
 	next: () => {},
 	prev: () => {},
 	jump: (id) => {},
@@ -136,8 +136,6 @@ export function Steps({ children, config }: StepsProps) {
 		if (config?.navigation?.component) {
 			const NavComponent = config?.navigation?.component;
 			return <NavComponent {...context} />;
-		} else {
-			return null;
 		}
 	};
 

src/tests/index.test.js

@@ -9,9 +9,10 @@ const Step1 = () => <></>;
 const Step2 = () => <></>;
 const Step3 = () => <></>;
 const Step4 = () => <></>;
+const Navigation = () => <></>;
 
 const testRenderer = TestRenderer.create(
-	<Steps>
+	<Steps config={{ navigation: { component: Navigation, location: "before" } }}>
 		<Step component={Step1} title="My first step" beforeStepChange={mockFn} />
 		<Step component={Step2} />
 		<Step component={Step3} />
@@ -176,3 +177,26 @@ describe("state updates correctly", () => {
 		expect(newProps1.getState("lastname", "")).toBe("Mutevelli");
 	});
 });
+
+describe("global navigation", () => {
+	it("takes parameters correctly", () => {
+		const navProps = testInstance.findByType(Navigation).props;
+		expect(navProps.size).toBe(4);
+		expect(navProps.current).toBe(1);
+		expect(navProps.progress).toBe(0);
+	});
+
+	it("buttons work correctly", () => {
+		const navProps = testInstance.findByType(Navigation).props;
+
+		act(() => navProps.next());
+
+		const newNavProps = testInstance.findByType(Navigation).props;
+
+		expect(newNavProps.current).toBe(2);
+		expect(newNavProps.size).toBe(4);
+		expect(newNavProps.progress).toBe(
+			(newNavProps.current - 1) / (newNavProps.size - 1),
+		);
+	});
+});