Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

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

Merged
merged 7 commits into from
Jun 3, 2022
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
86f1ff0
change to dark theme and then light theme test done
juans-chainsafe Jun 1, 2022
993d11a
Merge branch 'dev' into mnt/add-change-to-dark-theme-test-2141
juans-chainsafe Jun 1, 2022
e961c85
lingui extract
actions-user Jun 1, 2022
9e21acd
Merge branch 'dev' into mnt/add-change-to-dark-theme-test-2141
juans-chainsafe Jun 2, 2022
ef58d37
add change of color validation
juans-chainsafe Jun 2, 2022
f822df7
fix word spealing
juans-chainsafe Jun 2, 2022
b761b1c
Merge branch 'dev' into mnt/add-change-to-dark-theme-test-2141
juans-chainsafe Jun 3, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion packages/files-ui/cypress/support/page-objects/settingsPage.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]"),
Expand All @@ -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]"),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Going by what @Tbaut mentioned here: #2122 (comment)

We should use data-cy instead of testid on elements like buttons and only use testid if data-cy doesn't work. Data-cy should work for this button.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sadly didn't work with data-cy :(

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ah ok, well that's fair enough then. It's valid usage 👍

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]"),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 These ones make sense though as I've never successfully got data-cy working with radio inputs


// security tab
securityTabButton: () => cy.get("[data-testid=tab-security]"),
securityTabHeader: () => cy.get("[data-cy=label-security-header]"),
Expand Down
24 changes: 22 additions & 2 deletions packages/files-ui/cypress/tests/settings-spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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()
Expand All @@ -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
Expand Down
3 changes: 3 additions & 0 deletions packages/files-ui/src/Components/Modules/Settings/DisplayTab/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,7 @@ const DisplayView = () => {
<div
className={classes.container}
id="display"
data-cy="label-display-header"
>
<Typography
variant="h3"
Expand Down Expand Up @@ -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)}
Expand All @@ -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)}
Expand Down