adds wizard context assertions

Author: TheSonOfThomp

packages/wizard/src/Wizard/Wizard.tsx

@@ -54,6 +54,7 @@ export function Wizard({
   return (
     <WizardContext.Provider
       value={{
+        isWizardContext: true,
         activeStep,
         updateStep,
       }}

packages/wizard/src/WizardContext/WizardContext.ts

@@ -3,11 +3,13 @@ import { createContext, useContext } from 'react';
 import { Direction } from '@leafygreen-ui/descendants';
 
 interface WizardContextData {
+  isWizardContext: boolean;
   activeStep: number;
   updateStep: (direction: Direction) => void;
 }
 
 export const WizardContext = createContext<WizardContextData>({
+  isWizardContext: false,
   activeStep: 0,
   updateStep: () => {},
 });

packages/wizard/src/WizardFooter/WizardFooter.spec.tsx

@@ -2,7 +2,33 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { WizardFooter } from '.';
+import { Wizard } from '../Wizard/Wizard';
 
 describe('packages/wizard-footer', () => {
-  test('condition', () => {});
+  test('does not render outside WizardContext', () => {
+    const { container } = render(
+      <WizardFooter
+        data-testid="footer"
+        primaryButtonProps={{ children: 'Next' }}
+      >
+        Content
+      </WizardFooter>,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+  test('renders in WizardContext', () => {
+    const { getByTestId } = render(
+      <Wizard>
+        <WizardFooter
+          data-testid="footer"
+          primaryButtonProps={{ children: 'Next' }}
+        >
+          Content
+        </WizardFooter>
+      </Wizard>,
+    );
+
+    expect(getByTestId('footer')).toBeInTheDocument();
+  });
 });

packages/wizard/src/WizardFooter/WizardFooter.tsx

@@ -7,14 +7,15 @@ import { useWizardContext } from '../WizardContext/WizardContext';
 
 import { WizardFooterProps } from './WizardFooter.types';
 import { WizardSubComponentProperties } from '../constants';
+import { consoleOnce } from '@leafygreen-ui/lib';
 
 export const WizardFooter = ({
   backButtonProps,
   cancelButtonProps,
   primaryButtonProps,
   ...rest
 }: WizardFooterProps) => {
-  const { activeStep, updateStep } = useWizardContext();
+  const { isWizardContext, activeStep, updateStep } = useWizardContext();
 
   const handleBackButtonClick: MouseEventHandler<HTMLButtonElement> = e => {
     updateStep(Direction.Prev);
@@ -26,6 +27,13 @@ export const WizardFooter = ({
     primaryButtonProps.onClick?.(e);
   };
 
+  if (!isWizardContext) {
+    consoleOnce.error(
+      'Wizard.Footer component must be used within a Wizard context.',
+    );
+    return null;
+  }
+
   return (
     <FormFooter
       {...rest}

packages/wizard/src/WizardStep/WizardStep.spec.tsx

@@ -2,7 +2,27 @@ import React from 'react';
 import { render } from '@testing-library/react';
 
 import { WizardStep } from '.';
+import { Wizard } from '../Wizard/Wizard';
 
 describe('packages/wizard-step', () => {
-  test('condition', () => {});
+  test('does not render outside WizardContext', () => {
+    const { container } = render(
+      <WizardStep data-testid="step-1" title="Step">
+        Content
+      </WizardStep>,
+    );
+
+    expect(container.firstChild).toBeNull();
+  });
+  test('renders in WizardContext', () => {
+    const { getByTestId } = render(
+      <Wizard>
+        <WizardStep data-testid="step-1" title="Step">
+          Content
+        </WizardStep>
+      </Wizard>,
+    );
+
+    expect(getByTestId('step-1')).toBeInTheDocument();
+  });
 });

packages/wizard/src/WizardStep/WizardStep.tsx

@@ -6,10 +6,26 @@ import { stepStyles } from './WizardStep.styles';
 import { WizardStepProps } from './WizardStep.types';
 import { WizardSubComponentProperties } from '../constants';
 import { TextNode } from './TextNode';
+import { useWizardContext } from '../WizardContext/WizardContext';
+import { consoleOnce } from '@leafygreen-ui/lib';
+
+export function WizardStep({
+  title,
+  description,
+  children,
+  ...rest
+}: WizardStepProps) {
+  const { isWizardContext } = useWizardContext();
+
+  if (!isWizardContext) {
+    consoleOnce.error(
+      'Wizard.Step component must be used within a Wizard context.',
+    );
+    return null;
+  }
 
-export function WizardStep({ title, description, children }: WizardStepProps) {
   return (
-    <div className={stepStyles}>
+    <div className={stepStyles} {...rest}>
       <TextNode as={H3}>{title}</TextNode>
       {description && <TextNode as={Description}>{description}</TextNode>}
       <div>{children}</div>