VerificationBadge & LanguageMenu

src/components/@molecules/Hamburger/LanguageMenu.test.tsx

@@ -0,0 +1,62 @@
+import { changeLanguageMock, fireEvent, mockSupportedLngs, render, screen } from '@app/test-utils'
+
+import { describe, expect, it, vi } from 'vitest'
+
+import LanguageMenu from './LanguageMenu'
+
+vi.mock('iso-639-1', () => ({
+  default: {
+    getNativeName: (lang: string) => `Native Name of ${lang}`, // Return a mocked native name
+  },
+}))
+
+describe('LanguageMenu', () => {
+  it('renders the supported languages in sorted order', () => {
+    const setCurrentViewMock = vi.fn()
+
+    render(<LanguageMenu setCurrentView={setCurrentViewMock} />)
+
+    mockSupportedLngs
+      .filter((lang) => lang && lang !== 'cimode')
+      .forEach((lang) => {
+        expect(screen.getByTestId(`lang-${lang}`)).toBeInTheDocument()
+        expect(screen.getByText(`Native Name of ${lang}`)).toBeInTheDocument()
+        expect(screen.getByText(lang.toLocaleUpperCase())).toBeInTheDocument()
+      })
+
+    expect(screen.queryByTestId('lang-cimode')).not.toBeInTheDocument()
+  })
+
+  it('changes the language when a language item is clicked', () => {
+    const setCurrentViewMock = vi.fn()
+
+    render(<LanguageMenu setCurrentView={setCurrentViewMock} />)
+
+    const frenchLanguageItem = screen.getByTestId('lang-fr')
+    fireEvent.click(frenchLanguageItem)
+
+    expect(changeLanguageMock).toHaveBeenCalledWith('fr')
+  })
+
+  it('calls setCurrentView with "main" when the heading is clicked', () => {
+    const setCurrentViewMock = vi.fn()
+
+    render(<LanguageMenu setCurrentView={setCurrentViewMock} />)
+    const frenchLanguageItem = screen.getByTestId('lang-header')
+    fireEvent.click(frenchLanguageItem)
+
+    expect(setCurrentViewMock).toHaveBeenCalledWith('main')
+  })
+
+  it('shows the active language with a check icon', () => {
+    const setCurrentViewMock = vi.fn()
+
+    render(<LanguageMenu setCurrentView={setCurrentViewMock} />)
+
+    const activeIcon = screen.getByTestId('check-lang-en')
+    expect(activeIcon).toHaveStyle({ display: 'block' })
+
+    const inactiveIcon = screen.getByTestId('check-lang-fr')
+    expect(inactiveIcon).toHaveStyle({ display: 'none' })
+  })
+})

src/components/@molecules/Hamburger/LanguageMenu.tsx

@@ -143,7 +143,7 @@ const LanguageMenu = ({
   // eslint-disable-next-line react-hooks/exhaustive-deps
   const initialLanguage = useMemo(() => i18n.resolvedLanguage, [])
   const languages = (i18n.options.supportedLngs || [])
-    .filter((lang: string) => lang && lang !== 'cimode')
+    .filter((lang) => lang && lang !== 'cimode')
     .sort((a, b) => {
       if (a === initialLanguage) {
         return -1
@@ -157,7 +157,7 @@ const LanguageMenu = ({
   return (
     <Container>
       <HeadingWrapper>
-        <Heading onClick={() => setCurrentView('main')}>
+        <Heading data-testid="lang-header" onClick={() => setCurrentView('main')}>
           <LeftArrowSVG />
           <InnerHeading>
             <LanguageSVG />
@@ -166,11 +166,16 @@ const LanguageMenu = ({
         </Heading>
       </HeadingWrapper>
       <LanguagesContainer>
-        {languages.map((lang: string) => (
-          <LanguageItem key={lang} onClick={() => i18n.changeLanguage(lang)}>
+        {languages.map((lang) => (
+          <LanguageItem
+            key={lang}
+            data-testid={`lang-${lang}`}
+            onClick={() => i18n.changeLanguage(lang)}
+          >
             <div>
               <CheckIcon
                 as={CheckCircleSVG}
+                data-testid={`check-lang-${lang}`}
                 style={{ display: i18n.resolvedLanguage === lang ? 'block' : 'none' }}
               />
               <Typography>{ISO6391.getNativeName(lang)}</Typography>

src/components/@molecules/VerificationBadge/VerificationBadge.test.tsx

@@ -0,0 +1,52 @@
+import { render, screen } from '@app/test-utils'
+
+import { describe, expect, it } from 'vitest'
+
+import { VerificationBadge } from './VerificationBadge'
+
+describe('VerificationBadge', () => {
+  it('should render with with badge', () => {
+    render(
+      <VerificationBadge showBadge={true} type="record">
+        <div></div>
+      </VerificationBadge>,
+    )
+    expect(screen.getByTestId('verification-badge-record')).toBeInTheDocument()
+  })
+
+  it('should render with without badge', () => {
+    render(
+      <VerificationBadge showBadge={false} type="record">
+        <div></div>
+      </VerificationBadge>,
+    )
+    expect(screen.queryByTestId('verification-badge-record')).not.toBeInTheDocument()
+  })
+
+  it('should render with alert svg', () => {
+    render(
+      <VerificationBadge isVerified={false} showBadge={true} type="record">
+        <div></div>
+      </VerificationBadge>,
+    )
+    expect(screen.getByTestId('verification-badge-error-icon')).toBeInTheDocument()
+  })
+
+  it('should render with verified svg', () => {
+    render(
+      <VerificationBadge isVerified={true} showBadge={true} type="record">
+        <div></div>
+      </VerificationBadge>,
+    )
+    expect(screen.getByTestId('verification-badge-record-icon')).toBeInTheDocument()
+  })
+
+  it('should render with personhood svg', () => {
+    render(
+      <VerificationBadge isVerified={true} showBadge={true} type="personhood">
+        <div></div>
+      </VerificationBadge>,
+    )
+    expect(screen.getByTestId('verification-badge-person-icon')).toBeInTheDocument()
+  })
+})

src/test-utils.tsx

@@ -26,6 +26,10 @@ vi.mock('@app/hooks/useRegistrationReducer', () => vi.fn(() => ({ item: { stepIn
 
 export const mockUseAccountReturnValue = { address: '0x123' }
 
+export const changeLanguageMock = vi.fn()
+
+export const mockSupportedLngs = ['en', 'fr', 'de', 'es', 'cimode']
+
 vi.mock('react-i18next', () => ({
   useTranslation: () => ({
     t: (value: string, opts: any) => {
@@ -34,6 +38,11 @@ vi.mock('react-i18next', () => ({
     },
     i18n: {
       isInitialized: true,
+      resolvedLanguage: 'en',
+      options: {
+        supportedLngs: mockSupportedLngs,
+      },
+      changeLanguage: changeLanguageMock,
     },
     ready: true,
   }),