diff --git a/.puppeteerrc.cjs b/.puppeteerrc.cjs new file mode 100644 index 000000000..fe475da42 --- /dev/null +++ b/.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, +}; diff --git a/README.md b/README.md index e1090bd23..7598d895c 100644 --- a/README.md +++ b/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 diff --git a/package-lock.json b/package-lock.json index 745e86b46..0cdc677f7 100644 --- a/package-lock.json +++ b/package-lock.json @@ -57,7 +57,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", @@ -11502,9 +11502,9 @@ } }, "node_modules/@stencil/core": { - "version": "4.23.2", - "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.23.2.tgz", - "integrity": "sha512-UC0+FApqwQEzIqmN13z0dcTAJOu30zlfTttiAlOsE7TXEK+0G6OnUPz7OtEm1413o3WTNUVpm9JWj3qg0JatIA==", + "version": "4.24.0", + "resolved": "https://registry.npmjs.org/@stencil/core/-/core-4.24.0.tgz", + "integrity": "sha512-v0CYQkfd+id3dXoRSYp7yLsx/kogsfwJBE0YUm/5SBpxy4tcdXNaRrWFVwV//fkdcFmjm3awwS3edxbW+X7pmw==", "license": "MIT", "bin": { "stencil": "bin/stencil" diff --git a/package.json b/package.json index 993f370cc..c50658843 100644 --- a/package.json +++ b/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", diff --git a/packages/beeq/project.json b/packages/beeq/project.json index 165919261..1a99f9f5d 100644 --- a/packages/beeq/project.json +++ b/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": { diff --git a/packages/beeq/src/components/alert/__tests__/bq-alert.e2e.ts b/packages/beeq/src/components/alert/__tests__/bq-alert.e2e.ts index 3633d8276..0939364ae 100644 --- a/packages/beeq/src/components/alert/__tests__/bq-alert.e2e.ts +++ b/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: ` @@ -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: ` + + Alert title + You have a new alert message + + `, }); + + 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'); }); }); diff --git a/packages/beeq/stencil.config.ts b/packages/beeq/stencil.config.ts index 429cde0a3..1a312c700 100644 --- a/packages/beeq/stencil.config.ts +++ b/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: { diff --git a/patches/@stencil+core+4.23.2.patch b/patches/@stencil+core+4.24.0.patch similarity index 100% rename from patches/@stencil+core+4.23.2.patch rename to patches/@stencil+core+4.24.0.patch