test(cypress): upgrade cypress to v10 and migrate to ts #991
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
seaerchin
changed the title
seaerchin
requested review from
prestonlimlianjie,
alexanderleegs and
kishore03109
this is because the wait for dom file runs into errors with pre-processing using webpack (see our cypress config, which loads and uses webpack). this means that the file is currently incompatible with ts (however, it does work if js). as this file is only used in medias, the file is removed and the call sites will be updated accordingly
seaerchin
force-pushed
the
test/update-cypress
branch
from
5634f51 to
49b712a
Compare
seaerchin
force-pushed
the
test/update-cypress
branch
from
49b712a to
672db3e
Compare
| @@ -1,22 +0,0 @@ | |||
| import waitForDom from "./waitForDom" | |||
There was a problem hiding this comment.
Just curious, does cypress 10 no longer need waitForDom to reduce test flakiness?
There was a problem hiding this comment.
oof i missed this. the waitForDom actually didnt seem to have any effect - this might be because i added some assertions.
just double checking here - the waitForDom prevents the xxx is detached from the dom error? if so, i think it might be useful for me to undo the deletion and instead, migrate it to ts
There was a problem hiding this comment.
Yeah this seemed to help with the issue originally - not sure if moving to cypress 10 helps already though. If the tests are less flaky now, maybe it doesn't need to be readded?
* chore(package lock): update deps * fix(cards): update cards to avoid broken styling * chore(package-lock): down to npm v6 * fix(foldercard.jsx): updated old folder card to prevent weird ui styling * chore(cypress commands): shift assertion into commands and remove wait * fix(files/folders spec): fix spec * test(cypress.config): update cypress config to hold only 10 tests in mem * fix(move.spec): update commands for new context menu dom structure * fix(cypress specs): fix remaining specs affected by context menu refactor * test(e2e): remove static waits and add new commands (#1001) * refactor(cypress commands): add more custom commands to cypress * fix(cypress tests): fixed using static wait times and instead use assertions * chore(settings.spec): refactor settings spec to use new constants * test(cypress commands): add new command for setting up default interceptors * test(editpage.spec): update editpage.spec to use new interceptor commnad * fix(cypress specs): remove accidental .only * test(cypress.config): change base url to be set in config rather than dynamically for each test * test(files.spec): use new commands to smooth api * chore(cypress constants): add more cypress constants * refactor(folders.spec): refactor to use new commands and remove old constants * refactor(cypress specs): use new commands and constants * test(resourcecategory.spec): add new command and refactor resource category to use new commands * refactor(resources.spec): shift to new api * chore(settings.spec): use new constants * refactor(sites.spec): update to new interceptors * chore(workspace.spec): update to new commands * chore(cypress constants): remove wait time constants * fix(editpage.spec): updddate test to have more specific wait * fix(cypress specs): update flakey tests * chore(cypress commands): update commands and docs * test(cypress specs): fix remaining specs * ci(ci-e2e): adds github commit message and info this is to avoid inconsistent dashboard messages for cypress - during push events, the title is empty so cypress uses the commit hash for hte dashboard; this isn't useful and this commit changes it to the PR title instead. see https://docs.cypress.io/guides/continuous-integration/github-actions#Pull-requests-commit-message-is-merge-SHA-into-SHA for more info
alexanderleegs
approved these changes
Aug 15, 2022
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
note: most line changes are from package-lock
Problem
our cypress version is ~4 major versions behind. the v6 ui is not that intuitive and it lacks features as compared to the v10 one (eg: dashboard sync/component testing).
furthermore, our tests are written in js originally, which lacks many intellisense features compared to ts. this is most evident during usage of custom commands, where the types cannot be automatically inferred and the command has no intellisense.
this PR migrates cypress to v10, together with a migration to ts.
Solution
setUpNodeEventsto point cypress at the underlyingreact-scriptswebpack config but has since been removed as we need a ts step, which is already done by the webpack pre-processor. the alias and such has been replaced usingts-paths, in the plugins folder (see here)index.d.ts(so that the global cypress object will have the correct types for the custom command - note that this should returnChainable<void>) and the command definition itselfChainable<ChildType>(for commands returningelement, this isChainable<JQuery<HTMLElement>>and the function definition has to take aprevSubjectargument).tsconfigfor cypress - this is to allow for top level suggestions of htecyobject without it being present in app code