Fix CI failures across deep-forest, paypal-components, mint-components, and program-boilerplate

.github/workflows/deep-forest.yml

@@ -24,13 +24,13 @@ jobs:
 
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
-      - name: Node Setup 16.x
+      - name: Node Setup 20.x
         id: setup_node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: 16
+          node-version: 20
 
       - name: Install picklesdoc
         id: picklesdoc

packages/mint-components/patches/@stencil+core+2.4.0.patch

@@ -11,3 +11,91 @@ index 8e21dfb..63c663e 100644
      System.import(url.href);
    };
 
+diff --git a/node_modules/@stencil/core/testing/index.js b/node_modules/@stencil/core/testing/index.js
+index 2ece03f..b1b77f7 100644
+--- a/node_modules/@stencil/core/testing/index.js
++++ b/node_modules/@stencil/core/testing/index.js
+@@ -750,12 +750,11 @@ async function addE2EListener(e, t, r, s) {
+   eventName: r,
+   callback: s
+  });
+- const i = t.executionContext();
+- await i.evaluate(((e, t, r) => {
++ await t.evaluate(((e, t, r) => {
+   e.addEventListener(r, (e => {
+    window.stencilOnEvent(t, window.stencilSerializeEvent(e));
+   }));
+- }), t, n, r);
++ }), n, r);
+ }
+
+ function browserContextEvents() {
+@@ -844,10 +843,10 @@ async function findAll(e, t, r) {
+  const s = [], {lightSelector: n, shadowSelector: i} = getSelector(r), o = await t.$$(n);
+  if (0 === o.length) return s;
+  if (i) for (let t = 0; t < o.length; t++) {
+-  const r = o[t].executionContext(), n = await r.evaluateHandle(((e, t) => {
++  const n = await o[t].evaluateHandle(((e, t) => {
+    if (!e.shadowRoot) throw new Error(`shadow root does not exist for element: ${e.tagName.toLowerCase()}`);
+    return e.shadowRoot.querySelectorAll(t);
+-  }), o[t], i);
++  }), i);
+   await o[t].dispose();
+   const a = await n.getProperties();
+   await n.dispose();
+@@ -3134,8 +3133,7 @@ class E2EElement extends index_cjs.MockHTMLElement {
+   this._validate();
+   let e = !1;
+   try {
+-   const t = this._elmHandle.executionContext();
+-   e = await t.evaluate((e => new Promise((t => {
++   e = await this._elmHandle.evaluate((e => new Promise((t => {
+     window.requestAnimationFrame((() => {
+      if (e.isConnected) {
+       const r = window.getComputedStyle(e);
+@@ -3144,7 +3142,7 @@ class E2EElement extends index_cjs.MockHTMLElement {
+       })) : t(!1);
+      } else t(!1);
+     }));
+-   }))), this._elmHandle);
++   }))));
+   } catch (e) {}
+   return e;
+  }
+@@ -3183,8 +3181,7 @@ class E2EElement extends index_cjs.MockHTMLElement {
+  }
+  async getProperty(e) {
+   this._validate();
+-  const t = this._elmHandle.executionContext();
+-  return await t.evaluate(((e, t) => e[t]), this._elmHandle, e);
++  return await this._elmHandle.evaluate(((e, t) => e[t]), e);
+  }
+  setProperty(e, t) {
+   this._queueAction({
+@@ -3340,7 +3337,7 @@ class E2EElement extends index_cjs.MockHTMLElement {
+  }
+  async e2eRunActions() {
+   if (0 === this._queuedActions.length) return;
+-  const e = this._elmHandle.executionContext(), t = await e.evaluate(((e, t) => e.componentOnReady().then((() => {
++  const t = await this._elmHandle.evaluate(((e, t) => e.componentOnReady().then((() => {
+    let r = null;
+    return t.forEach((t => {
+     if (t.methodName) r = e[t.methodName].apply(e, t.methodArgs); else if (t.setPropertyName) e[t.setPropertyName] = t.setPropertyValue; else if (t.setAttributeName) e.setAttribute(t.setAttributeName, t.setAttributeValue); else if (t.removeAttribute) e.removeAttribute(t.removeAttribute); else if (t.toggleAttributeName) "boolean" == typeof t.toggleAttributeForce ? e.toggleAttribute(t.toggleAttributeName, t.toggleAttributeForce) : e.toggleAttribute(t.toggleAttributeName); else if (t.classAdd) e.classList.add(t.classAdd); else if (t.classRemove) e.classList.remove(t.classRemove); else if (t.classToggle) e.classList.toggle(t.classToggle); else if (t.eventName) {
+@@ -3351,14 +3348,14 @@ class E2EElement extends index_cjs.MockHTMLElement {
+      e.dispatchEvent(s);
+     }
+    })), r && "function" == typeof r.then ? r.then((e => e)) : r;
+-  }))), this._elmHandle, this._queuedActions);
++  }))), this._queuedActions);
+   return this._queuedActions.length = 0, t;
+  }
+  async e2eSync() {
+-  const e = this._elmHandle.executionContext(), {outerHTML: t, shadowRootHTML: r} = await e.evaluate((e => ({
++  const {outerHTML: t, shadowRootHTML: r} = await this._elmHandle.evaluate((e => ({
+    outerHTML: e.outerHTML,
+    shadowRootHTML: e.shadowRoot ? e.shadowRoot.innerHTML : null
+-  })), this._elmHandle);
++  })));
+   "string" == typeof r ? (this.shadowRoot = index_cjs.parseHtmlToFragment(r), this.shadowRoot.host = this) : this.shadowRoot = null;
+   const s = index_cjs.parseHtmlToFragment(t).firstElementChild;
+   for (this.nodeName = s.nodeName, this.attributes = index_cjs.cloneAttributes(s.attributes); this.childNodes.length > 0; ) this.removeChild(this.childNodes[0]);

packages/mint-components/src/components/sqm-big-stat/sqm-big-stat.e2e.ts

@@ -8,10 +8,10 @@ function statFunctions(page: Readonly<E2EPage>) {
     dontExpectElement: async (selector: string) =>
       expect((await page.find(selector))?.id).toBeUndefined(),
     hasStat: async (stat: E2EElement) => {
-      expect(stat.innerHTML).not.toEqual("!!!");
+      expect(stat.innerHTML).not.toEqual("-");
     },
     hasInvalidStat: async (stat: E2EElement) => {
-      expect(stat.innerHTML).toEqual("!!!");
+      expect(stat.innerHTML).toEqual("-");
     },
   };
 }
@@ -121,7 +121,7 @@ describe("sqm-big-stat", () => {
     });
   });
 
-  test("No props returns !!!", async () => {
+  test("No props returns -", async () => {
     const html = getHTML(`<sqm-big-stat></sqm-big-stat>`);
     const page = await newE2EPage();
     const { expectElement, hasInvalidStat } = statFunctions(page);
@@ -150,7 +150,7 @@ describe("sqm-big-stat", () => {
     page.close();
   });
 
-  test("/programGoals/count returns !!!", async () => {
+  test("/programGoals/count returns -", async () => {
     const html = getHTML(
       `<sqm-big-stat stat-type="/programGoals/count"></sqm-big-stat>`
     );
@@ -168,7 +168,7 @@ describe("sqm-big-stat", () => {
     page.close();
   });
 
-  test("/programGoals/conversionCount returns !!!", async () => {
+  test("/programGoals/conversionCount returns -", async () => {
     const html = getHTML(
       `<sqm-big-stat stat-type="/programGoals/conversionCount"></sqm-big-stat>`
     );
@@ -185,7 +185,7 @@ describe("sqm-big-stat", () => {
     hasInvalidStat(stat);
     page.close();
   });
-  test("/programGoals/count/My-Goal/referrals returns !!!", async () => {
+  test("/programGoals/count/My-Goal/referrals returns -", async () => {
     const html = getHTML(
       `<sqm-big-stat stat-type="/programGoals/count/My-Goal/referrals"></sqm-big-stat>`
     );

packages/mint-components/stencil.config.ts

@@ -28,6 +28,9 @@ const useGrapesjs: OutputTarget = grapesJsOutput({
 
 export const config: Config = {
   namespace: "mint-components",
+  testing: {
+    browserArgs: ["--no-sandbox", "--disable-setuid-sandbox"],
+  },
   devServer: {
     // startupTimeout: 0,
   },