[Files] Change language test (#2192)

* change to different language test done * update identifiers * improve reliability of test Co-authored-by: Andrew Snaith <[email protected]>
ChainSafe · Jun 16, 2022 · 6b5287e · 6b5287e
1 parent 5d72a7c
commit 6b5287e
Show file tree

Hide file tree

Showing 4 changed files with 65 additions and 1 deletion.
diff --git a/packages/files-ui/cypress/support/page-objects/settingsPage.ts b/packages/files-ui/cypress/support/page-objects/settingsPage.ts
@@ -10,6 +10,9 @@ import { planChangeSuccessModal } from "../../support/page-objects/modals/billin
 export const settingsPage = {
   ...basePage,
 
+  // settings
+  settingsTitleLabel: () => cy.get("[data-cy=label-title-settings]"),
+
   // profile tab
   profileTabButton: () => cy.get("[data-testid=tab-profile]"),
   profileTabHeader: () => cy.get("[data-cy=label-profile-header]"),
@@ -29,6 +32,12 @@ export const settingsPage = {
   displayTabHeader: () => cy.get("[data-cy=label-display-header]"),
   darkThemeLabel: () => cy.get("[data-testid=radio-input-dark-theme]"),
   lightThemeLabel: () => cy.get("[data-testid=radio-input-light-theme]"),
+  languageDropdown: () => cy.get("[data-testid=dropdown-title-language-selection]"),
+  germanLanguageOption: () => cy.get("[data-cy=label-language-option-de]"),
+  englishLanguageOption: () => cy.get("[data-cy=label-language-option-en]"),
+  spanishLanguageOption: () => cy.get("[data-cy=label-language-option-es]"),
+  frenchLanguageOption: () => cy.get("[data-cy=label-language-option-fr]"),
+  norwegianLanguageOption: () => cy.get("[data-cy=label-language-option-no]"),
 
   // security tab
   securityTabButton: () => cy.get("[data-testid=tab-security]"),

diff --git a/packages/files-ui/cypress/tests/settings.cy.ts b/packages/files-ui/cypress/tests/settings.cy.ts
@@ -170,6 +170,59 @@ describe("Settings", () => {
         })
       })
     })
+
+    it("can switch between different languages that the app provides", () => {
+      cy.web3Login({ withNewSession: true })
+      navigationMenu.settingsNavButton().click()
+      settingsPage.displayTabButton().click()
+
+      cy.intercept("GET", "**/buckets/summary").as("refresh").then(() => {
+        // ensure that spanish language is displayed
+        settingsPage.languageDropdown().click()
+        settingsPage.spanishLanguageOption().click()
+        cy.wait("@refresh")
+        settingsPage.languageDropdown()
+          .should("be.visible")
+          .should("have.text", "Español")
+        settingsPage.settingsTitleLabel().should("have.text", "Ajustes")
+
+        // ensure that french language is displayed
+        settingsPage.languageDropdown().click()
+        settingsPage.frenchLanguageOption().click()
+        cy.wait("@refresh")
+        settingsPage.languageDropdown()
+          .should("be.visible")
+          .should("have.text", "Français")
+        settingsPage.settingsTitleLabel().should("have.text", "Paramètres")
+
+        // ensure that german language is displayed
+        settingsPage.languageDropdown().click()
+        settingsPage.germanLanguageOption().click()
+        cy.wait("@refresh")
+        settingsPage.languageDropdown()
+          .should("be.visible")
+          .should("have.text", "Deutsch")
+        settingsPage.settingsTitleLabel().should("have.text", "Einstellungen")
+
+        // ensure that norweigian language is displayed
+        settingsPage.languageDropdown().click()
+        settingsPage.norwegianLanguageOption().click()
+        cy.wait("@refresh")
+        settingsPage.languageDropdown()
+          .should("be.visible")
+          .should("have.text", "Norsk")
+        settingsPage.settingsTitleLabel().should("have.text", "Innstillinger")
+
+        // ensure that norweigian language is displayed
+        settingsPage.languageDropdown().click()
+        settingsPage.englishLanguageOption().click()
+        cy.wait("@refresh")
+        settingsPage.languageDropdown()
+          .should("be.visible")
+          .should("have.text", "English")
+        settingsPage.settingsTitleLabel().should("have.text", "Settings")
+      })
+    })
   })
 
   context("mobile", () => {

diff --git a/packages/files-ui/src/Components/Modules/Settings/DisplayTab/LanguageSelection.tsx b/packages/files-ui/src/Components/Modules/Settings/DisplayTab/LanguageSelection.tsx
@@ -52,14 +52,15 @@ const LanguageSelection = () => {
       menuItems={availableLanguages.map((lang) => (
         {
           contents: (
-            <span>
+            <span data-cy={`label-language-option-${lang.id}`}>
               {lang.label}
             </span>
           ),
           onClick: () => setActiveLanguage(lang.id)
         }
       ))}
       title={currentLanguage}
+      testId="language-selection"
     />
   )
 }

diff --git a/packages/files-ui/src/Components/Modules/Settings/index.tsx b/packages/files-ui/src/Components/Modules/Settings/index.tsx
@@ -163,6 +163,7 @@ const Settings: React.FC = () => {
           variant="h1"
           component="p"
           className={classes.title}
+          data-cy="label-title-settings"
         >
           <Trans>Settings</Trans>
         </Typography>