chore: release 5.0.0 (main-beta -> main)

.commitlintrc.yml

@@ -31,13 +31,15 @@ rules:
     -
       - esl-a11y-group
       - esl-alert
+      - esl-anchornav
       - esl-animate
       - esl-base-element
       - esl-carousel
       - esl-event-listener
       - esl-footnotes
       - esl-forms
       - esl-image
+      - esl-image-utils
       - esl-media
       - esl-media-query
       - esl-mixin-element

.github/dependabot.yml

@@ -25,9 +25,6 @@ updates:
       prefix: "chore"
       include: "scope"
     groups:
-      typescript-eslint:
-        patterns:
-          - "@typescript-eslint/*"
       commit-lint:
         patterns:
           - "@commitlint/*"

.releaserc.yml

@@ -23,7 +23,7 @@ branches:
 # Release configuration
 plugins:
   - - "@semantic-release/commit-analyzer"
-    - preset: angular
+    - preset: conventionalcommits
       releaseRules:
         - type: style
           release: patch
@@ -49,7 +49,7 @@ plugins:
           release: patch
 
   - - "@semantic-release/release-notes-generator"
-    - preset: angular
+    - preset: conventionalcommits
       parserOpts:
         noteKeywords:
           - BREAKING CHANGE

README.md

@@ -40,7 +40,6 @@ to meet your project needs.
 
 ESL is based solely on Web API and ECMAScript 6 features, which let our web UI components library work 
 well across all modern browsers such as Firefox, Chrome, Safari, Opera, and Edge. 
-ESL can also work on IE11 when the whole list of polyfills is provided (see [Browser support & Polyfills](https://github.com/exadel-inc/esl/blob/HEAD/docs/BROWSER_SUPPORT.md) for more details).
 
 ## Library Structure
 
@@ -69,7 +68,8 @@ with excellent performance.
 - ##### [ESL Alert](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-alert/README.md)
 - ##### [ESL Animate](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-animate/README.md)
 - ##### [ESL Footnotes](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-footnotes/README.md) (beta)
-- ##### [ESL Image](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-image/README.md)
+- ##### [ESL Image Utils](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-image-utils/README.md)
+- ##### [ESL Image (Legacy)](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-image/README.md)
 - ##### [ESL Media](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-media/README.md)
 - ##### [ESL Panel](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-panel/README.md)
 - ##### [ESL Panel Group](https://github.com/exadel-inc/esl/blob/HEAD/src/modules/esl-panel-group/README.md)

docs/BROWSER_SUPPORT.md

@@ -6,17 +6,11 @@ Exadel Smart Library does not have dependencies but uses the following list of n
 
 - ECMAScript 6 features
     - [Array.from](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/from) (no Iterable Objects support required)
-      ([ESL polyfill](../src/polyfills/list/es6.array.from.ts) provided)
     - [Array.prototype.find](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find)
-      ([ESL polyfill](../src/polyfills/list/es6.array.find.ts) provided)
     - [Array.prototype.findIndex](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/findIndex)
-      ([ESL polyfill](../src/polyfills/list/es6.array.find.ts) provided)
     - [Array.prototype.include](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/includes)
-      ([ESL polyfill](../src/polyfills/list/es6.array.includes.ts) provided)
     - [Object.is](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/is)
-      ([ESL polyfill](../src/polyfills/list/es6.object.is.ts) provided)
     - [Object.assign](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/assign) (accurate polyfill required)
-      ([ESL polyfill](../src/polyfills/list/es6.object.assign.ts) provided)
     - [ES6 Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
 - Web API
     - [Event](https://developer.mozilla.org/en-US/docs/Web/API/Event) constructor + `preventDefault` polyfill
@@ -30,25 +24,6 @@ Exadel Smart Library does not have dependencies but uses the following list of n
     - [ResizeObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
     - [Custom Elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements)
 
-All of them are fully supported by modern browsers such as Chrome, Firefox, Safari or Edge (>43).
+All of them are fully supported by modern browsers such as Chrome, Firefox, Safari (>13) or Edge (>43).
 
-In order to make ESL work in older browsers, you can use a "light" polyfills list of IntersectionObserver, ResizeObserver and Custom Elements (for older versions of Edge and Safari).
-
-Or make the library work in IE11 or Edge (<14) by using the "full" polyfills list provided.
-
-See more details on what polyfill approach might look like in the demo pages source code.
-
-Also, ESL has built-in polyfills for some of DOM and ES6 features. They are available under [polyfills](../src/polyfills) directory:
-  - ECMA Script 5: output shim (`HTMLElement` constructor call) - [es5-target-shim.ts](../src/polyfills/es5-target-shim.ts)
-  - ECMA Script 5: IE11, Edge <14 support - [polyfills.es5.ts](../src/polyfills/polyfills.es5.ts)
-    - `Object.is`, `Object.assign` 
-    - `Array.from`, `Array.prototype.find`, `Array.prototype.findIndex`, `Array.prototype.index`
-    - `Event`, `CustomEvent`, `MouseEvent`, `KeyboardEvent`, `FocusEvent` shim
-    - `Event.prototype.preventDefault` shim
-    - `Element.prototype.closest`
-    - `DOMTokenList.prototype.toggle`
-    - *Note: there is no promise polyfill embedded*, use npm:[promise-polyfill](https://www.npmjs.com/package/promise-polyfill) or similar
-  - ECMA Script 6: DOM - [polyfills.es6.ts](../src/polyfills/polyfills.es6.ts)
-    - `Node.isConnected` 
-    - `KeyboardKey.prototype.key` 
-    - `Element.prototype.toggleAttribute` 
+In order to make ESL work in older browsers, you can use polyfill (for older versions of Safari).

e2e/jest-puppeteer.config.js

@@ -1,5 +1,3 @@
-/* eslint-disable no-undef */
-
 if (!process.argv.includes('--no-autorun') && !process.env.PORT) {
   process.env.PORT = '3007';
 }
@@ -11,8 +9,11 @@ module.exports = {
     product: 'chrome',
     args: [
       '--no-sandbox',
-      '--disable-gpu',
       '--disable-setuid-sandbox',
+      '--hide-scrollbars',
+      '--force-device-scale-factor=1',
+      '--high-dpi-support=1',
+      '--disable-gpu',
       '--disable-background-timer-throttling',
       '--disable-backgrounding-occluded-windows',
       '--disable-renderer-backgrounding',

e2e/jest.config.js

@@ -1,6 +1,11 @@
 // Test env in dev mode produces a big amount of stdin/out listeners, so limit increased
 require('events').EventEmitter.defaultMaxListeners  = 50;
 
+// Cleanup diff output directory
+const rimraf = require('rimraf');
+rimraf.sync('./.diff');
+
+// Actual Jest configuration
 module.exports = {
   preset: 'jest-puppeteer',
   transform: {
@@ -10,7 +15,7 @@ module.exports = {
   roots: ['./tests/'],
   testRegex: ['(.+)\\.(spec|test)\\.ts$', '(.+).feature'],
   moduleFileExtensions: ['ts', 'js', 'feature'],
-  setupFilesAfterEnv: ['./setup/image.ts', './setup/scenarios.ts'],
+  setupFilesAfterEnv: ['./setup/serializers/image-snapshot.ts', './setup/scenarios.ts'],
   reporters: [
     ['./reporters/reporter.js', {
       diffDir: './.diff',

e2e/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@exadel/esl-snapshot-tests",
-  "version": "4.18.1",
+  "version": "5.0.0-beta.33",
   "description": "Integration snapshot tests for ESL",
   "homepage": "https://esl-ui.com/",
   "license": "MIT",
@@ -11,15 +11,20 @@
     "run:update:only": "jest -u --no-autorun",
     "run:tests:only": "jest --no-autorun",
     "run:server": "cd .. && cross-env-shell PORT=3007 npm run start:test --workspace=site",
-    "test": "eslint"
+    "test": "eslint \"**/*.ts\""
   },
   "dependencies": {
     "@types/jest-environment-puppeteer": "^5.0.6",
-    "@types/jest-image-snapshot": "^6.4.0",
+    "@types/pixelmatch": "^5.2.6",
     "@types/puppeteer": "^7.0.4",
-    "jest-image-snapshot": "^6.4.0",
-    "jest-puppeteer": "^10.0.1",
-    "puppeteer": "^22.15.0",
+    "jest-puppeteer": "^10.1.1",
+    "pixelmatch": "^5.3.0",
+    "puppeteer": "^23.3.0",
+    "rimraf": "^6.0.1",
+    "sharp": "^0.33.5",
     "stucumber": "^0.19.0"
+  },
+  "peerDependencies": {
+    "@exadel/esl-website": "../site"
   }
 }

e2e/reporters/printers.js

@@ -32,10 +32,10 @@ function printFiles(fileStat, basePath) {
       const statusTest = test.status === 'passed' ? ':white_check_mark:' : ':x:';
       const timeStr = test.time < 1000 ? `${test.time}ms` : `${test.time / 1000}s`;
 
-      text += `<tr><td>${test.name}:${test.title}</td><td>${statusTest}</td><td>${timeStr}</td></tr>\n`;
+      text += `<tr><td>${test.name}: ${test.title}</td><td>${statusTest}</td><td>${timeStr}</td></tr>\n`;
 
       if (test.status !== 'passed' && test.hasSnapshot) {
-        text += `<tr><td colspan="3"><img src="${resolveURL(basePath, test.snapshot)}" alt="Test Diff ${test.snapshot}"/></td></tr>`;
+        text += `<tr><td colspan="3"><img src="${resolveURL(basePath, `${test.dirPath}/${test.snapshot}`)}" alt="Test Diff ${test.snapshot}"/></td></tr>`;
       }
       if (test.status !== 'passed' && !test.hasSnapshot) {
         text += `<tr><td colspan="3">\n`;

e2e/reporters/reporter.js

@@ -2,14 +2,12 @@ const fs = require('fs');
 const path = require('path');
 
 const {print} = require('./printers');
-
-const sanitize = (str) => (str || '').replace(/\W+/g, '-').toLowerCase();
+const {buildSnapshotName, getDiffDir, getDirName} = require('../utils/image-snapshot.name');
+const {mkDir} = require('../utils/directory');
 
 const writeFileSafe = (filename, data) => {
   const dirname = path.dirname(filename);
-  if (!fs.existsSync(dirname)) {
-    fs.mkdirSync(dirname, {recursive: true});
-  }
+  mkDir(dirname)
   fs.writeFileSync(filename, data);
 };
 
@@ -44,22 +42,18 @@ class SnapshotAwareReporter {
   }
 
   buildTestStat(test, testPath) {
-    const {ancestorTitles, status, title, duration} = test;
+    const {ancestorTitles, status, title, duration, fullName} = test;
     const filename = path.basename(testPath);
     const name = ancestorTitles.join(' > ');
-    const statBase = {name, filename, status, title, time: duration};
-
+    const statBase = {name, status, filename, title, time: duration};
     if (status === 'passed') return statBase;
-
-    const snapshotParts = [filename, ...ancestorTitles, title, '1-snap', 'diff'];
-    const snapshotName = snapshotParts.map(sanitize).join('-') + '.png';
-    const snapshotPath = path.join(this._options.diffDir, snapshotName);
-    const snapshotExists = fs.existsSync(snapshotPath);
-
+    const snapshotName = buildSnapshotName(fullName, 'diff');
+    const snapshotExists = fs.existsSync(path.join(getDiffDir(testPath), snapshotName));
     return Object.assign(statBase, {
       message: test.failureMessages[0],
       messages: test.failureMessages,
       hasSnapshot: snapshotExists,
+      dirPath: getDirName(testPath),
       snapshot: snapshotExists ? snapshotName : null
     });
   }
@@ -69,7 +63,7 @@ class SnapshotAwareReporter {
     const basePath = path.resolve(this._globalConfig.rootDir);
     for (const result of results.testResults) {
       const filepath = path.relative(basePath, result.testFilePath);
-      const tests = result.testResults.map(test => this.buildTestStat(test, filepath));
+      const tests = result.testResults.map(test => this.buildTestStat(test, result.testFilePath));
       testResults.push({filepath, tests});
     }
     return testResults;

e2e/setup/scenarios.env.ts

@@ -2,7 +2,7 @@ import {cucumber} from '../transformer/gherkin';
 import type {ElementHandle} from 'puppeteer';
 
 export interface TestEnv {
-  screenshots: (string | Buffer)[];
+  screenshots: (string | Uint8Array)[];
   elements: ElementHandle[];
 }
 

e2e/setup/scenarios.screenshot.ts

@@ -1,11 +1,6 @@
 import {cucumber} from '../transformer/gherkin';
 
 import type {TestEnv} from './scenarios.env';
-import type {MatchImageSnapshotOptions} from 'jest-image-snapshot';
-
-const DIFF_CONFIG: MatchImageSnapshotOptions = {
-  customDiffDir: '.diff'
-};
 
 cucumber.defineRule('take a screenshot', async ({screenshots}: TestEnv) => {
   screenshots.push(await page.screenshot());
@@ -29,14 +24,14 @@
   screenshots.push(await element.screenshot());
 });
 
-cucumber.defineRule('check if the screenshot is exactly equal to the snapshotted version', ({screenshots}: TestEnv) => {
+cucumber.defineRule('check if the screenshot is exactly equal to the snapshotted version', async ({screenshots}: TestEnv) => {
   if (!screenshots.length) throw new Error('E2E: there is no any screenshot, make sure you have "Take a screenshot" before');
   const image = screenshots.pop();
-  expect(image).toMatchImageSnapshot(DIFF_CONFIG);
+  await expect(image).toMatchImageSnapshot();
 });
 
-cucumber.defineRule('check if the screenshot is equal to the snapshotted version', ({screenshots}: TestEnv) => {
+cucumber.defineRule('check if the screenshot is equal to the snapshotted version', async ({screenshots}: TestEnv) => {
   if (!screenshots.length) throw new Error('E2E: there is no any screenshot, make sure you have "Take a screenshot" before');
   const image = screenshots.pop();
-  expect(image).toMatchImageSnapshot({failureThreshold: 1000, blur: .005, comparisonMethod: 'ssim', failureThresholdType: 'pixel', ...DIFF_CONFIG});
+  await expect(image).toMatchImageSnapshot({threshold: 0.1});
 });