test: test for language switcher

Author: g-saracca

src/sections/dataset/dataset-metadata/export-metadata-dropdown/ExportMetadataDropdown.tsx

@@ -6,8 +6,6 @@ import { DataverseInfoRepository } from '@/info/domain/repositories/DataverseInf
 import { QueryParamKey } from '@/sections/Route.enum'
 import { requireAppConfig } from '@/config'
 
-const appConfig = requireAppConfig()
-
 interface ExportMetadataDropdownProps {
   datasetPersistentId: string
   datasetIsReleased: boolean
@@ -25,6 +23,8 @@ export const ExportMetadataDropdown = ({
   anonymizedView,
   dataverseInfoRepository
 }: ExportMetadataDropdownProps) => {
+  const appConfig = requireAppConfig()
+
   const { t } = useTranslation('shared')
   const { datasetMetadataExportFormats, isLoadingExportFormats, errorGetExportFormats } =
     useGetAvailableDatasetMetadataExportFormats({ dataverseInfoRepository })

src/sections/file/file-metadata/FileMetadata.tsx

@@ -14,8 +14,6 @@ import { File } from '@/files/domain/models/File'
 import styles from './FileMetadata.module.scss'
 import { DatasetPublishingStatus } from '@/dataset/domain/models/Dataset'
 
-const appConfig = requireAppConfig()
-
 interface FileMetadataProps {
   name: string
   metadata: FileMetadataModel
@@ -39,6 +37,7 @@ export function FileMetadata({
   dataverseInfoRepository
 }: FileMetadataProps) {
   const { t } = useTranslation('file')
+  const appConfig = requireAppConfig()
 
   return (
     <>

src/sections/layout/header/LanguageSwitcher.tsx

@@ -4,14 +4,11 @@ import { Translate as TranslateIcon } from 'react-bootstrap-icons'
 import { LANGUAGE_LOCAL_STORAGE_KEY } from '@/i18n'
 import { requireAppConfig } from '@/config'
 
-// TODO:ME - Show screenshots of variants of dropdown title (with icon, only icon, only text, both) and get feedback from team
-
 export const LanguageSwitcher = () => {
   const { i18n, t } = useTranslation('shared')
 
   const appConfig = requireAppConfig()
 
-  // We dont render the language switcher if there is only one language configured
   if (appConfig.languages.length < 2) return null
 
   const handleSelectLanguage = (lang: string) => {
@@ -27,7 +24,7 @@ export const LanguageSwitcher = () => {
       title={
         <div className="d-inline-flex align-items-center gap-1">
           <TranslateIcon />
-          <span>{t('language')}</span>
+          <span data-testid="language-switcher-dropdown-title">{t('language')}</span>
         </div>
       }
       id="language-switcher-dropdown">

tests/component/sections/layout/header/LanguageSwitcher.spec.tsx

@@ -0,0 +1,84 @@
+import { LANGUAGE_LOCAL_STORAGE_KEY } from '@/i18n'
+import { LanguageSwitcher } from '@/sections/layout/header/LanguageSwitcher'
+
+describe('LanguageSwitcher', () => {
+  afterEach(() => {
+    cy.clearAllLocalStorage()
+  })
+
+  it(
+    'does not render when only one language is configured',
+    {
+      env: {
+        LANGUAGES: [{ code: 'en', name: 'English' }]
+      }
+    },
+    () => {
+      cy.customMount(<LanguageSwitcher />)
+
+      cy.get('#language-switcher-dropdown').should('not.exist')
+    }
+  )
+
+  it(
+    'renders language options correctly when more than one language is configured',
+    {
+      env: {
+        LANGUAGES: [
+          { code: 'en', name: 'English' },
+          { code: 'es', name: 'Español' },
+          { code: 'it', name: 'Italiano' }
+        ]
+      }
+    },
+    () => {
+      cy.customMount(<LanguageSwitcher />)
+
+      cy.get('#language-switcher-dropdown').should('exist')
+
+      cy.get('#language-switcher-dropdown').click()
+
+      cy.findByText('English').should('exist')
+      cy.findByText('Español').should('exist')
+      cy.findByText('Italiano').should('exist')
+    }
+  )
+
+  it('changes language when a language option is selected', () => {
+    cy.customMount(<LanguageSwitcher />)
+
+    cy.findByTestId('language-switcher-dropdown-title').should('have.text', 'Language')
+
+    cy.get('#language-switcher-dropdown').should('exist').click()
+
+    cy.findByText('English').should('have.class', 'active')
+
+    cy.findByText('Español').click()
+
+    cy.findByText('Español').should('have.class', 'active')
+    cy.findByText('English').should('not.have.class', 'active')
+
+    // Dropdown title should update to the selected language
+    cy.findByTestId('language-switcher-dropdown-title').should('have.text', 'Idioma')
+
+    // Verify that the selected language is stored in localStorage
+    cy.window().then((win) => {
+      const storedLang = win.localStorage.getItem(LANGUAGE_LOCAL_STORAGE_KEY)
+      expect(storedLang).to.equal('es')
+    })
+
+    // Change back to English
+    cy.get('#language-switcher-dropdown').click()
+    cy.findByText('English').click()
+
+    cy.findByTestId('language-switcher-dropdown-title').should('have.text', 'Language')
+
+    cy.findByText('English').should('have.class', 'active')
+    cy.findByText('Español').should('not.have.class', 'active')
+
+    cy.window().then((win) => {
+      const storedLang = win.localStorage.getItem(LANGUAGE_LOCAL_STORAGE_KEY)
+      expect(storedLang).to.equal('en')
+    })
+  })
+})