correctly restore activity editor state after switching to view mode (#…

…2487)

client/cypress.config.js

@@ -24,7 +24,7 @@ export default defineConfig({
   numTestsKeptInMemory: 20,
   defaultCommandTimeout: 10000,
   e2e: {
-    setupNodeEvents(on, config) {
+    setupNodeEvents(on) {
       on("before:browser:launch", (browser = {}, launchOptions) => {
         if (browser.name === "chrome") {
           launchOptions.args.push("--mute-audio");

client/cypress/e2e/ActivityEditor/activityEditor.cy.ts

@@ -0,0 +1,36 @@
+describe("Create Folders Tests", function () {
+  it("correctly restore editor state after clicking view", () => {
+    // test bug where activity editor was not restoring itself with the correct state
+    // after one switched to view mode and back
+
+    cy.loginAsTestUser();
+
+    cy.createActivity("Hello!", "Initial content").then((activityId) => {
+      cy.visit(`/activityEditor/${activityId}`);
+
+      cy.iframe()
+        .find(".doenet-viewer")
+        .should("contain.text", `Initial content`);
+
+      cy.iframe().find(".cm-editor").type(`{end}{enter}More!`);
+
+      cy.get(`[data-test="View Mode Button"]`).click();
+
+      cy.iframe().find(".cm-editor").should("not.exist");
+
+      cy.iframe()
+        .find(".doenet-viewer")
+        .should("contain.text", `Initial content\nMore!`);
+
+      cy.get(`[data-test="Edit Mode Button"]`).click();
+
+      cy.iframe()
+        .find(".cm-editor")
+        .should("contain.text", "Initial contentMore!");
+
+      cy.iframe()
+        .find(".doenet-viewer")
+        .should("contain.text", `Initial content\nMore!`);
+    });
+  });
+});

client/cypress/support/commands.ts

@@ -0,0 +1,107 @@
+// ***********************************************
+// This example commands.js shows you how to
+// create various custom commands and overwrite
+// existing commands.
+//
+// For more comprehensive examples of custom
+// commands please read more here:
+// https://on.cypress.io/custom-commands
+// ***********************************************
+//
+//
+// -- This is a parent command --
+// Cypress.Commands.add("login", (email, password) => { ... })
+//
+//
+// -- This is a child command --
+// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+//
+//
+// -- This is a dual command --
+// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+//
+//
+// -- This is will overwrite an existing command --
+// Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
+
+import "cypress-wait-until";
+import "cypress-file-upload";
+import "cypress-iframe";
+
+declare global {
+  namespace Cypress {
+    interface Chainable {
+      /**
+       * Custom command to automatically log in as a user with the given email and names
+       */
+      loginAsTestUser({
+        email,
+        firstNames,
+        lastNames,
+      }?: {
+        email?: string;
+        firstNames?: string;
+        lastNames?: string;
+      }): Chainable<null>;
+
+      /**
+       * Custom command to create an activity for the logged in user
+       */
+      createActivity(activityName: string, doenetML: string): Chainable<string>;
+    }
+  }
+}
+
+Cypress.Commands.add(
+  "loginAsTestUser",
+  ({
+    email,
+    firstNames,
+    lastNames,
+  }: { email?: string; firstNames?: string; lastNames?: string } = {}) => {
+    if (!email) {
+      const code = Date.now().toString();
+      email = `test${code}@doenet.org`;
+      firstNames = `Test`;
+      lastNames = `User${code}`;
+    }
+
+    return cy.session(email, () => {
+      cy.request({
+        method: "POST",
+        url: "/api/login/createOrLoginAsTest",
+        body: { email, firstNames, lastNames },
+      });
+    });
+  },
+);
+
+Cypress.Commands.add(
+  "createActivity",
+  (activityName: string, doenetML: string) => {
+    cy.request({
+      method: "POST",
+      url: "/api/createActivity",
+    }).then((resp) => {
+      let activityId: string = resp.body.activityId;
+      let docId: string = resp.body.docId;
+
+      cy.request({
+        method: "POST",
+        url: "/api/updateContentName",
+        body: {
+          id: activityId,
+          name: activityName,
+        },
+      });
+      cy.request({
+        method: "POST",
+        url: "/api/saveDoenetML",
+        body: {
+          docId,
+          doenetML,
+        },
+      }).then(() => activityId);
+    });
+  },
+);

client/cypress/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"]
+  },
+  "include": ["**/*.ts"]
+}