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

app/locales/en/translation.json

@@ -224,9 +224,9 @@
     "licenseDetails": "License Details"
   },
   "languages": {
-    "french": "Français",
+    "french": "French",
     "english": "English",
-    "portuguese": "Português"
+    "portuguese": "Portuguese"
   },
   "menus": {
     "adminui": "Admin",

app/routes/Apps/Gluu/GluuTypeAheadWithAdd.js

@@ -52,7 +52,7 @@ function GluuTypeAheadWithAdd({
            
           <Row>
             <Col sm={10}>
-              <Input placeholder={placeholder} id={inputId} />
+              <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/GluuTypeAheadWithAdd.test.js

@@ -0,0 +1,27 @@
+import React from 'react'
+import GluuTypeAheadWithAdd from '../GluuTypeAheadWithAdd'
+import { render, screen, fireEvent } from '@testing-library/react'
+import i18n from '../../../../i18n'
+import { I18nextProvider } from 'react-i18next'
+
+it('Test GluuTypeAheadWithAdd component', () => {
+  const LABEL = 'fields.application_type'
+  let NAME = 'application_type'
+  const VALUE = ['Monday']
+  const OPTIONS = ['Monday', 'Tuesday']
+  render(
+    <I18nextProvider i18n={i18n}>
+      <GluuTypeAheadWithAdd
+        doc_category="openid_client"
+        name={NAME}
+        value={VALUE}
+        label={LABEL}
+        options={OPTIONS}
+      />
+    </I18nextProvider>,
+  )
+  screen.getByText('Application Type:')
+  screen.getByText('Add')
+  screen.getByText('Remove')
+  screen.getByText(VALUE[0])
+})

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

@@ -0,0 +1,26 @@
+import React from 'react'
+import GluuViewWrapper from '../GluuViewWrapper'
+import { render, screen } from '@testing-library/react'
+import i18n from '../../../../i18n'
+import { I18nextProvider } from 'react-i18next'
+
+it('Check view wrapper with show', () => {
+  let componentText = 'the wrapped component'
+  render(
+    <I18nextProvider i18n={i18n}>
+      <GluuViewWrapper canShow>
+        <p>{componentText}</p>
+      </GluuViewWrapper>
+    </I18nextProvider>,
+  )
+  screen.getByText(componentText)
+})
+
+it('Check view wrapper with no show', () => {
+  render(
+    <I18nextProvider i18n={i18n}>
+      <GluuViewWrapper />
+    </I18nextProvider>,
+  )
+  screen.getByText('Missing required permission')
+})

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

@@ -0,0 +1,17 @@
+import React from 'react'
+import { render, screen } from '@testing-library/react'
+import {LanguageMenu} from '../LanguageMenu'
+import i18n from '../../../../i18n'
+import { I18nextProvider } from 'react-i18next'
+
+it('All supported languages will be visible', () => {
+  render(
+    <I18nextProvider i18n={i18n}>
+      <LanguageMenu />
+    </I18nextProvider>,
+  )
+  screen.getByText('en')
+  screen.getByText('French')
+  screen.getByText('English')
+  screen.getByText('Portuguese')
+})