feat(admin-ui): add test cases in client wizard form #1358

Signed-off-by: Jeet Viramgama <jviramgama5@gmail.com>

admin-ui/app/components/Wizard/WizardStep.js

@@ -16,6 +16,7 @@ export const WizardStep = (props) => {
   return (
     <a
       href={null}
+      data-testid={props['data-testid']}
       className={stepClass}
       onClick={() => !props.disabled && props.onClick()}
     >

admin-ui/plugins/auth-server/__tests__/components/ClientWizardForm.test.js

@@ -39,6 +39,7 @@ describe('Should render client add/edit form properly', () => {
         wrapper: Wrapper,
       }
     )
+
     screen.debug(container, Infinity)
     const clientNameInput = screen.getByTestId('clientName')
     fireEvent.change(clientNameInput, { target: { value: 'test' } })
@@ -58,4 +59,62 @@ describe('Should render client add/edit form properly', () => {
     fireEvent.click(addButton)
     screen.debug(await screen.findByText('www.google.com'), Infinity)
   })
+
+  test('should display tokens tab input fields', async () => {
+    //* By Default Basic Tab is Active
+    const { container } = render(
+      <ClientWizardForm scripts={[]} client_data={clients[0]} />,
+      {
+        wrapper: Wrapper,
+      }
+    )
+
+    screen.debug(container, Infinity)
+    const tokensTab = screen.getByTestId('Tokens')
+    fireEvent.click(tokensTab)
+
+    expect(await screen.findByText(/Access token type/i)).toBeVisible()
+    expect(await screen.findByText(/Default max authn age/i)).toBeVisible()
+  })
+
+  test('persist input values if tabs are switched', async () => {
+    render(
+      <ClientWizardForm scripts={[]} client_data={clients[0]} />,
+      {
+        wrapper: Wrapper,
+      }
+    )
+
+    const tokensTab = screen.getByTestId('Tokens')
+    // Switch to Tokens Tab
+    fireEvent.click(tokensTab)
+
+    const accessTokenLifetimeInput = screen.getByTestId('refreshTokenLifetime')
+    // Change value of Access token lifetime field on Tokens Tab
+    fireEvent.change(accessTokenLifetimeInput, { target: { value: 22 } })
+    expect(await screen.getByDisplayValue('22')).toBeVisible()
+
+    const logoutTab = screen.getByTestId('Logout')
+    // Switch to Logout Tab
+    fireEvent.click(logoutTab)
+
+    const cibaParUmaTab = screen.getByTestId('CIBA/PAR/UMA')
+    // Switch to CIBA / PAR / UMA Tab
+    fireEvent.click(cibaParUmaTab)
+
+    const claimsRedirectUris = screen.getByTestId('new_entry')
+    fireEvent.change(claimsRedirectUris, { target: { value: 'www.claims_gluu.org' } })
+    // Update value of Claims redirect URI field under UMA
+    const addButton = screen.getByTestId(t('actions.add'))
+    fireEvent.click(addButton)
+    screen.debug(await screen.findByText('www.claims_gluu.org'), Infinity)
+
+    // Switch back to Tokens Tab & checks if the modified value exists
+    fireEvent.click(tokensTab)
+    expect(await screen.getByDisplayValue('22')).toBeVisible()
+
+    // Switch back to CIBA / PAR / UMA Tab & checks if the modified value exists
+    fireEvent.click(cibaParUmaTab)
+    expect(await screen.getByText('www.claims_gluu.org')).toBeInTheDocument()
+  })
 })

admin-ui/plugins/auth-server/components/Clients/ClientWizardForm.js

@@ -385,55 +385,63 @@ function ClientWizardForm({
                 <CardBody className='d-flex justify-content-center pt-5 wizard-wrapper'>
                   <Wizard activeStep={currentStep} onStepChanged={changeStep}>
                     <Wizard.Step
+                      data-testid={sequence[0]}
                       id={setId(0)}
                       icon={<i className='fa fa-shopping-basket fa-fw'></i>}
                       complete={isComplete(sequence[0])}
                     >
                       {t('titles.client_basic')}
                     </Wizard.Step>
                     <Wizard.Step
+                      data-testid={sequence[1]}
                       id={setId(1)}
                       icon={<i className='fa fa-credit-card fa-fw'></i>}
                       complete={isComplete(sequence[1])}
                     >
                       {t('titles.token')}
                     </Wizard.Step>
                     <Wizard.Step
+                      data-testid={sequence[2]}
                       id={setId(2)}
                       icon={<i className='fa fa-credit-card fa-fw'></i>}
                       complete={isComplete(sequence[2])}
                     >
                       {t('titles.log_out')}
                     </Wizard.Step>
                     <Wizard.Step
+                      data-testid={sequence[3]}
                       id={setId(3)}
                       icon={<i className='fa fa-credit-card fa-fw'></i>}
                       complete={isComplete(sequence[3])}
                     >
                       {t('titles.software_info')}
                     </Wizard.Step>
                     <Wizard.Step
+                      data-testid={sequence[4]}
                       id={setId(4)}
                       icon={<i className='fa fa-credit-card fa-fw'></i>}
                       complete={isComplete(sequence[4])}
                     >
                       {t('titles.CIBA_PAR_UMA')}
                     </Wizard.Step>
                     <Wizard.Step
+                      data-testid={sequence[5]}
                       id={setId(5)}
                       icon={<i className='fa fa-credit-card fa-fw'></i>}
                       complete={isComplete(sequence[5])}
                     >
                       {t('titles.encryption_signing')}
                     </Wizard.Step>
                     <Wizard.Step
+                      data-testid={sequence[6]}
                       id={setId(6)}
                       icon={<i className='fa fa-cube fa-fw'></i>}
                       complete={isComplete(sequence[6])}
                     >
                       {t('titles.client_advanced')}
                     </Wizard.Step>
                     <Wizard.Step
+                      data-testid={sequence[7]}
                       id={setId(7)}
                       icon={<i className='fa fa-credit-card fa-fw'></i>}
                       complete={isComplete(sequence[7])}