Merge pull request #1689 from NatLibFi/vocab-search-language-menu

Vocab search language menu
NatLibFi · Oct 9, 2024 · d21f7f1 · d21f7f1
2 parents 0fe6ee1 + a5b94f2
commit d21f7f1
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 16 deletions.
diff --git a/resource/js/vocab-search.js b/resource/js/vocab-search.js
@@ -18,7 +18,7 @@ const vocabSearch = Vue.createApp({
     this.languages = window.SKOSMOS.languageOrder
     this.selectedLanguage = this.parseSearchLang()
     this.searchCounter = 0 // used for matching the query and the response in case there are many responses
-    this.languageStrings = window.SKOSMOS.language_strings[window.SKOSMOS.lang] ?? window.SKOSMOS.language_strings.en
+    this.languageStrings = window.SKOSMOS.language_strings
     this.msgs = window.SKOSMOS.msgs[window.SKOSMOS.lang] ?? window.SKOSMOS.msgs.en
     this.renderedResultsList = []
     this.showNotation = window.SKOSMOS.showNotation

diff --git a/src/view/scripts.inc.twig b/src/view/scripts.inc.twig
@@ -1,6 +1,29 @@
 <!-- Skosmos variables passed from the backend to the frontend code-->
 <!-- NB: Do not add comments inside the JS object as it would break JSON parsing -->
 <script id="skosmos-global-vars">
+{% set mockup_translations = {
+    "fi": {
+        "fi": "suomi",
+        "en": "englanti",
+        "se": "pohjoissaame",
+        "sv": "ruotsi",
+        "all": "kaikilla kielillä"
+    },
+    "sv": {
+        "fi": "finska",
+        "en": "engelska",
+        "se": "nordsamiska",
+        "sv": "svenska",
+        "all": "på alla språk"
+    },
+    "en": {
+        "fi": "Finnish",
+        "en": "English",
+        "se": "Northern Sami",
+        "sv": "Swedish",
+        "all": "In all languages"
+    }
+} %}
 window.SKOSMOS = {
   "content_lang": "{{ request.contentLang }}",
   "explicitLangCodes": {{ explicit_langcodes ? "true" : "false" }},
@@ -33,21 +56,8 @@ window.SKOSMOS = {
   },
   {%- endif -%}
   "baseHref": "{{ BaseHref }}",
-  "language_strings": { "fi": { "fi": "suomi",
-                                "en": "englanti",
-                                "se": "pohjoissaame",
-                                "sv": "ruotsi",
-                                "all": "kaikilla kielillä"},
-                        "sv": { "fi": "finska",
-                                "en": "engelska",
-                                "se": "nordsamiska",
-                                "sv": "svenska",
-                                "all": "på alla språk"},
-                        "en": { "fi": "Finnish",
-                                "en": "English",
-                                "se": "Northern Sami",
-                                "sv": "Swedish",
-                                "all": "In all languages"}},
+  "language_strings": { {% for lang in request.vocab.config.languages %}"{{ lang }}": "{{ mockup_translations[request.lang][lang] }}", {% endfor -%}
+                      "all": "{{ mockup_translations[request.lang].all }}" },
   "msgs" : { "fi": { "No results": "Ei hakutuloksia",
                      "http://www.yso.fi/onto/yso-meta/Concept": "Yleiskäsite",
                      "http://www.yso.fi/onto/yso-meta/Hierarchy": "Hierarkisoiva käsite",

diff --git a/tests/cypress/template/vocab-search-bar.cy.js b/tests/cypress/template/vocab-search-bar.cy.js
@@ -53,6 +53,22 @@ describe('Vocab search bar', () => {
       cy.url().should('include', 'clang=sv');
     })
 
+    it('available search languages are the ones described in the vocabulary config', () => {
+      cy.visit('/yso/en/') // go to the YSO home page in English language
+
+      // check that the vocabulary languages can be found in the search bar language dropdown menu
+      cy.window().then((win) => {
+        cy.get('#language-list .dropdown-item').then($elements => {
+          const actualLanguages = $elements.map((index, el) => Cypress.$(el).attr('value')).get();
+
+          const expectedLanguages = ['fi', 'sv', 'se', 'en', 'all'];
+
+          // The two language lists should be of equal length and all of the expected languages can be found
+          expect(expectedLanguages).to.have.lengthOf(actualLanguages.length);
+          expectedLanguages.forEach(lang => { expect(actualLanguages).to.include(lang); });
+        })
+      })
+    })
   });
 
   describe('Autocomplete', () => {