E2e test mika #2931

mika-robots · 2023-10-26T22:30:25Z

Description
This is another attempt at adding cypress e2e test.
Few notes:

The coverage was removed. It didn't not seem to produce accurate results and we should spend some time on doing properly before re-enabling
There are few explicit waits which I could't avoid. They are related to clicking on the map to create locations

Jira link:

Type of change

Non breaking change that enable automated cypress tests
There are no changes to any files outside of end-to-end folder
How Has This Been Tested?

I run it both locally and on my branch

Checklist:

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

…_mika

Update github actions file

…_mika

kathyavini

I'm sorry for taking so long to review this!!

I think this looks awesome and the more modular test design is 👌 . Since we took so long to get to this, some selectors and behaviours are now out of date -- I noted a few below -- but I would love to merge first to get this into the repo, and then open an update PR or two to implement those needed changes, which will touch on packages/webapp as well.

kathyavini · 2024-01-18T18:45:43Z

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

+    // Load the users fixture before the tests
+    cy.fixture('e2e-test-users.json').then((loadedUsers) => {
+      users = loadedUsers;
+      const user = users[Cypress.env('USER')];


What's the correct way to handle the Cypress environment variables for running the tests locally?

I had to put USER into cypress.config.js but I don't think that was the intended method.

Yes, these actually should be added either in the configuration file, or in its own separate env variables file. There's an overview here on the different methods and their pros/cons https://docs.cypress.io/guides/guides/environment-variables#Setting

kathyavini · 2024-01-18T18:47:40Z

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

+    const uniqueSeed = Date.now().toString();
+    const uniqueId = Cypress._.uniqueId(uniqueSeed);
+
+    cy.get('[data-cy=home-farmButton]')


home-farmButton is one of the many test ids that were lost in the navigation revamp (well actually in this case the whole menu was removed) so these tests will need a new way to select the people menu option.

kathyavini · 2024-01-18T18:53:54Z

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

+    cy.contains(translation['INVITE_USER']['CHOOSE_ROLE'])
+      .parent()
+      .find('input')
+      .type(roles['MANAGER'] + '{enter}');


I'm pretty sure that typing into the React Selects like this was not intended, but was probably possible due to a bug in our code that existed until this commit (see also PR #2951 for more context).

Now this fails and will need a new method.

kathyavini · 2024-01-18T18:54:32Z

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

+
+  it('CheckTasksNavigation', () => {
+    // Confirm that location exists
+    cy.get('[data-cy=home-farmButton]')


As above; needs new selectors for the menu items.

kathyavini · 2024-01-18T18:55:58Z

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

+
+        // cy.get('[id$=react-select-3-input]').type(language+'{enter}');
+        cy.contains('English')


As above; this will fail because the React Select will not permit typing (is not searchable) anymore.

kathyavini · 2024-01-18T18:56:44Z

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

+Cypress.Commands.add('acceptSlideMenuSpotlights', (crop_menu_name) => {
+  // Check the spotlights
+  cy.get('[data-cy=spotlight-next]').should('exist').and('not.be.disabled').click();


I think we have one less spotlight here now.

antsgar · 2024-01-23T16:50:21Z

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

+
+Cypress.Commands.add('createFirstLocation', (fieldString) => {
+  cy.get('[data-cy=home-farmButton]').should('exist').and('not.be.disabled').click({ force: true });


We could store these selector strings somewhere to avoid having to update them in several different files when there's a UI change, e.g.

const FARM_BUTTON_SELECTOR = '[data-cy=home-farmButton]'

antsgar · 2024-01-23T19:49:09Z

.github/workflows/cypress_tests.yml

-  #     - integration
+  pull_request:
+    branches:
+      - e2e_test_mika


Will dig into this a bit more, but it seems the answer to setting this up so that it only runs before merging to integration would be merge queues https://medium.com/@kojoru/how-to-set-up-merge-queues-in-github-actions-59381e5f435a

antsgar · 2024-01-23T19:51:22Z

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

+    });
+  });
+
+  after(() => {});


This could probably be removed?

antsgar · 2024-01-23T19:52:30Z

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

+    // Select field
+    cy.contains('First Field').should('be.visible');
+    // eslint-disable-next-line cypress/no-unnecessary-waiting
+    cy.wait(500, { log: false });


If at all possible we should try not to have explicit waiting

antsgar · 2024-01-23T19:55:23Z

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

+
+  after(() => {});
+
+  it('AddCropVariety', () => {


NIT but I'd prefer if we made these test names a little bit more semantic describing what it is that the user would be doing that we're trying to check for, something like it('can add a new crop variety')

antsgar · 2024-01-23T19:58:53Z

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

+    cy.fixture('e2e-test-users.json').then((loadedUsers) => {
+      users = loadedUsers;
+      const user = users[Cypress.env('USER')];
+
+      // Load the locale fixture by reusing translations file
+      cy.fixture('../../../webapp/public/locales/' + user.locale + '/translation.json').then(
+        (data) => {
+          // Use the loaded data
+          translation = data;
+
+          cy.visit('/');
+          cy.loginOrCreateAccount(
+            user.email,
+            user.password,
+            user.name,
+            user.language,
+            translation['SLIDE_MENU']['CROPS'],
+            translation['FARM_MAP']['MAP_FILTER']['GARDEN'],
+          );
+        },
+      );


This chunk of code might end up repeated throughout different files (it's currently both in crops and farm people), so it'd be good to split it into its own utility function or custom Cypress command https://docs.cypress.io/api/cypress-api/custom-commands

antsgar · 2024-01-23T20:15:42Z

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

+});
+
+Cypress.Commands.add('acceptSlideMenuSpotlights', (crop_menu_name) => {


These last three commands, addFarm, onboardCompleteQuestions and acceptSlideMenuSpotlights are not reused in other test files but just by other commands here. With that in mind, they could probably just be regular functions instead of commands https://docs.cypress.io/api/cypress-api/custom-commands#1-Dont-make-everything-a-custom-command

…tax and remove hardcoded wait

…nds.js regular functions

…eforeEach setup

mika-robots and others added 30 commits August 30, 2023 11:26

Added tests for Farm roles, ability to select a language, etc

046accc

Merge remote-tracking branch 'origin/HEAD' into e2e_test_mika

b9d8971

adapt to new structure

0ad00f7

Move to Cypress 13

fa9b507

Merge commit '8a2838e6c954d17e4b01fdaff44b5b33ad458dfe' into e2e_test…

0035b97

…_mika

Merge commit '9273c6a783233c65ee31cbf721e2f00548918734' into e2e_test…

fcd3314

…_mika

Update cypress_tests.yml

ca907b5

Update github actions file

Remove unused packages

717cd49

Add trigger to run on every push to e2e branch

2709830

Update project ID

ae5889e

Add code coverage reporting

8658387

Update code coverage path

a87aa06

Update the lock file

2c50e75

Fix working directory

279848e

Add a step to install needed packages in e2e

dc21154

add coverage to support file

6fda6f0

Move cypress to version 6

57e7415

Look for coverage file

3fc1b0d

Use find to locate coverage file

0031dfc

Fix the find command

80f8721

Add instrumentation to webapp

eb00f02

Clean everything up, add spanish

90b93d7

Add the lock file

42e032f

remove spanish test

33e959b

update gitignore for coverage and other artifacts

97c5fd4

Add basic crop test

53e7411

Move cypress to LiteFarm account

49f1fa9

Update Cypress project to LiteFarm account

72dede9

Add Field and task creation to the tests

9957088

Refactored the naming and cleanup the tests

1e195a7

mika-robots and others added 15 commits October 22, 2023 14:53

Set the Node version

5bc3de1

Fix which spotlight we check on second run

0934839

Merge commit '5432a40c91a54d5eee62de956c1bb9848143cf0d' into e2e_test…

c2fa4b7

…_mika

Added another task test

3915e9b

Add logic to "Complete" the tasks

40dc4d4

Fix checkbox id

87ba851

Force the checkbox since it is 0 size

5e20040

Make sure we click the right button when selecting

8fc46eb

Update tasks.js

ae8ac6b

Force the click

3f761fb

Wait longer for the Organic screen

e9dc062

Wait for map to load before trying to add a garden

5bd099b

Add WaitForReact to init Map

bf7c076

Wait for markerjs call

386ddc5

Merge commit '27e115d61814cdeb0bb454d8c4342d64f6fb2d82' into e2e_test…

c2e1ffb

…_mika

mika-robots requested review from a team as code owners October 26, 2023 22:30

mika-robots requested review from antsgar and kathyavini and removed request for a team October 26, 2023 22:30

kathyavini approved these changes Jan 18, 2024

View reviewed changes

antsgar reviewed Jan 23, 2024

View reviewed changes

antsgar approved these changes Jan 23, 2024

View reviewed changes

antsgar merged commit d4ae499 into integration Jan 23, 2024
3 checks passed

antsgar deleted the e2e_test_mika branch January 23, 2024 20:17

kathyavini added a commit that referenced this pull request Jan 30, 2024

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

1408363

…tax and remove hardcoded wait

kathyavini added a commit that referenced this pull request Jan 30, 2024

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

afa7a6e

…nds.js regular functions

kathyavini mentioned this pull request Jan 30, 2024

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

Merged

18 tasks

kathyavini added a commit that referenced this pull request Jan 30, 2024

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

8b6684e

…eforeEach setup

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

E2e test mika #2931

E2e test mika #2931

mika-robots commented Oct 26, 2023

kathyavini left a comment

kathyavini Jan 18, 2024

antsgar Jan 23, 2024

kathyavini Jan 18, 2024

kathyavini Jan 18, 2024

kathyavini Jan 18, 2024

kathyavini Jan 18, 2024

kathyavini Jan 18, 2024

antsgar Jan 23, 2024

antsgar Jan 23, 2024

antsgar Jan 23, 2024

antsgar Jan 23, 2024

antsgar Jan 23, 2024

antsgar Jan 23, 2024

antsgar Jan 23, 2024


		// cy.get('[id$=react-select-3-input]').type(language+'{enter}');
		cy.contains('English')


		Cypress.Commands.add('createFirstLocation', (fieldString) => {
		cy.get('[data-cy=home-farmButton]').should('exist').and('not.be.disabled').click({ force: true });

		});

		Cypress.Commands.add('acceptSlideMenuSpotlights', (crop_menu_name) => {

E2e test mika #2931

E2e test mika #2931

Conversation

mika-robots commented Oct 26, 2023

kathyavini left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment