adds lgids and test utils

Author: TheSonOfThomp

packages/wizard/src/index.ts

@@ -1,4 +1,5 @@
 export { WizardSubComponentProperties } from './constants';
+export { getLgIds } from './utils/getLgIds';
 export { Wizard, type WizardProps } from './Wizard';
 export {
   useWizardContext,

templates/delete-wizard/src/DeleteWizard/DeleteWizard.tsx

@@ -7,6 +7,8 @@ import {
 import { cx } from '@leafygreen-ui/emotion';
 import { Wizard } from '@leafygreen-ui/wizard';
 
+import { DEFAULT_LGID_ROOT, getLgIds } from '../utils/getLgIds';
+
 import { DeleteWizardSubComponentKeys } from './compoundComponentProperties';
 import { wizardWrapperStyles } from './DeleteWizard.styles';
 import { DeleteWizardProps } from './DeleteWizard.types';
@@ -27,14 +29,29 @@ export const DeleteWizard = CompoundComponent(
     onCancel,
     onDelete,
     onStepChange,
+    'data-lgid': dataLgId = DEFAULT_LGID_ROOT,
+    ...rest
   }: DeleteWizardProps) => {
+    const lgIds = getLgIds(dataLgId);
     const header = findChild(children, DeleteWizardSubComponentKeys.Header);
 
     return (
-      <div className={cx(wizardWrapperStyles, className)}>
+      <div
+        className={cx(wizardWrapperStyles, className)}
+        data-lgid={lgIds.root}
+        {...rest}
+      >
         {header}
-        <DeleteWizardContextProvider onCancel={onCancel} onDelete={onDelete}>
-          <Wizard activeStep={activeStep} onStepChange={onStepChange}>
+        <DeleteWizardContextProvider
+          onCancel={onCancel}
+          onDelete={onDelete}
+          lgIds={lgIds}
+        >
+          <Wizard
+            activeStep={activeStep}
+            onStepChange={onStepChange}
+            data-lgid={lgIds.wizard}
+          >
             {children}
           </Wizard>
         </DeleteWizardContextProvider>

templates/delete-wizard/src/DeleteWizard/DeleteWizardContext.tsx

@@ -2,25 +2,32 @@ import React, { createContext, PropsWithChildren, useContext } from 'react';
 
 import { useWizardContext, WizardContextData } from '@leafygreen-ui/wizard';
 
+import { getLgIds, GetLgIdsReturnType } from '../utils/getLgIds';
+
 import { DeleteWizardProps } from './DeleteWizard.types';
 
 export interface DeleteWizardContextData {
   onCancel?: DeleteWizardProps['onCancel'];
   onDelete?: DeleteWizardProps['onDelete'];
+  lgIds: GetLgIdsReturnType;
 }
 
-export const DeleteWizardContext = createContext<DeleteWizardContextData>({});
+export const DeleteWizardContext = createContext<DeleteWizardContextData>({
+  lgIds: getLgIds(),
+});
 
 export const DeleteWizardContextProvider = ({
   children,
   onCancel,
   onDelete,
+  lgIds,
 }: PropsWithChildren<DeleteWizardContextData>) => {
   return (
     <DeleteWizardContext.Provider
       value={{
         onCancel,
         onDelete,
+        lgIds,
       }}
     >
       {children}

templates/delete-wizard/src/DeleteWizard/DeleteWizardHeader.tsx

@@ -1,12 +1,19 @@
-import { CanvasHeader } from '@leafygreen-ui/canvas-header';
+import React from 'react';
+
+import { CanvasHeader, CanvasHeaderProps } from '@leafygreen-ui/canvas-header';
 import { CompoundSubComponent } from '@leafygreen-ui/compound-component';
 
 import { DeleteWizardSubComponentKeys } from './compoundComponentProperties';
 
 /**
  * A wrapper around the {@link CanvasHeader} component for embedding into a DeleteWizard
  */
-export const DeleteWizardHeader = CompoundSubComponent(CanvasHeader, {
-  displayName: 'DeleteWizardHeader',
-  key: DeleteWizardSubComponentKeys.Header,
-});
+export const DeleteWizardHeader = CompoundSubComponent(
+  (props: CanvasHeaderProps) => {
+    return <CanvasHeader {...props} />;
+  },
+  {
+    displayName: 'DeleteWizardHeader',
+    key: DeleteWizardSubComponentKeys.Header,
+  },
+);

templates/delete-wizard/src/DeleteWizard/DeleteWizardStep.tsx

@@ -14,6 +14,7 @@ import {
 } from '@leafygreen-ui/wizard';
 
 import { DeleteWizardSubComponentKeys } from './compoundComponentProperties';
+import { useDeleteWizardContext } from './DeleteWizardContext';
 
 export const useDeleteWizardStepContext = useWizardStepContext;
 
@@ -30,6 +31,7 @@ export const DeleteWizardStep = CompoundSubComponent(
     requiresAcknowledgement,
     ...rest
   }: DeleteWizardStepProps) => {
+    const { lgIds } = useDeleteWizardContext();
     const footerChild = findChild(
       children,
       WizardSubComponentProperties.Footer,
@@ -48,6 +50,7 @@ export const DeleteWizardStep = CompoundSubComponent(
             `,
             className,
           )}
+          data-lgid={lgIds.step}
           {...rest}
         >
           {restChildren}

templates/delete-wizard/src/testing/getTestUtils.tsx

@@ -1,15 +1,86 @@
 import { findByLgId, getByLgId, queryByLgId } from '@lg-tools/test-harnesses';
 
 import { LgIdString } from '@leafygreen-ui/lib';
+import { getTestUtils as getWizardTestUtils } from '@leafygreen-ui/wizard/testing';
 
 import { DEFAULT_LGID_ROOT, getLgIds } from '../utils/getLgIds';
 
-import { TestUtilsReturnType } from './getTestUtils.types';
+import { DeleteWizardTestUtilsReturnType } from './getTestUtils.types';
 
 export const getTestUtils = (
   lgId: LgIdString = DEFAULT_LGID_ROOT,
-): TestUtilsReturnType => {
+): DeleteWizardTestUtilsReturnType => {
   const lgIds = getLgIds(lgId);
 
-  return {};
+  // Get the Wizard test utils (the DeleteWizard wraps a Wizard component internally)
+  const wizardUtils = getWizardTestUtils(lgId);
+
+  /**
+   * @returns the DeleteWizard root element using the `data-lgid` data attribute.
+   * Will throw if no elements match or if more than one match is found.
+   */
+  const getDeleteWizard = () => getByLgId!<HTMLElement>(lgIds.root);
+
+  /**
+   * @returns the DeleteWizard root element using the `data-lgid` data attribute or `null` if no elements match.
+   * Will throw if more than one match is found.
+   */
+  const queryDeleteWizard = () => queryByLgId!<HTMLElement>(lgIds.root);
+
+  /**
+   * @returns a promise that resolves to the DeleteWizard root element using the `data-lgid` data attribute.
+   * The promise is rejected if no elements match or if more than one match is found.
+   */
+  const findDeleteWizard = () => findByLgId!<HTMLElement>(lgIds.root);
+
+  /**
+   * @returns the DeleteWizard Header element using the `data-lgid` data attribute.
+   * Will throw if no elements match or if more than one match is found.
+   */
+  const getHeader = () => getByLgId!<HTMLElement>(lgIds.header);
+
+  /**
+   * @returns the DeleteWizard Header element using the `data-lgid` data attribute or `null` if no elements match.
+   * Will throw if more than one match is found.
+   */
+  const queryHeader = () => queryByLgId!<HTMLElement>(lgIds.header);
+
+  /**
+   * @returns a promise that resolves to the DeleteWizard Header element using the `data-lgid` data attribute.
+   * The promise is rejected if no elements match or if more than one match is found.
+   */
+  const findHeader = () => findByLgId!<HTMLElement>(lgIds.header);
+
+  /**
+   * @returns the currently active WizardStep element using the `data-lgid` data attribute.
+   * Will throw if no elements match or if more than one match is found.
+   */
+  const getActiveStep = () => getByLgId!<HTMLElement>(lgIds.step);
+
+  /**
+   * @returns the currently active WizardStep element using the `data-lgid` data attribute or `null` if no elements match.
+   * Will throw if more than one match is found.
+   */
+  const queryActiveStep = () => queryByLgId!<HTMLElement>(lgIds.step);
+
+  /**
+   * @returns a promise that resolves to the currently active WizardStep element using the `data-lgid` data attribute.
+   * The promise is rejected if no elements match or if more than one match is found.
+   */
+  const findActiveStep = () => findByLgId!<HTMLElement>(lgIds.step);
+
+  return {
+    // Spread all Wizard test utils (footer, buttons, etc.)
+    ...wizardUtils,
+    // DeleteWizard-specific utils
+    getDeleteWizard,
+    queryDeleteWizard,
+    findDeleteWizard,
+    getHeader,
+    queryHeader,
+    findHeader,
+    getActiveStep,
+    queryActiveStep,
+    findActiveStep,
+  };
 };

templates/delete-wizard/src/testing/getTestUtils.types.ts

@@ -1 +1,19 @@
-export interface TestUtilsReturnType {}
+import { TestUtilsReturnType as WizardTestUtilsReturnType } from '@leafygreen-ui/wizard/testing';
+
+export interface DeleteWizardTestUtilsReturnType
+  extends WizardTestUtilsReturnType {
+  // DeleteWizard root element utils
+  getDeleteWizard: () => HTMLElement;
+  queryDeleteWizard: () => HTMLElement | null;
+  findDeleteWizard: () => Promise<HTMLElement>;
+
+  // Header utils
+  getHeader: () => HTMLElement;
+  queryHeader: () => HTMLElement | null;
+  findHeader: () => Promise<HTMLElement>;
+
+  // Active Step utils (from Wizard)
+  getActiveStep: () => HTMLElement;
+  queryActiveStep: () => HTMLElement | null;
+  findActiveStep: () => Promise<HTMLElement>;
+}

templates/delete-wizard/src/testing/index.ts

@@ -1,2 +1,2 @@
 export { getTestUtils } from './getTestUtils';
-export { type TestUtilsReturnType } from './getTestUtils.types';
+export { type DeleteWizardTestUtilsReturnType } from './getTestUtils.types';

templates/delete-wizard/src/utils/getLgIds.ts

@@ -1,10 +1,16 @@
 import { LgIdString } from '@leafygreen-ui/lib';
+import { getLgIds as getWizardLgIds } from '@leafygreen-ui/wizard';
 
 export const DEFAULT_LGID_ROOT = 'lg-delete_wizard';
 
 export const getLgIds = (root: LgIdString = DEFAULT_LGID_ROOT) => {
+  const wizardRoot: LgIdString = `${root}-wizard`;
+  const wizardLgIds = getWizardLgIds(wizardRoot);
   const ids = {
     root,
+    header: `${root}-header`,
+    wizard: wizardRoot,
+    ...wizardLgIds,
   } as const;
   return ids;
 };