chore(deps): update dependency @stencil/core to v4.24.0 (#1420)

.puppeteerrc.cjs

@@ -0,0 +1,8 @@
+const { join } = require('path');
+
+/** @type {import("puppeteer").Configuration} */
+module.exports = {
+  cacheDirectory: join(__dirname, '.cache', 'puppeteer'),
+  executablePath: process.env.PUPPETEER_EXECUTABLE_PATH,
+  skipDownload: process.env.PUPPETEER_SKIP_DOWNLOAD ?? false,
+};

README.md

@@ -62,14 +62,7 @@ We recommend the use of [Volta](https://volta.sh/) to manage Node and NPM versio
 
 > With Volta, you can select a Node engine once and then stop worrying about it. You can switch between projects and stop having to manually switch between Nodes.
 
-Once you have Volta installed, whenever you change to the BEEQ folder locally, it will switch to the right Node and NPM versions pinned in the `package.json`:
-
-```json
-  "volta": {
-    "node": "20.11.1",
-    "npm": "10.4.0"
-  }
-```
+Once you have Volta installed, whenever you change to the BEEQ folder locally, it will switch to the right Node and NPM versions [pinned in the `package.json`](./package.json#L177).
 
 Volta is not mandatory, you can still use any Node/NPM setup that fits you most, just keep in mind that you'll need:
 
@@ -123,6 +116,10 @@ npm run build
 
 BEEQ uses [Jest](https://jestjs.io/) for unit tests and Jest and [Puppeteer](https://pptr.dev/) for end-to-end tests.
 
+> [!CAUTION]
+> Puppeteer uses Chromium to run the tests. Make sure you have Chrome installed on your machine or set the `PUPPETEER_EXECUTABLE_PATH` environment variable to point to the path of your Chromium browser executable.
+> E.g., `export PUPPETEER_EXECUTABLE_PATH="/Applications/Google Chrome.app/Contents/MacOS/Google Chrome"`
+
 You can run all the tests once, by executing:
 
 ```bash

package.json

@@ -79,7 +79,7 @@
     "@rollup/plugin-url": "8.0.2",
     "@schematics/angular": "18.2.12",
     "@stencil/angular-output-target": "0.10.2",
-    "@stencil/core": "4.23.2",
+    "@stencil/core": "4.24.0",
     "@stencil/react-output-target": "0.8.2",
     "@stencil/sass": "3.0.12",
     "@stencil/vue-output-target": "0.9.2",

packages/beeq/project.json

@@ -158,7 +158,8 @@
         "configPath": "packages/beeq/stencil.config.ts",
         "outputPath": "dist/beeq",
         "runInBand": true,
-        "noBuild": true
+        "noBuild": true,
+        "noStackTrace": true
       }
     },
     "lint": {

packages/beeq/src/components/alert/__tests__/bq-alert.e2e.ts

@@ -108,7 +108,7 @@ describe('bq-alert', () => {
     expect(footerSlot).not.toBeNull();
   });
 
-  it('should call methods', async () => {
+  it('should call show() method', async () => {
     const page = await newE2EPage({
       html: `
         <bq-alert>
@@ -118,22 +118,34 @@ describe('bq-alert', () => {
       `,
     });
 
-    await page.$eval('bq-alert', async (elem: HTMLBqAlertElement) => {
-      await elem.show();
-    });
+    const alertElem = await page.find('bq-alert');
+    await alertElem.callMethod('show');
     await page.waitForChanges();
 
-    const visibleAlert = await page.find('bq-alert');
-    expect(visibleAlert).toEqualAttribute('aria-hidden', 'false');
-    expect(visibleAlert).toEqualAttribute('hidden', 'false');
+    const visibleAlertElem = await page.find('bq-alert');
+    expect(visibleAlertElem).toEqualAttribute('aria-hidden', 'false');
+    expect(visibleAlertElem).toEqualAttribute('hidden', 'false');
+  });
 
-    await page.$eval('bq-alert', async (elem: HTMLBqAlertElement) => {
-      await elem.hide();
+  it('should call hide() method', async () => {
+    const page = await newE2EPage({
+      html: `
+        <bq-alert open>
+          Alert title
+          <span slot="body">You have a new alert message</span>
+        </bq-alert>
+      `,
     });
+
+    const alertElem = await page.find('bq-alert');
+    expect(alertElem).not.toEqualAttribute('aria-hidden', 'true');
+    expect(alertElem).not.toHaveClass('is-hidden');
+
+    await alertElem.callMethod('hide');
     await page.waitForChanges();
 
-    const hiddenAlert = await page.find('bq-alert');
-    expect(hiddenAlert).toEqualAttribute('aria-hidden', 'true');
-    expect(hiddenAlert).toEqualAttribute('hidden', 'true');
+    const hiddenAlertElem = await page.find('bq-alert');
+    expect(hiddenAlertElem).toEqualAttribute('aria-hidden', 'true');
+    expect(hiddenAlertElem).toEqualAttribute('hidden', 'true');
   });
 });

packages/beeq/stencil.config.ts

@@ -123,6 +123,9 @@ export const config: Config = {
     experimentalScopedSlotChanges: true,
     experimentalSlotFixes: true,
   },
+  testing: {
+    browserHeadless: 'shell',
+  },
   preamble: 'Built by Endavans\n© https://beeq.design - Apache 2 License.',
   watchIgnoredRegex: /(custom-elements\.)((d\.ts)|(json))$/g,
   devServer: {