fix(admin-ui): write test for all Gluu custom base UI components #290

Author: syntrydy

app/routes/Apps/Gluu/GluuTypeAhead.js

@@ -23,10 +23,11 @@ function GluuTypeAhead({
   formik,
   required,
   doc_category,
+  doc_entry,
 }) {
   const { t } = useTranslation()
   return (
-    <GluuTooltip doc_category={doc_category} doc_entry={name}>
+    <GluuTooltip doc_category={doc_category} doc_entry={doc_entry || name}>
       <FormGroup row>
         {!!required ? (
           <GluuLabel label={label} size={4} required />

app/routes/Apps/Gluu/GluuTypeAheadWithAdd.js

@@ -52,7 +52,11 @@ function GluuTypeAheadWithAdd({
            
           <Row>
             <Col sm={10}>
-              <Input placeholder={placeholder} id={inputId} aria-label="new_entry"/>
+              <Input
+                placeholder={placeholder}
+                id={inputId}
+                aria-label="new_entry"
+              />
             </Col>
             <Button color="primary" type="button" onClick={addItem}>
               <i className="fa fa-plus-circle mr-2"></i>

app/routes/Apps/Gluu/Tests/GluuToogleRow.test.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import GluuToogleRow from '../GluuToogleRow'
+import i18n from '../../../../i18n'
+import { I18nextProvider } from 'react-i18next'
+const LABEL = 'fields.application_type'
+const NAME = 'applicationType'
+const VALUE = false
+function formikf() {}
+
+it('Test gluutooltip', () => {
+  render(
+    <I18nextProvider i18n={i18n}>
+      <GluuToogleRow
+        label={LABEL}
+        name={NAME}
+        value={VALUE}
+        doc_category="openid_client"
+        formik={formikf}
+      />
+    </I18nextProvider>,
+  )
+  screen.getByText('The OpenID connect Client application type.')
+  expect(
+    screen.getByText('The OpenID connect Client application type.'),
+  ).toHaveAttribute('data-id', 'tooltip')
+})

app/routes/Apps/Gluu/Tests/GluuTypeAhead.test.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import GluuTypeAhead from '../GluuTypeAhead'
+import i18n from '../../../../i18n'
+import { I18nextProvider } from 'react-i18next'
+
+const LABEL = 'fields.application_type'
+let NAME = 'applicationType'
+const VALUE = ['Monday']
+const OPTIONS = ['Monday', 'Tuesday']
+
+it('Test gluu typeahead', () => {
+  render(
+    <I18nextProvider i18n={i18n}>
+      <GluuTypeAhead
+        doc_category="openid_client"
+        name={NAME}
+        value={VALUE}
+        label={LABEL}
+        options={OPTIONS}
+      />
+    </I18nextProvider>,
+  )
+  screen.getByText('Application Type:')
+  screen.getByText(VALUE[0])
+  screen.getByText('The OpenID connect Client application type.')
+  expect(
+    screen.getByText('The OpenID connect Client application type.'),
+  ).toHaveAttribute('data-id', 'tooltip')
+})

app/routes/Apps/Gluu/Tests/GluuTypeAheadForDn.test.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import GluuTypeAheadForDn from '../GluuTypeAheadForDn'
+import i18n from '../../../../i18n'
+import { I18nextProvider } from 'react-i18next'
+
+const LABEL = 'fields.application_type'
+const NAME = 'applicationType'
+const VALUE = [{ name: 'Monday', dn: '111111112222' }]
+const OPTIONS = [
+  { name: 'Monday', dn: '111111112222' },
+  { name: 'Tuesday', dn: '1001112222' },
+]
+
+it('Test gluu typeahead for dn', () => {
+  render(
+    <I18nextProvider i18n={i18n}>
+      <GluuTypeAheadForDn
+        doc_category="openid_client"
+        name={NAME}
+        value={VALUE}
+        label={LABEL}
+        options={OPTIONS}
+      />
+    </I18nextProvider>,
+  )
+  screen.getByText('Application Type:')
+  screen.getByText(VALUE[0].name)
+  screen.getByText('The OpenID connect Client application type.')
+  expect(
+    screen.getByText('The OpenID connect Client application type.'),
+  ).toHaveAttribute('data-id', 'tooltip')
+})

app/routes/Apps/Gluu/Tests/GluuTypeAheadWithAdd.test.js

@@ -6,7 +6,7 @@ import { I18nextProvider } from 'react-i18next'
 
 it('Test GluuTypeAheadWithAdd component', () => {
   const LABEL = 'fields.application_type'
-  let NAME = 'application_type'
+  const NAME = 'application_type'
   const VALUE = ['Monday']
   const OPTIONS = ['Monday', 'Tuesday']
   render(