146 : The user interface should be localized in French

features/internationalized_ui.feature

@@ -0,0 +1,55 @@
+#language: fr
+
+Fonctionnalité: Avoir une interface traduite dans la langue favorite
+
+Scénario: en français sur un document sans ses gloses ouvertes
+
+    Soit "en" la langue préférée configurée dans le navigateur
+    Et "Vidéo Sherlock Jr. (Buster Keaton)" le document principal
+    Et un texte flottant avec la balise title "Create a document as a glose" est présent
+    Et un texte flottant avec la balise title "Create a collection from this document" est présent
+    Quand je choisis "fr" comme langue préférée configurée dans le navigateur et que je rafraichisse la page
+    Alors un texte flottant avec la balise title "Créer un document en tant que glose" est présent
+    Et un texte flottant avec la balise title "Créer une collection à partir de ce document" est présent
+
+Scénario: en français sur la page principale
+
+    Soit "en" la langue préférée configurée dans le navigateur
+    Et la liste des documents affichée
+    Et la page contient
+        |Sign in|
+        |referenced by 1 document(s)|
+    Et un texte flottant avec la balise title "Create a document from scratch" est présent
+    Et un placeholder contenant "Username" est présent
+    Et un placeholder contenant "Password" est présent
+    Quand je choisis "fr" comme langue préférée configurée dans le navigateur et que je rafraichisse la page
+    Alors la page contient
+        |Se connecter|
+        |référencé par 1 document(s)|
+    Et un texte flottant avec la balise title "Créer un document à partir de zéro" est présent
+    Et un placeholder contenant "Nom d’utilisateur" est présent
+    Et un placeholder contenant "Mot de passe" est présent
+
+Scénario: en français sur la page de création de document
+
+    Soit "fr" la langue préférée configurée dans le navigateur
+    Et la liste des documents affichée
+    Et une session active avec mon compte
+    Quand j'essaie de créer un nouveau document
+    Alors la page contient
+        |<TITRE> (<CRÉATEUR>)|
+        |Tous droits réservés|
+        |<TEXTE>|
+
+Scénario: en anglais sur un document avec une de ses gloses ouverte
+
+    Soit "fr" la langue préférée configurée dans le navigateur
+    Et "Vidéo Sherlock Jr. (Buster Keaton)" le document principal
+    Et "Note rire Buster Keaton (Antoine-Valentin Charpentier)" une des gloses ouverte
+    Et un texte flottant avec l’attribut title "Éditer les métadonnées..." est présent
+    Et un texte flottant avec l’attribut title "Éditer le contenu..." est présent
+    Et un texte flottant avec la balise title "Éditer le type" est présent
+    Quand je choisis "en" comme langue préférée configurée dans le navigateur, que je rafraichisse la page et que "Note rire Buster Keaton (Antoine-Valentin Charpentier)" une des gloses ouverte
+    Alors un texte flottant avec l’attribut title "Edit metadata..." est présent
+    Et un texte flottant avec l’attribut title "Edit content..." est présent
+    Et un texte flottant avec la balise title "Edit type" est présent

features/step_definitions/context.rb

@@ -131,3 +131,19 @@
 Soit("un document que l'on consulte") do
   visit '/146e6e8442f0405b721b79357d00d0a1'
 end
+
+Soit("{string} la langue préférée configurée dans le navigateur") do |language|
+  page.driver.add_headers("Accept-Language" => language)
+end
+
+Soit('un texte flottant avec la balise title {string} est présent') do |text|
+  expect(page).to have_selector("title", text: /#{text}/i, visible: false)
+end
+
+Soit('un texte flottant avec l’attribut title {string} est présent') do |text|
+  expect(page).to have_selector("[title='#{text}']")
+end
+
+Soit('un placeholder contenant {string} est présent') do |text|
+  expect(page).to have_selector("input[placeholder='#{text}']")
+end

features/step_definitions/event.rb

@@ -56,3 +56,15 @@
   click_on_icon('sources .create-document')
 end
 
+Quand("je choisis {string} comme langue préférée configurée dans le navigateur et que je rafraichisse la page") do |language|
+  page.driver.add_headers("Accept-Language" => language)
+  visit current_path
+  sleep 2
+end
+
+Quand("je choisis {string} comme langue préférée configurée dans le navigateur, que je rafraichisse la page et que {string} une des gloses ouverte") do |language, title|
+  page.driver.add_headers("Accept-Language" => language)
+  visit current_path
+  sleep 2
+  click_on_icon_next_to('open', title)
+end

features/step_definitions/outcome.rb

@@ -85,4 +85,10 @@
 
 Alors("je ne vois pas le document intitulé {string}") do |title|
   expect(page).not_to have_content(title)
+end
+
+Soit('la page contient') do |table|
+  table.raw.flatten.each do |localization|
+    expect(page).to have_content localization
+  end
 end

features/support/env.rb

@@ -2,7 +2,7 @@
 require 'capybara/cuprite'
 
 Before do
-  Capybara.current_session.driver.add_headers("Accept-Language" => "fr")
+  Capybara.current_session.driver.add_headers("Accept-Language" => "en")
 end
 Capybara.run_server = false
 Capybara.default_driver = :cuprite
@@ -36,10 +36,17 @@ def have_image(alternative_text)
 end
 
 def sign_in(username, password)
-  fill_in placeholder: "Username", with: username
-  fill_in placeholder: 'Password', with: password
-  click_on 'Sign in'
-  expect(page).to have_content username
+  if page.has_content?('Sign in')
+    fill_in placeholder: "Username", with: username
+    fill_in placeholder: 'Password', with: password
+    click_on 'Sign in'
+    expect(page).to have_content username
+  else
+    fill_in placeholder: "Nom d’utilisateur", with: username
+    fill_in placeholder: 'Mot de passe', with: password
+    click_on 'Se connecter'
+    expect(page).to have_content username
+  end
 end
 
 def sign_out

frontend/package.json

@@ -9,10 +9,14 @@
     "bootstrap": "^5.2.2",
     "buffer": "^6.0.3",
     "events": "^3.3.0",
+    "i18next": "^23.11.5",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^2.5.2",
     "react": "^18.2.0",
     "react-bootstrap": "^2.5.0",
     "react-bootstrap-icons": "^1.10.2",
     "react-dom": "^18.2.0",
+    "react-i18next": "^14.1.2",
     "react-image-crop": "^10.0.9",
     "react-markdown": "^8.0.4",
     "react-notifications": "^1.7.4",

frontend/public/locales/en/translation.json

@@ -0,0 +1,21 @@
+{
+    "document": "Create a document",
+    "glose": "as a glose",
+    "source": "as a source",
+    "scratch": "from scratch",
+    "collection": "Create a collection from this document",
+    "signin": "Sign in",
+    "reference": "referenced by",
+    "username": "Username",
+    "password": "Password",
+    "title": "<TITLE>",
+    "creator": "<CREATOR>",
+    "rights": "All rights reserved",
+    "text": "<TEXT>",
+    "metadata": "Edit metadata...",
+    "content": "Edit content...",
+    "type": "Edit type",
+    "doc_close": "Close this document",
+    "doc_open": "Open this document",
+    "doc_focus": "Focus on this document"
+}

frontend/public/locales/fr/translation.json

@@ -0,0 +1,21 @@
+{
+    "document": "Créer un document",
+    "glose": "en tant que glose",
+    "source": "en tant que source",
+    "scratch": "à partir de zéro",
+    "collection": "Créer une collection à partir de ce document",
+    "signin": "Se connecter",
+    "reference": "référencé par",
+    "username": "Nom d’utilisateur",
+    "password": "Mot de passe",
+    "title": "<TITRE>",
+    "creator": "<CRÉATEUR>",
+    "rights": "Tous droits réservés",
+    "text": "<TEXTE>",
+    "metadata": "Éditer les métadonnées...",
+    "content": "Éditer le contenu...",
+    "type": "Éditer le type",
+    "doc_close": "Fermer ce document",
+    "doc_open": "Ouvrir ce document",
+    "doc_focus": "Se concentrer sur ce document"
+}