Adds unit tests for new component

__tests__/components/Inputs/LanguageSelect/LanguageSelect.test.js

@@ -0,0 +1,73 @@
+import React, { Component } from 'react'
+import { shallow, mount } from 'enzyme'
+
+import LanguageSelect from '../../../../app/components/Inputs/LanguageSelect'
+import { LANGUAGES } from '../../../../app/core/constants'
+
+describe('LanguageSelect', () => {
+  const props = {
+    value: LANGUAGES.VIETNAMESE.value,
+    items: Object.keys(LANGUAGES).map(key => LANGUAGES[key]),
+  }
+
+  test('should render without crashing', () => {
+    const wrapper = shallow(<LanguageSelect {...props} />)
+    expect(wrapper).toMatchSnapshot()
+  })
+
+  test('should render the VIETNAMESE flag when passed VIETNAMESE value', () => {
+    const wrapper = shallow(<LanguageSelect {...props} />)
+    expect(
+      wrapper
+        .find('#selected-lang-country-flag')
+        .children()
+
+        .props().alt,
+    ).toEqual(LANGUAGES.VIETNAMESE.label)
+  })
+
+  test('should render the CHINESE flag when passed CHINESE value', () => {
+    const chinaProps = {
+      ...props,
+      value: LANGUAGES.CHINESE.value,
+    }
+    const wrapper = shallow(<LanguageSelect {...chinaProps} />)
+    expect(
+      wrapper
+        .find('#selected-lang-country-flag')
+        .children()
+
+        .props().alt,
+    ).toEqual('中文')
+  })
+
+  test('should render the CHINESE flag when passed CHINESE value', () => {
+    const props = {
+      ...props,
+      value: LANGUAGES.CHINESE.value,
+    }
+    const wrapper = shallow(<LanguageSelect {...props} />)
+    expect(
+      wrapper
+        .find('#selected-lang-country-flag')
+        .children()
+
+        .props().alt,
+    ).toEqual('中文')
+  })
+
+  test('should render the default flag (ENGLISH) when passed undefined value', () => {
+    const props = {
+      ...props,
+      value: undefined,
+    }
+    const wrapper = shallow(<LanguageSelect {...props} />)
+    expect(
+      wrapper
+        .find('#selected-lang-country-flag')
+        .children()
+
+        .props().alt,
+    ).toEqual(LANGUAGES.ENGLISH.label)
+  })
+})

__tests__/components/Inputs/LanguageSelect/__snapshots__/LanguageSelect.test.js.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`LanguageSelect should render without crashing 1`] = `
+<div
+  id="flagDropdownContainer"
+  onClick={[Function]}
+>
+  <div
+    id="flagButtonContainer"
+  >
+    <div
+      id="selected-lang-country-flag"
+      onClick={[Function]}
+    >
+      <Component
+        alt="Tiếng Việt"
+      />
+    </div>
+  </div>
+</div>
+`;

app/components/Inputs/LanguageSelect/LanguageSelect.jsx

@@ -6,7 +6,7 @@ import { LANGUAGES } from '../../../core/constants'
 import styles from './LanguageSelect.scss'
 
 type Props = {
-  languageDisplayValue: string,
+  value: string,
   setLanguageSetting: (value: String) => void,
   toggleMenu: (open: boolean) => void,
   languageMenuOpen: boolean,
@@ -38,24 +38,26 @@ export const LanguageSettingsIcon = (data: Language) => {
 export default function LanguageSelect({
   setLanguageSetting,
   toggleMenu,
-  languageDisplayValue,
+  value,
   languageMenuOpen,
 }: Props) {
   const arrOfLanguages: Array<Language> = Object.keys(LANGUAGES).map(
     key => LANGUAGES[key],
   )
 
   const selectedLang =
-    arrOfLanguages.find(lang => lang.label === languageDisplayValue) ||
-    LANGUAGES.ENGLISH
+    arrOfLanguages.find(lang => lang.value === value) || LANGUAGES.ENGLISH
 
   return (
     <div
       onClick={() => !languageMenuOpen && toggleMenu(true)}
       id={styles.flagDropdownContainer}
     >
       <div id={styles.flagButtonContainer}>
-        <div onClick={() => toggleMenu(!languageMenuOpen)}>
+        <div
+          id="selected-lang-country-flag"
+          onClick={() => toggleMenu(!languageMenuOpen)}
+        >
           {selectedLang.renderFlag()}
         </div>
       </div>
@@ -75,9 +77,7 @@ export default function LanguageSelect({
             transparent
             menuIsOpen
             options={parsedLangOptions}
-            value={parsedLangOptions.find(
-              option => option.label === languageDisplayValue,
-            )}
+            value={parsedLangOptions.find(option => option.value === value)}
           />
         </div>
       )}

app/containers/Home/HomeLayout.jsx

@@ -16,7 +16,7 @@ type Props = {
   children: React$Node,
   renderNavigation?: Function,
   theme: ThemeType,
-  languageDisplayValue: string,
+  language: string,
   setLanguageSetting: (value: String) => void,
 }
 
@@ -34,7 +34,7 @@ class HomeLayout extends React.Component<Props, State> {
       children,
       renderNavigation,
       theme,
-      languageDisplayValue,
+      language,
       setLanguageSetting,
     } = this.props
     const dynamicImage = theme === 'Light' ? lightLogo : darkLogo
@@ -54,7 +54,7 @@ class HomeLayout extends React.Component<Props, State> {
             setLanguageSetting={setLanguageSetting}
             languageMenuOpen={languageMenuOpen}
             toggleMenu={languageMenuOpen => this.setState({ languageMenuOpen })}
-            languageDisplayValue={languageDisplayValue}
+            value={language}
           />
           <div
             className={

app/core/constants.js

@@ -47,52 +47,52 @@ export const LANGUAGES = {
   ENGLISH: {
     label: 'English',
     value: 'ENGLISH',
-    renderFlag: () => <England />,
+    renderFlag: () => <England alt="English" />,
   },
   CHINESE: {
     label: '中文',
     value: 'CHINESE',
-    renderFlag: () => <China />,
+    renderFlag: () => <China alt="中文" />,
   },
   FRENCH: {
     label: 'Francés',
     value: 'FRENCH',
-    renderFlag: () => <France />,
+    renderFlag: () => <France alt="Francés" />,
   },
   GERMAN: {
     label: 'Deutsche',
     value: 'GERMAN',
-    renderFlag: () => <Germany />,
+    renderFlag: () => <Germany alt="Deutsche" />,
   },
   ITALIAN: {
     label: 'Italiano',
     value: 'ITALIAN',
-    renderFlag: () => <Italy />,
+    renderFlag: () => <Italy alt="Italiano" />,
   },
   PORTUGUESE: {
     label: 'Português',
     value: 'PORTUGUESE',
-    renderFlag: () => <Brazil />,
+    renderFlag: () => <Brazil alt="Português" />,
   },
   TURKISH: {
     label: 'Türkçe',
     value: 'TURKISH',
-    renderFlag: () => <Turkey />,
+    renderFlag: () => <Turkey alt="Türkçe" />,
   },
   KOREAN: {
     label: '한국어',
     value: 'KOREAN',
-    renderFlag: () => <Korea />,
+    renderFlag: () => <Korea alt="한국어" />,
   },
   VIETNAMESE: {
     label: 'Tiếng Việt',
     value: 'VIETNAMESE',
-    renderFlag: () => <Vietnam />,
+    renderFlag: () => <Vietnam alt="Tiếng Việt" />,
   },
   ARABIC: {
     label: 'العربية',
     value: 'ARABIC',
-    renderFlag: () => <UnitedArabEmirates />,
+    renderFlag: () => <UnitedArabEmirates alt="العربية" />,
   },
 }