SAK-50206 Rubrics update all nested components after a rubric title change (#12837)

Co-authored-by: Adrian Fish <[email protected]>

Author: maurercw

webcomponents/tool/src/main/frontend/packages/sakai-rubrics/src/SakaiRubric.js

@@ -257,7 +257,7 @@ export class SakaiRubric extends RubricsElement {
       if (r.ok) {
         this.rubric.title = e.detail;
         this.requestUpdate();
-        this.updateItemDelete();
+        this.updateOtherItems();
         this.dispatchEvent(new SharingChangeEvent());
       } else {
         throw new Error("Network error while updating rubric title");
@@ -462,13 +462,18 @@ export class SakaiRubric extends RubricsElement {
     this.shareValues = this.rubric.title;
   }
 
-  updateItemDelete() {
+  updateOtherItems() {
 
     const sakaiItemDelete = this.querySelector("sakai-item-delete");
     if (sakaiItemDelete) {
-      sakaiItemDelete.requestUpdate("item", this.rubric);
-      sakaiItemDelete.requestUpdate("rubric", this.rubric);
+      sakaiItemDelete.requestUpdate();
     }
+
+    const sakaiRubricEdit = this.querySelector("sakai-rubric-edit");
+    sakaiRubricEdit && sakaiRubricEdit.requestUpdate();
+
+    const sakaiRubricPdf = this.querySelector("sakai-rubric-pdf");
+    sakaiRubricPdf && sakaiRubricPdf.requestUpdate();
   }
 
   openEditWithKeyboard(e) {

webcomponents/tool/src/main/frontend/packages/sakai-rubrics/test/data.js

@@ -232,12 +232,25 @@ export const rubric2 = {
   criteria: criteria2,
 };
 
+export const rubric3 = {
+  id: "3",
+  title: "Rubric 3",
+  ownerId,
+  siteTitle,
+  creatorDisplayName,
+  formattedModifiedDate,
+  criteria: criteria1,
+  locked: true
+};
+
 export const evaluatedItemOwnerId = "fisha";
 
 export const rubricsUrl = /api\/sites\/xyz\/rubrics[\?\w=]*$/;
 export const rubrics = [ rubric1, rubric2 ];
 
 export const rubric1Url = `/api/sites/${siteId}/rubrics/${rubric1.id}`;
+export const rubric1OwnerUrl = `/api/sites/${ownerId}/rubrics/${rubric1.id}`;
+export const rubric3OwnerUrl = `/api/sites/${ownerId}/rubrics/${rubric3.id}`;
 
 export const associationUrl = `/api/sites/${siteId}/rubric-associations/tools/${toolId}/items/${entityId}`;
 

webcomponents/tool/src/main/frontend/packages/sakai-rubrics/test/sakai-rubrics.test.js

@@ -18,6 +18,8 @@ fetchMock
   .get(data.sharedRubricsUrl, data.sharedRubrics, { overwriteRoutes: true })
   .get(data.rubricsUrl, data.rubrics, { overwriteRoutes: true })
   .get(data.rubric1Url, data.rubric1, { overwriteRoutes: true })
+  .patch(data.rubric1OwnerUrl, 200, { overwriteRoutes: true })
+  .patch(data.rubric3OwnerUrl, 200, { overwriteRoutes: true })
   .get(data.associationUrl, data.association, { overwriteRoutes: true })
   .get(data.evaluationUrl, data.evaluation, { overwriteRoutes: true })
   .post(`/api/sites/${data.siteId}/rubric-evaluations`, (url, opts) => {
@@ -241,7 +243,7 @@ describe("sakai-rubrics tests", () => {
     expect(modal).to.exist;
   });
 
-it ("rubric edit does not keep data changes in the modal after cancel", async () => {
+  it ("rubric edit does not keep data changes in the modal after cancel", async () => {
 
     let el = await fixture(html`
       <sakai-rubric-edit
@@ -372,4 +374,79 @@ it ("rubric edit does not keep data changes in the modal after cancel", async ()
 
     expect(el).to.be.accessible();
   });
+
+  it ("updating rubric title updates the UI in all appropriate places for an unlocked rubric", async () => {
+    await checkRubricTitleChanges(data.rubric1);
+  });
+
+  it ("updating rubric title updates the UI in all appropriate places for a locked rubric", async () => {
+    await checkRubricTitleChanges(data.rubric3);
+  });
+
+  /**
+   * Perform a title update and make sure all places are changed
+   **/
+  async function checkRubricTitleChanges(rubricData) {
+    let el = await fixture(html`
+      <sakai-rubric site-id="${data.siteId}"
+                    .rubric=${rubricData}
+                    enable-pdf-export=true>
+      </sakai-rubric>
+    `);
+
+    await waitUntil(() => el._i18n);
+    await el.updateComplete;
+
+    // Validate that current data is the original title
+    validateRubricTitle(rubricData, el, rubricData.title);
+
+    const newTitle = 'UPDATED TITLE';
+    const editElement = el.querySelector(`#rubric-edit-${rubricData.id}`);
+
+    // Call update-rubric-title event
+    editElement.dispatchEvent(new CustomEvent("update-rubric-title", { detail: newTitle }));
+
+
+    await elementUpdated(editElement);
+    await elementUpdated(el);
+
+    // Validate that current data is the updated title
+    validateRubricTitle(rubricData, el, newTitle);
+
+  }
+
+  /**
+   * Look for all places in the dom that should render any sort of rubric title
+   **/
+  function validateRubricTitle(rubricData, el, titleToCheck) {
+    console.log(`Validating for '${titleToCheck}'`);
+
+    expect(el.querySelector(".rubric-name").textContent).to.equal(titleToCheck);
+    expect(el.querySelector(`#rubric-toggle-${rubricData.id}`).title).to.equal(`${el._i18n.toggle_details} ${titleToCheck}`);
+
+    if (rubricData.locked) {
+      console.log("Checking locked elements...");
+      elementChecks(el, "span.locked", titleToCheck);
+    }
+
+    elementChecks(el, "button.share", titleToCheck);
+    elementChecks(el, "button.clone", titleToCheck);
+    elementChecks(el, "button.edit-button", titleToCheck);
+    elementChecks(el, "a.pdf", titleToCheck);
+
+    if (!rubricData.locked) {
+      console.log("Checking delete elements...");
+      elementChecks(el, `button[aria-controls="delete-rubric-${rubricData.id}"]`, titleToCheck);
+    }
+  }
+
+  /**
+   * Check that the element exists, the title matches, and the ariaLabel matches
+   **/
+  function elementChecks(el, elementSelector, titleToCheck) {
+    expect(el.querySelector(elementSelector)).to.exist;
+    expect(el.querySelector(elementSelector).title).to.contain(titleToCheck);
+    expect(el.querySelector(elementSelector).ariaLabel).to.contain(titleToCheck);
+  }
+
 });