LF-4026 Get Cypress tests passing on current state of integration #3100

kathyavini · 2024-01-30T18:32:14Z

TODO:

Opening to test running in CI -- passed!!! 🎉
Refactor the beforeEach of each spec into a reusable function

Description

This is an update of PR #2931, addressing comments in that PR and getting the tests passing on the current state of integration by updating selectors and points of failure/flakiness. It has been running smoothly locally, no flakiness, for several days now so hopefully the same on GitHub!! 🤞

Notes on running locally within packages/end-to-end with npm run cypress:

Because of the spotlight interactions, the tests need to be run on a clean database, the way that they will be run in CI (I have been using a script that drops and re-migrates my db for the purposes of my own testing)
Similarly, there is a temporal dependency such that the crops test needs to be run before the tasks test. This will always be the case in CI (they are run sequentially) but I'll make a note in the code because eventually it would be much better if the specs could be run in total isolation
The root cause for both of those issues is that I couldn't successfully get conditional "interact-if-present" logic working. This would be first on my list for the next iteration of the tests, but for now I let it be because it only is relevant in local use, not CI
The specs are setup to run through multiple language users (there a variable that controls this and it's well-integrated into the tests) but then the GitHub workflow was hardcoded for the English user. Discussed this with @antsgar and English-only is preferred for now (it will also keep the tests short)

Jira link: https://lite-farm.atlassian.net/browse/LF-4026

Type of change

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
This change requires a documentation update

How Has This Been Tested?

Passes test case
UI components visually reviewed on desktop view
UI components visually reviewed on mobile view
Other (please explain)

Run locally from within packages/end-to/end with refreshed database using npm run cypress

Checklist:

I have commented my code, particularly in hard-to-understand areas
My changes generate no new warnings
I have added tests that prove my fix is effective or that my feature works
New and existing unit tests pass locally with my changes
The precommit and linting ran successfully
I have added or updated language tags for text that's part of the UI
I have added "MISSING" for all new language tags to languages I don't speak
I have added the GNU General Public License to all new files

…n-current-state-of-integration

No longer searchable like this since PR #2951

Also change assertion on Proceed button click which was flaky locally

…current-state-of-integration

Also gitignore coverage report directory

Test was suddenly failing at this step

… order All of CheckTaskNavigation is included within CreateCleanTask

… of date wait call Not sure what @markerJsRequest used to wait, but tests now fail at that point

Also add three skipped selectors

…tax and remove hardcoded wait

…nds.js regular functions

kathyavini · 2024-01-30T19:10:13Z

packages/end-to-end/cypress/e2e/tasks.js

+    cy.get(Selectors.ADD_TASK_LOCATION_CONTINUE).should('exist').and('not.be.disabled').click();
+
+    // This screen only present when this test file is run after crops.js
+    cy.get(Selectors.ADD_TASK_CROPS_CONTINUE).should('exist').and('not.be.disabled').click();


This is the cause of the temporal dependency between crops.js and tasks.js. There is an additional page in this multi-page form when a crop plan exists on the farm.

In the future to make this more robust and ensure the tests are independent, we'll likely need to bake in the creation of a crop in the tasks test itself as a part of the test setup before assertions. We'll probably end up abstracting the code that does the crop creation on its own reusable command

Ah that's a good idea! I was thinking the spec needed to be more flexible here, but instead the environment could have been made more predictable.

kathyavini · 2024-01-30T19:10:47Z

packages/end-to-end/cypress/e2e/tasks.js


-    cy.get('[data-cy=addTask-cropsContinue]').should('exist').and('not.be.disabled').click();
+    // This screen only present when this test file is run after crops.js
+    cy.get(Selectors.ADD_TASK_CROPS_CONTINUE).should('exist').and('not.be.disabled').click();


Duncan-Brain · 2024-01-30T20:58:42Z

I think you are still working on this... but I took a look early -- I have seen it has passed CI ! Nice!

My main question will be about the movement/deletion of the google maps intercept requests any extra info you can provide would be cool.

…eforeEach setup

kathyavini · 2024-01-30T21:06:25Z

packages/end-to-end/cypress/support/utilities.js

@@ -0,0 +1,45 @@
+/*


What got timeboxed here was writing this function in ts and accepting an array instead of a single additional file -- after wrangling with the cy.fixture() promises for a while I left it be. It would be good for those improvements to be made someday 🙂

kathyavini · 2024-01-30T21:16:26Z

@Duncan-Brain hmmm I don't know if I have too much extra info there! Mostly it's the exact same as how Mika set it up and I've come to love the pattern. I think the only things I changed were:

There was a sudden flakiness (or maybe more like sudden failure) on the Farm Selection page so I tried intercepting the network request I was seeing in dev tools and I haven't seen a failed test there since 👍
There was one hardcoded cy.wait(500) on a farm map interaction, so I intercepted and waited instead (not a move but a duplication of what was used in another farm map test) This proved flakey (passed one run, failed the second), so I restored Mika's original code -- now I'm assuming that he had his reasons for the explicit wait!
There was one intercept of @markerJsRequest that I truly don't know the purpose of; by the time I was running the tests this was causing a failure (the cy.wait never concluded) so I removed it

This was a point of failure in 2nd CI run

antsgar

This is really great work! 🙌 we might need to figure out a way to get rid of the explicit waiting at some point if it ends up in flakiness, but for now we move on 🙂 (relatedly, I found this article that I really enjoyed about cy.wait https://filiphric.com/waiting-in-cypress-and-how-to-avoid-it)

antsgar · 2024-01-30T20:31:02Z

packages/end-to-end/.gitignore

@@ -0,0 +1 @@
+.nyc_output


Is this related to code coverage? We're not running any coverage reports right now, right?

Yes exactly! And running the tests locally regenerates this folder, with the contents a single JSON file containing this 😆

{}

Duncan-Brain

Thanks @kathyavini for the explaining those little changes!

Might be worth asking Mika about the marker thing or others for the future..... I agree I cant find any use of it in our frontend.

kathyavini added 17 commits January 22, 2024 17:59

Merge branch 'e2e_test_mika' into LF-4026-get-cypress-tests-passing-o…

36f5a80

…n-current-state-of-integration

LF-4026 Handle React Select behaviour update

bfbcf18

No longer searchable like this since PR #2951

LF-4026 Update menu navigation to People

fe916f5

LF-4026 Remove reference to data-cy=home-farmButton

a9757af

Also change assertion on Proceed button click which was flaky locally

Merge branch 'integration' into LF-4026-get-cypress-tests-passing-on-…

0bab395

…current-state-of-integration

LF-4026 Add env variable to config for local use

855942f

Also gitignore coverage report directory

LF-4026 Wait Google Maps geocode on Farm Creation page

4ad0f4b

Test was suddenly failing at this step

LF-4026 Revise selection of map and crop menu items

17cd858

LF-4026 Update crops and task files with new menu selectors

635d723

LF-4026 Remove redundant test and add explanatory comments about test…

f5877bc

… order All of CheckTaskNavigation is included within CreateCleanTask

LF-4026 Remove extra spotlights, unnecesary snackbar interaction, out…

0dc71d8

… of date wait call Not sure what @markerJsRequest used to wait, but tests now fail at that point

LF-4026 Create constants file for selectors

965ec6e

LF-4026 Namespace selector constants

532ca39

Also add three skipped selectors

LF-4026 Add license to files

4ad8155

LF-4026 PR #2931 feedback - refactor test cases to 'it... should' syn…

1408363

…tax and remove hardcoded wait

LF-4026 PR #2931 feedback - make custom commands called only in comma…

afa7a6e

…nds.js regular functions

LF-4026 Set workflow to run within merge queue

15b6692

kathyavini self-assigned this Jan 30, 2024

kathyavini requested review from a team as code owners January 30, 2024 18:32

kathyavini requested review from antsgar and Duncan-Brain and removed request for a team January 30, 2024 18:32

kathyavini commented Jan 30, 2024

View reviewed changes

LF-4026 PR #2931 feedback - remove empty functions and refactor out b…

8b6684e

…eforeEach setup

kathyavini commented Jan 30, 2024

View reviewed changes

LF-4026 Revert removal of hardcoded wait

76adf26

This was a point of failure in 2nd CI run

antsgar approved these changes Jan 31, 2024

View reviewed changes

Duncan-Brain approved these changes Jan 31, 2024

View reviewed changes

Duncan-Brain added this pull request to the merge queue Jan 31, 2024

Merged via the queue into integration with commit 1892333 Jan 31, 2024
7 checks passed

Duncan-Brain deleted the LF-4026-get-cypress-tests-passing-on-current-state-of-integration branch January 31, 2024 15:27

kathyavini mentioned this pull request Jan 31, 2024

Include both pull_request and merge_group triggers #3104

Merged

16 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

LF-4026 Get Cypress tests passing on current state of integration #3100

LF-4026 Get Cypress tests passing on current state of integration #3100

kathyavini commented Jan 30, 2024 •

edited

kathyavini Jan 30, 2024

antsgar Jan 30, 2024

kathyavini Jan 30, 2024

kathyavini Jan 30, 2024

Duncan-Brain commented Jan 30, 2024

kathyavini Jan 30, 2024

kathyavini commented Jan 30, 2024 •

edited

antsgar left a comment

antsgar Jan 30, 2024

kathyavini Jan 31, 2024

Duncan-Brain left a comment

		@@ -0,0 +1 @@
		.nyc_output

LF-4026 Get Cypress tests passing on current state of integration #3100

LF-4026 Get Cypress tests passing on current state of integration #3100

Conversation

kathyavini commented Jan 30, 2024 • edited

kathyavini Jan 30, 2024

Choose a reason for hiding this comment

antsgar Jan 30, 2024

Choose a reason for hiding this comment

kathyavini Jan 30, 2024

Choose a reason for hiding this comment

kathyavini Jan 30, 2024

Choose a reason for hiding this comment

Duncan-Brain commented Jan 30, 2024

kathyavini Jan 30, 2024

Choose a reason for hiding this comment

kathyavini commented Jan 30, 2024 • edited

antsgar left a comment

Choose a reason for hiding this comment

antsgar Jan 30, 2024

Choose a reason for hiding this comment

kathyavini Jan 31, 2024

Choose a reason for hiding this comment

Duncan-Brain left a comment

Choose a reason for hiding this comment

kathyavini commented Jan 30, 2024 •

edited

kathyavini commented Jan 30, 2024 •

edited