fix tests

Signed-off-by: Erik Jan de Wit <erikjan.dewit@gmail.com>

Author: edewit

frontend/packages/react-form-wizard/src/Wizard.tsx

@@ -192,6 +192,9 @@ function WizardInternal({ children, onSubmit, onCancel, submitButtonText, submit
             </DescriptionList>
           </Step>
         </WizardStep>
+        <WizardStep name="hidden-steps" id="hidden-steps-step" isHidden>
+          <RenderHiddenSteps stepComponents={stepComponents} />
+        </WizardStep>
       </PFWizard>
     </Fragment>
   )
@@ -346,6 +349,15 @@ function MyFooter(props: WizardFooterProps) {
   )
 }
 
+function RenderHiddenSteps(props: { stepComponents: ReactElement[] }) {
+  const { activeStep } = useWizardContext()
+  return (
+    <DisplayModeContext.Provider value={DisplayMode.StepsHidden}>
+      {props.stepComponents.filter((component) => component.props.id !== activeStep.id)}
+    </DisplayModeContext.Provider>
+  )
+}
+
 function WizardDrawer(props: { yamlEditor?: () => ReactNode }) {
   const [yamlEditor] = useState(props.yamlEditor ?? undefined)
   return (

frontend/packages/react-form-wizard/src/inputs/InputSelect.tsx

@@ -167,7 +167,7 @@ export const SelectListOptions = ({
         <SelectOption
           id={isSimpleOption ? option : option.id || `option-${index}`}
           key={isSimpleOption ? option : option.id || `option-${index}`}
-          value={!isSimpleOption ? option.value : option}
+          value={!isSimpleOption ? index : option}
           description={!isSimpleOption ? option.description : undefined}
           isDisabled={displayText === NoResults || (!isSimpleOption && option.disabled)}
           onClick={isCreateOption ? () => onCreate?.(!isSimpleOption ? option.value : option) : undefined}

frontend/packages/react-form-wizard/src/inputs/WizSelect.tsx

@@ -126,17 +126,13 @@ function WizSelectBase<T = any>(props: SelectProps<T>) {
 
   const onSelect = useCallback(
     (selectOptionObject: string) => {
-      switch (props.variant) {
-        case 'single':
-          const selectedOption = filteredOptions.find((option) => option.value === selectOptionObject)
-          if (selectedOption) {
-            setValue(selectedOption.value)
-          } else {
-            setValue(selectOptionObject)
-          }
-          setOpen(false)
-          break
+      if (Number.isInteger(Number(selectOptionObject))) {
+        const selectOption = selectOptions?.[Number(selectOptionObject)]
+        setValue(selectOption?.value ?? '')
+      } else {
+        setValue(selectOptionObject)
       }
+      setOpen(false)
     },
     [isCreatable, props.variant, setValue]
   )
@@ -185,6 +181,7 @@ function WizSelectBase<T = any>(props: SelectProps<T>) {
                 options={filteredOptions}
                 isCreatable={isCreatable}
                 onCreate={props.onCreate}
+                footer={props.footer}
               />
             </PfSelect>
           </InputGroupItem>

frontend/src/routes/Applications/CreateApplication/CreateApplicationArgoPullModel.test.tsx

@@ -23,7 +23,14 @@ import {
   nockIgnoreOperatorCheck,
   nockList,
 } from '../../../lib/nock-util'
-import { clickByText, typeByPlaceholderText, typeByTestId, waitForNocks, waitForText } from '../../../lib/test-util'
+import {
+  clickByPlaceholderText,
+  clickByText,
+  typeByPlaceholderText,
+  typeByTestId,
+  waitForNocks,
+  waitForText,
+} from '../../../lib/test-util'
 import { NavigationPath } from '../../../NavigationPath'
 import {
   ApplicationSet,
@@ -404,19 +411,19 @@ describe('Create Argo Application Set', () => {
 
     // General
     await typeByTestId('name', argoAppSetGit!.metadata!.name!)
-    await clickByText('Select the Argo server')
+    await clickByPlaceholderText('Select the Argo server')
     await clickByText(gitOpsCluster!.spec!.argoServer!.argoNamespace)
     await clickByText('Next')
 
     // Template
     await clickByText('Git')
-    await clickByText('Enter or select a Git URL')
+    await clickByPlaceholderText('Enter or select a Git URL')
 
     const appBranchNocks = [nockArgoGitBranches(channelGit.spec.pathname, { branchList: [{ name: 'branch-01' }] })]
     await clickByText(channelGit.spec.pathname)
     await waitForNocks(appBranchNocks)
 
-    await clickByText('Enter or select a tracking revision')
+    await clickByPlaceholderText('Enter or select a tracking revision')
     // await clickByText('Enter or select a tracking revision') // Hack to handle broken PatternFly dropdown not initially populating
     // await clickByText('Enter or select a tracking revision')
     const pathNocks = [

frontend/src/routes/Governance/policies/CreatePolicyAutomation.test.tsx

@@ -65,21 +65,21 @@ describe('Create Policy Automation Wizard', () => {
     await waitForText('Create policy automation', true)
 
     // select ansible credential
-    screen.getByRole('button', { name: /options menu/i }).click()
+    screen.getByPlaceholderText('Select the Ansible credential').click()
     await clickByText(mockSecret.metadata.name!)
     await new Promise((resolve) => setTimeout(resolve, 2000))
 
     // select ansible job
-    screen.getByText('Select the ansible job').click()
+    screen.getByPlaceholderText('Select the ansible job').click()
     screen.getByRole('option', { name: 'test-job-pre-install' }).click()
-    screen.getByText('Once').click()
+    screen.getByPlaceholderText(/select the schedule/i).click()
     screen.getByRole('option', { name: 'Disabled' }).click()
     screen
       .getByRole('checkbox', {
         name: /manual run: set this automation to run once\. after the automation runs, it is set to disabled\./i,
       })
       .click()
-    screen.getByText('Disabled').click()
+    screen.getByPlaceholderText(/select the schedule/i).click()
     screen.getByRole('option', { name: 'Once' }).click()
     screen.getByRole('button', { name: 'Next' }).click()
 

frontend/src/routes/Governance/policies/EditPolicyAutomation.test.tsx

@@ -55,13 +55,13 @@ describe('Edit Policy Automation', () => {
     await new Promise((resolve) => setTimeout(resolve, 1000))
 
     expect(screen.getByRole('heading', { name: 'Edit policy automation' })).toBeInTheDocument()
-    expect(screen.getByText('ansible-test-secret')).toBeInTheDocument()
-    expect(screen.getByText('test-job-pre-install')).toBeInTheDocument()
+    expect(screen.getByPlaceholderText(/select the ansible credential/i)).toHaveValue('ansible-test-secret')
+    expect(screen.getByPlaceholderText(/select the ansible job/i)).toHaveValue('test-job-pre-install')
 
     // modify ansible job and schedule
-    screen.getByText('test-job-pre-install').click()
+    screen.getByPlaceholderText(/select the ansible job/i).click()
     screen.getByRole('option', { name: 'test-job-post-install' }).click()
-    screen.getByText('Once').click()
+    screen.getByPlaceholderText(/select the schedule/i).click()
     screen.getByRole('option', { name: 'Disabled' }).click()
     screen.getByRole('button', { name: 'Next' }).click()
 

frontend/src/routes/Governance/policy-sets/CreatePolicySet.test.tsx

@@ -42,8 +42,7 @@ describe('Create Policy Page', () => {
 
     // step 1 -- name and namespace
     userEvent.type(screen.getByRole('textbox', { name: /name/i }), mockPolicySets[1].metadata.name)
-    screen.getByText('Select the namespace').click()
-    userEvent.type(screen.getByRole('searchbox'), 'test')
+    userEvent.type(screen.getByPlaceholderText('Select the namespace'), 'test')
     screen.getByRole('option', { name: 'test' }).click()
     screen.getByRole('button', { name: 'Next' }).click()
 
@@ -56,10 +55,10 @@ describe('Create Policy Page', () => {
     await waitForText('How do you want to select clusters?')
     screen.getByRole('button', { name: 'New placement' }).click()
     screen.getByRole('button', { name: /action/i }).click()
-    screen.getByText(/select the label/i).click()
+    screen.getByPlaceholderText(/select the label/i).click()
     screen.getByRole('option', { name: /cloud/i }).click()
-    screen.getByText(/select the values/i).click()
-    screen.getByRole('checkbox', { name: /amazon/i }).click()
+    screen.getByPlaceholderText(/select the values/i).click()
+    screen.getByRole('option', { name: /amazon/i }).click()
     screen.getByRole('button', { name: 'Next' }).click()
 
     // step 4 -- Review

frontend/src/wizards/Argo/ArgoWizard.test.tsx

@@ -126,7 +126,7 @@ describe('ArgoWizard tests', () => {
   test('CreateArgoResources', async () => {
     nockIgnoreApiPaths()
     render(<TestArgoWizard />)
-    userEvent.click(screen.getByText(/select the argo server/i))
+    userEvent.click(screen.getByPlaceholderText(/select the argo server/i))
     userEvent.click(screen.getByRole('button', { name: /add argo server/i }))
 
     //fill the form

frontend/src/wizards/Governance/PolicySet/PolicySetWizard.test.tsx

@@ -37,7 +37,7 @@ describe('PolicySetWizard wizard', () => {
 
     const nameTextbox = screen.getByRole('textbox', { name: /name/i })
     userEvent.type(nameTextbox, 'test-policy')
-    screen.getByText(/select the namespace/i).click()
+    screen.getByPlaceholderText(/select the namespace/i).click()
     screen.getByRole('option', { name: /argo-server-1/i }).click()
 
     screen.getByRole('button', { name: /placement/i }).click()