Seeding Report: Tests for Seeding Log Edit

[sidlamsal]

Pull Request Description

Adds cypress test file "seedingReport.log.edit.spec.js" containing tests for the seeding report edit functionality. Tests the following:

• When cancel button is pressed after editing, log is unaffected in the table and in the database
• Edits to direct seeding are reflected in the table and database
• Edits to tray seeding are reflected in the table and database

closes #204

Licensing Certification

FarmData2 is a Free Cultural Work and all accepted contributions are licensed as described in the LICENSE.md file. This requires that the contributor holds the rights to do so. By submitting this pull request I certify that I satisfy the terms of the Developer Certificate of Origin for its contents.

[sidlamsal]

Cypress Error when interacting with user drop down element:

Description: To test that the cancel button works, I generated a seeding report and started editing the first row of the table. When trying to edit the value in the "User" column of the seeding report table, I get a cypress error when I try to select a different drop down option.

Observed: Code:

    //Edit user
    cy.get('[data-cy="r0-User-input"]')
        .select(0)

Output:

When trying to interact with the drop down (.select(0)), cypress runs into an error because "...the center of this element is hidden from view".

Expected: When running similar code to change the "Crop" column of the seeding report, cypress gets the drop down and changes the selected value without error. Code (lines 40-50):

  //Edit crop input
    cy.get('[data-cy="r0-Crop-input"]')
        .select(0)

To reproduce the error:

1. Go to the file at: /home/fd2dev/FarmData2/farmdata2/farmdata2_modules/fd2_barn_kit/seedingReport/seedingReport.log.edit.spec.js
2. Uncomment the lines to edit user (71-72)
3. Run test in the cypress GUI using the electron browser

[braughtg]

When trying to interact with the drop down (.select(0)), cypress runs into an error because "...the center of this element is hidden from view".

Two comments here:

• First, it probably is not necessary to edit all of the fields to test the canceling of an edit. It would be sufficient to test a single field. If it is not modified in the database after the cancel, then the cancel was successful.
• Second, in other tests you will need to work with the Worker dropdown, or other elements that cause this error. Cypress is supposed to scroll the requested element into view when it is requested via cy.get as described here: https://docs-vercel.cypress.io/guides/core-concepts/interacting-with-elements#Actionability. However, as you have seen, this sometimes does not work and you see the error you have encountered. This is often because of the way the code in the page under test has been written and it causes the element being clicked to be hidden when it is scrolled into view. There are two options for dealing with this:
  • The first option should be to test to see if the element is hidden when Cypress thinks it has scrolled it into view and if so to see if that can be fixed. The way to start with this is to try using scrollIntoView() https://docs.cypress.io/api/commands/scrollIntoView. Then see if the element you are trying to click actually becomes visible. If it does not, then looking at the page code to see if it can be fixed.
  • The second option is to add the {force: true} argument to click. So call click({force: true}) instead of click() as described here: https://subscription.packtpub.com/book/web-development/9781839213854/9/ch09lvl1sec51/forcing-actionability. This is clearly simpler, but doesn't address the root of the problem and improve the application code. So the first option should be explored first.

[sidlamsal]

Then see if the element you are trying to click actually becomes visible. If it does not, then looking at the page code to see if it can be fixed.

Thanks for the suggestions.

• Firstly, I decided to just edit the date and to check if cancel worked.
• Secondly, I used .scrollIntoView() and .should('be.visible') to check that the element was visible, which it was. However, I still could not select(), or click() in the case of a button with the same issue. I decided to use {force: true}, for now.

[EliasBerhe]

Edit button not showing up on the Seeding Report Page

Description

When trying to run some of the test we wrote, Cypress couldn't find the Edit button and generated an error. I even logged in from FireFox and when I inserted some date range and clicked generate report button, the edit button was not visible on the table that was generated. I tried to reload the page and start the FarmData2 again and still couldn't see the Edit button.

The Funny thing is that the last time I was working on it on the same test, there was no problem but this time I only pulled the branch from origin to get new updates that were added by my teammates and I faced this problem. I am stuck at this because I can't move forward unless I resolve this issue because the whole point of this test relies on the edit button.

[braughtg]

When trying to run some of the test we wrote, Cypress couldn't find the Edit button and generated an error.

This is a known issue with FarmData2 and is reported in DickinsonCollege/FarmData2#592 with some additional information there.

As described in that issue, there is code in the SeedingReport.html page that causes different columns to be displayed depending on the screen width. So sometime changing the size of the browser window and/or messing with the display settings in the dev tools (see the issue for info) will make the Edit button reappear. There is also some possibility that the behavior is better in Chrome than in Firefox so perhaps testing in Chrome with Cypress will help.

A more complete approach would be find the code in the SeedingReport.html page that is checking the width and modify it so that all of the columns always appear. Then complete your tests. Then when the tests are working, you could turn to working on fixing this bug. That would be a huge help with the upstream FarmData2.

[braughtg]

The work here looks good. I am going to delay merging this until the issue with the screen width (DickinsonCollege#592 ) is properly resolved.