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

[juans-chainsafe]

closes #2141

[render]

Your Render PR Server URL is https://chainsafe-components-stage-pr-2162.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-cabnv8arrk0cgoep5hb0.

[render]

Your Render PR Server URL is https://files-ui-stage-pr-2162.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-cabnv9arrk0cgoep5hfg.

[render]

Your Render PR Server URL is https://storage-ui-stage-pr-2162.onrender.com.

Follow its progress at https://dashboard.render.com/static/srv-cabnvairrk0cgoep5i10.

[Tbaut]

This test checks whether the local storage string is set or not, but whether or not this actually reflect on the UI, and that it does switch to dark/light mode is not tested. I didn't look in details how to do this, but I'm pretty sure we could check things like the background color of a div for instance.

[juans-chainsafe]

This test checks whether the local storage string is set or not, but whether or not this actually reflect on the UI, and that it does switch to dark/light mode is not tested. I didn't look in details how to do this, but I'm pretty sure we could check things like the background color of a div for instance.

yes, you are right, and we do this validation as well:
settingsPage.darkThemeLabel().get("div").should("have.class", "checked")
to check that the div of the dark theme has the class "checked"

But we don't really check the UI (we though with Andrew of checking a background color but if that changes, the test will fail, but well, maybe those color hardly ever change) I will add that validation

[Tbaut]

yup, if the test fails, then we'll fix it, it should be easy enough

[juans-chainsafe]

yup, if the test fails, then we'll fix it, it should be easy enough

changes uploaded! I validated the change of color in the display header

      //this is when it change to dark
      settingsPage.displayTabHeader().should("have.css", "color", "rgb(219, 219, 219)")
      
      //this is when it change to light
      settingsPage.displayTabHeader().should("have.css", "color", "rgb(15, 15, 15)")

[asnaith]

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.

[juans-chainsafe]

Sadly didn't work with data-cy :(

[asnaith]

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

[asnaith]

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

[asnaith]

Awesome Juan, nice to have test coverage for this functionality :)

[Tbaut]

great one 🏴