Portfolio Editor Usability Updates

cypress/e2e/AsStudent/signIn.cy.js

@@ -1,31 +1,20 @@
 describe("Student Sign-In Test", function () {
   const userId = "cyuserId";
-  // const studentUserId = "cyStudentUserId";
   const courseId = "courseid1";
-  // const doenetId = "activity1id";
-  // const pageDoenetId = "_page1id";
 
-  before(() => {
-    cy.signin({ userId });
-    cy.clearAllOfAUsersCoursesAndItems({ userId });
-    //   cy.clearAllOfAUsersCoursesAndItems({ userId: studentUserId });
-    cy.createCourse({ userId, courseId });
-  });
-  beforeEach(() => {
-    cy.signin({ userId });
-    cy.clearIndexedDB();
-    cy.clearAllOfAUsersActivities({ userId });
-    //   cy.clearAllOfAUsersActivities({ userId: studentUserId });
-    //   cy.createActivity({ courseId, doenetId, parentDoenetId:courseId, pageDoenetId });
-    cy.visit(`/course?tool=people&courseId=${courseId}`);
-  });
 
   Cypress.on("uncaught:exception", (err, runnable) => {
     // Returning false here prevents Cypress from failing the test
     return false;
   });
 
   it("Student can sign in after being added to a course", () => {
+    cy.createCourse({ userId, courseId });
+    cy.signin({ userId });
+    cy.clearIndexedDB();
+    cy.clearAllOfAUsersActivities({ userId });
+    cy.visit(`/course?tool=people&courseId=${courseId}`);
+
     const emailAddress = "[email protected]";
     cy.get('[data-test="First"]').type("Scooby");
     cy.get('[data-test="Last"]').type("Doo");
@@ -42,8 +31,17 @@ describe("Student Sign-In Test", function () {
       `SELECT signInCode FROM user_device ORDER BY id DESC LIMIT 1`,
     ).then((result) => {
       const code = result[0].signInCode;
-      cy.get('[data-test="signinCodeInput"]').type(code);
-      cy.get('[data-test="signInButton"]').click();
+      // cy.get('[data-test="signinCodeInput"]').type(code);
+      cy.get('[data-test="code-input-0"]').type(code.charAt(0));
+      cy.get('[data-test="code-input-1"]').type(code.charAt(1));
+      cy.get('[data-test="code-input-2"]').type(code.charAt(2));
+      cy.get('[data-test="code-input-3"]').type(code.charAt(3));
+      cy.get('[data-test="code-input-4"]').type(code.charAt(4));
+      cy.get('[data-test="code-input-5"]').type(code.charAt(5));
+      cy.get('[data-test="code-input-6"]').type(code.charAt(6));
+      cy.get('[data-test="code-input-7"]').type(code.charAt(7));
+      cy.get('[data-test="code-input-8"]').type(code.charAt(8));
+      cy.get('[data-test="submitCodeButton"]').click();
       cy.get('[data-test="My Courses"]').click();
       cy.get('[data-test="Course Label"]').should(
         "have.text",
@@ -53,4 +51,56 @@ describe("Student Sign-In Test", function () {
       cy.document().should("contain.text", "Welcome");
     });
   });
+
+  it("Signed out to in to out with all entry errors", () => {
+    const emailAddress = "[email protected]";
+    const firstName = "Scrapy";
+    const lastName = "Doo";
+    //Delete entry so we will need to enter the name
+    cy.task(
+      "queryDb",
+      `DELETE FROM user WHERE email='${emailAddress}'`,
+    ).then(() => {
+      cy.visit(`/`);
+      cy.get('[data-test="Nav to signin"]').click();
+      cy.get('[data-test="email input"]').type(emailAddress);
+      cy.get('[data-test="sendEmailButton"]').click();
+      cy.wait(500); //Wait for it to be stored in db
+      cy.task(
+        "queryDb",
+        `SELECT signInCode FROM user_device ORDER BY id DESC LIMIT 1`,
+      ).then((result) => {
+        const code = result[0].signInCode;
+        //Try no code
+        cy.get('[data-test="submitCodeButton"]').click();
+        cy.get('[data-test="code-err"]').should('contain', "Please enter the nine digits sent to your email.");
+        //Try only one number
+        cy.get('[data-test="code-input-0"]').type(code.charAt(0));
+        cy.get('[data-test="submitCodeButton"]').click();
+        cy.get('[data-test="code-err"]').should('contain', "Please enter all nine digits.");
+
+        cy.get('[data-test="code-input-0"]').type(code.charAt(0));
+        cy.get('[data-test="code-input-1"]').type(code.charAt(1));
+        cy.get('[data-test="code-input-2"]').type(code.charAt(2));
+        cy.get('[data-test="code-input-3"]').type(code.charAt(3));
+        cy.get('[data-test="code-input-4"]').type(code.charAt(4));
+        cy.get('[data-test="code-input-5"]').type(code.charAt(5));
+        cy.get('[data-test="code-input-6"]').type(code.charAt(6));
+        cy.get('[data-test="code-input-7"]').type(code.charAt(7));
+        cy.get('[data-test="code-input-8"]').type(code.charAt(8));
+        cy.get('[data-test="submitCodeButton"]').click();
+        //Try no names
+        cy.get('[data-test="submitName"]').click();
+        cy.get('[data-test="firstNameError"]').should('contain', 'Please enter your first name.')
+        cy.get('[data-test="lastNameError"]').should('contain', 'Please enter your last name.')
+
+        cy.get('[data-test="firstNameInput"]').type(firstName);
+        cy.get('[data-test="lastNameInput"]').type(lastName);
+        cy.get('[data-test="submitName"]').click();
+        cy.get('[data-test="AvatarMenuButton"]').click();
+        cy.get('[data-test="AvatarMenuSignOut"]').click();
+        cy.get('[data-test="homepage button"]').click();
+      });
+    });
+  });
 });

cypress/e2e/DoenetML/tagSpecific/ref.cy.js

@@ -181,7 +181,7 @@ describe("ref Tag Tests", function () {
     cy.get(cesc("#\\/_ref1"))
       .should("have.text", "a Doenet doc")
       .invoke("attr", "href")
-      .then((href) => expect(href).eq("/portfolioviewer/abcdefg"));
+      .then((href) => expect(href).eq("/publicOverview/abcdefg"));
   });
 
   it("url with no link text", () => {

cypress/e2e/People/people.cy.js

@@ -80,6 +80,7 @@ describe("People Test", function () {
     cy.wait(1000);
 
     peopleInCsv.forEach((person) => {
+      console.log("person", person)
       cy.task(
         "queryDb",
         `SELECT * FROM course_user WHERE externalId="${person.externalId}"`,
@@ -89,6 +90,7 @@ describe("People Test", function () {
           "queryDb",
           `SELECT * FROM user WHERE userId="${res[0].userId}"`,
         ).then((result) => {
+          console.log("result", result)
           expect(result[0].firstName).to.equals(person.first);
           expect(result[0].lastName).to.equals(person.last);
           expect(result[0].email).to.equals(person.email);

cypress/e2e/Portfolio/ActivityControls.cy.js

@@ -21,25 +21,21 @@ describe("Activity Controls Tests", function () {
     return false;
   });
 
-  it("Update Label of an Activity both ways", () => {
+  it("Update Label of an Activity twice", () => {
     const label1 = "Scooby Doo";
     const label2 = "Duck Tails";
     cy.get('[data-test="Portfolio"]').click();
     cy.get('[data-test="Add Activity"]').click();
-    cy.get('[data-test="Controls Button"]').click();
     cy.get('[data-test="Activity Label"]').clear().type(label1);
-    cy.get('[data-test="Close Settings Button"]').click();
-    cy.get('[data-test="Activity Label Editable"]').contains(label1);
+    // cy.get('[data-test="Close Settings Button"]').click(); //Why does this not work?
+    cy.get('.chakra-modal__close-btn').click();
+    cy.get('[data-test="Private Activities"] [data-test="Card Label"]').eq(0).contains(label1);
 
-    cy.get(
-      '[data-test="Activity Label Editable"] [data-test="Editable Preview"]',
-    ).click();
-    cy.get('[data-test="Activity Label Editable"] [data-test="Editable Input"]')
-      .type(label2)
-      .blur();
-    cy.wait(1000); //Need the interface to be faster to not have this
-    cy.get('[data-test="Controls Button"]').click();
-    cy.get('[data-test="Activity Label"]').should("have.value", label2);
+    cy.get('[data-test="Private Activities"] [data-test="Card Menu Button"]').eq(0).click();
+    cy.get('[data-test="Settings Menu Item"]').click();
+    cy.get('[data-test="Activity Label"]').clear().type(label2);
+    cy.get('.chakra-modal__close-btn').click();
+    cy.get('[data-test="Private Activities"] [data-test="Card Label"]').eq(0).contains(label2);
   });
 
   it("Learning Outcomes", () => {
@@ -48,9 +44,9 @@ describe("Activity Controls Tests", function () {
     const learningOutcome3 = "Five, six, pick up sticks";
     const learningOutcome4 = "Seven, eight, lay them straight";
     const learningOutcome5 = "Nine, ten, a big fat hen";
+    const learningOutcome6 = "The End";
     cy.get('[data-test="Portfolio"]').click();
     cy.get('[data-test="Add Activity"]').click();
-    cy.get('[data-test="Controls Button"]').click();
     cy.get('[data-test="add a learning outcome button"]').click();
     cy.get('[data-test="add a learning outcome button"]').click();
     cy.get('[data-test="add a learning outcome button"]').click();
@@ -61,12 +57,11 @@ describe("Activity Controls Tests", function () {
     cy.get('[data-test="learning outcome 2"]').type(learningOutcome3);
     cy.get('[data-test="learning outcome 3"]').type(learningOutcome4);
     cy.get('[data-test="learning outcome 4"]').type(learningOutcome5);
-    // cy.get('[data-test="add a learning outcome button"]').click();
 
-    cy.get('[data-test="Close Settings Button"]').click();
-    cy.wait(3000);
+    cy.get('.chakra-modal__close-btn').click();
+    cy.get('[data-test="Private Activities"] [data-test="Card Menu Button"]').eq(0).click();
+    cy.get('[data-test="Settings Menu Item"]').click();
 
-    cy.get('[data-test="Controls Button"]').click();
     //Check the text.
     cy.get('[data-test="learning outcome 0"]').should(
       "have.value",
@@ -89,7 +84,40 @@ describe("Activity Controls Tests", function () {
       learningOutcome5,
     );
 
-    //Delete some
+    //Delete the first two
+    cy.get('[data-test="delete learning outcome 0 button"]').click();
+    cy.get('[data-test="delete learning outcome 0 button"]').click();
+    cy.get('[data-test="learning outcome 0"]').should(
+      "have.value",
+      learningOutcome3,
+    );
+    cy.get('[data-test="learning outcome 1"]').should(
+      "have.value",
+      learningOutcome4,
+    );
+    cy.get('[data-test="learning outcome 2"]').should(
+      "have.value",
+      learningOutcome5,
+    );
     //Add another
+    cy.get('[data-test="add a learning outcome button"]').click();
+    cy.get('[data-test="learning outcome 3"]').type(learningOutcome6);
+
+    cy.get('[data-test="learning outcome 0"]').should(
+      "have.value",
+      learningOutcome3,
+    );
+    cy.get('[data-test="learning outcome 1"]').should(
+      "have.value",
+      learningOutcome4,
+    );
+    cy.get('[data-test="learning outcome 2"]').should(
+      "have.value",
+      learningOutcome5,
+    );
+    cy.get('[data-test="learning outcome 3"]').should(
+      "have.value",
+      learningOutcome6,
+    );
   });
 });

cypress/e2e/Portfolio/ErrorsAndWarnings.cy.js

@@ -5,7 +5,7 @@ describe("Porfolio Errors and Warnings ", function () {
   const userId2 = "cyuserId2";
 
   before(() => {
-    // cy.clearAllOfAUsersActivities({userId})
+    cy.clearAllOfAUsersActivities({ userId })
   });
   beforeEach(() => {
     cy.signin({ userId });
@@ -26,13 +26,12 @@ describe("Porfolio Errors and Warnings ", function () {
 
     cy.log("Create an activity");
     cy.get('[data-test="Add Activity"]').click();
+    cy.get('[data-test="Activity Label"]').clear().type(label);
+    cy.get('.chakra-modal__close-btn').click();
+    cy.get('[data-test="Private Activities"] [data-test="Card Menu Button"]').eq(0).click();
+    cy.get('[data-test="Edit Menu Item"]').eq(0).click();
 
-    cy.get(
-      '[data-test="Activity Label Editable"] [data-test="Editable Preview"]',
-    ).click();
-    cy.get('[data-test="Activity Label Editable"] [data-test="Editable Input"]')
-      .type(label)
-      .blur();
+    cy.get('[data-test="Activity Label Editable Preview"]').contains(label)
 
     cy.get(".cm-content").type(`<p name="goodp">A good paragraph</p>{enter}`);
 
@@ -78,8 +77,10 @@ describe("Porfolio Errors and Warnings ", function () {
       "contain.text",
       "ErrorLine #3 Invalid component type: <invalid>",
     );
+    cy.get('[data-test="Error Button"]').click();
+
+    cy.get(".cm-content").type(`{ctrl+end}{leftarrow}{backspace}`); //Delete the / in invalid
 
-    cy.get(".cm-content").type(`{ctrl+end}{leftarrow}{leftarrow}{backspace}`);
     cy.get('[data-test="Viewer Update Button"]').click();
 
     cy.get(cesc2("#/__error1")).should(
@@ -120,7 +121,9 @@ describe("Porfolio Errors and Warnings ", function () {
     cy.get('[data-test="Warning Button"]').click();
     cy.get('[data-test="Warning Content"]').should(
       "contain.text",
-      "WarningLine #5 Attribute ninputs is deprecated. Use numInputs instead. Its use will become an error in the next major version (0.7). Version 0.6 will be phased out in summer 2024.",
+      "WarningLine #4 Attribute ninputs is deprecated. Use numInputs instead. Its use will become an error in the next major version (0.7). Version 0.6 will be phased out in summer 2024.",
     );
+    cy.get('[data-test="Warning Button"]').click();
+
   });
 });

cypress/e2e/Portfolio/LoadAndSaveEditor.cy.js

@@ -28,32 +28,50 @@ describe("Load and Save Editor", function () {
     const largeNumber = `12345678901234567890123456789012345678901234567890123456789012345678901234567890`;
     cy.get('[data-test="Portfolio"]').click();
     cy.get('[data-test="Add Activity"]').click();
+    cy.get('.chakra-modal__close-btn').click();
+    cy.get('[data-test="Private Activities"] [data-test="Card Menu Button"]').eq(0).click();
+    cy.get('[data-test="Edit Menu Item"]').eq(0).click();
+
     cy.get(".cm-content").type(largeNumber);
     cy.get('[data-test="Viewer Update Button"]').click();
+    cy.get(cesc2("#/_document1")).should("contains.text", largeNumber);
 
+    //Leave and come back
+    cy.get('[data-test="Logo Button"]').click();
     cy.get('[data-test="Portfolio"]').click();
-    cy.get('[data-test="Private Activities"] [data-test="Card Image Link"] ')
-      .eq(0)
-      .click();
+    cy.get('[data-test="Private Activities"] [data-test="Card Menu Button"]').eq(0).click();
+    cy.get('[data-test="Edit Menu Item"]').eq(0).click();
     cy.get(cesc2("#/_document1")).should("contains.text", largeNumber);
-    // cy.get(cesc2(".cm-content")).should("have.text", largeNumber);
   });
 
-  it("Quickly Save", () => {
+  it("Quickly Save and Refresh Save", () => {
+    const doenetML1 = "Draft content";
+    const doenetML2 = "More Draft content";
+    //Set it up
     cy.get('[data-test="Portfolio"]').click();
     cy.get('[data-test="Add Activity"]').click();
+    cy.get('.chakra-modal__close-btn').click();
+    cy.get('[data-test="Private Activities"] [data-test="Card Menu Button"]').eq(0).click();
+    cy.get('[data-test="Edit Menu Item"]').eq(0).click();
     cy.get(".cm-content").type(
-      `{ctrl+end}{rightarrow}{rightarrow}{rightarrow}{rightarrow}{rightarrow}<p name="draft">Draft content</p>`,
+      `{ctrl+end}{rightarrow}{rightarrow}{rightarrow}{rightarrow}{rightarrow}<p name="draft">${doenetML1}</p>`,
     );
 
-    // cy.get('[data-test="Viewer Update Button"]').click();
-    // cy.get(cesc2("#/draft")).should("have.text", "Draft content");
+    //Leave
+    cy.get('[data-test="Logo Button"]').click();
+
+    //Go Back
+    cy.get('[data-test="Private Activities"] [data-test="Card Menu Button"]').eq(0).click();
+    cy.get('[data-test="Edit Menu Item"]').eq(0).click();
+
+    cy.get(cesc2("#/draft")).should("have.text", doenetML1);
+
+    //Enter more and hit refresh
+    cy.get(".cm-content").clear().type(
+      `{ctrl+end}{rightarrow}{rightarrow}{rightarrow}{rightarrow}{rightarrow}<p name="draft">${doenetML2}</p>`,
+    );
+    cy.reload();
+    cy.get(cesc2("#/draft")).should("have.text", doenetML2);
 
-    cy.get('[data-test="Portfolio"]').click();
-    cy.wait(500);
-    cy.get('[data-test="Private Activities"] [data-test="Card Image Link"] ')
-      .eq(0)
-      .click();
-    cy.get(cesc2("#/draft")).should("have.text", "Draft content");
   });
 });