Cypress tests for student profile

[smattingly]

• [x] happy path
• [x] need to define required inputs (see below)
• [ ] write tests for required inputs (will fail, until...)
• [ ] modify HTML to indicate which values are required (browser will enforce)

[methenyk]

I would like to work on this task @smattingly @Weintraubm @Spritte77

[smattingly]

We need to make a decision about which pieces of data are required. My initial thought is: required: academic rank, residential status, major 1 (assuming Undecided is an option-- I think it is) optional: major 2, both sports, SLP instructor

Here is a sketch of the test (not complete, may have problems) for the academic standing field. This should go in a new file cypress/integration/studentProfile.spec.js. Inside the define, another very similar it would be needed for testing each of the other required fields.

Note that these tests should fail at first, because the app is not enforcing any rules about required data. Once test is in place, add "required" attribute to form HTML to make failing test pass.

describe("The student profile form", () => {
    it("should require student to enter their academic rank", () => {
        // generate unique username
        const username = `studentProfileAcademicStatus${(new Date()).valueOf()}`;

        // login as student
        cy.loginStudent(username);

        // this first time login takes us to student profile update; store the url
        let profileUrl = cy.url();

        // (get select element with id residentialStatus, choose "Undecided")
       cy.get('select#residentialStatus").select("Undecided"); 
       // (then need to fill in all other required fields except the one under test)

       // click the form submit button
       cy.get("[data-cy=submit]").click();

       // Since required data was not supplied, should still be on same page.
       cy.url().should("equal", profileUrl);
    });

    it("should require student to enter their residential status", () => {
      // this one should populate all required data except residential status, submit form, make sure url stays same
    });
 });

[methenyk]

Sorry for the late update. I have started a new gitpod and have opened a new file for this task under cypress/integration. I have titled it studentProfiles.spec.js as said above.

[methenyk]

Since the last update, I have started writing the code for this test in my Gitpod workspace. I still have a few changes to make and code to finish writing. I'm sure I will have questions but as of right now I am not aware of any.

[methenyk]

Since my last update, I haven't had much time to make further progress because of work and a covid vaccine.

[methenyk]

I have finished typing the coding and can verify that the tests are failing. However, I am unsure what to do from here. I got the chance to work on this yesterday and have reached a stand still upon completion of typing the code this morning. Any pointers on where to go from here would be greatly appreciated. Thanks!

[methenyk]

I miss worded my comment above my apologies. I was trying to say that I had finished writing the first set of tests and that I can verify that it fails. I wanted to know how to go about the second set of tests for the residential status. Again, I am very sorry for the confusion. I even confused myself.

[smattingly]

Ok, there's several layers to this, and it is easy to get confused. Let me try to spell it out-- sorry if it's too much detail.

First, let me point out that there will be several tests (several it blocks under the describe block above). Each of these tests will be very similar: they will put data in all the required places except one (the one being tested), and submit the form to make sure that it doesn't "go" -- that we stay on the same page.

I gave partial code for the first test (it block) above. To complete it, you need to add more statements like cy.get('select#residentialStatus").select("Undecided"); so that every required field except academic rank is populated. That's how we test that the submit is failing because of a missing academic status value.

That test should fail, because we know that the app is not currently requiring data for academic rank. (It's odd-- when the form successfully submits in the test setup, that is a test failure-- we want the form to reject in that case.) To make sure everything is good, you should next mark the academic rank required in the HTML and test again. The test should now pass.

When you are at that point, you are ready to move to the second it block that is only a shell above. The code will be exactly the same for the first test, except that residential status should be the only required field that is without data input. Repeat the process of verifying that fails, marking required in the HTML, and verify that that passes.

Then create additional it blocks-- one for each remaining required data input.

[methenyk]

Okay, thank you! That will help me continue! As an update I am working to write the rest of the 'it' statements. I haven't had any issues yet but as they occur I will post updates and ask for help.

[methenyk]

I am still continuing work on writing the cypress tests for student profiles. I haven't run into any problems yet and apologize for being slightly behind because of a few set backs.

[methenyk]

Have made some progress on the tests, had a slight issue but it was because I made a mistake when typing.

[methenyk]

I have made more progress with the cypress testing little by little as I come to more of an understanding of what I am to do. I have no questions at the moment.

[methenyk]

Over the weekend I was working on these tests and I was having reoccurring technical issues with my laptop. I am not sure that the file saved what I was working on so I will need to retype some code before pushing. I wanted to apologize for this and a lack of updates.