search

jackdomleo7 / Checka11y.css

A CSS stylesheet to quickly highlight a11y concerns.
https://checka11y.jackdomleo.dev
MIT License
446 stars 31 forks source link

Update from Cypress 6 to Cypress 8 #113

Closed jackdomleo7 closed 3 years ago

jackdomleo7 commented 3 years ago

Describe the new a11y feature or project enhancement

We'd like to update Checka11y.css to use Cypress 8 rather than Cypress 6 so we can remain up to date with Cypress and make use of new features if needed

Describe the solution you'd like

Upgrade to Cypress 8

Link(s)

N/A

tannerdolby commented 3 years ago

👋 @jackdomleo7 !

I'm happy to be assigned this issue as well if its still up for grabs.

jackdomleo7 commented 3 years ago

That would be really useful! Thanks @tannerdolby !

tannerdolby commented 3 years ago

I haven't got around to this yet, but here is a link for reference when I get started.

https://docs.cypress.io/guides/references/migration-guide

tannerdolby commented 3 years ago

I apologize for the delay on this @jackdomleo7!

I got around to rewriting some of the tests in Jest, turns out the majority of the tests require ::after or ::before Pseudo element selectors which causes quite a big problem because jsdom doesnt support ::before and ::after to allow for getting the content property from a pseudo element. Recreating the browser environment works but if the selectors require grabbing ::before or ::after and specifically content then converting to Jest might require some major workaround as the bulk of tests are asserting against the content property of pseudo elements.

Note: I also tried using Cheerio after reading the test/index.html file but cheerio doesn't support pseudo elements either.

In plain js we can grab the content property using window and getComputedStyle() like this:

const el = document.querySelector(".some-node");
console.log(window.getComputedStyle(el, ":after").content); // the value of content property
console.log(window.getComputedStyle(el, ":after").getPropertyValue("content"); // ditto

This issue of selecting pseudo elements is solved for us when using Cypress as they have the really helpful .after("prop_name") method. This discussion might convince us to just stay with Cypress instead of converting to Jest like we discussed in #117. Let me know your thoughts.

jackdomleo7 commented 3 years ago

Hi @tannerdolby, absolutely no worries (there is no time limit - except for the fact that a person will automatically be unassigned from an issue after 3 months of inactivity 🙂).

That is really interesting and really useful to know! I think based on this, then I agree, we should stick with Cypress because it seems to be the best tool for the job. Thank you.