Add test for StepProgressBar component, fix console errors and use On…

…boarding Constants as an index to appease PropTypes

app/ghostery-browser-hub/Views/OnboardingView/OnboardingView.jsx

@@ -50,7 +50,7 @@ const OnboardingView = (props) => {
 // PropTypes ensure we pass required props of the correct type
 OnboardingView.propTypes = {
 	steps: PropTypes.arrayOf(PropTypes.shape({
-		index: PropTypes.number.isRequired,
+		index: PropTypes.string.isRequired,
 		path: PropTypes.string.isRequired,
 		bodyComponents: PropTypes.arrayOf(PropTypes.elementType.isRequired).isRequired,
 	})).isRequired,

app/ghostery-browser-hub/Views/OnboardingView/OnboardingViewContainer.jsx

@@ -82,32 +82,32 @@ class OnboardingViewContainer extends Component {
 		const { sendMountActions } = this.state;
 		const steps = [
 			{
-				index: 0,
+				index: WELCOME,
 				path: `/${ONBOARDING}/${WELCOME}`,
 				bodyComponents: [WelcomeView],
 			},
 			{
-				index: 1,
+				index: LOGIN,
 				path: `/${ONBOARDING}/${LOGIN}`,
 				bodyComponents: [Step1_CreateAccountView],
 			},
 			{
-				index: 2,
+				index: BLOCK_SETTINGS,
 				path: `/${ONBOARDING}/${BLOCK_SETTINGS}`,
 				bodyComponents: [BlockSettingsView],
 			},
 			{
-				index: 3,
+				index: CHOOSE_DEFAULT_SEARCH,
 				path: `/${ONBOARDING}/${CHOOSE_DEFAULT_SEARCH}`,
 				bodyComponents: [ChooseDefaultSearchView],
 			},
 			{
-				index: 4,
+				index: CHOOSE_PLAN,
 				path: `/${ONBOARDING}/${CHOOSE_PLAN}`,
 				bodyComponents: [ChoosePlanView],
 			},
 			{
-				index: 5,
+				index: SUCCESS,
 				path: `/${ONBOARDING}/${SUCCESS}`,
 				bodyComponents: [SuccessView],
 			}

app/ghostery-browser-hub/Views/OnboardingViews/Step1_CreateAccountView/__tests__/__snapshots__/Step1_CreateAccountView.test.jsx.snap

@@ -68,72 +68,3 @@ exports[`app/hub/Views/Step1_CreateAccountView component Snapshot tests with rea
   />
 </div>
 `;
-
-exports[`app/hub/Views/Step1_CreateAccountView component Snapshot tests with react-test-renderer Login Form view is rendered correctly 1`] = `
-<div
-  className="Step1_CreateAccountView"
->
-  <div
-    className="Step1_CreateAccountView__title"
-  >
-    ghostery_browser_hub_onboarding_create_a_ghostery_account
-  </div>
-  <div
-    className="Step1_CreateAccountView__subtitle"
-  >
-    ghostery_browser_hub_onboarding_sync_settings
-  </div>
-  <div
-    className="row align-center-middle"
-  >
-    <div
-      className="Step1_CreateAccountView__alreadyHaveAccount columns small-12 medium-6"
-      onClick={[Function]}
-    >
-      ghostery_browser_hub_onboarding_already_have_account
-    </div>
-    <div
-      className="Step1_CreateAccountView__alreadyHaveAccount columns small-12 medium-6"
-    />
-  </div>
-  <div />
-  <div
-    className="row align-center-middle"
-  >
-    <div
-      className="columns small-10 medium-6"
-    />
-    <div
-      className="columns small-10 medium-6"
-    >
-      <a
-        aria-current={null}
-        className="Step1_CreateAccountView__skip"
-        href="/onboarding/2"
-        onClick={[Function]}
-      >
-        <span>
-          ghostery_browser_hub_onboarding_skip
-        </span>
-      </a>
-    </div>
-  </div>
-  <div
-    className="Step1_CreateAccountView__learnMoreContainer"
-    onClick={[Function]}
-  >
-    <div
-      className="Step1_CreateAccountView__learnMore"
-    >
-      ghostery_browser_hub_onboarding_we_take_your_privacy_very_seriously
-    </div>
-  </div>
-  <div
-    className="Step1_CreateAccountView__arrow down"
-    onClick={[Function]}
-  />
-  <div
-    className="Step1_CreateAccountView__FAQContainer"
-  />
-</div>
-`;

app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.jsx

@@ -16,8 +16,8 @@ import ClassNames from 'classnames';
 import PropTypes from 'prop-types';
 import { NavLink } from 'react-router-dom';
 import {
-	ONBOARDING,
 	WELCOME,
+	ONBOARDING,
 	LOGIN,
 	BLOCK_SETTINGS,
 	CHOOSE_DEFAULT_SEARCH,
@@ -54,6 +54,7 @@ const steps = [
  */
 const StepProgressBar = (props) => {
 	const { currentStep } = props;
+	const currentStepNumber = parseInt(currentStep, 10);
 	const totalSteps = steps.length;
 
 	const logoutIfStepOne = (stepId) => {
@@ -100,16 +101,16 @@ const StepProgressBar = (props) => {
 			const step = index + 1;
 
 			return (
-				<Fragment key={value}>
-					{(step < currentStep) && renderCompletedStep(steps[index])}
-					{(step === currentStep) && renderCurrentStep(steps[index])}
-					{(step > currentStep) && renderIncompleteStep(steps[index])}
+				<Fragment key={`value-${step}`}>
+					{(step < currentStepNumber) && renderCompletedStep(steps[index])}
+					{(step === currentStepNumber) && renderCurrentStep(steps[index])}
+					{(step > currentStepNumber) && renderIncompleteStep(steps[index])}
 					{(step !== totalSteps) && (
 						<Fragment>
-							{(step < currentStep) && (
+							{(step < currentStepNumber) && (
 								<div className="StepProgressBar__line completed" />
 							)}
-							{(step >= currentStep) && (
+							{(step >= currentStepNumber) && (
 								<div className="StepProgressBar__line incompleted" />
 							)}
 						</Fragment>
@@ -121,13 +122,13 @@ const StepProgressBar = (props) => {
 
 	return (
 		<div className="StepProgressBarContainer">
-			{(currentStep !== parseInt(WELCOME, 10)) && renderProgressBar()}
+			{(currentStep !== WELCOME) && renderProgressBar()}
 		</div>
 	);
 };
 // PropTypes ensure we pass required props of the correct type
 StepProgressBar.propTypes = {
-	currentStep: PropTypes.number.isRequired,
+	currentStep: PropTypes.string.isRequired,
 };
 
 export default StepProgressBar;

app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/__tests__/StepProgressBar.test.jsx

@@ -0,0 +1,118 @@
+/**
+ * StepProgressBar Test Component
+ *
+ * Ghostery Browser Extension
+ * https://www.ghostery.com/
+ *
+ * Copyright 2021 Ghostery, Inc. All rights reserved.
+ *
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0
+ */
+
+import React from 'react';
+import renderer from 'react-test-renderer';
+import { shallow } from 'enzyme';
+import { MemoryRouter } from 'react-router';
+import StepProgressBar from '../StepProgressBar';
+import { WELCOME, LOGIN, BLOCK_SETTINGS, CHOOSE_DEFAULT_SEARCH, CHOOSE_PLAN, SUCCESS } from '../../../OnboardingView/OnboardingConstants';
+
+const noop = () => {};
+
+describe('app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.test.jsx', () => {
+	describe('Snapshot tests with react-test-renderer', () => {
+		test('StepProgressBar is rendered correctly', () => {
+			const initialState = {
+				currentStep: LOGIN,
+			};
+			const component = renderer.create(
+				<MemoryRouter>
+					<StepProgressBar {...initialState} />
+				</MemoryRouter>
+			).toJSON();
+			expect(component).toMatchSnapshot();
+		});
+	});
+
+	describe('Shallow snapshot tests rendered with Enzyme', () => {
+		test('StepProgressBar View step 0', () => {
+			const initialState = {
+				currentStep: WELCOME,
+				actions: {
+					logout: noop
+				}
+			};
+
+			const component = shallow(<StepProgressBar {...initialState} />);
+
+			expect(component.find('.StepProgressBar__line').length).toBe(0);
+			expect(component.find('.StepProgressBar__column').length).toBe(0);
+			expect(component).toMatchSnapshot();
+		});
+		test('StepProgressBar View step 1', () => {
+			const initialState = {
+				currentStep: LOGIN,
+				actions: {
+					logout: noop
+				}
+			};
+
+			const component = shallow(<StepProgressBar {...initialState} />);
+
+			expect(component.find('.StepProgressBar__line').length).toBe(3);
+			expect(component.find('.StepProgressBar__column').length).toBe(4);
+			expect(component.find('.current').length).toBe(2);
+			expect(component.find('.incomplete').length).toBe(3);
+			expect(component).toMatchSnapshot();
+		});
+
+		test('StepProgressBar View step 2', () => {
+			const initialState = {
+				currentStep: BLOCK_SETTINGS,
+				actions: {
+					logout: noop
+				}
+			};
+
+			const component = shallow(<StepProgressBar {...initialState} />);
+
+			expect(component.find('.step-completed').length).toBe(1);
+			expect(component.find('.current').length).toBe(2);
+			expect(component.find('.incomplete').length).toBe(2);
+			expect(component).toMatchSnapshot();
+		});
+
+		test('StepProgressBar View step 4', () => {
+			const initialState = {
+				currentStep: CHOOSE_PLAN,
+				actions: {
+					logout: noop
+				}
+			};
+
+			const component = shallow(<StepProgressBar {...initialState} />);
+
+			expect(component.find('.step-completed').length).toBe(3);
+			expect(component.find('.current').length).toBe(2);
+			expect(component.find('.incomplete').length).toBe(0);
+			expect(component).toMatchSnapshot();
+		});
+
+		test('StepProgressBar View step 5', () => {
+			const initialState = {
+				currentStep: SUCCESS,
+				actions: {
+					logout: noop
+				}
+			};
+
+			const component = shallow(<StepProgressBar {...initialState} />);
+
+			expect(component.find('.step-completed').length).toBe(4);
+			expect(component.find('.current').length).toBe(0);
+			expect(component.find('.incomplete').length).toBe(0);
+			expect(component).toMatchSnapshot();
+		});
+	});
+});

app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/__tests__/__snapshots__/StepProgressBar.test.jsx.snap

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.test.jsx Shallow snapshot tests rendered with Enzyme StepProgressBar View step 0 1`] = `ShallowWrapper {}`;
+
+exports[`app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.test.jsx Shallow snapshot tests rendered with Enzyme StepProgressBar View step 1 1`] = `ShallowWrapper {}`;
+
+exports[`app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.test.jsx Shallow snapshot tests rendered with Enzyme StepProgressBar View step 2 1`] = `ShallowWrapper {}`;
+
+exports[`app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.test.jsx Shallow snapshot tests rendered with Enzyme StepProgressBar View step 3 1`] = `ShallowWrapper {}`;
+
+exports[`app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.test.jsx Shallow snapshot tests rendered with Enzyme StepProgressBar View step 4 1`] = `ShallowWrapper {}`;
+
+exports[`app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.test.jsx Shallow snapshot tests rendered with Enzyme StepProgressBar View step 5 1`] = `ShallowWrapper {}`;
+
+exports[`app/ghostery-browser-hub/Views/OnboardingViews/StepProgressBar/StepProgressBar.test.jsx Snapshot tests with react-test-renderer StepProgressBar is rendered correctly 1`] = `
+<div
+  className="StepProgressBarContainer"
+>
+  <div
+    className="StepProgressBar__column"
+  >
+    <a
+      aria-current={null}
+      href="/onboarding/1"
+      onClick={[Function]}
+    >
+      <div
+        className="StepProgressBar__label current"
+      >
+        sign_in
+      </div>
+      <div
+        className="StepProgressBar__Step current step-1"
+      />
+    </a>
+  </div>
+  <div
+    className="StepProgressBar__line incompleted"
+  />
+  <div
+    className="StepProgressBar__column"
+  >
+    <div
+      className="StepProgressBar__label"
+    >
+      ghostery_browser_hub_onboarding_privacy
+    </div>
+    <div
+      className="StepProgressBar__Step incomplete step-2"
+    />
+  </div>
+  <div
+    className="StepProgressBar__line incompleted"
+  />
+  <div
+    className="StepProgressBar__column"
+  >
+    <div
+      className="StepProgressBar__label"
+    >
+      ghostery_browser_hub_onboarding_search
+    </div>
+    <div
+      className="StepProgressBar__Step incomplete step-3"
+    />
+  </div>
+  <div
+    className="StepProgressBar__line incompleted"
+  />
+  <div
+    className="StepProgressBar__column"
+  >
+    <div
+      className="StepProgressBar__label"
+    >
+      ghostery_browser_hub_onboarding_plan
+    </div>
+    <div
+      className="StepProgressBar__Step incomplete step-4"
+    />
+  </div>
+</div>
+`;