Merge remote-tracking branch 'origin/main-beta' into epic/site-5.0.0

CHANGELOG.md

@@ -1,3 +1,23 @@
+## [5.0.0-beta.38](https://github.com/exadel-inc/esl/compare/v5.0.0-beta.37...v5.0.0-beta.38) (2024-11-04)
+
+### ⚠ BREAKING CHANGES
+
+* **esl-footnotes:** `tooltip-shown` readonly attribute(prop) replaced with `active` (from `ESLBaseTrigger`)
+
+### Features
+
+* **esl-footnotes:** claenup readonly API of `esl-note` ([cb43086](https://github.com/exadel-inc/esl/commit/cb430865e265b808d0312e96c0f76b755aaff4bc))
+* **esl-footnotes:** migrate esl-note to esl-base-trigger ([d2e0dbb](https://github.com/exadel-inc/esl/commit/d2e0dbb4a37e4a85da39a59e5a02289c5f848bc4))
+
+## [5.0.0-beta.37](https://github.com/exadel-inc/esl/compare/v5.0.0-beta.36...v5.0.0-beta.37) (2024-10-21)
+
+### Bug Fixes
+
+* **esl-carousel:** add missing TSX declaration for `esl-carousel-dots` ([7f30c71](https://github.com/exadel-inc/esl/commit/7f30c718f92da43b378022b1d9d29e0f504204ff))
+* **esl-carousel:** esl-carousel tag is not declared to be used in TSX ([70b1607](https://github.com/exadel-inc/esl/commit/70b160754f5c9a7c8e399f3eff1446e40824d0d5)), closes [#2330](https://github.com/exadel-inc/esl/issues/2330)
+* **esl-drag-to-scroll:** fix issue with un-prevented click action after drag ([c98cfa4](https://github.com/exadel-inc/esl/commit/c98cfa49a1629790a01dab4a6704d5fcea6e19d7))
+* **esl-drag-to-scroll:** fix propagation of the click if drag detected ([0b4aee6](https://github.com/exadel-inc/esl/commit/0b4aee6611d0c69f4df8445b41aade9754bcd9ca))
+
 ## [5.0.0-beta.36](https://github.com/exadel-inc/esl/compare/v5.0.0-beta.35...v5.0.0-beta.36) (2024-09-30)
 
 ### Features

e2e/jest.config.js

@@ -10,14 +10,14 @@ module.exports = {
   preset: 'jest-puppeteer',
   transform: {
     '^.+\\.tsx?$': 'ts-jest',
-    '^.+\\.feature$': './transformer/gherkin.js'
+    '^.+\\.feature$': './src/transformer/gherkin.js'
   },
   roots: ['./tests/'],
   testRegex: ['(.+)\\.(spec|test)\\.ts$', '(.+).feature'],
   moduleFileExtensions: ['ts', 'js', 'feature'],
-  setupFilesAfterEnv: ['./setup/serializers/image-snapshot.ts', './setup/scenarios.ts'],
+  setupFilesAfterEnv: ['./src/serializers/image-snapshot.ts', './src/scenarios.ts'],
   reporters: [
-    ['./reporters/reporter.js', {
+    ['./src/reporters/reporter.js', {
       diffDir: './.diff',
       outputPath: './.diff/README.md',
       outputPublishPath: './.diff/index.md'

e2e/package.json

@@ -1,7 +1,7 @@
 {
   "private": true,
   "name": "@exadel/esl-snapshot-tests",
-  "version": "5.0.0-beta.36",
+  "version": "5.0.0-beta.38",
   "description": "Integration snapshot tests for ESL",
   "homepage": "https://esl-ui.com/",
   "license": "MIT",
@@ -17,9 +17,9 @@
     "@types/jest-environment-puppeteer": "^5.0.6",
     "@types/pixelmatch": "^5.2.6",
     "@types/puppeteer": "^7.0.4",
-    "jest-puppeteer": "^10.1.2",
+    "jest-puppeteer": "^10.1.4",
     "pixelmatch": "^5.3.0",
-    "puppeteer": "^23.6.0",
+    "puppeteer": "^23.6.1",
     "rimraf": "^6.0.1",
     "sharp": "^0.33.5",
     "stucumber": "^0.19.0"

e2e/src/scenarios.ts

@@ -0,0 +1,13 @@
+import './scenarios/scenarios.env';
+import './scenarios/scenarios.page';
+import './scenarios/scenarios.screen';
+
+import './scenarios/scenarios.wait';
+import './scenarios/scenarios.screenshot';
+
+import './scenarios/element/scenarios.query';
+import './scenarios/element/scenarios.basic';
+import './scenarios/element/scenarios.class';
+import './scenarios/element/scenarios.attr';
+import './scenarios/element/scenarios.events';
+import './scenarios/element/scenarios.xpath';

e2e/setup/serializers/image-snapshot.matcher.ts → e2e/src/serializers/image-snapshot.matcher.ts

@@ -1,12 +1,19 @@
 import path from 'path';
 import pixelmatch from 'pixelmatch';
-import {mkDir} from '../../utils/directory';
+import {mkDir} from '../utils/directory';
 import {DiffImageComposer} from './image-snapshot.composer';
 
 import type {SnapshotData} from './image-snapshot.pocessor';
 
 export type SnapshotMatcherOptions = pixelmatch.PixelmatchOptions;
 
+type ImagesCompareResult = {
+  reason: 'content';
+} | {
+  reason: 'error';
+  message: any;
+} | undefined;
+
 export class SnapshotMatcher {
   protected static readonly MIN_DIFF_THRESHOLD: number = 0.0001;
 
@@ -25,40 +32,40 @@ export class SnapshotMatcher {
   }
 
   public async match(): Promise<jest.CustomMatcherResult> {
-    const {current, previous, snapshotPath} = this.received;
+    const {current, previous, snapshotPath, diffPath} = this.received;
     if (!previous.buffer) {
       mkDir(path.dirname(snapshotPath));
-      current.img.toFile(snapshotPath);
+      await current.img.toFile(snapshotPath);
       return this.getMatcherResult(true, `New snapshot was created: ${snapshotPath}`);
     }
 
     const diff = await this.compareImages();
     if (!diff) return this.getMatcherResult(true, `Image is the same as the snapshot: ${snapshotPath}`);
-    if (diff.reason === 'content') return this.getMatcherResult(false, `Image mismatch found: ${diff.path}`);
-    return this.getMatcherResult(false, `Error comparing snapshot to image ${snapshotPath}`);
+    if (diff.reason === 'content') return this.getMatcherResult(false, `Image mismatch found: ${diffPath}`);
+    return this.getMatcherResult(false, `Error comparing snapshot to image ${snapshotPath}\nMessage: ${diff.message}`);
   }
 
   protected getMatcherResult(pass: boolean, message: string): jest.CustomMatcherResult {
     return {pass, message: () => message};
   }
 
-  protected async compareImages(): Promise<{reason: 'content' | 'error', path?: string} | undefined> {
+  protected async compareImages(): Promise<ImagesCompareResult> {
     const {current, previous, diffPath} = this.received;
-    const prevImg = previous.buffer!;
-    const currImg = current.buffer;
+    const prevBuffer = previous.buffer!;
+    const currBuffer = current.buffer;
 
-    const {width, height} = prevImg.info;
+    const {width, height} = prevBuffer.info;
     const diffBuffer = Buffer.alloc(width * height * 4);
     try {
-      const numDiffPixel = pixelmatch(prevImg.data, currImg.data, diffBuffer, width, height, this.config);
+      const numDiffPixel = pixelmatch(prevBuffer.data, currBuffer.data, diffBuffer, width, height, this.config);
       if (numDiffPixel > width * height * SnapshotMatcher.MIN_DIFF_THRESHOLD) {
         const diffConfig = Object.assign({}, this.received, {diffBuffer});
         mkDir(path.dirname(diffPath));
         await (await DiffImageComposer.compose(diffConfig)).toFile(diffPath);
-        return {reason: 'content', path: diffPath};
+        return {reason: 'content'};
       }
     } catch (e) {
-      return {reason: 'error'};
+      return {reason: 'error', message: e};
     }
   }
 }

e2e/setup/serializers/image-snapshot.pocessor.ts → e2e/src/serializers/image-snapshot.pocessor.ts

@@ -1,7 +1,7 @@
 import path from 'path';
 import fs from 'fs';
 
-import {getDiffDir, getSnapshotDir, buildSnapshotName} from '../../utils/image-snapshot.name';
+import {getDiffDir, getSnapshotDir, buildSnapshotName} from '../utils/image-snapshot.name';
 import {SharpService} from './image-snapshot.sharp';
 
 import type sharp from 'sharp';
@@ -32,18 +32,24 @@ export class SnapshotDataProcessor {
     const diffPath = path.join(diffDir, buildSnapshotName(currentTestName!, 'diff'));
 
     const shouldUpdate = !fs.existsSync(snapshotPath) || context.snapshotState._updateSnapshot === 'all';
-    const recievedJPG = SharpService.toJPEG(received);
+    const [currentBuffer, previousBuffer] = shouldUpdate
+      ? [received, undefined]
+      : await SharpService.normalize(received, snapshotPath);
+
+    const currentJPG = SharpService.toJPEG(currentBuffer);
+    const currentRAWBuffer = await SharpService.toRawBuffered(await currentJPG.toBuffer());
+
     return {
       diffPath,
       snapshotPath,
 
       current: {
-        img: recievedJPG,
-        buffer: await (SharpService.toRawBuffered(await recievedJPG.toBuffer()))
+        img: currentJPG,
+        buffer: currentRAWBuffer
       },
 
       previous: {
-        buffer: shouldUpdate ? undefined : await (SharpService.toRawBuffered(snapshotPath))
+        buffer: previousBuffer ? await (SharpService.toRawBuffered(previousBuffer)) : undefined
       }
     };
   }

e2e/setup/serializers/image-snapshot.sharp.ts → e2e/src/serializers/image-snapshot.sharp.ts

@@ -21,4 +21,20 @@ export class SharpService {
   public static toJPEGBufferd(input: string | Buffer, options: any = {}): Promise<Buffer> {
     return SharpService.toJPEG(input, options).toBuffer();
   }
+
+  public static async normalize(...img: (string | Buffer)[]): Promise<Buffer[]> {
+    const images = img.map((image) => sharp(image));
+    const metadata = await Promise.all(images.map((image) => image.metadata()));
+
+    const tWidth = Math.max(...metadata.map((m) => m.width!));
+    const tHeight = Math.max(...metadata.map((m) => m.height!));
+
+    return Promise.all(images.map((image, index) => image.extend({
+      left: 0,
+      right: Math.max(0, Math.ceil(tWidth - metadata[index].width!)),
+      top: 0,
+      bottom: Math.max(0, Math.ceil(tHeight - metadata[index].height!)),
+      background: {r: 255, g: 255, b: 255, alpha: 1}
+    }).toBuffer()));
+  }
 }

e2e/tests/homepage.copyright.test.ts

@@ -1,4 +1,4 @@
-import {goTo} from '../setup/scenarios.page';
+import {goTo} from '../src/scenarios/scenarios.page';
 
 describe('Homepage footer manual validation', () => {
   beforeAll(() => goTo('/'));

eslint-config/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@exadel/eslint-config-esl",
   "private": false,
-  "version": "5.0.0-beta.36",
+  "version": "5.0.0-beta.38",
   "keywords": [
     "eslint",
     "eslint-config",
@@ -22,13 +22,13 @@
     "test": ""
   },
   "dependencies": {
-    "@eslint/js": "^9.11.1",
-    "@stylistic/eslint-plugin": "^2.9.0",
+    "@eslint/js": "^9.14.0",
+    "@stylistic/eslint-plugin": "^2.10.1",
     "eslint-plugin-editorconfig": "^4.0.3",
-    "eslint-plugin-import-x": "^4.3.1",
+    "eslint-plugin-import-x": "^4.4.0",
     "eslint-plugin-sonarjs": "^1.0.4",
     "eslint-plugin-tsdoc": "^0.3.0",
-    "typescript-eslint": "^8.9.0"
+    "typescript-eslint": "^8.12.2"
   },
   "peerDependencies": {
     "eslint": ">=9.0.0"

eslint-plugin/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@exadel/eslint-plugin-esl",
   "private": false,
-  "version": "5.0.0-beta.36",
+  "version": "5.0.0-beta.38",
   "keywords": [
     "eslint",
     "eslint-plugin",