fix(flow): catch error when beforeBack promise is rejected (#7601)

**Related Issue:** None ## Summary - catch error when beforeBack promise is rejected
Esri · Aug 25, 2023 · cb70671 · cb70671
1 parent cb10eaa
commit cb70671
Show file tree

Hide file tree

Showing 2 changed files with 52 additions and 1 deletion.
diff --git a/packages/calcite-components/src/components/flow/flow.e2e.ts b/packages/calcite-components/src/components/flow/flow.e2e.ts
@@ -102,6 +102,8 @@ describe("calcite-flow", () => {
 
       await page.setContent(`<calcite-flow><calcite-flow-item></calcite-flow-item></calcite-flow>`);
 
+      expect(await page.findAll("calcite-flow-item")).toHaveLength(1);
+
       await page.$eval(
         "calcite-flow-item",
         (elm: HTMLCalciteFlowItemElement) =>
@@ -114,6 +116,50 @@ describe("calcite-flow", () => {
 
       expect(backValue).toBeDefined();
       expect(mockCallBack).toHaveBeenCalledTimes(1);
+      expect(await page.findAll("calcite-flow-item")).toHaveLength(0);
+    });
+
+    it("should handle rejected 'beforeBack' promise'", async () => {
+      const page = await newE2EPage();
+
+      const mockCallBack = jest.fn().mockReturnValue(() => Promise.reject());
+      await page.exposeFunction("beforeBack", mockCallBack);
+
+      await page.setContent(`<calcite-flow><calcite-flow-item></calcite-flow-item></calcite-flow>`);
+
+      await page.$eval(
+        "calcite-flow-item",
+        (elm: HTMLCalciteFlowItemElement) =>
+          (elm.beforeBack = (window as typeof window & Pick<typeof elm, "beforeBack">).beforeBack)
+      );
+
+      const flow = await page.find("calcite-flow");
+
+      await flow.callMethod("back");
+
+      expect(mockCallBack).toHaveBeenCalledTimes(1);
+    });
+
+    it("should not remove flow-item on rejected 'beforeBack' promise'", async () => {
+      const page = await newE2EPage();
+
+      await page.exposeFunction("beforeBack", () => Promise.reject());
+
+      await page.setContent(`<calcite-flow><calcite-flow-item></calcite-flow-item></calcite-flow>`);
+
+      expect(await page.findAll("calcite-flow-item")).toHaveLength(1);
+
+      await page.$eval(
+        "calcite-flow-item",
+        (elm: HTMLCalciteFlowItemElement) =>
+          (elm.beforeBack = (window as typeof window & Pick<typeof elm, "beforeBack">).beforeBack)
+      );
+
+      const flow = await page.find("calcite-flow");
+
+      await flow.callMethod("back");
+
+      expect(await page.findAll("calcite-flow-item")).toHaveLength(1);
     });
 
     it("frame advancing should add animation class", async () => {

diff --git a/packages/calcite-components/src/components/flow/flow.tsx b/packages/calcite-components/src/components/flow/flow.tsx
@@ -41,7 +41,12 @@ export class Flow implements LoadableComponent {
       ? lastItem.beforeBack
       : (): Promise<void> => Promise.resolve();
 
-    await beforeBack.call(lastItem);
+    try {
+      await beforeBack.call(lastItem);
+    } catch (_error) {
+      // back prevented
+      return;
+    }
 
     lastItem.remove();