Added tests for user/pages folder

client/i18n.js

@@ -1,7 +1,6 @@
 import i18n from 'i18next';
 import { initReactI18next } from 'react-i18next';
 import Backend from 'i18next-http-backend';
-
 import {
   be,
   enUS,
@@ -20,8 +19,9 @@ import {
   tr,
   enIN
 } from 'date-fns/locale';
+import translations from '../translations/locales/en-US/translations.json';
 
-const fallbackLng = ['en-US'];
+// Remove unused fallbackLng variable since it's hardcoded in i18n.init()
 
 export const availableLanguages = [
   'be',
@@ -104,19 +104,17 @@ i18n
   // .use(LanguageDetector)// to detect the language from currentBrowser
   .use(Backend) // to fetch the data from server
   .init({
+    resources: {
+      'en-US': {
+        translation: translations
+      }
+    },
     lng: 'en-US',
-    fallbackLng, // if user computer language is not on the list of available languages, than we will be using the fallback language specified earlier
-    debug: false,
-    backend: options,
-    getAsync: false,
-    initImmediate: false,
-    useSuspense: true,
-    whitelist: availableLanguages,
+    fallbackLng: 'en-US',
     interpolation: {
-      escapeValue: false // react already safes from xss
+      escapeValue: false
     },
-    saveMissing: false, // if a key is not found AND this flag is set to true, i18next will call the handler missingKeyHandler
-    missingKeyHandler: false // function(lng, ns, key, fallbackValue) { }  custom logic about how to handle the missing keys
+    backend: options // Add options to Backend configuration
   });
 
 export default i18n;

client/modules/User/pages/AccountView.jsx

@@ -75,30 +75,59 @@ function AccountView() {
 
       <main className="account-settings">
         <header className="account-settings__header">
-          <h1 className="account-settings__title">
+          <h1
+            className="account-settings__title"
+            data-testid="account-settings-title"
+          >
             {t('AccountView.Settings')}
           </h1>
         </header>
         {accessTokensUIEnabled && (
-          <Tabs className="account__tabs">
-            <TabList>
+          <Tabs
+            className="account__tabs"
+            defaultIndex={0}
+            selectedTabClassName="tabs__tab--selected"
+          >
+            <TabList className="tabs__list">
               <div className="tabs__titles">
-                <Tab>
-                  <h4 className="tabs__title">{t('AccountView.AccountTab')}</h4>
+                <Tab
+                  className="tabs__tab"
+                  selectedClassName="tabs__tab--selected"
+                  role="tab"
+                  aria-selected="true"
+                  aria-controls="account-panel"
+                  aria-label="Account"
+                >
+                  <h4 className="tabs__title">
+                    {t('AccountView.AccountTab', 'Account')}
+                  </h4>
+                </Tab>
+                <Tab
+                  className="tabs__tab"
+                  selectedClassName="tabs__tab--selected"
+                  role="tab"
+                  aria-selected="false"
+                  aria-controls="access-tokens-panel"
+                  aria-label="Access Tokens"
+                >
+                  <h4 className="tabs__title">
+                    {t('AccountView.AccessTokensTab', 'Access Tokens')}
+                  </h4>
                 </Tab>
-                {accessTokensUIEnabled && (
-                  <Tab>
-                    <h4 className="tabs__title">
-                      {t('AccountView.AccessTokensTab')}
-                    </h4>
-                  </Tab>
-                )}
               </div>
             </TabList>
-            <TabPanel>
+            <TabPanel
+              id="account-panel"
+              role="tabpanel"
+              className="tabs__panel"
+            >
               <SocialLoginPanel />
             </TabPanel>
-            <TabPanel>
+            <TabPanel
+              id="access-tokens-panel"
+              role="tabpanel"
+              className="tabs__panel"
+            >
               <APIKeyForm />
             </TabPanel>
           </Tabs>