[Files] Change to dark theme and go back to light theme test (#2162)

* change to dark theme and then light theme test done * lingui extract * add change of color validation * fix word spealing Co-authored-by: GitHub Actions <actions@github.com>
ChainSafe · Jun 3, 2022 · 4235479 · 4235479
1 parent 511c59c
commit 4235479
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 3 deletions.
diff --git a/packages/files-ui/cypress/support/page-objects/settingsPage.ts b/packages/files-ui/cypress/support/page-objects/settingsPage.ts
@@ -14,7 +14,7 @@ export const settingsPage = {
   profileTabButton: () => cy.get("[data-testid=tab-profile]"),
   profileTabHeader: () => cy.get("[data-cy=label-profile-header]"),
   walletAddressLabel: () => cy.get("[data-cy=label-profile-wallet-address]"),
-  filesSharingKetLabel: () => cy.get("[data-cy=label-profile-files-sharing-key]"),
+  filesSharingKeyLabel: () => cy.get("[data-cy=label-profile-files-sharing-key]"),
   firstNameInput: () => cy.get("[data-cy=input-profile-firstname]"),
   lastNameInput: () => cy.get("[data-cy=input-profile-lastname]"),
   saveChangesButton: () => cy.get("[data-cy=button-save-changes]"),
@@ -24,6 +24,12 @@ export const settingsPage = {
   setUsernameButton: () => cy.get("[data-cy=button-set-username]"),
   usernamePresentInput: () => cy.get("[data-cy=input-profile-username-present]"),
 
+  // display tab
+  displayTabButton: () => cy.get("[data-testid=tab-display]"),
+  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]"),
+
   // security tab
   securityTabButton: () => cy.get("[data-testid=tab-security]"),
   securityTabHeader: () => cy.get("[data-cy=label-security-header]"),

diff --git a/packages/files-ui/cypress/tests/settings-spec.ts b/packages/files-ui/cypress/tests/settings-spec.ts
@@ -124,6 +124,26 @@ describe("Settings", () => {
         .should("have.length", 1)
     })
 
+    it("can change to dark theme and light theme", () => {
+      cy.web3Login()
+      navigationMenu.settingsNavButton().click()
+      settingsPage.displayTabButton().click()
+
+      // change to dark theme and ensure change of color
+      settingsPage.darkThemeLabel().click().then(() => {
+        expect(window.localStorage.getItem("csf.themeKey")).to.equal("dark")
+      })
+      settingsPage.darkThemeLabel().get("div").should("have.class", "checked")
+      settingsPage.displayTabHeader().should("have.css", "color", "rgb(219, 219, 219)")
+
+      // change to light theme and ensure change of color
+      settingsPage.lightThemeLabel().click().then(() => {
+        expect(window.localStorage.getItem("csf.themeKey")).to.equal("light")
+      })
+      settingsPage.lightThemeLabel().get("div").should("have.class", "checked")
+      settingsPage.displayTabHeader().should("have.css", "color", "rgb(15, 15, 15)")
+    })
+
     it("can copy to clipboard wallet address and files sharing key", () => {
       cy.web3Login()
       navigationMenu.settingsNavButton().click()
@@ -141,9 +161,9 @@ describe("Settings", () => {
       })
 
       // ensure the correct files sharing key is being copied to the clipboard
-      settingsPage.filesSharingKetLabel().click()
+      settingsPage.filesSharingKeyLabel().click()
       cy.window().its("navigator.clipboard").invoke("readText").then((text) => {
-        settingsPage.filesSharingKetLabel().should((element) => {
+        settingsPage.filesSharingKeyLabel().should((element) => {
           const filesSharingKey = element.text().split("...")
           expect(text.startsWith(filesSharingKey[0])).to.be.true
           expect(text.endsWith(filesSharingKey[1])).to.be.true

diff --git a/packages/files-ui/src/Components/Modules/Settings/DisplayTab/index.tsx b/packages/files-ui/src/Components/Modules/Settings/DisplayTab/index.tsx
@@ -76,6 +76,7 @@ const DisplayView = () => {
         <div
           className={classes.container}
           id="display"
+          data-cy="label-display-header"
         >
           <Typography
             variant="h3"
@@ -103,6 +104,7 @@ const DisplayView = () => {
               >
                 <label className={clsx(classes.themeBox, classes.themeBoxDark)}>
                   <RadioInput
+                    testId="dark-theme"
                     value='dark'
                     label={t`Dark Theme`}
                     onChange={(e) => setTheme(e.target.value)}
@@ -120,6 +122,7 @@ const DisplayView = () => {
               >
                 <label className={clsx(classes.themeBox, classes.themeBoxLight)}>
                   <RadioInput
+                    testId="light-theme"
                     value='light'
                     label={t`Light Theme`}
                     onChange={(e) => setTheme(e.target.value)}