Seeding Report: Test Area Filter

[braughtg]

The tests should generate seeding reports as appropriate to check that:

• - when “All” is selected in the Area filter, the table will contain seeding logs for multiple different areas.
• - when a specific area is selected in the Area filter, the table will contain only seeding logs for the selected area.
• - the dropdown for the Area filter contains only areas for which there are seeding logs in the date range used to generate the report.

Some additional notes relevant to this issue:

• The .spec.js file containing your test should be stored in an appropriate location and have a short but descriptive name. Use the locations and an naming from the "Good First issues" as examples.
• The .spec.js file should include a comment at the top that describes what the file as a whole is testing.
• The message for the describe should describe in a short phrase what the file is testing.
• After logging in and visiting the desired page the beforeEach method should call cy.waitForPage(). This will ensure that the page is fully loaded (e.g. that all the Maps used by the page are loaded) before performing any tests.
• It is not necessary to include a separate it for each of the things to be tested.
  • You should decide how to divide the things being tested into its so that each it tests a cohesive set of things.
  • The message for each it should describe in a short phrase what the it is testing.
• The .spec.js files in the farmdata2/farmdata2_modules/fd2_example/ sub-tabs (e.g. ui, api) may provide some helpful examples.
• These tests should utilize logs that are in the sample database. Information about the data contained in the sample database can be found in the "The Sample Database" section of the docker/sampleDB/README.md file.

[qnhn22]

I would like to work on this issue!
Team 3 - Section 2

[johnmaccormick]

Hi team, please create a draft pull request for your work on this issue and mention it here. That way I'll be able to follow your progress more easily. Let me know if you need any assistance.

[nguyenbanhducA1K51]

Error:

Code:

[braughtg]

@nguyenbanhducA1K51 Your question above seems to have not come through entirely. Please edit it to include all of the necessary information and ask your question.

[nguyenbanhducA1K51]

@braughtg
Could you clarrify the necessary information that I should add ?

[braughtg]

Could you clarrify the necessary information that I should add ?

When I look at your message above I see a screenshot labeled "Error" and another heading that says "Code" but I do not see any code, or see any question. I would suggest the following:

• Lead with some text indicating what you are trying to do and what you are experiencing that is not as expected.
• Update the screenshot so that it shows enough information that someone can interpret what has happened. For example, the line that is indicated as to where the error occurred is cut off. Thus, if the error is later on that line, a reader would not be able to see that and help you.
• Include the "Code" as text under the heading for the code. When I look at this issue I do not see any code. Perhaps you have pasted it as white text that does not appear on a white background? Instead use markdown and include the code as text.
• Finally, include a specific question that you would like to have answered.

You can find some excellent advice on posting quality questions here:

• How to Ask Good Technical Questions

[nguyenbanhducA1K51]

I think I figure out something wrong from your feedback. It is actually the white font that disappear in white background. The full question that I asked is:

When I worked on Cypress Test for this issue, I added the line cy.waitForPage() in the beforeEach() part of the test. This is to make sure that the page has completed loading all API and data. However, it eventually raises unfamiliar error, which does not happen to my teammate when they run the same test. The error disappear when I deleted that line. I have searched for relevant information in stackoverflow and other sites from google but it seems there is not much information about the method waitForPage(). My question is does this error occur on my machine because of issue in the method waitForPage() itself, or something go wrong my computer configuration cause that cause this issue. Below is the screenshot of error and the code.
Error:

Code:

describe("Test the tray seeding ", () => {

beforeEach(() => {

cy.login("manager1", "farmdata2");

cy.visit('/farm/fd2-barn-kit/seedingReport');

cy.waitForPage();

});

it("generate multiple areas when 'All' is selected ", () => {

cy.get("[data-cy=date-range-selection]").should("exist");

cy.get("[data-cy=start-date-select]").should("exist").type("2019-01-01");

cy.get("[data-cy=end-date-select]").should("exist").type("2019-03-01");

cy.intercept("GET", "**/log.json**").as("getReport");

cy.get("[data-cy=generate-rpt-btn]").click();

cy.wait("@getReport");

cy.get("[data-cy=dropdown-input]").should("have.value", "All");

cy.get("[data-cy=r0-Area]").should("have.text", "ALF-4");

cy.get("[data-cy=r1-Area]").should("have.text", "ALF-2");

cy.get("[data-cy=r2-Area]").should("have.text", "CHUAU-2");

});

[braughtg]

@nguyenbanhducA1K51

does this error occur on my machine because of issue in the method waitForPage() itself, or something go wrong my computer configuration cause that cause this issue.

The error you show appears to be indicating that the test was not able to log into FarmData2:

Thus, the issue may be that FarmData2 is not currently running rather than any issue with cy.waitForPage(), which would be waiting for a page within FarmData2 to load.

Are you able to visit http://fd2_farmdata2 in the browser in the development environment and log into FarmdData2 manually? If not what appears in your browser when you visit this site?

[nguyenbanhducA1K51]

@nguyenbanhducA1K51

does this error occur on my machine because of issue in the method waitForPage() itself, or something go wrong my computer configuration cause that cause this issue.

The error you show appears to be indicating that the test was not able to log into FarmData2:

Thus, the issue may be that FarmData2 is not currently running rather than any issue with cy.waitForPage(), which would be waiting for a page within FarmData2 to load.

Are you able to visit http://fd2_farmdata2 in the browser in the development environment and log into FarmdData2 manually? If not what appears in your browser when you visit this site?

I have both run the cypress test and open the log into FarmData2 manually, and the log in is successful. May be the problem does not coming from the running of FarmData2

[johnmaccormick]

@nguyenbanhducA1K51 -- Duc -- Thanks for posting your technical question. This is exactly the kind of practice we are looking for in this course. I don't have an answer to the technical question, but we can take a look at this in an office hour or during class next week. One thing I do want to mention. Remember in our class discussion how we talked about the importance of posting code snippets that are highly readable and well formatted. I noticed that when you posted your code, it was not indented correctly and has a blank line between every line of code. My feedback to you would be, it's really important to make sure code is formatted correctly. This tells your readers that you are striving for professionalism and your question deserves to be taken seriously.

[johnmaccormick]

@nguyenbanhducA1K51 -- Duc -- May I suggest that, purely for practice, you repost your question below with the code formatted correctly? You can use the Preview tab to see what it is going to look like before you post.

[johnmaccormick]

By the way Duc, I did see the same error as you once or twice. However, I have not been able to reproduce it reliably. When I run the tests in seedingReport.areaFilter.spec.js now, it is working fine every time. If the problem persists after you have restarted the FarmData development environment and verified that you have a pristine copy of your PR branch, please let me know and we can investigate this further.

[nguyenbanhducA1K51]

I agree with you professor Maccormick. I would repost the question with better format.

Question:
When I worked on Cypress Test for this issue, I added the line cy.waitForPage() in the beforeEach() part of the test. This is to make sure that the page has completed loading all API and data. However, it eventually raises unfamiliar error, which does not happen to my teammate when they run the same test. The error disappear when I deleted that line. I have searched for relevant information in stackoverflow and other sites from google but it seems there is not much information about the method waitForPage(). My question is does this error occur on my machine because of issue in the method waitForPage() itself, or something go wrong my computer configuration cause that cause this issue. Below is the screenshot of error and the code.
Error:

Code:

describe("Test the tray seeding ", () => {
beforeEach(() => {
cy.login("manager1", "farmdata2");
cy.visit('/farm/fd2-barn-kit/seedingReport');
cy.waitForPage();
});
it("generate multiple areas when 'All' is selected ", () => {
cy.get("[data-cy=date-range-selection]").should("exist");
cy.get("[data-cy=start-date-select]").should("exist").type("2019-01-01");
cy.get("[data-cy=end-date-select]").should("exist").type("2019-03-01");
cy.intercept("GET", "**/log.json**").as("getReport");
cy.get("[data-cy=generate-rpt-btn]").click();
cy.wait("@getReport");
cy.get("[data-cy=dropdown-input]").should("have.value", "All");
cy.get("[data-cy=r0-Area]").should("have.text", "ALF-4");
cy.get("[data-cy=r1-Area]").should("have.text", "ALF-2");
cy.get("[data-cy=r2-Area]").should("have.text", "CHUAU-2");
});

Besides, I think I have found the alternate solution which seem to be more consistent by using cy.intercept() method. Detail of code is down below

describe("Test the tray seeding ", () => {
    beforeEach(() => {
      cy.login("manager1", "farmdata2");
      cy.intercept("GET", "farm/fd2-barnkit/seedingReport").as("loadPage");
      cy.visit('/farm/fd2-barn-kit/seedingReport');
      cy.wait("@loadPage");
    });

[johnmaccormick]

Thanks Duc @nguyenbanhducA1K51 -- Interesting. We should check with Prof. Braught @braughtg about this intercept() method. It may have some other undesirable consequences. Thanks again for posting and reposting your question. (I do notice that the indentation was still not correct. Just wanted you to be aware of that.)

[braughtg]

We should check with Prof. Braught @braughtg about this intercept() method.

The use of cy.intercept() and cy.wait() here is unnecessary. This may be something that was observed in the seedingReport.spec.js file that is now outdated but has not yet been removed. The example tests in the subtabs within thefd2_example module are current references for common testing patterns.

The reason that cy.intercept(...) and cy.wait(...) are not necessary here is because that the cy.get(...) command will automatically retry to obtain the requested element and retry any assertion (i.e. .should(...)) for up to 10 seconds. Thus, while waiting for the API response using cy.intercept(...) and cy.wait() do not do any harm, they are redundant with what the cy.get(...) is already doing.

The calls to cy.intercept(...) and cy.wait(...) will need to be removed from these tests before it can be merged into the upstream.